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

1.常見操作入口

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

A.商品詳情頁

在商品詳情頁點擊規(guī)格數(shù)量選擇裸扶、加入購物車和立即購買按鈕可以彈出規(guī)格選擇面板。其中“規(guī)格數(shù)量選擇”屬于直接喚起操作搬素，“加入購物車”和“立即購買”屬于間接被動喚起操作呵晨，即先判斷是否已選擇規(guī)格魏保，若已選擇則提示加入購物車成功或跳轉(zhuǎn)確認訂單頁，若未選擇則彈出規(guī)格選擇面板摸屠。

設(shè)計注意點：

①采用強語義的視覺引導：

箭頭“>”比“…”有更強的指引性谓罗，目前只見到天貓和京東是“…”，且京東用的是中間深色兩邊淺色季二、中間大兩邊小的樣式檩咱，過重的視覺修飾反倒有點過猶不及了。伴隨全面屏的興起胯舷，大圓角按鈕和卡片流行開來刻蚯，毫無疑問，圓角按鈕比矩形按鈕更活潑桑嘶、更容易成為視覺焦點炊汹，但過度使用會降低產(chǎn)品的品質(zhì)感。規(guī)格選擇作為重要信息也可以想辦法突出顯示逃顶。

②慎用占位文本：

關(guān)于占位符的辯論由來已久讨便，但請務(wù)必遵循“如果字段標簽?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ī)格選擇的功能霞势。例如提示用戶完善尺碼烹植，以便做尺碼推薦斑鸦。又例如顯示緊急庫存信息，提示用戶盡快購買草雕。

B.購物車

購物車是用戶用來暫存巷屿、收藏、對比有意向購買的商品的墩虹。隨著不斷深入的對比和決策嘱巾，用戶會修改、調(diào)整要購買的商品規(guī)格诫钓。天貓購物車支持在購物車進行商品規(guī)格修改旬昭，下圖分別展示了已選規(guī)格有庫存和無庫存的重選規(guī)格方式，點擊相應(yīng)區(qū)域即可彈出規(guī)格選擇面板菌湃。

C.促銷列表頁

在商品列表點擊購買按鈕直接彈出規(guī)格選擇面板的情況比較少見问拘，畢竟用戶往往是在仔細查看商品詳情后才會做出購買決策。但在限時購慢味、今日必搶等列表頁面，如果正品保證做得到位墅冷、又有時效壓力纯路，用戶是有可能直接選擇規(guī)格然后加入購物車的。如圖是聚美優(yōu)品的推薦列表寞忿，如果該商品只有一種sku驰唬，那么點擊購買按鈕直接加入購物車；如果該商品有多種sku腔彰，那么點擊購買按鈕就會彈出規(guī)格選擇面板叫编。

D.其他頁面

在訂單中進行規(guī)格修改更不常見，但以筆者所在的校服電商行業(yè)為例霹抛，因為校服屬于預(yù)售商品（家長付款后搓逾，校服廠商在根據(jù)尺碼安排生產(chǎn)和發(fā)貨），原則上只要沒進入生產(chǎn)環(huán)節(jié)杯拐，就應(yīng)該允許用戶修改尺碼信息霞篡。在退款功能不完善時，我們公司的校服訂單列表和訂單詳情在廠商未導出生產(chǎn)單前都是支持修改尺碼的端逼。在未來也可以考慮在客服頁面增加規(guī)格選擇/修改入口朗兵，方便及時溝通修改。

2.基本組成元素

經(jīng)過收集整理各大知名電商APP的規(guī)格選擇面板顶滩，得到下圖余掖。一般來說，規(guī)格選擇面板主要包括以下幾類：

商品信息：包括商品圖片礁鲁、商品名稱盐欺、商品編號赁豆、剩余庫存；

商品價格：單價找田、價格區(qū)間歌憨、原價（劃線價）；

規(guī)格屬性選項組：包括多種屬性和屬性值墩衙，如顏色务嫡、尺碼、內(nèi)存漆改，單規(guī)格商品無需顯示心铃；

幫助信息：如尺碼選擇幫助；

數(shù)量選擇：單個用戶限購規(guī)則挫剑、數(shù)字加減按鈕去扣；

配送信息：當前位置，可手動更改樊破，與庫存和配送息息相關(guān)愉棱；

特色服務(wù)：增值保障服務(wù)，如聯(lián)保哲戚、保修奔滑、延保、洗護顺少、意外保護等朋其；其他服務(wù)，如上門貼膜脆炎、電池換新等梅猿；

支付/購買方式：比如淘系可使用花唄；手機可以用合約機方式購買秒裕；

優(yōu)惠信息：該商品適用的優(yōu)惠券袱蚓、折扣、滿減等几蜻；

其他操作元素：遮罩層癞松、關(guān)閉按鈕；確定按鈕入蛆；立即購買和加入購物車按鈕响蓉；

3.面板的位置、形狀與尺寸

位置

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

左邊的京東優(yōu)選屬于微信小程序，直接將規(guī)格選擇面板內(nèi)嵌于商品詳情頁想幻，可直接選擇規(guī)格粱栖，且支持展開收起。中間的是網(wǎng)易考拉脏毯，是最常見的彈出型面板闹究。右邊的是唯品會，同時使用了兩種方式食店，如果商品基本信息下方相應(yīng)的屬性都選擇了渣淤，點擊“加入購物車”就會把該規(guī)格的商品加入購物車；如果未選擇內(nèi)嵌面板的規(guī)格或只是選擇了部分屬性吉嫩，點擊“加入購物車”就會彈出規(guī)格選擇面板价认，以便用戶把剩余的屬性選擇完整。

