導讀：現如今我們幾乎每天都會接觸到電商類產品，除了商品詳情、活動營銷會很大程度影響用戶購買心理之外，“商品規格選擇”面板（ACTION SHEET）（又或“彈窗”）則會直接影響用戶對心理行為所對應的交互操作。不同電商平臺的面板有何差異？怎樣的面板組件設計才是讓用戶覺得流暢且簡單的？本文從對面板的控件拆解分析及各大平臺的面板分析，梳理總結了一些商品規格選擇面板的控件交互規則，及當業務需求過多時，如何選擇控件。

文中產品包括（都以鞋類為例）：

小程序：李寧、NIKE、ECCO、特步、安踏

APP：淘寶、拼多多、京東、唯品會、得物

一、“商品規格選擇”面板

1.1 喚起面板

通常在商品詳情頁，可以通過“加入購物車”和“立即購買”按鈕控件喚起商品規格選擇面板，“淘寶”可以通過點擊商品詳情處的規格選擇喚起；其中唯品會將規格選擇作為卡片直接設置在商品詳情頁中，無需喚醒面板即可完成購買。其余則可以選擇顏色屬性，更多屬性仍需要點擊按鈕控件喚起面板。

值得一提得是，按鈕控件得功能屬性和產品本身定位有很大關系，“拼多多”和“得物”都是直接購買，直接促進用戶下單，前者在于其拼團屬性，后者在于營銷活動相關度不高且存在較多搶售產品。且按鈕控件的功能屬性也會影響規格選擇面板中的按鈕控件屬性。

1.2 面板高度和形式

面板的尺寸和面板中承載的組件和信息內容多少有關，大體包括兩種類型：

①可滑動面板（有進度條）

除了商品本身的規格選擇，“淘寶”“京東”綜合性電商平臺涵蓋更多活動信息，諸如購買方式、分期付款、洗護保潔等服務；“李寧”增加了尺碼表信息。所以面板高度都較高，且能通過進度條上下滑動

②固定面板（無進度條）

其他活動等信息承載內容少的情況下，通常則包括商品顏色、商品碼數、商品數量三大信息，這時使用固定面板可減少誤操作，提高選擇效率。

1.3 面板拆解

想要設計好用、高效的選擇面板，首先需要對面板中的內容、內容布局、涉及控件有一個基本了解，通過對比競品，（這里選擇淘寶為例，能涵蓋現有電商平臺較為全面的選擇面板信息。）

1.3.1 面板布局

選擇面板主要包含以下主要區域：

商品當前選擇信息區：代表了用戶當下選擇好的商品信息，包括商品圖片信息、價格信息、名稱、庫存、配送地址等，不同平臺對于商品展示的方式有多不同，也體現了不同平臺對商品展示的不同考慮。配送地址選擇區：從本次競品對比來看，只有淘寶平臺會在面板進行地址選擇，其他平臺會在下一步進行操作，這也與淘寶平臺用戶量極大有關。包括當前位置、更改配送地址、預估配送時間平臺主要服務區：一些平臺會把主要的服務設置在規格選擇上方，體現品牌的特色服務和調性，諸如購買方式、服務保障等。大部分鞋類垂類商城還會提供尺碼選擇幫助服務。商品規格選擇區：以鞋類為例，商品規格屬性一般包括顏色、鞋碼、數量三大類別，大多會同步顯示庫存，“得物”還會單獨顯示不同鞋碼的價格。平臺次要服務區：在用戶選擇好商品后平臺會激勵用戶選擇更多增值保障服務，如花唄分期購買，會員服務、養護清潔服務等控件元素：包括蒙層、關閉按鈕、確定按鈕（下一步、加入購物車、立即購買）等功能屬性按鈕、進度條、選擇控件

1.3.2 面板控件

進一步對選擇面板中的選擇控件進行梳理，大體包括以下幾種：

