這一次主要講PS中圖層樣式的一些使用技巧。

你喜歡或者不喜歡，教程就在這里，不棄不離……

組件是設計師常用且基礎的知識點，隨著軟件設計和開發(fā)越來越成熟，已經延伸出很多的類型，能否正確合理的使用也是衡量交互設計水平的一個標準。文章里理論知識比較少，我想說點比較實用的東西，給大家解惑。所以關于基本的控件/組件類型的基礎知識不做過多說明，理論和實踐相輔相成，理論知識大家可以去優(yōu)秀平臺學習并吸收，但實踐需要帶入更多的思考。

分清控件和組件

控件可以理解為平臺系統(tǒng)定義的某種形式，嚴格意義上來說，控件的專業(yè)叫法為“原生控件”，不過大家都習慣性的順口說“控件”，這樣會更簡單點。

組件從字面理解就是組裝而成，在技術層面，代碼是需要封裝的，那被封裝在一起，就可以形成組件，能自定義內容，名稱等。

原生控件相比較組件，顆粒感更細，一個組件可以包含多個控件，單個控件也可以作為組件?？梢允褂靡粋€簡單的例子來闡述他們的關系，控件就好比是藥材，那么藥方就可以理解成是一個組件。如果還不能理解，那可以用更具體的案例來說明下；

如下圖是用戶登陸流程中的一個交互組件，該組件由兩種原生控件來組成，輸入框和按鈕，這樣結合就構成“賬號輸入”的組件；

再如下圖，單獨的輸入框控件也可以成為一個獨立的“賬號輸入”組件；

以上兩個例子，說明了組件可以由單一或多個的控件類型進行組成，如何去定義組件的構成，其實還需要結合具體的設計需求，上面第一個組件給賬號修改增加一個按鈕的控件，讓用戶可以通過按鈕清除所有的字段，讓用戶直接重新輸入，通過手動和按鈕操作的兩種方式去進行賬號修改，第二個組件僅支持手動鍵入進行修改。通過增加了清除的交互方式，組件的構成就會有不一樣的設計方式。

再深入聊下組件

各平臺基本都有自己獨立的設計體系，有自己定義的組件和組件庫，學習組件要了解它分為基礎組件和業(yè)務/高級組件兩種類型?；A組件是一種底層組件，例如輸入框、按鈕、單選框；其特點是比較獨立單一，通用性很強，適應各種業(yè)務場景；業(yè)務組件是一個基礎組件集合而成的大組件，也可以叫高級組件，是復合型的區(qū)塊組件，主要是針對解決業(yè)務問題；如下截圖是flomo筆記用用的網頁版本，以它的首頁為例；頁面按照左右結構類型區(qū)分，可以定義為兩個大的業(yè)務組件，由淺入深，可以再細分，得到再定義更多的業(yè)務組件，這里，我以“發(fā)布筆記”的組件具體說明下，它是怎么組成來解決業(yè)務問題的；首先我們拆解下組成部分：文本內容，工具按鈕（添加標簽和圖片、文本編輯、快速引用等三種類型），發(fā)布按鈕。用戶發(fā)布筆記的行為主要為文字輸入-內容編輯-發(fā)布完成；結合用戶行為和組件設計，解決了用戶輸入文本內容，給筆記歸納，增加圖片，修改文本樣式，快速引用，最終進行發(fā)布的問題。產品在迭代過程中，我們會發(fā)現(xiàn)更多的需求，業(yè)務組件就要通過再優(yōu)化幫用戶解決實際問題。

學做組件管理

