在電商APP中，商品規格屬性選擇彈窗（或稱“選擇面板”）絕對是用戶操作最頻繁的組件之一，其操作體驗的好壞直接影響着購買轉化率和銷售額。因此，對商品規格選擇彈窗的分析研究對產品設計和用戶體驗設計都有着很大的意義。
1.常見操作入口
一般來說，常見的在四類頁面上可以喚起規格選擇面板：
A.商品詳情頁
在商品詳情頁點擊規格數量選擇、加入購物車和立即購買按鈕可以彈出規格選擇面板。其中“規格數量選擇”屬於直接喚起操作，“加入購物車”和“立即購買”屬於間接被動喚起操作，即先判斷是否已選擇規格，若已選擇則提示加入購物車成功或跳轉確認訂單頁，若未選擇則彈出規格選擇面板。
設計注意點：
①採用強語義的視覺引導：
箭頭“>”比“…”有更強的指引性，目前只見到天貓和京東是“…”，且京東用的是中間深色兩邊淺色、中間大兩邊小的樣式，過重的視覺修飾反倒有點過猶不及了。伴隨全面屏的興起，大圓角按鈕和卡片流行開來，毫無疑問，圓角按鈕比矩形按鈕更活潑、更容易成爲視覺焦點，但過度使用會降低產品的品質感。規格選擇作爲重要信息也可以想辦法突出顯示。
②慎用佔位文本：
關於佔位符的辯論由來已久，但請務必遵循“如果字段標籤能很好說明字段含義，儘量不要使用佔位文本”的原則，因爲用戶很容易忽略看起來已填充內容的輸入項。如下圖所示，網易嚴選沒有顯示佔位文本提示，天貓顯示了“請選擇 尺碼”（“尺碼”會根據商品品類動態顯示，例如顏色/尺寸），京東則直接默認填入了該商品的有庫存的第一個規格組合，但是點擊“加入購物車”按鈕依然會彈出規格選擇面板以便用戶選擇自己真正需要的規格，是有點畫蛇添足了。
③臨近原則：
規格選擇放在哪裏更合適？由於商品圖片、名稱、價格等信息已經佔據了將近2/3的屏幕空間，加上或多或少的促銷信息，規格選擇入口往往比較靠下。淘寶和天貓因爲豐富的優惠活動在商品詳情頁的首屏是幾乎看不到規格選擇入口的，而嚴選、京東等因爲促銷信息少且位置靠前，大部分商品可以在首屏看到規格選擇入口，但在用戶使用過程中頁面又是處於不斷的滑動狀態，所以是時候考慮把規格選擇入口做成固定或懸浮的了。
④考慮更完整的用戶使用流程：
可以結合規格選擇的更多場景豐富規格選擇的功能。例如提示用戶完善尺碼，以便做尺碼推薦。又例如顯示緊急庫存信息，提示用戶儘快購買。
B.購物車
購物車是用戶用來暫存、收藏、對比有意向購買的商品的。隨着不斷深入的對比和決策，用戶會修改、調整要購買的商品規格。天貓購物車支持在購物車進行商品規格修改，下圖分別展示了已選規格有庫存和無庫存的重選規格方式，點擊相應區域即可彈出規格選擇面板。
C.促銷列表頁
在商品列表點擊購買按鈕直接彈出規格選擇面板的情況比較少見，畢竟用戶往往是在仔細查看商品詳情後纔會做出購買決策。但在限時購、今日必搶等列表頁面，如果正品保證做得到位、又有時效壓力，用戶是有可能直接選擇規格然後加入購物車的。如圖是聚美優品的推薦列表，如果該商品只有一種sku，那麼點擊購買按鈕直接加入購物車；如果該商品有多種sku，那麼點擊購買按鈕就會彈出規格選擇面板。
D.其他頁面
在訂單中進行規格修改更不常見，但以筆者所在的校服電商行業爲例，因爲校服屬於預售商品（家長付款後，校服廠商在根據尺碼安排生產和發貨），原則上只要沒進入生產環節，就應該允許用戶修改尺碼信息。在退款功能不完善時，我們公司的校服訂單列表和訂單詳情在廠商未導出生產單前都是支持修改尺碼的。在未來也可以考慮在客服頁面增加規格選擇/修改入口，方便及時溝通修改。
2.基本組成元素
經過收集整理各大知名電商APP的規格選擇面板，得到下圖。一般來說，規格選擇面板主要包括以下幾類：
商品信息：包括商品圖片、商品名稱、商品編號、剩餘庫存；
商品價格：單價、價格區間、原價（劃線價）；
規格屬性選項組：包括多種屬性和屬性值，如顏色、尺碼、內存，單規格商品無需顯示；
幫助信息：如尺碼選擇幫助；
數量選擇：單個用戶限購規則、數字加減按鈕；
配送信息：當前位置，可手動更改，與庫存和配送息息相關；
特色服務：增值保障服務，如聯保、保修、延保、洗護、意外保護等；其他服務，如上門貼膜、電池換新等；
支付/購買方式：比如淘系可使用花唄；手機可以用合約機方式購買；
優惠信息：該商品適用的優惠券、折扣、滿減等；
其他操作元素：遮罩層、關閉按鈕；確定按鈕；立即購買和加入購物車按鈕；
3.面板的位置、形狀與尺寸
位置
規格選擇面板的位置，或者說承載形式有兩種：一種是彈出型面板，另一種是嵌入型面板。如下圖：
左邊的京東優選屬於微信小程序，直接將規格選擇面板內嵌於商品詳情頁，可直接選擇規格，且支持展開收起。中間的是網易考拉，是最常見的彈出型面板。右邊的是唯品會，同時使用了兩種方式，如果商品基本信息下方相應的屬性都選擇了，點擊“加入購物車”就會把該規格的商品加入購物車；如果未選擇內嵌面板的規格或只是選擇了部分屬性，點擊“加入購物車”就會彈出規格選擇面板，以便用戶把剩餘的屬性選擇完整。
形狀
規格選擇面板的形狀可以分爲兩大類：凸起形和平頭形。相比而言，平頭形（下圖京東）比凸起形（下圖天貓）的空間利用率更高，但略顯呆板。還有一類異形，如下圖的蘇寧易購，整個面板和屏幕邊框之間有一定縫隙，符合圓角設計趨勢。
尺寸
面板尺寸和屏幕適配的關係更大，這裏主要討論面板高度和內容的關係。如下圖：無論內容多少，淘寶使用了統一的面板高度，而網易嚴選根據內容多少自適應高度。從用戶聚焦主任務的角度來看，用戶在規格選擇面板的主要任務是選擇合適的規格，遮罩下方的內容並不重要，所以面板遮擋了下方多少內容並不重要。但從精品電商角度來看，這些商品的可選規格並不多，並不需要過大的面板。
4.設計技巧
圖片展示技巧
基本注意點包括：使用默認佔位圖應對弱網環境下圖片加載慢的情況；圖片可點擊放大查看，並支持手指捏合縮放；當前圖片和規格選中項之間的聯動。除此之外，調研過程中還發現淘寶的設計很是新穎，值得借鑑，聚美優品也採用相似設計，如下圖。當在規格選擇區域向下滑動時，觸發大圖模式，且可以左右滑動以對比查看其它規格的圖片，上滑又切換回小圖模式。點擊圖片可以全屏看圖，且在每張圖片下方會顯示相應的規格說明，可輔助加深用戶的瞬間記憶。
規格選項設計技巧
設計規格選項，除了要有效的傳達已選、未選、不可選等狀態信息，選項排布、幫助信息展示、多屬性間的庫存聯動、縮略圖的使用等也同樣值得研究。
選項的視覺修飾方法涵蓋了填充、描邊、反白、大圓角、角標等，都是爲了區分已選、未選和不可選狀態。這其中也發現了不少驚喜：京東採用了“置灰文字+中劃刪除線”表示不可選，考拉海購使用虛線表示不可選，天貓和唯品會使用縮略圖對選項進行了點，唯品會甚至對無貨商品加了來貨提醒功能。
選項佈局上大都採用的是“等間距+折行處理”的策略，雖然不夠整齊，但卻是最節省空間且能滿足更多場景需求。只有唯品會除外，是整齊的三列布局，因爲它是尾貨處理，規格數量本身就少。
交互方面，京東提供了默認選中項，反推其規則應該是“默認選中各屬性的第一項，如果該不可選則向下順延”。另外，如果在面板中選中了其中一項或幾項，此時點擊遮罩層或關閉按鈕關閉面板，再次打開面板後，面板內會回顯上次選中的值，這屬於比較統一的做法。
更高的空間利用率
由於各種產品運營策略的加入，規格選擇面板中的內容越來越多，垂直滾動就顯得有點直接生硬。常見做法有展開/收起和橫向滑動。可參考下圖蘇寧和天貓的做法。
更少的操作步驟
關於面板彈出的前後操作路徑可分爲兩種：
第一種：加購/立購觸發-彈出面板-選擇-確定後收起面板-加入購物車/立即購買。如天貓、淘寶、網易考拉在規格選擇面板中都只有一個確定按鈕。
第二種：加購/立購觸發-彈出面板-選擇-加入購物車/立即購買。如網易嚴選、小米有品、聚美優品在規格選擇面板中直接就有立即購買和加入購物車兩個按鈕。京東則有兩種樣式，一種是單個確定按鈕，另一種是輕鬆購+確定按鈕。
原則上，第二種更好一點，不知道出於什麼原因，還沒有被廣泛使用。
5.設計實例
對於服裝類、鞋類商品，一般會提供尺碼推薦、尺碼助手、查看完整尺碼錶功能，無論對用戶還是對賣家都是極好的，用戶可以更準確方便的選擇尺碼，商家也減輕了客服工作量，更可以避免不必要的退換貨。這裏舉了天貓和網易嚴選的例子供大家參考：
唯品會在選中衣服尺碼後，會彈出尺碼對應的身體參數，以便用戶及時確認。
以筆者所在校服行業爲例，傳統校服訂購大都採用線下量體的形式，爲應對學生快速發育的情況，尺碼往往偏大，家長也傾向於選擇較大尺碼，結果導致到貨的尺碼更不準。校服品類也比較固定，一般包括運動服春秋裝、運動服夏裝、運動服冬裝、制服春秋裝、制服夏裝，而運動裝一般都是男女同款。同時校服行業魚龍混雜，不是所有廠商都有獨立開發尺碼的能力，所以他們一般會採用行業內通用尺碼生產，但這些尺碼並不規範。這次設計的目標是智能化選碼，就是通過輸入相應身體參數，系統自動計算並匹配尺碼。如果匹配失敗，則按照提交的數據進行定製生產。另外，收集學生身體數據也是爲了不斷修正平臺尺碼。
平臺通用尺碼：
家長可以通過閱讀商品詳情，結合孩子實際身高體重直接選擇合適的尺碼；也可以輸入身高體重，自動計算獲得推薦的正常尺碼。如果正常尺碼無法滿足，則繼續輸入胸圍、腰圍等信息，以便通過計算獲得特體尺碼推薦；如果仍不滿足，還有最後的定製尺碼。缺點在於這套尺碼號段過多，而一般校服都是針對不同學校推廣的，過多的尺碼反倒讓家長難以選擇。
廠商自定義尺碼：
廠商自定義尺碼就是廠商維護的尺碼，和主流電商的尺碼規格維護較爲類似，不過這裏加了特體參數填寫入口，當然廠商可以自主選擇開啓和關閉。
小結
本文主要從用戶和設計技巧的角度總結了商品規格選擇彈窗設計中的要點，而真正設計過程中，還要了解平臺中各商品品類的規格特徵，進行針對性設計。此外，還需要爲商家設計易於操作的後臺系統，方便商家維護商品規格。