單選點擊選擇器：在商品規格選擇中，顏色、尺碼都為單選且點擊類型，選擇一個選項后，無法取消選中狀態多聯點擊選擇器：多聯選擇器是由兩個或兩個以上的中繼器制作而成，選擇某個中繼器后，會對第二個中繼器進行篩選，在鞋品的選擇中，顏色、尺碼遵循了多聯選擇器的規范，選擇顏色或尺碼某個選項，會篩選出還有庫存的選項。步進選擇器：在數量選擇上各平臺都使用了步進選擇器

1.3.3 不同使用場景面板差異

上節喚起面板說到，在商品詳情頁存在一或二個功能按鈕都可以喚起選擇面板，面板之間的差異在于用戶使用場景和功能的不同，想“加入購物車”的用戶通常選擇后不想再被中斷后續操作，因此面板上引導用戶進行“確定”，結束選擇流程；而對于立即購買的用戶則引導用戶進行“購買”，觸發后續購買流程。

無論是用戶在哪個場景，都應該引導和激勵用戶推進流程的繼續，如淘寶通過領券購買激勵用戶下單，唯品會券前券后不同功能按鈕和POPOVER的提示，多重方式鼓勵用戶加入購物車。

二、選擇面板的控件規范解析

2.1 控件設計原則

通過競品的總結和尼克森的好用性原則，商品規格選擇器的基本原則有以下幾點：

易懂性：

文字說明易懂：在選擇器中，無論顏色和尺碼都要簡單易懂，有些商品的顏色具有晦澀的成語（如沙漠天空），導致用戶必須要點開大圖瀏覽才能明確商品顏色。選擇器中文字要短且準，非必要場景盡量不要使用ICON。選擇狀態易懂：有清楚的顯示來表明顏色和尺碼的選中狀態、未選中狀態、不可用狀態，并且明確顯示此處可選擇。選擇順序易懂：包括商品規格和平臺服務在內，用戶第一使用場景無法知曉具體內容和難以選擇的情況下，應為用戶提供易懂的選擇指南，讓用戶高效進行選擇。選擇反饋易懂：每選擇一類屬性，都應有相應的選擇反饋，讓用戶感知選擇結果，輔助用戶進行抉擇

易用性：

某一屬性選擇時易用：要為用戶選擇標簽或步進器時，給予合適的觸控面積，元素和標簽之間間距相當，大小合適，減少誤觸。

不同屬性選擇時易用在選擇商品規格和選擇服務時，不應讓用戶有不同的選擇差異，元素和標簽視覺效果要統一，符合用戶的視覺習慣。

易抉擇：

商品規格選擇面板不僅為用戶提供屬性的選擇，更直接影響用戶是否加入購物車或下單，直接關系用戶的決策心理，因此不僅要易懂、易用，還要在各個選擇判斷下激勵用戶決策，

從文案層面，可以通過更接地氣的方式連接用戶從視覺層面，用清晰可見且具有引導性的色彩和圖案，引導用戶決策，如同樣的尺碼助手，“得物”則采用和IP形象可視化的手法，讓用戶更加愿意添加尺碼。從交互層面，可以增加選擇的趣味性等等

2.2 選擇面板用戶體驗影響因素

通過對面板的分析，易見得，用戶在商品選擇時，影響用戶選擇體驗的三大因素在于：商品吸引、選擇可知、情感激勵。把握好這三點則易有效提升用戶選擇體驗。

2.3 選擇面板競品啟示

2.3.1 商品展示的多樣化

對于所選商品的展示，各平臺也各有差異，除了普遍采用的小圖片頭像+商品信息以外，還包括使用大圖片形式展示，更能帶來沉浸感；以及圖片突出式展示，也能打破面板的界限，更動態化；“拼多多”和“唯品會”都取消了圖片展示小圖，而是結合到顏色選擇器中，能夠讓用戶在選擇顏色時反饋更即時。具體應用時應結合產品自身的定位和面板具體內容來進行設計，總體來說，商品的展示會直觀影響用戶對商品選擇的欲望，也代表是否能即時的反饋選擇。