結合自己的學習和設計經驗，我把組件相關的內容和知識整理定義為組件管理，包括組件的樣式定義，組件和組件庫設計，搭建，沉淀優(yōu)化應該都算是它的組成部分。組件和組件庫作用，和基本概念我就不做過多描述了，畢竟市面上關于這些內容已經有很多了，我想從小的點去做深度思考，講點有用的東西，呈現(xiàn)給大家；組件和組件庫首先一定是遵循和圍繞著設計的原則、理念、目標去構思，如蘋果的《人機交互指南》里面提到的系統(tǒng)設計三大主旨（清晰、遵從、層次）和六大原則（完整性、一致性、直接性，反饋感、隱喻性、控制感），安卓系統(tǒng)《材料設計1，2》中提到的三大原則（材料就是隱喻、大膽，生動，有意、運動提供意義）。還有國內b端最權威的螞蟻設計體系Ant design，從設計價值觀延伸設計原則，從而思考設計模式。

這里可以總結，平臺在創(chuàng)造設計標準時，思考的方向都會不一樣，所以系統(tǒng)遵循什么，沒有統(tǒng)一的模式，況且這些名詞本身就很抽象，這需要設計師們去思考應該把平臺系統(tǒng)設計成什么樣。這確實很依賴和考驗設計師各方面的綜合能力。所以組件設計和搭建，它并不是某一個人的事，而是整個團隊的任務。

組件和組件庫的設計和搭建過程中，需要了解系統(tǒng)平臺，是蘋果端還是安卓，web端，不同的系統(tǒng)設計的差異性很大，對應系統(tǒng)的控件類型我們也要很熟練的掌握。例如安卓一直保留的原生的底部導航欄的操作控件（返回、主頁、菜單），反觀蘋果最早出現(xiàn)在底部的HOME鍵，隨著硬件設計的升級，物理按鈕的作用已經完全被交互手勢操作替代，根據設計準則，可以先設計出確定的初版組件樣式，然后設計師們要熟悉項目業(yè)務，深挖每個功能中的不同業(yè)務場景，并設計出對應的業(yè)務組件；這樣設計師最終對于當前組件進行整合分類，做出版本的組件庫；組件和組件庫是設計和開發(fā)相結合的，設計師呈現(xiàn)頁面上的模塊是直觀的，但都是技術人員進行底層代碼拼接的再封裝而成的，有規(guī)模的公司一般都會做成開源的組件庫。去提升項目人員之間的協(xié)作效率，復用率高，節(jié)省成本。如下圖是Ant design里面的部分按鈕組件的樣式和代碼演示，作為國內獨一檔的免費學習的設計體系網站。如果大家能夠從頭到尾研究一遍，相信對你構建組件和組件庫有十分大的幫助。

最后組件和組件庫的優(yōu)化迭代是貫穿整個產品設計的生命周期的，從搜集組件需求、思考組件優(yōu)化、設計組件優(yōu)化方案、驗收更新組件和組件庫；

搜集組件需求

項目角度：設計師開發(fā)過程中遺漏的、新的業(yè)務場景中發(fā)現(xiàn)的組件問題，設計和開發(fā)者評審討論出來的包括影響協(xié)作效率的，不合理的問題；用戶體驗：產品中的用戶反饋的功能體驗不好，使用時體驗差的模塊；外部借鑒：團隊人員從優(yōu)秀的組建案例中發(fā)現(xiàn)的可借鑒的需求；

思考組件優(yōu)化

思考方向1：設計師可以查閱資料，研究優(yōu)秀的組件平臺，從成熟的產品中查看同類的組件設計案例；或者和開發(fā)者、設計師進行深度交流，得到有用的建議；

思考方向2：結合業(yè)務場景，最好能夠將應用場景窮舉梳理出來，具體到某個的功能，考慮該功能里存在的每一個場景中，組件需要有什么樣的狀態(tài)和變化；

設計組件優(yōu)化方案

設計師根據以上步驟完成組件優(yōu)化的分析之后，可以相對應的設計組件優(yōu)化方案，組織開發(fā)人員一起多次的評審，大家一起去討論完善，最終技術人員再進行組件代碼的開發(fā)和封裝；組件設計優(yōu)化，設計師要注意在既定的設計原則下合理優(yōu)化，要保留分析材料和思考過程，進行有理有據的評審論證；

驗收更新組件和組件庫

