AV天堂精品一区二区三区,精品国产成人网站一区二区,国模精品一区二区三区

搜索

APP

起點課堂會員權益

職業(yè)體系課特權

線下行業(yè)大會特權

個人IP打造特權

30+門專項技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導直播

12場專業(yè)技能直播

會員專屬社群

榮耀標識

發(fā)布

注冊 | 登錄

優(yōu)化“商品規(guī)格選擇”面板，需要注意這幾點

胡昀同學

2021-09-01

0 評論 3978 瀏覽 23 收藏

17 分鐘

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

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

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

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

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

1.1 喚起面板

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

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

1.2 面板高度和形式

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

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

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

②固定面板（無進度條）

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

1.3 面板拆解

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

1.3.1 面板布局

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

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

1.3.2 面板控件

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

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

1.3.3 不同使用場景面板差異

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

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

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

2.1 控件設計原則

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

易懂性：

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

易用性：

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

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

易抉擇：

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

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

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

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

2.3 選擇面板競品啟示

2.3.1 商品展示的多樣化

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

2.3.2 顏色選擇器設計

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

存在以下幾種情況：

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

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

2.3.3 尺碼選擇器設計

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

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

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

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

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

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

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

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

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

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

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