導(dǎo)讀：現(xiàn)如今我們幾乎每天都會(huì)接觸到電商類產(chǎn)品，除了商品詳情、活動(dòng)營(yíng)銷會(huì)很大程度影響用戶購(gòu)買心理之外，“商品規(guī)格選擇”面板（ACTION SHEET）（又或“彈窗”）則會(huì)直接影響用戶對(duì)心理行為所對(duì)應(yīng)的交互操作。不同電商平臺(tái)的面板有何差異？怎樣的面板組件設(shè)計(jì)才是讓用戶覺(jué)得流暢且簡(jiǎn)單的？本文從對(duì)面板的控件拆解分析及各大平臺(tái)的面板分析，梳理總結(jié)了一些商品規(guī)格選擇面板的控件交互規(guī)則，及當(dāng)業(yè)務(wù)需求過(guò)多時(shí)，如何選擇控件。

文中產(chǎn)品包括（都以鞋類為例）：

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

APP：淘寶、拼多多、京東、唯品會(huì)、得物

一、“商品規(guī)格選擇”面板

1.1 喚起面板

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

值得一提得是，按鈕控件得功能屬性和產(chǎn)品本身定位有很大關(guān)系，“拼多多”和“得物”都是直接購(gòu)買，直接促進(jìn)用戶下單，前者在于其拼團(tuán)屬性，后者在于營(yíng)銷活動(dòng)相關(guān)度不高且存在較多搶售產(chǎn)品。且按鈕控件的功能屬性也會(huì)影響規(guī)格選擇面板中的按鈕控件屬性。

1.2 面板高度和形式

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

①可滑動(dòng)面板（有進(jìn)度條）

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

②固定面板（無(wú)進(jìn)度條）

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

1.3 面板拆解

想要設(shè)計(jì)好用、高效的選擇面板，首先需要對(duì)面板中的內(nèi)容、內(nèi)容布局、涉及控件有一個(gè)基本了解，通過(guò)對(duì)比競(jìng)品，（這里選擇淘寶為例，能涵蓋現(xiàn)有電商平臺(tái)較為全面的選擇面板信息。）

1.3.1 面板布局

選擇面板主要包含以下主要區(qū)域：

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

1.3.2 面板控件

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

單選點(diǎn)擊選擇器：在商品規(guī)格選擇中，顏色、尺碼都為單選且點(diǎn)擊類型，選擇一個(gè)選項(xiàng)后，無(wú)法取消選中狀態(tài)多聯(lián)點(diǎn)擊選擇器：多聯(lián)選擇器是由兩個(gè)或兩個(gè)以上的中繼器制作而成，選擇某個(gè)中繼器后，會(huì)對(duì)第二個(gè)中繼器進(jìn)行篩選，在鞋品的選擇中，顏色、尺碼遵循了多聯(lián)選擇器的規(guī)范，選擇顏色或尺碼某個(gè)選項(xiàng)，會(huì)篩選出還有庫(kù)存的選項(xiàng)。步進(jìn)選擇器：在數(shù)量選擇上各平臺(tái)都使用了步進(jìn)選擇器

1.3.3 不同使用場(chǎng)景面板差異

上節(jié)喚起面板說(shuō)到，在商品詳情頁(yè)存在一或二個(gè)功能按鈕都可以喚起選擇面板，面板之間的差異在于用戶使用場(chǎng)景和功能的不同，想“加入購(gòu)物車”的用戶通常選擇后不想再被中斷后續(xù)操作，因此面板上引導(dǎo)用戶進(jìn)行“確定”，結(jié)束選擇流程；而對(duì)于立即購(gòu)買的用戶則引導(dǎo)用戶進(jìn)行“購(gòu)買”，觸發(fā)后續(xù)購(gòu)買流程。

無(wú)論是用戶在哪個(gè)場(chǎng)景，都應(yīng)該引導(dǎo)和激勵(lì)用戶推進(jìn)流程的繼續(xù)，如淘寶通過(guò)領(lǐng)券購(gòu)買激勵(lì)用戶下單，唯品會(huì)券前券后不同功能按鈕和POPOVER的提示，多重方式鼓勵(lì)用戶加入購(gòu)物車。

二、選擇面板的控件規(guī)范解析

2.1 控件設(shè)計(jì)原則

通過(guò)競(jìng)品的總結(jié)和尼克森的好用性原則，商品規(guī)格選擇器的基本原則有以下幾點(diǎn)：

易懂性：

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

易用性：

某一屬性選擇時(shí)易用：要為用戶選擇標(biāo)簽或步進(jìn)器時(shí)，給予合適的觸控面積，元素和標(biāo)簽之間間距相當(dāng)，大小合適，減少誤觸。