當開發(fā)人員將組件樣式通過代碼落地之后，優(yōu)化中的組件方案需要帶入到實際功能場景中進行測試檢查，驗證組建優(yōu)化的是否符合預期，在優(yōu)化過程中，可以用一張《組建優(yōu)化表》進行記錄，可以方便項目人員追蹤和查看。

組件設計的應用和思考

組件的設計本質上也是為了解決某種特定場景的問題。例如提示彈窗，為了讓用戶在操作過程中有反饋提示，提示中又可以通過解決某種場景問題，選擇讓用戶進行操作或者不操作，所以平臺設計出這種彈窗組件，即模態(tài)和非模態(tài)彈窗類型。下面通過兩個例子，結合功能和場景具體分析產品應該如何做組件設計；

案例1:支付寶“商家轉賬功能”組件設計

我們去商店購買東西使用支付寶支付的過程中，可以通過掃描商家二維碼，進行轉賬交易，轉賬支付的流程主要包括輸入數(shù)額，選擇支付方式，確認支付；因為每個流程中的組件都十分復雜，我們僅拿其中一個流程，對用戶操作過程中涉及的組件進行拆解說明；輸入金額和添加備注流程：頁面的組件主要是用戶信息文本，輸入框、備注組件、鍵盤控件，彈框組件；這個流程包括2個行為事件，4個大的業(yè)務場景；

行為事件一：用戶在商店通過掃碼商家二維碼，分別兩次給商家轉賬20000和100000元的金額，

業(yè)務場景1：用戶沒有輸入任何金額

業(yè)務場景2：用戶轉賬輸入的金額沒有超過限制

業(yè)務場景3：用戶轉賬輸入的金額超過最大限制

業(yè)務場景123主要應用金額輸入框組件，輸入框組件根據用戶操作行為，會有不一樣的設計，用戶沒有任何操作，輸入框內有默認文案提示“輸入付款金額”，用戶輸入金額后，計算單位超過‘百’，數(shù)字金額上方會有單位提示，同時顯示刪除按鈕，支持刪除，重新輸入，業(yè)務場景2中根據金額輸入范圍定義了產品業(yè)務規(guī)則，再細分出三種場景，不同范圍內的金額，可以對應的組件設計方案解決確認轉賬確認問題；

（1）當輸入金額范圍在1-50000，進入新頁面，通過點擊按鈕組件，進行轉賬確認

（2）當輸入金額范圍在50000-99999，在當前頁面使用模態(tài)彈框組件，進行轉賬確認
（3）當輸入金額范圍在100000-999999，進入新頁面，重新輸入框內輸入轉賬金額，進行確認，若兩次金額不一致，出現(xiàn)彈窗提示用戶操作。

當輸入的金額超過限制后，彈框組件配合進行超限的toast提示。

通過拆解行為事件1，我們細分出了3個業(yè)務場景，通過運用輸入框、鍵盤、和toast彈窗，它們相互關聯(lián)解決了輸入金額產生的各種問題；

無金額輸入時，輸入框能給予用戶提示，這是比較常見的輸入框組件設計，預置提示文本；

輸入金額未超出限制，輸入框中會帶入計量單位，這就是組件設計的細微之處，轉賬金額是一個關聯(lián)自己財產的行為操作，應當是需要謹慎的，所以計量單位也是在用戶輸入過程中出現(xiàn)，給用戶一個提示，沒有任何打斷操作的意思，出現(xiàn)的時機很適合，再加上輸入的文本數(shù)字已經足夠醒目，能夠提示用戶輸入有足夠的準確度，如果沒有加入這個字段，確實也不影響用戶操作，但這種雙重衡量的方式，潛意識里會讓自己輸入的更放心，不怕自己有誤差；這就是組件設計給用戶帶來的驚喜感。