形狀

規(guī)格選擇面板的形狀可以分為兩大類：凸起形和平頭形自娩。相比而言用踩，平頭形（下圖京東）比凸起形（下圖天貓）的空間利用率更高，但略顯呆板忙迁。還有一類異形脐彩，如下圖的蘇寧易購，整個面板和屏幕邊框之間有一定縫隙姊扔，符合圓角設(shè)計趨勢惠奸。

尺寸

面板尺寸和屏幕適配的關(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ī)格并不多蓬蝶，并不需要過大的面板。

4.設(shè)計技巧

圖片展示技巧

基本注意點包括：使用默認占位圖應(yīng)對弱網(wǎng)環(huán)境下圖片加載慢的情況猜惋；圖片可點擊放大查看丸氛，并支持手指捏合縮放；當前圖片和規(guī)格選中項之間的聯(lián)動著摔。除此之外缓窜，調(diào)研過程中還發(fā)現(xiàn)淘寶的設(shè)計很是新穎，值得借鑒，聚美優(yōu)品也采用相似設(shè)計禾锤，如下圖私股。當在規(guī)格選擇區(qū)域向下滑動時，觸發(fā)大圖模式恩掷，且可以左右滑動以對比查看其它規(guī)格的圖片倡鲸，上滑又切換回小圖模式。點擊圖片可以全屏看圖黄娘，且在每張圖片下方會顯示相應(yīng)的規(guī)格說明峭状，可輔助加深用戶的瞬間記憶。

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

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

選項的視覺修飾方法涵蓋了填充、描邊稿壁、反白幽钢、大圓角、角標等傅是，都是為了區(qū)分已選匪燕、未選和不可選狀態(tài)。這其中也發(fā)現(xiàn)了不少驚喜：京東采用了“置灰文字+中劃刪除線”表示不可選喧笔，考拉海購使用虛線表示不可選帽驯，天貓和唯品會使用縮略圖對選項進行了點，唯品會甚至對無貨商品加了來貨提醒功能书闸。

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

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

更高的空間利用率

由于各種產(chǎn)品運營策略的加入，規(guī)格選擇面板中的內(nèi)容越來越多谈秫，垂直滾動就顯得有點直接生硬扒寄。常見做法有展開/收起和橫向滑動∧馓蹋可參考下圖蘇寧和天貓的做法该编。

更少的操作步驟

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

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

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

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

5.設(shè)計實例

對于服裝類、鞋類商品尝江，一般會提供尺碼推薦涉波、尺碼助手英上、查看完整尺碼表功能炭序，無論對用戶還是對賣家都是極好的，用戶可以更準確方便的選擇尺碼苍日，商家也減輕了客服工作量惭聂，更可以避免不必要的退換貨。這里舉了天貓和網(wǎng)易嚴選的例子供大家參考：

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

以筆者所在校服行業(yè)為例，傳統(tǒng)校服訂購大都采用線下量體的形式耕腾，為應(yīng)對學生快速發(fā)育的情況见剩，尺碼往往偏大，家長也傾向于選擇較大尺碼扫俺，結(jié)果導致到貨的尺碼更不準苍苞。校服品類也比較固定，一般包括運動服春秋裝狼纬、運動服夏裝羹呵、運動服冬裝、制服春秋裝疗琉、制服夏裝冈欢，而運動裝一般都是男女同款。同時校服行業(yè)魚龍混雜盈简，不是所有廠商都有獨立開發(fā)尺碼的能力凑耻，所以他們一般會采用行業(yè)內(nèi)通用尺碼生產(chǎn)，但這些尺碼并不規(guī)范柠贤。這次設(shè)計的目標是智能化選碼拳话，就是通過輸入相應(yīng)身體參數(shù)，系統(tǒng)自動計算并匹配尺碼种吸。如果匹配失敗弃衍，則按照提交的數(shù)據(jù)進行定制生產(chǎn)。另外坚俗，收集學生身體數(shù)據(jù)也是為了不斷修正平臺尺碼镜盯。

平臺通用尺碼：

家長可以通過閱讀商品詳情，結(jié)合孩子實際身高體重直接選擇合適的尺碼猖败；也可以輸入身高體重速缆，自動計算獲得推薦的正常尺碼。如果正常尺碼無法滿足恩闻，則繼續(xù)輸入胸圍艺糜、腰圍等信息，以便通過計算獲得特體尺碼推薦幢尚；如果仍不滿足破停，還有最后的定制尺碼。缺點在于這套尺碼號段過多尉剩，而一般校服都是針對不同學校推廣的真慢，過多的尺碼反倒讓家長難以選擇。

廠商自定義尺碼：

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

小結(jié)

本文主要從用戶和設(shè)計技巧的角度總結(jié)了商品規(guī)格選擇彈窗設(shè)計中的要點朗鸠，而真正設(shè)計過程中蚯撩，還要了解平臺中各商品品類的規(guī)格特征，進行針對性設(shè)計烛占。此外求厕，還需要為商家設(shè)計易于操作的后臺系統(tǒng)，方便商家維護商品規(guī)格扰楼。