在電商APP中，商品規(guī)格屬性選擇彈窗（或稱“選擇面板”）絕對(duì)是用戶操作最頻繁的組件之一，其操作體驗(yàn)的好壞直接影響著購(gòu)買轉(zhuǎn)化率和銷售額。因此，對(duì)商品規(guī)格選擇彈窗的分析研究對(duì)產(chǎn)品設(shè)計(jì)和用戶體驗(yàn)設(shè)計(jì)都有著很大的意義。

一、常見(jiàn)操作入口

一般來(lái)說(shuō)，常見(jiàn)的在四類頁(yè)面上可以喚起規(guī)格選擇面板：

1. 商品詳情頁(yè)

在商品詳情頁(yè)點(diǎn)擊規(guī)格數(shù)量選擇、加入購(gòu)物車和立即購(gòu)買按鈕可以彈出規(guī)格選擇面板。

其中“規(guī)格數(shù)量選擇”屬于直接喚起操作，“加入購(gòu)物車”和“立即購(gòu)買”屬于間接被動(dòng)喚起操作，即先判斷是否已選擇規(guī)格，若已選擇則提示加入購(gòu)物車成功或跳轉(zhuǎn)確認(rèn)訂單頁(yè)，若未選擇則彈出規(guī)格選擇面板。

設(shè)計(jì)注意點(diǎn)：

采用強(qiáng)語(yǔ)義的視覺(jué)引導(dǎo)

箭頭“>”比“…”有更強(qiáng)的指引性，目前只見(jiàn)到天貓和京東是“…”，且京東用的是中間深色兩邊淺色、中間大兩邊小的樣式，過(guò)重的視覺(jué)修飾反倒有點(diǎn)過(guò)猶不及了。

伴隨全面屏的興起，大圓角按鈕和卡片流行開來(lái)，毫無(wú)疑問(wèn)，圓角按鈕比矩形按鈕更活潑、更容易成為視覺(jué)焦點(diǎn)，但過(guò)度使用會(huì)降低產(chǎn)品的品質(zhì)感。規(guī)格選擇作為重要信息也可以想辦法突出顯示。

慎用占位文本

關(guān)于占位符的辯論由來(lái)已久，但請(qǐng)務(wù)必遵循“如果字段標(biāo)簽?zāi)芎芎谜f(shuō)明字段含義，盡量不要使用占位文本”的原則，因?yàn)橛脩艉苋菀缀雎钥雌饋?lái)已填充內(nèi)容的輸入項(xiàng)。

如下圖所示：網(wǎng)易嚴(yán)選沒(méi)有顯示占位文本提示，天貓顯示了“請(qǐng)選擇 尺碼”（“尺碼”會(huì)根據(jù)商品品類動(dòng)態(tài)顯示，例如顏色/尺寸），京東則直接默認(rèn)填入了該商品的有庫(kù)存的第一個(gè)規(guī)格組合，但是點(diǎn)擊“加入購(gòu)物車”按鈕依然會(huì)彈出規(guī)格選擇面板以便用戶選擇自己真正需要的規(guī)格，是有點(diǎn)畫蛇添足了。

臨近原則

規(guī)格選擇放在哪里更合適？

由于商品圖片、名稱、價(jià)格等信息已經(jīng)占據(jù)了將近2/3的屏幕空間，加上或多或少的促銷信息，規(guī)格選擇入口往往比較靠下。

淘寶和天貓因?yàn)樨S富的優(yōu)惠活動(dòng)在商品詳情頁(yè)的首屏是幾乎看不到規(guī)格選擇入口的，而嚴(yán)選、京東等因?yàn)榇黉N信息少且位置靠前，大部分商品可以在首屏看到規(guī)格選擇入口，但在用戶使用過(guò)程中頁(yè)面又是處于不斷的滑動(dòng)狀態(tài)，所以是時(shí)候考慮把規(guī)格選擇入口做成固定或懸浮的了。

考慮更完整的用戶使用流程

可以結(jié)合規(guī)格選擇的更多場(chǎng)景豐富規(guī)格選擇的功能。例如提示用戶完善尺碼，以便做尺碼推薦。又例如顯示緊急庫(kù)存信息，提示用戶盡快購(gòu)買。

2. 購(gòu)物車

購(gòu)物車是用戶用來(lái)暫存、收藏、對(duì)比有意向購(gòu)買的商品的。