金額超出限制后，通過組件toast提示“付款金額超限”，第一提示框組件很好的限制鍵盤的數(shù)字輸入，避免用戶無效輸入，第二toast提示框的觸發(fā)時機設計，這里的方案是當輸入金額超百萬，按數(shù)字鍵盤的時候就會給予提示，而不是等用戶輸入完之后，再去按確認鍵的時候，彈出來提示金額超限。

行為事件二：用戶點擊備注按鈕，添加轉賬信息。

業(yè)務場景4：確認完成輸入金額后，給商戶添加備注信息，20個字以內；

輸入轉賬金額后，文字鍵盤上方出現(xiàn)備注按鈕，點擊彈出備注信息彈窗，在彈窗的輸入框中寫備注信息，其實添加備注，可以在頁面中使用文本框，可為何去使用彈窗中增加輸入框，確認之后再展示到頁面中呢？輸入金額和添加備注的行為的優(yōu)先級來看，備注信息應該是比較低的，信息的展示的重要性也比較低。首先如果使用文本框，和輸入框的組件層級在同一級，用戶的關注點會被干擾，所以使用不突出的文字按鈕組件進行區(qū)別，另外備注文字按鈕出現(xiàn)的觸發(fā)條件也是因為有輸入金額這個動作，所以備注的信息展示在產品設計中就是很弱。另外在彈窗輸入框中也提示了備注信息20個字以內，有這樣的信息規(guī)則，彈窗組件比文本框更適合短文本的信息錄入，這樣和金額輸入框組件能夠被區(qū)分。

轉賬是涉及財產安全的業(yè)務，所以組件的設計除了解決不同場景下用戶體驗問題（及時反饋、合理提示、增加驚喜、操作方便），還要處理核心的業(yè)務問題（保證用戶的財產問題）

案例2:“高清晰度體驗引導用戶付費功能”的組件設計

最近在做智慧電視項目時，產品經理提出在播放器頁面，做一個“非會員用戶可以體驗視頻高清晰度“的需求，主要目的是為了引導用戶體驗高清晰，提升用戶的會員充值率。這里就通過解析如何通過組件設計解決這個問題；

首先我們結合業(yè)務規(guī)則有以下兩點

（1）：該視頻內容資源是付費試看還是免費

（2）：高清晰度體驗時間，單次內容高清晰度體驗時間，累計高清晰度體驗總時間

考慮到用戶在全屏播放器，需要盡量少的對用戶觀影降低干擾，所以在設計時，利用提示框的組件，針對不同場景狀態(tài)，對組件進行設計優(yōu)化。

用戶觀看付費影片，因為試看提示，通過操作按鈕鍵，所以高清晰度體驗的提示，通過提示文案來引導，避免按鍵操作沖突，組件設計如下圖；

在體驗過程中，播放器單次高清晰度體驗時間會有狀態(tài)變化，即正在體驗-將要結束-已結束，組件設計如下圖：

累計體驗總時間結束后，再次進入到播放器，組件設計變?yōu)樘崾居脩粼撈懈咔逦?，組件設計如下圖：

用戶觀看免費影片，因為片源免費，沒有其他場景下的按鍵沖突，所以高清晰度體驗的提示，通過提示“文案+按鈕”來引導，組件設計如下圖；

體驗過程中，播放器單次高清晰度體驗時間也有狀態(tài)變化，即正在體驗-已結束，組件設計如下圖：

累計體驗總時間結束后，再次進入到播放器，組件設計變?yōu)樘崾居脩粼撈懈咔逦?，并可以點擊操作，組件設計如下圖：

在提示組件設計整個過程中，考慮了用戶會員身份、視頻資源付費類型、高清晰度體驗時間等等因素，要持續(xù)保持用戶能夠觸達會員充值的頁面，所以在不同的情況下，始終保留遙控器按鍵可以操作，引導他們付費，雖然頻繁的提示可能讓用戶反感，但最終功能上線后，也確實拿到了一定的成果，提示組件設計讓用戶付費充值率有很大的提升。

總結

