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

一、常見操作入口

一般來說，常見的在四類頁面上可以喚起規(guī)格選擇面板：

1. 商品詳情頁

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

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

設(shè)計注意點：

采用強語義的視覺引導(dǎo)

箭頭“>”比“…”有更強的指引性，目前只見到天貓和京東是“…”，且京東用的是中間深色兩邊淺色、中間大兩邊小的樣式，過重的視覺修飾反倒有點過猶不及了。

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

慎用占位文本

關(guān)于占位符的辯論由來已久，但請務(wù)必遵循“如果字段標(biāo)簽?zāi)芎芎谜f明字段含義，盡量不要使用占位文本”的原則，因為用戶很容易忽略看起來已填充內(nèi)容的輸入項。

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

臨近原則

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

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

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

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

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

2. 購物車

購物車是用戶用來暫存、收藏、對比有意向購買的商品的。

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

3. 促銷列表頁

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

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

4. 其他頁面

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

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

二、基本組成元素

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

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

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

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

1. 位置

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

如下圖：

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

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

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

2. 形狀

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

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

3. 尺寸

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

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

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

四、設(shè)計技巧

1. 圖片展示技巧

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

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

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

2. 規(guī)格選項設(shè)計技巧

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

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

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

選項布局上大都采用的是“等間距+折行處理”的策略，雖然不夠整齊，但卻是最節(jié)省空間且能滿足更多場景需求。只有唯品會除外，是整齊的三列布局，因為它是尾貨處理，規(guī)格數(shù)量本身就少。

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

3. 更高的空間利用率

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

4. 更少的操作步驟

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

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

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

原則上，第二種更好一點，不知道出于什么原因，還沒有被廣泛使用。

五、設(shè)計實例

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

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

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

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

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

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

1. 平臺通用尺碼

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

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

2. 廠商自定義尺碼

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

小結(jié)

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

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

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

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