隨著不斷深入的對(duì)比和決策，用戶會(huì)修改、調(diào)整要購(gòu)買的商品規(guī)格；天貓購(gòu)物車支持在購(gòu)物車進(jìn)行商品規(guī)格修改，下圖分別展示了已選規(guī)格有庫(kù)存和無(wú)庫(kù)存的重選規(guī)格方式，點(diǎn)擊相應(yīng)區(qū)域即可彈出規(guī)格選擇面板。

3. 促銷列表頁(yè)

在商品列表點(diǎn)擊購(gòu)買按鈕直接彈出規(guī)格選擇面板的情況比較少見(jiàn)，畢竟用戶往往是在仔細(xì)查看商品詳情后才會(huì)做出購(gòu)買決策。

但在限時(shí)購(gòu)、今日必?fù)尩攘斜眄?yè)面，如果正品保證做得到位、又有時(shí)效壓力，用戶是有可能直接選擇規(guī)格然后加入購(gòu)物車的。如圖是聚美優(yōu)品的推薦列表，如果該商品只有一種sku，那么點(diǎn)擊購(gòu)買按鈕直接加入購(gòu)物車；如果該商品有多種sku，那么點(diǎn)擊購(gòu)買按鈕就會(huì)彈出規(guī)格選擇面板。

4. 其他頁(yè)面

在訂單中進(jìn)行規(guī)格修改更不常見(jiàn)，但以筆者所在的校服電商行業(yè)為例，因?yàn)樾７儆陬A(yù)售商品（家長(zhǎng)付款后，校服廠商在根據(jù)尺碼安排生產(chǎn)和發(fā)貨），原則上只要沒(méi)進(jìn)入生產(chǎn)環(huán)節(jié)，就應(yīng)該允許用戶修改尺碼信息。

在退款功能不完善時(shí)，我們公司的校服訂單列表和訂單詳情在廠商未導(dǎo)出生產(chǎn)單前都是支持修改尺碼的。在未來(lái)也可以考慮在客服頁(yè)面增加規(guī)格選擇/修改入口，方便及時(shí)溝通修改。

二、基本組成元素

經(jīng)過(guò)收集整理各大知名電商APP的規(guī)格選擇面板，得到下圖。

一般來(lái)說(shuō)，規(guī)格選擇面板主要包括以下幾類：

• 商品信息：包括商品圖片、商品名稱、商品編號(hào)、剩余庫(kù)存；
• 商品價(jià)格：?jiǎn)蝺r(jià)、價(jià)格區(qū)間、原價(jià)（劃線價(jià)）；
• 規(guī)格屬性選項(xiàng)組：包括多種屬性和屬性值，如顏色、尺碼、內(nèi)存，單規(guī)格商品無(wú)需顯示；
• 幫助信息：如尺碼選擇幫助；
• 數(shù)量選擇：?jiǎn)蝹€(gè)用戶限購(gòu)規(guī)則、數(shù)字加減按鈕；
• 配送信息：當(dāng)前位置，可手動(dòng)更改，與庫(kù)存和配送息息相關(guān)；
• 特色服務(wù)：增值保障服務(wù)，如聯(lián)保、保修、延保、洗護(hù)、意外保護(hù)等；其他服務(wù)，如上門貼膜、電池?fù)Q新等；
• 支付/購(gòu)買方式：比如淘系可使用花唄；手機(jī)可以用合約機(jī)方式購(gòu)買；
• 優(yōu)惠信息：該商品適用的優(yōu)惠券、折扣、滿減等；
• 其他操作元素：遮罩層、關(guān)閉按鈕；確定按鈕；立即購(gòu)買和加入購(gòu)物車按鈕。

三、面板的位置、形狀與尺寸

1. 位置

規(guī)格選擇面板的位置，或者說(shuō)承載形式有兩種：一種是彈出型面板，另一種是嵌入型面板。

如下圖：

左邊的京東優(yōu)選屬于微信小程序，直接將規(guī)格選擇面板內(nèi)嵌于商品詳情頁(yè)，可直接選擇規(guī)格，且支持展開收起。

中間的是網(wǎng)易考拉，是最常見(jiàn)的彈出型面板。右邊的是唯品會(huì)，同時(shí)使用了兩種方式，如果商品基本信息下方相應(yīng)的屬性都選擇了，點(diǎn)擊“加入購(gòu)物車”就會(huì)把該規(guī)格的商品加入購(gòu)物車。

如果未選擇內(nèi)嵌面板的規(guī)格或只是選擇了部分屬性，點(diǎn)擊“加入購(gòu)物車”就會(huì)彈出規(guī)格選擇面板，以便用戶把剩余的屬性選擇完整。

2. 形狀