組件設計的解析到這里就告一段落了。帶大家回顧下文章的內容，主要有四點，第一點通過例子解釋了控件和組件的區(qū)別，第二點介紹了基礎和業(yè)務組件，第三點講解了如何進行組件管理的內容，第四點通過兩個具體的案例講解了組件設計在實際產品中的應用和我的一些思考；總結以上幾點，組件設計一定不能脫離用戶場景和產品業(yè)務。在這個基準下思考組件設計才會有最優(yōu)解。

現(xiàn)在人們漸漸用智能手機代替PC，連購物也是如此。正當越來越多的人由電腦桌面向移動網頁轉移，購買產品和服務，網站創(chuàng)建者可以使用已存的設計模式來開啟移動電子商務計劃。

擁有良好的電子商務經驗非常重要。實際上，近期的研究發(fā)現(xiàn)，如果能用手機登陸購物網站且過程體驗良好，多于67%的人都愿意下單。

使用設計模式的優(yōu)點在于，你可以看到其他設計師是如何解決類似的問題，這樣你就不用走彎路。還能使你了解到人們在其他網站使用類似功能時的需求，并以此為參考來設計網站；并鼓勵你思考自己一個人做設計時不會想到的設計方法。

本文中，我們專注于智能手機，而不是圖表。我們將介紹一些用于移動電子商務功能的設計模式和方法，如下：

·主頁  

·導航  

·搜索建議

·搜索結果

·搜索過濾和分類

·產品頁

·圖片庫

·購物車

·賬戶或游客登錄

·表格

本文中所有例子都來源于移動網頁，在智能手機瀏覽器中運行。大多數(shù)屬于大型百貨零售商，因為他們有龐大的產品目錄，這就需要考慮周全的設計方式，以突出搜索，并將搜索結果進行過濾和分類。本文還有許多基于電子商務的原生app，許多模式都能很好的運用其上。

主頁

在移動設備上訪問網頁，主頁內容通常較少，更多是幫助用戶找到所需的內容。常見的模式就是一欄促銷，一欄鏈接列表或產品目錄，很簡單。關鍵詞搜索一般都有，還有店鋪的鏈接，訂閱促銷郵件及忠誠度計劃的登記表。

亞馬遜和梅西都使用促銷商品和列表目錄混排的方式。

塔吉特的促銷內容比簡單列表占據屏幕更大的空間，極具視覺沖擊力。

Threadless使用儀表盤模式，比起移動電子商務網頁，在原生應用中較為常見。

如果購物者來你的網站是為了快速比較價格，那么他們更需要的便是簡單的列表樣式和搜索功能。如果他們是來關注促銷和打折的，那么塔吉特的設計模式就更合適。因此，你需要分析消費者來你的網站的目的，以此決定合適的設計模式。

導航

除了使用主頁作為主要的導航中心，許多網站也在多數(shù)頁面上設置了導航目錄，通常是作為頁頭。這讓消費者能輕松在頁面間跳轉，而無需回到主頁。

lowe的導航目錄中，每個選項都有圖標。best buy的目錄則使用了兩欄的排版，并且用按鈕替代列表。Lowe的目錄出現(xiàn)時會覆蓋整個頁面，而Best Buy的目錄出現(xiàn)時會向下推擠屏幕上的其他內容。

Macy的導航目錄包含下級選項。CVS則具有雙欄目錄，每個選項也有圖標。它們的目錄都在頁面頂端展示。

看了上面的屏幕截圖，設計網頁導航的方式多種多樣。Lowe的設計很簡潔，而且圖標帶來了一些視覺上的亮點。而導航以外的其余內容都隱入背景，這使用戶在選擇導航內容時，更集中于當前目標。CVS的版式相對雜亂，兩欄的選項，每個項目都搭配了圖標。CVS的目錄上有許多可以點擊的bar，相互之間很接近，這在觸摸屏上可能導致可用性問題。