2.3.2 顏色選擇器設計

在原則上，顏色選擇器應圖文結合，能夠清晰易懂的展示商品效果，且能在圖片信息上即時反饋，顏色的選擇通過和商品主圖相關聯。

存在以下幾種情況：

主圖大小適當，顏色選擇器僅有文本內容，選擇顏色后主圖即時刷新沒有主圖，顏色選擇器文本加圖片結合，無需反饋，所見即所得主圖大小稍小，顏色選擇器文本加圖片結合

三種方式各有優劣，第三種原則上充分考慮到用戶的需求，但也更加占用面積。

2.3.3 尺碼選擇器設計

除了主圖-顏色會進行關聯外，顏色-尺碼也通常會關聯，以顯示不同顏色或不同鞋碼下的庫存狀態。和服裝等物品不同，鞋品有時還會區分國內外鞋碼，ECCO的選擇了分段控件的方式進行選擇，唯品會則通過彈出層（popover）的形式顯示更多詳細信息。通常鞋碼標簽一行不超過6個。

三、“商品規格選擇”面板設計案例

根據以上分析，分享筆者實際一次項目中的應用，舒識定制商城是一個鞋品垂類購物和定制商城，由于其包含鞋品定制服務，因此商品選擇存在更多需求：

區分左右腳鞋碼增加鞋寬規格的選擇查看和更改當前定制人腳型數據

主要需要考慮優化的方向是

優化主圖展示區：吸引和激勵用戶對商品進行定制和購買優化規格選擇區：和其他電商平臺不同的是，該平臺在尺碼選擇方面不僅需要選擇鞋碼，還需要選擇鞋寬；并且用戶可以通過綁定自己的數據來匹配自己的具體尺碼。因此需要更多選擇器和不同的選擇狀態賦予更多品牌感：通過控件元素和視覺色彩來建立品牌感

基于以上，針對主圖展示區和規格選擇區都輸出了AB版原型進行評審，從而形成最終方案。

3.1 不可忽視的商品主圖區

在優化過程前期，始終采用比較傳統的主圖展示方式，最終評審一致認為在商品選擇時，面板后方的蒙層很大程度會影響用戶判斷，每個走查者都會碰到返回查看商品主圖或查看更多商品角度的情況。在主圖的商品視角上，普遍使用的都是正側視圖，這是由于鞋品側視圖大多對稱的情況，但隨著鞋品種類和款式的增多，也出現了很多側視圖好看，正視圖不好看的情況。

因此我們打破傳統，采用了主圖全屏顯示的形式，結合45°商品視角，呈現不一樣的商品展示效果。有效減少了用戶需要返回查看商品詳情的次數，45°視角不僅可以展示更多商品信息，也讓用戶有了新鮮感，吸引用戶在面板停留，從而做出選擇。

由于商品主圖區占用尺寸較大，同時將原版的顏色選擇器等比例縮小從120px縮小為64px，一行最多展示4種顏色，更多顏色通過泳道滑動選擇，更加合理的使用面積。

3.2 根據實際需求選擇控件

為了能夠最大化的利用面板選擇多個信息，拋棄了傳統的標簽點擊選擇器，而是采用滑動選擇器，并區分不同選擇狀態。

系統推薦綁定尺碼系統推薦的尺碼無庫存還是堅持選擇自己慣用尺碼無綁定尺碼推薦，用戶自己選擇

合理的規范和統一控件的不同狀態，大大提高用戶選擇效率，從而優化選擇體驗

3.3 用戶情感激勵

這次優化從文案和視覺效果上都增加了用戶的情感體驗，激勵用戶進行數據的綁定、提醒鞋寬的選擇，在色彩上重新規范和應用了品牌顏色：定制藍和活力橙。定制藍用來表明選中狀態和引導點擊，活力橙代表強調提醒。

本文由 @胡昀同學 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Unsplash ，基于 CC0 協議