規(guī)格選擇面板的形狀可以分為兩大類：凸起形和平頭形。

相比而言：平頭形（下圖京東）比凸起形（下圖天貓）的空間利用率更高，但略顯呆板。還有一類異形，如下圖的蘇寧易購(gòu)，整個(gè)面板和屏幕邊框之間有一定縫隙，符合圓角設(shè)計(jì)趨勢(shì)。

3. 尺寸

面板尺寸和屏幕適配的關(guān)系更大，這里主要討論面板高度和內(nèi)容的關(guān)系。

如下圖：無(wú)論內(nèi)容多少，淘寶使用了統(tǒng)一的面板高度，而網(wǎng)易嚴(yán)選根據(jù)內(nèi)容多少自適應(yīng)高度。

從用戶聚焦主任務(wù)的角度來(lái)看，用戶在規(guī)格選擇面板的主要任務(wù)是選擇合適的規(guī)格，遮罩下方的內(nèi)容并不重要，所以面板遮擋了下方多少內(nèi)容并不重要。但從精品電商角度來(lái)看，這些商品的可選規(guī)格并不多，并不需要過(guò)大的面板。

四、設(shè)計(jì)技巧

1. 圖片展示技巧

基本注意點(diǎn)包括：使用默認(rèn)占位圖應(yīng)對(duì)弱網(wǎng)環(huán)境下圖片加載慢的情況；圖片可點(diǎn)擊放大查看，并支持手指捏合縮放；當(dāng)前圖片和規(guī)格選中項(xiàng)之間的聯(lián)動(dòng)。

除此之外，調(diào)研過(guò)程中還發(fā)現(xiàn)淘寶的設(shè)計(jì)很是新穎，值得借鑒，聚美優(yōu)品也采用相似設(shè)計(jì)，如下圖。

當(dāng)在規(guī)格選擇區(qū)域向下滑動(dòng)時(shí)，觸發(fā)大圖模式，且可以左右滑動(dòng)以對(duì)比查看其它規(guī)格的圖片，上滑又切換回小圖模式。點(diǎn)擊圖片可以全屏看圖，且在每張圖片下方會(huì)顯示相應(yīng)的規(guī)格說(shuō)明，可輔助加深用戶的瞬間記憶。

2. 規(guī)格選項(xiàng)設(shè)計(jì)技巧

設(shè)計(jì)規(guī)格選項(xiàng)，除了要有效的傳達(dá)已選、未選、不可選等狀態(tài)信息，選項(xiàng)排布、幫助信息展示、多屬性間的庫(kù)存聯(lián)動(dòng)、縮略圖的使用等也同樣值得研究。

選項(xiàng)的視覺(jué)修飾方法涵蓋了填充、描邊、反白、大圓角、角標(biāo)等，都是為了區(qū)分已選、未選和不可選狀態(tài)。

這其中也發(fā)現(xiàn)了不少驚喜：京東采用了“置灰文字+中劃刪除線”表示不可選，考拉海購(gòu)使用虛線表示不可選，天貓和唯品會(huì)使用縮略圖對(duì)選項(xiàng)進(jìn)行了點(diǎn)，唯品會(huì)甚至對(duì)無(wú)貨商品加了來(lái)貨提醒功能。

選項(xiàng)布局上大都采用的是“等間距+折行處理”的策略，雖然不夠整齊，但卻是最節(jié)省空間且能滿足更多場(chǎng)景需求。只有唯品會(huì)除外，是整齊的三列布局，因?yàn)樗俏藏浱幚恚?guī)格數(shù)量本身就少。

交互方面，京東提供了默認(rèn)選中項(xiàng)，反推其規(guī)則應(yīng)該是“默認(rèn)選中各屬性的第一項(xiàng)，如果該不可選則向下順延”。另外，如果在面板中選中了其中一項(xiàng)或幾項(xiàng)，此時(shí)點(diǎn)擊遮罩層或關(guān)閉按鈕關(guān)閉面板，再次打開面板后，面板內(nèi)會(huì)回顯上次選中的值，這屬于比較統(tǒng)一的做法。

3. 更高的空間利用率

由于各種產(chǎn)品運(yùn)營(yíng)策略的加入，規(guī)格選擇面板中的內(nèi)容越來(lái)越多，垂直滾動(dòng)就顯得有點(diǎn)直接生硬。常見(jiàn)做法有展開/收起和橫向滑動(dòng)?？蓞⒖枷聢D蘇寧和天貓的做法。

4. 更少的操作步驟

關(guān)于面板彈出的前后操作路徑可分為兩種：