有趣的是，大型電子商務網站通常不會一次顯示許多導航選項。它們嘗試在導航的視覺設計和網頁信息構架之間尋求平衡，仔細考慮應存在于全站導航上的項目的數(shù)量。通過網站分析來確定消費者會點擊哪個目錄選項，可以幫助你決定目錄上的內容?？蓪Σ煌脑O計進行A/B測試和可用性測試，看看哪種設計選項太多太雜，最佳方案應使人們不但找到建議內容，也能找到需要的內容。——為了商業(yè)需求，也為了用戶需求。

搜索建議

搜索建議，也叫輸入提示或自動填寫，當消費者鍵入前幾個字幕的時候就顯示出可能的輸入結果。在常用搜索中，這對消費者來說真的很方便，特別是當輸入內容很長的時候。而搜索建議的一個局限就是：在虛擬鍵盤上很容易輸錯字，這會改變建議的結果。而顯示常見“正確”的結果可能更有用。而且，考慮使用改進的自動建議模式來減少輸入內容，在最有效率的前提下使用更慢的移動帶寬。

在Office Depot網站的搜索框中輸入“draf”時，會自動提示數(shù)個可能的結果。如果錯打成“drag”，就會顯示出一些和搜索內容無關的結果。在虛擬鍵盤上輸錯字母是很常見的問題。

人們在輸入時的錯誤，設計師也無可奈何。不過他們可以用其他方式使消費者找到產品頁，例如，產品類別或頂層類別的目錄可以向下延展出列表。網站管理者也可以優(yōu)化搜索引擎的功能，如當用戶輸入“dragt”時，再建議“draft”的結果。你使用的搜索引擎技術將決定你解決問題的方式。

搜索結果

在移動電子商務網站上的搜索結果主要使用兩種樣式：表格展示和網格展示。表格展示會顯示一張產品縮略圖和一些密集排列的基本信息如產品名稱、價格。網格展示則會顯示較大的圖片而使用更少的描述信息。一些網站允許消費者在兩種展示方式之間切換。

zappos以網格顯示搜索結果，這使它可以使用更大的產品圖片，使消費者買鞋的時候偏于以感性作出選擇。Walgreens使用包含按鈕的表格，按鈕的功能一個是在店中找到商品，另一個是將商品加入購物車。

OfficeMax讓消費者在海量的搜索項目中——如輸入“紙”搜索——選擇子類別。一旦選擇了子類，搜索結果將以表格展示出來。如果搜索“剪刀”，搜索結果的子類別會較少，這讓消費者能直接在表格中看到結果。

如果產品的分級雜亂不清，此時讓消費者選擇子類別可能會導致一些問題。如上面在OfficeMax的例子中，某人想買8.5x11英寸的家用打印紙，他可能不知道該在“復印紙&多用紙”還是該在“激光紙”的目錄下找。一種比較好的解決方式就是在搜索過濾器下邊列出子目錄，可以與其它過濾方式并列呈現(xiàn)，如“顏色”和“尺寸”。每隔一段時間（4-6周）就對具有代表性的用戶、常見搜索項目和熱銷產品進行測試，這可有助于你洞察哪種解決方式更佳。A/B測試也可以揭示出哪一種方式能讓更多用戶到達產品頁并具有更高的支付率。

Gap的默認搜索結果以表格展示，同時提供網格展示方式的選擇。注意，Gap也在關鍵詞區(qū)域保持搜索項目。

Gap的用戶可以選擇搜索商品的展示方式，這讓它們可以隨時在易于瀏覽的形式和具有大圖的形式之間轉換。但其實Gap可以在網格展示方式中保留一些商品信息——如價格（像Zappo所做的那樣）

一些諸如價格和顏色的細節(jié)讓用戶更容易決定想要了解哪個商品的更多信息。

在關鍵詞區(qū)域保持搜索文字也可以提醒用戶他們正在搜索的內容，讓他們更容易通過添加一些限制詞（如“紅色”）來細化搜索結果。