不同屬性選擇時(shí)易用在選擇商品規(guī)格和選擇服務(wù)時(shí)，不應(yīng)讓用戶有不同的選擇差異，元素和標(biāo)簽視覺(jué)效果要統(tǒng)一，符合用戶的視覺(jué)習(xí)慣。

易抉擇：

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

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

2.2 選擇面板用戶體驗(yàn)影響因素

通過(guò)對(duì)面板的分析，易見(jiàn)得，用戶在商品選擇時(shí)，影響用戶選擇體驗(yàn)的三大因素在于：商品吸引、選擇可知、情感激勵(lì)。把握好這三點(diǎn)則易有效提升用戶選擇體驗(yàn)。

2.3 選擇面板競(jìng)品啟示

2.3.1 商品展示的多樣化

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

2.3.2 顏色選擇器設(shè)計(jì)

在原則上，顏色選擇器應(yīng)圖文結(jié)合，能夠清晰易懂的展示商品效果，且能在圖片信息上即時(shí)反饋，顏色的選擇通過(guò)和商品主圖相關(guān)聯(lián)。

存在以下幾種情況：

主圖大小適當(dāng)，顏色選擇器僅有文本內(nèi)容，選擇顏色后主圖即時(shí)刷新沒(méi)有主圖，顏色選擇器文本加圖片結(jié)合，無(wú)需反饋，所見(jiàn)即所得主圖大小稍小，顏色選擇器文本加圖片結(jié)合

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

2.3.3 尺碼選擇器設(shè)計(jì)

除了主圖-顏色會(huì)進(jìn)行關(guān)聯(lián)外，顏色-尺碼也通常會(huì)關(guān)聯(lián)，以顯示不同顏色或不同鞋碼下的庫(kù)存狀態(tài)。和服裝等物品不同，鞋品有時(shí)還會(huì)區(qū)分國(guó)內(nèi)外鞋碼，ECCO的選擇了分段控件的方式進(jìn)行選擇，唯品會(huì)則通過(guò)彈出層（popover）的形式顯示更多詳細(xì)信息。通常鞋碼標(biāo)簽一行不超過(guò)6個(gè)。

三、“商品規(guī)格選擇”面板設(shè)計(jì)案例

根據(jù)以上分析，分享筆者實(shí)際一次項(xiàng)目中的應(yīng)用，舒識(shí)定制商城是一個(gè)鞋品垂類購(gòu)物和定制商城，由于其包含鞋品定制服務(wù)，因此商品選擇存在更多需求：

區(qū)分左右腳鞋碼增加鞋寬規(guī)格的選擇查看和更改當(dāng)前定制人腳型數(shù)據(jù)

主要需要考慮優(yōu)化的方向是

優(yōu)化主圖展示區(qū)：吸引和激勵(lì)用戶對(duì)商品進(jìn)行定制和購(gòu)買優(yōu)化規(guī)格選擇區(qū)：和其他電商平臺(tái)不同的是，該平臺(tái)在尺碼選擇方面不僅需要選擇鞋碼，還需要選擇鞋寬；并且用戶可以通過(guò)綁定自己的數(shù)據(jù)來(lái)匹配自己的具體尺碼。因此需要更多選擇器和不同的選擇狀態(tài)賦予更多品牌感：通過(guò)控件元素和視覺(jué)色彩來(lái)建立品牌感

基于以上，針對(duì)主圖展示區(qū)和規(guī)格選擇區(qū)都輸出了AB版原型進(jìn)行評(píng)審，從而形成最終方案。

3.1 不可忽視的商品主圖區(qū)

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

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

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

3.2 根據(jù)實(shí)際需求選擇控件

為了能夠最大化的利用面板選擇多個(gè)信息，拋棄了傳統(tǒng)的標(biāo)簽點(diǎn)擊選擇器，而是采用滑動(dòng)選擇器，并區(qū)分不同選擇狀態(tài)。

系統(tǒng)推薦綁定尺碼系統(tǒng)推薦的尺碼無(wú)庫(kù)存還是堅(jiān)持選擇自己慣用尺碼無(wú)綁定尺碼推薦，用戶自己選擇

合理的規(guī)范和統(tǒng)一控件的不同狀態(tài)，大大提高用戶選擇效率，從而優(yōu)化選擇體驗(yàn)

3.3 用戶情感激勵(lì)

這次優(yōu)化從文案和視覺(jué)效果上都增加了用戶的情感體驗(yàn)，激勵(lì)用戶進(jìn)行數(shù)據(jù)的綁定、提醒鞋寬的選擇，在色彩上重新規(guī)范和應(yīng)用了品牌顏色：定制藍(lán)和活力橙。定制藍(lán)用來(lái)表明選中狀態(tài)和引導(dǎo)點(diǎn)擊，活力橙代表強(qiáng)調(diào)提醒。

本文由 @胡昀同學(xué) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Unsplash ，基于 CC0 協(xié)議