導(dǎo)讀：現(xiàn)如今我們幾乎每天都會接觸到電商類產(chǎn)品，除了商品詳情、活動營銷會很大程度影響用戶購買心理之外，“商品規(guī)格選擇”面板（ACTION SHEET）（又或“彈窗”）則會直接影響用戶對心理行為所對應(yīng)的交互操作。不同電商平臺的面板有何差異？怎樣的面板組件設(shè)計才是讓用戶覺得流暢且簡單的？本文從對面板的控件拆解分析及各大平臺的面板分析，梳理總結(jié)了一些商品規(guī)格選擇面板的控件交互規(guī)則，及當(dāng)業(yè)務(wù)需求過多時，如何選擇控件。
文中產(chǎn)品包括（都以鞋類為例）：
小程序：李寧、NIKE、ECCO、特步、安踏
APP：淘寶、拼多多、京東、唯品會、得物
一、“商品規(guī)格選擇”面板
1.1 喚起面板
通常在商品詳情頁，可以通過“加入購物車”和“立即購買”按鈕控件喚起商品規(guī)格選擇面板，“淘寶”可以通過點(diǎn)擊商品詳情處的規(guī)格選擇喚起；其中唯品會將規(guī)格選擇作為卡片直接設(shè)置在商品詳情頁中，無需喚醒面板即可完成購買。其余則可以選擇顏色屬性，更多屬性仍需要點(diǎn)擊按鈕控件喚起面板。
值得一提得是，按鈕控件得功能屬性和產(chǎn)品本身定位有很大關(guān)系，“拼多多”和“得物”都是直接購買，直接促進(jìn)用戶下單，前者在于其拼團(tuán)屬性，后者在于營銷活動相關(guān)度不高且存在較多搶售產(chǎn)品。且按鈕控件的功能屬性也會影響規(guī)格選擇面板中的按鈕控件屬性。
1.2 面板高度和形式
面板的尺寸和面板中承載的組件和信息內(nèi)容多少有關(guān)，大體包括兩種類型：
①可滑動面板（有進(jìn)度條）
除了商品本身的規(guī)格選擇，“淘寶”“京東”綜合性電商平臺涵蓋更多活動信息，諸如購買方式、分期付款、洗護(hù)保潔等服務(wù)；“李寧”增加了尺碼表信息。所以面板高度都較高，且能通過進(jìn)度條上下滑動
②固定面板（無進(jìn)度條）
其他活動等信息承載內(nèi)容少的情況下，通常則包括商品顏色、商品碼數(shù)、商品數(shù)量三大信息，這時使用固定面板可減少誤操作，提高選擇效率。
1.3 面板拆解
想要設(shè)計好用、高效的選擇面板，首先需要對面板中的內(nèi)容、內(nèi)容布局、涉及控件有一個基本了解，通過對比競品，（這里選擇淘寶為例，能涵蓋現(xiàn)有電商平臺較為全面的選擇面板信息。）
1.3.1 面板布局
選擇面板主要包含以下主要區(qū)域：
商品當(dāng)前選擇信息區(qū)：代表了用戶當(dāng)下選擇好的商品信息，包括商品圖片信息、價格信息、名稱、庫存、配送地址等，不同平臺對于商品展示的方式有多不同，也體現(xiàn)了不同平臺對商品展示的不同考慮。配送地址選擇區(qū)：從本次競品對比來看，只有淘寶平臺會在面板進(jìn)行地址選擇，其他平臺會在下一步進(jìn)行操作，這也與淘寶平臺用戶量極大有關(guān)。包括當(dāng)前位置、更改配送地址、預(yù)估配送時間平臺主要服務(wù)區(qū)：一些平臺會把主要的服務(wù)設(shè)置在規(guī)格選擇上方，體現(xiàn)品牌的特色服務(wù)和調(diào)性，諸如購買方式、服務(wù)保障等。大部分鞋類垂類商城還會提供尺碼選擇幫助服務(wù)。商品規(guī)格選擇區(qū)：以鞋類為例，商品規(guī)格屬性一般包括顏色、鞋碼、數(shù)量三大類別，大多會同步顯示庫存，“得物”還會單獨(dú)顯示不同鞋碼的價格。平臺次要服務(wù)區(qū)：在用戶選擇好商品后平臺會激勵用戶選擇更多增值保障服務(wù)，如花唄分期購買，會員服務(wù)、養(yǎng)護(hù)清潔服務(wù)等控件元素：包括蒙層、關(guān)閉按鈕、確定按鈕（下一步、加入購物車、立即購買）等功能屬性按鈕、進(jìn)度條、選擇控件1.3.2 面板控件
進(jìn)一步對選擇面板中的選擇控件進(jìn)行梳理，大體包括以下幾種：
單選點(diǎn)擊選擇器：在商品規(guī)格選擇中，顏色、尺碼都為單選且點(diǎn)擊類型，選擇一個選項(xiàng)后，無法取消選中狀態(tài)多聯(lián)點(diǎn)擊選擇器：多聯(lián)選擇器是由兩個或兩個以上的中繼器制作而成，選擇某個中繼器后，會對第二個中繼器進(jìn)行篩選，在鞋品的選擇中，顏色、尺碼遵循了多聯(lián)選擇器的規(guī)范，選擇顏色或尺碼某個選項(xiàng)，會篩選出還有庫存的選項(xiàng)。步進(jìn)選擇器：在數(shù)量選擇上各平臺都使用了步進(jìn)選擇器1.3.3 不同使用場景面板差異
上節(jié)喚起面板說到，在商品詳情頁存在一或二個功能按鈕都可以喚起選擇面板，面板之間的差異在于用戶使用場景和功能的不同，想“加入購物車”的用戶通常選擇后不想再被中斷后續(xù)操作，因此面板上引導(dǎo)用戶進(jìn)行“確定”，結(jié)束選擇流程；而對于立即購買的用戶則引導(dǎo)用戶進(jìn)行“購買”，觸發(fā)后續(xù)購買流程。
無論是用戶在哪個場景，都應(yīng)該引導(dǎo)和激勵用戶推進(jìn)流程的繼續(xù)，如淘寶通過領(lǐng)券購買激勵用戶下單，唯品會券前券后不同功能按鈕和POPOVER的提示，多重方式鼓勵用戶加入購物車。
二、選擇面板的控件規(guī)范解析
2.1 控件設(shè)計原則
通過競品的總結(jié)和尼克森的好用性原則，商品規(guī)格選擇器的基本原則有以下幾點(diǎn)：
易懂性：
文字說明易懂：在選擇器中，無論顏色和尺碼都要簡單易懂，有些商品的顏色具有晦澀的成語（如沙漠天空），導(dǎo)致用戶必須要點(diǎn)開大圖瀏覽才能明確商品顏色。選擇器中文字要短且準(zhǔn)，非必要場景盡量不要使用ICON。選擇狀態(tài)易懂：有清楚的顯示來表明顏色和尺碼的選中狀態(tài)、未選中狀態(tài)、不可用狀態(tài)，并且明確顯示此處可選擇。選擇順序易懂：包括商品規(guī)格和平臺服務(wù)在內(nèi)，用戶第一使用場景無法知曉具體內(nèi)容和難以選擇的情況下，應(yīng)為用戶提供易懂的選擇指南，讓用戶高效進(jìn)行選擇。選擇反饋易懂：每選擇一類屬性，都應(yīng)有相應(yīng)的選擇反饋，讓用戶感知選擇結(jié)果，輔助用戶進(jìn)行抉擇易用性：
某一屬性選擇時易用：要為用戶選擇標(biāo)簽或步進(jìn)器時，給予合適的觸控面積，元素和標(biāo)簽之間間距相當(dāng)，大小合適，減少誤觸。
不同屬性選擇時易用在選擇商品規(guī)格和選擇服務(wù)時，不應(yīng)讓用戶有不同的選擇差異，元素和標(biāo)簽視覺效果要統(tǒng)一，符合用戶的視覺習(xí)慣。
易抉擇：
商品規(guī)格選擇面板不僅為用戶提供屬性的選擇，更直接影響用戶是否加入購物車或下單，直接關(guān)系用戶的決策心理，因此不僅要易懂、易用，還要在各個選擇判斷下激勵用戶決策，
從文案層面，可以通過更接地氣的方式連接用戶從視覺層面，用清晰可見且具有引導(dǎo)性的色彩和圖案，引導(dǎo)用戶決策，如同樣的尺碼助手，“得物”則采用和IP形象可視化的手法，讓用戶更加愿意添加尺碼。從交互層面，可以增加選擇的趣味性等等2.2 選擇面板用戶體驗(yàn)影響因素
通過對面板的分析，易見得，用戶在商品選擇時，影響用戶選擇體驗(yàn)的三大因素在于：商品吸引、選擇可知、情感激勵。把握好這三點(diǎn)則易有效提升用戶選擇體驗(yàn)。
2.3 選擇面板競品啟示
2.3.1 商品展示的多樣化
對于所選商品的展示，各平臺也各有差異，除了普遍采用的小圖片頭像+商品信息以外，還包括使用大圖片形式展示，更能帶來沉浸感；以及圖片突出式展示，也能打破面板的界限，更動態(tài)化；“拼多多”和“唯品會”都取消了圖片展示小圖，而是結(jié)合到顏色選擇器中，能夠讓用戶在選擇顏色時反饋更即時。具體應(yīng)用時應(yīng)結(jié)合產(chǎn)品自身的定位和面板具體內(nèi)容來進(jìn)行設(shè)計，總體來說，商品的展示會直觀影響用戶對商品選擇的欲望，也代表是否能即時的反饋選擇。
2.3.2 顏色選擇器設(shè)計
在原則上，顏色選擇器應(yīng)圖文結(jié)合，能夠清晰易懂的展示商品效果，且能在圖片信息上即時反饋，顏色的選擇通過和商品主圖相關(guān)聯(lián)。
存在以下幾種情況：
主圖大小適當(dāng)，顏色選擇器僅有文本內(nèi)容，選擇顏色后主圖即時刷新沒有主圖，顏色選擇器文本加圖片結(jié)合，無需反饋，所見即所得主圖大小稍小，顏色選擇器文本加圖片結(jié)合三種方式各有優(yōu)劣，第三種原則上充分考慮到用戶的需求，但也更加占用面積。
2.3.3 尺碼選擇器設(shè)計
除了主圖-顏色會進(jìn)行關(guān)聯(lián)外，顏色-尺碼也通常會關(guān)聯(lián)，以顯示不同顏色或不同鞋碼下的庫存狀態(tài)。和服裝等物品不同，鞋品有時還會區(qū)分國內(nèi)外鞋碼，ECCO的選擇了分段控件的方式進(jìn)行選擇，唯品會則通過彈出層（popover）的形式顯示更多詳細(xì)信息。通常鞋碼標(biāo)簽一行不超過6個。
三、“商品規(guī)格選擇”面板設(shè)計案例
根據(jù)以上分析，分享筆者實(shí)際一次項(xiàng)目中的應(yīng)用，舒識定制商城是一個鞋品垂類購物和定制商城，由于其包含鞋品定制服務(wù)，因此商品選擇存在更多需求：
區(qū)分左右腳鞋碼增加鞋寬規(guī)格的選擇查看和更改當(dāng)前定制人腳型數(shù)據(jù)主要需要考慮優(yōu)化的方向是
優(yōu)化主圖展示區(qū)：吸引和激勵用戶對商品進(jìn)行定制和購買優(yōu)化規(guī)格選擇區(qū)：和其他電商平臺不同的是，該平臺在尺碼選擇方面不僅需要選擇鞋碼，還需要選擇鞋寬；并且用戶可以通過綁定自己的數(shù)據(jù)來匹配自己的具體尺碼。因此需要更多選擇器和不同的選擇狀態(tài)賦予更多品牌感：通過控件元素和視覺色彩來建立品牌感基于以上，針對主圖展示區(qū)和規(guī)格選擇區(qū)都輸出了AB版原型進(jìn)行評審，從而形成最終方案。
3.1 不可忽視的商品主圖區(qū)
在優(yōu)化過程前期，始終采用比較傳統(tǒng)的主圖展示方式，最終評審一致認(rèn)為在商品選擇時，面板后方的蒙層很大程度會影響用戶判斷，每個走查者都會碰到返回查看商品主圖或查看更多商品角度的情況。在主圖的商品視角上，普遍使用的都是正側(cè)視圖，這是由于鞋品側(cè)視圖大多對稱的情況，但隨著鞋品種類和款式的增多，也出現(xiàn)了很多側(cè)視圖好看，正視圖不好看的情況。
因此我們打破傳統(tǒng)，采用了主圖全屏顯示的形式，結(jié)合45°商品視角，呈現(xiàn)不一樣的商品展示效果。有效減少了用戶需要返回查看商品詳情的次數(shù)，45°視角不僅可以展示更多商品信息，也讓用戶有了新鮮感，吸引用戶在面板停留，從而做出選擇。
由于商品主圖區(qū)占用尺寸較大，同時將原版的顏色選擇器等比例縮小從120px縮小為64px，一行最多展示4種顏色，更多顏色通過泳道滑動選擇，更加合理的使用面積。
3.2 根據(jù)實(shí)際需求選擇控件
為了能夠最大化的利用面板選擇多個信息，拋棄了傳統(tǒng)的標(biāo)簽點(diǎn)擊選擇器，而是采用滑動選擇器，并區(qū)分不同選擇狀態(tài)。
- 系統(tǒng)推薦綁定尺碼系統(tǒng)推薦的尺碼無庫存還是堅(jiān)持選擇自己慣用尺碼無綁定尺碼推薦，用戶自己選擇
合理的規(guī)范和統(tǒng)一控件的不同狀態(tài)，大大提高用戶選擇效率，從而優(yōu)化選擇體驗(yàn)
3.3 用戶情感激勵
這次優(yōu)化從文案和視覺效果上都增加了用戶的情感體驗(yàn)，激勵用戶進(jìn)行數(shù)據(jù)的綁定、提醒鞋寬的選擇，在色彩上重新規(guī)范和應(yīng)用了品牌顏色：定制藍(lán)和活力橙。定制藍(lán)用來表明選中狀態(tài)和引導(dǎo)點(diǎn)擊，活力橙代表強(qiáng)調(diào)提醒。
本文由 @胡昀同學(xué) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自 Unsplash ，基于 CC0 協(xié)議