在Gap中搜索“男式tshirts（正確寫法為t-shirts）”，你會來到無搜索結果頁面（本文未截圖），而且也不提供“男式 t-shirts”的搜索鏈接。Gap可以在搜索結果頁面添加“你是否要搜索-某物品”的搜索建議來提升其用戶體驗。Google就會列出“mens t shirts”的搜索建議，如果用戶忽略，它就會直接呈現(xiàn)出“men’s t-shirts”的搜索結果。

結果分類

將搜索結果分類可以幫助購買用戶以一種有規(guī)律的方式組織起海量的搜索結果，通常會按照價格和消費者評分排列。常見的分類界面樣式是按鈕和<選擇>菜單。

Walmart讓用戶點擊三個按鈕之一來將結果分類。Sears使用了類似的方式，但有一個“分段控制”，Javas cript框架如jQuery移動開發(fā)正在使這些類似app的界面小部件對設計師來說更易用。

J.C. Penney可以通過有點自定義樣式的<選擇>菜單來分類結果，Eddie Bauer則使用了瀏覽器的默認<選擇>菜單。兩者都通過瀏覽器的本地控制來觸發(fā)<選擇>菜單（本例中為iphone選擇器）

Walmart的按鈕之間空間較大，點擊起來不易出錯，但同時也因此無法容納更多選項，而Sears有四個按鈕，包含一個“全部”的按鈕，這使得用戶在分類篩選后沒有找到所需商品時可以回到初始頁面。用<選擇>菜單是一種很安全的選擇，因為現(xiàn)代移動瀏覽器都支持這種方式，這使應用可以列出更長的分類選項。但是，也占用了許多有用空間。這些都是可用常規(guī)測試方法來評估的折中設計類型。

結果過濾

過濾器讓用戶可以縮小搜索范圍，一般基于諸如顏色，品牌和尺寸等屬性。過濾器通常要劃分類型（稱為分面），每個分面下會顯示數(shù)個值（比如，顏色就是一種分面，紅色是一種分面值）常見的展示過濾選項的界面樣式是<選擇>菜單，下拉式菜單和可折疊菜單。現(xiàn)在在技術上使單個搜索包含數(shù)個分面值是可以實現(xiàn)的，但也因此帶來更高的交互成本，并導致無搜索結果（比如，低于75美元的交叉訓練運動鞋）。

CVS在其高級搜索中使用<選擇>菜單來過濾結果，選擇一個菜單選項將立即對結果進行過濾。JC Penney則提供了一個下拉菜單來過濾結果，并會提示出符合過濾值的產品數(shù)量。JC Penney也允許一個分面帶有多個值，以供用戶進行一次性的選擇，確認信息用戶要觸碰“apply”按鈕。

Kohl’s在其每個過濾類型中使用折疊方式收納系列復選框。Threadless把所有搜索分面的值以按鈕體現(xiàn)。兩個網站中，你只需選擇一個過濾值就能立刻看到結果。

在每個分面值下面顯示商品數(shù)量能讓消費者更清楚地了解每個選擇為他們帶來的結果。Threadless的方式是用整一屏展示出所有可用的分面值，讓消費者對所有可用搜索結果一目了然。你是選用這種方式還是使用Kohl的方式，取決于你打算為指定產品目錄提供多少過濾分面值。如果你的產品目錄在分面值方面變化不定，那么你就需要進行試驗找出合適的設計方式。你可以優(yōu)化那些最熱門的產品目錄的過濾結果顯示頁面。

產品頁面

產品頁是電子商務網站真正展示產品細節(jié)的頁面。它們并不關于某種模式，而是關于系列模式，包括標簽，折疊導航和照片庫等系列元素。產品頁有兩種展示方式，一是包含所有產品信息的長頁面，二是包含標簽或折疊導航能將信息收起的短頁面。

三星和戴爾都在產品頁上逐步揭開內容，為消費者提供許多信息。三星使用折疊導航來展開大段內容，戴爾則使用標簽。