第一種：加購(gòu)/立購(gòu)觸發(fā)-彈出面板-選擇-確定后收起面板-加入購(gòu)物車/立即購(gòu)買。如天貓、淘寶、網(wǎng)易考拉在規(guī)格選擇面板中都只有一個(gè)確定按鈕。

第二種：加購(gòu)/立購(gòu)觸發(fā)-彈出面板-選擇-加入購(gòu)物車/立即購(gòu)買。如網(wǎng)易嚴(yán)選、小米有品、聚美優(yōu)品在規(guī)格選擇面板中直接就有立即購(gòu)買和加入購(gòu)物車兩個(gè)按鈕。京東則有兩種樣式，一種是單個(gè)確定按鈕，另一種是輕松購(gòu)+確定按鈕。

原則上，第二種更好一點(diǎn)，不知道出于什么原因，還沒(méi)有被廣泛使用。

五、設(shè)計(jì)實(shí)例

對(duì)于服裝類、鞋類商品，一般會(huì)提供尺碼推薦、尺碼助手、查看完整尺碼表功能，無(wú)論對(duì)用戶還是對(duì)賣家都是極好的，用戶可以更準(zhǔn)確方便的選擇尺碼，商家也減輕了客服工作量，更可以避免不必要的退換貨。

這里舉了天貓和網(wǎng)易嚴(yán)選的例子供大家參考：

唯品會(huì)在選中衣服尺碼后，會(huì)彈出尺碼對(duì)應(yīng)的身體參數(shù)，以便用戶及時(shí)確認(rèn)。

以筆者所在校服行業(yè)為例，傳統(tǒng)校服訂購(gòu)大都采用線下量體的形式，為應(yīng)對(duì)學(xué)生快速發(fā)育的情況，尺碼往往偏大，家長(zhǎng)也傾向于選擇較大尺碼，結(jié)果導(dǎo)致到貨的尺碼更不準(zhǔn)。

校服品類也比較固定，一般包括運(yùn)動(dòng)服春秋裝、運(yùn)動(dòng)服夏裝、運(yùn)動(dòng)服冬裝、制服春秋裝、制服夏裝，而運(yùn)動(dòng)裝一般都是男女同款。同時(shí)校服行業(yè)魚龍混雜，不是所有廠商都有獨(dú)立開發(fā)尺碼的能力，所以他們一般會(huì)采用行業(yè)內(nèi)通用尺碼生產(chǎn)，但這些尺碼并不規(guī)范。

這次設(shè)計(jì)的目標(biāo)是智能化選碼，就是通過(guò)輸入相應(yīng)身體參數(shù)，系統(tǒng)自動(dòng)計(jì)算并匹配尺碼。如果匹配失敗，則按照提交的數(shù)據(jù)進(jìn)行定制生產(chǎn)。另外，收集學(xué)生身體數(shù)據(jù)也是為了不斷修正平臺(tái)尺碼。

1. 平臺(tái)通用尺碼

家長(zhǎng)可以通過(guò)閱讀商品詳情，結(jié)合孩子實(shí)際身高體重直接選擇合適的尺碼；也可以輸入身高體重，自動(dòng)計(jì)算獲得推薦的正常尺碼。如果正常尺碼無(wú)法滿足，則繼續(xù)輸入胸圍、腰圍等信息，以便通過(guò)計(jì)算獲得特體尺碼推薦。

如果仍不滿足，還有最后的定制尺碼。缺點(diǎn)在于這套尺碼號(hào)段過(guò)多，而一般校服都是針對(duì)不同學(xué)校推廣的，過(guò)多的尺碼反倒讓家長(zhǎng)難以選擇。

2. 廠商自定義尺碼

廠商自定義尺碼就是廠商維護(hù)的尺碼，和主流電商的尺碼規(guī)格維護(hù)較為類似，不過(guò)這里加了特體參數(shù)填寫入口，當(dāng)然廠商可以自主選擇開啟和關(guān)閉。

小結(jié)

本文主要從用戶和設(shè)計(jì)技巧的角度總結(jié)了商品規(guī)格選擇彈窗設(shè)計(jì)中的要點(diǎn)，而真正設(shè)計(jì)過(guò)程中，還要了解平臺(tái)中各商品品類的規(guī)格特征，進(jìn)行針對(duì)性設(shè)計(jì)。

此外，還需要為商家設(shè)計(jì)易于操作的后臺(tái)系統(tǒng)，方便商家維護(hù)商品規(guī)格。

本文由 @?張鵬濤TAO 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

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