Cabela和Office Depot都使用一整個長頁面來展示產品信息。這種方式需要用戶頻繁滑動屏幕來獲取信息，但他們就不用觸碰標簽或展開折疊導航欄。你需要根據產品信息量的多少和分解信息的方式來選擇合理的方式。

長的產品頁比起帶折疊導航和標簽的頁面需要用戶進行更多滾動操作，也令購買者需要更費力地找出特定信息。在我自己的可用性測試中，我了解到人們對兩種方式各有偏好，但是似乎對網頁信息進行劃分具有更高的可用性。如果你要采用這種方式，確保在人們觸碰標簽或折疊導航欄的時候，被收起來的信息能快速顯示。

一種辦法就是開始便一次性加載所有信息內容，這樣觸碰標簽或折疊導航的時候時，被收起的內容就會立即顯示。如果采用這種辦法，即使用戶在各種信息之間切換的過程中掉線了也沒關系。但是有個弊端：不管用戶閱讀與否，也必須下載所有的產品信息；這為服務器帶來更大負荷，而且也會占用戶較多帶寬。

照片庫

照片庫對電子商務領域如服裝和消費電子行業(yè)來說特別重要。在Home Depot上購物時，看衣服、鞋子、高端智能機或平板電腦你可能并不需要看到商品的三視圖，但圖片總是越多越好。常用的展示方式是可滑動的照片庫，“雙擊照片放大”，單擊縮略圖以選擇照片。

Payless非常英明地將“雙擊放大”的提示框放在屏幕中心并持續(xù)幾秒，給購物者充分的時間去消化理解網頁的操作方式。對服裝和鞋子來說，放大商品圖片查看細節(jié)非常重要。

Dockers（上左圖）具有可滑動的照片庫，雙擊放大查看細節(jié)，而且購物者可以查看同一商品的不用顏色。Levi（上右圖）也用了類似方式，但添加了商品縮略圖，顯示照片庫內不同視角的照片。在Docker上，選擇另一種顏色的商品會令網頁刷新，但Levi不會。

Levi網站在用戶選擇商品的不同色彩時大多數(shù)網頁不會刷新，這似乎能帶給用戶更好的體驗。但是，如果對比Levi和Dockers網站在同一天同一時刻的表現(xiàn)，你會發(fā)現(xiàn)觸碰Levi上的顏色標簽并等待響應照片載入所花的時間，竟然比Dockers刷新一整個網頁的時間要多。Levi之所以這么慢，可能是因為它還要刷新那5個縮略圖，加上主要照片和其他不可見的元素，這種負載比較重?？磥砻糠N方式都有利有弊。

三星（上圖左）和戴爾（上圖右）的照片庫都可以左右滑動。三星還將折疊導航合并到產品也，戴爾則單純只有照片。

三星的方式似乎更人性化，因為頁面相對更少。三星和戴爾都使用了高分辨率的照片，顯然在展示價值不菲的產品時圖片質量很重要。戴爾的方式有一個好處，那就是消費者會更專注于產品本身，而不被頁面的其他內容干擾。

購物車

購物車通常用表格來展示商品。除了展示需要購買的商品，還提供其他功能，比如可以保存訂單，保存商品到收藏夾，刪除商品或更新數(shù)量，選擇快遞或實物店拿貨，接受促銷卷或優(yōu)惠券，以及結賬等。一旦加入了商品，就可以通過網站頁頭的購物車圖標或者全網站導航菜單進入購物車。

• 

  藍藍設計(www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的大數(shù)據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。

  關鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數(shù)據可視化設計公司、用戶體驗公司、高端網站設計公司

  銀行金融軟件UI界面設計、能源及監(jiān)控軟件UI界面設計、氣象行業(yè)UI界面設計、軌道交通界面設計、地理信息系統(tǒng)GIS UI界面設計、航天軍工軟件UI界面設計、醫(yī)療行業(yè)軟件UI界面設計、教育行業(yè)軟件UI界面設計、企業(yè)信息化UI界面設計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)