先來介紹一下江蘇泛渠道產(chǎn)品「智慧門店+」小程序，它是由江蘇移動打造的新一代門店線上線下立體式協(xié)同支撐體系，實現(xiàn)門店數(shù)字化、多元化轉(zhuǎn)型升級的平臺。經(jīng)過復(fù)盤總結(jié)，目前的商品列表存在以下問題：
1. 商品卡片排版形式單一
2. 商品標(biāo)簽待豐富，標(biāo)簽位置及形式待整合
3. 商品列表布局形式單一
4. 商品卡片的購物車按鈕是否冗余
5. 商品文字冗余及缺乏情感
要想改變現(xiàn)有商品列表設(shè)計中的痛點，我們就必須對商品列表的原理及競品設(shè)計做一次綜合的分析和梳理。
商品列表是用戶挑選商品，決定是否購買或使用的關(guān)鍵頁面，合理、人性化、個性化的布局方案、不僅能提升用戶的視覺體驗，同時還能提高用戶的操作、購物體驗。如果把商品列表看成一段分子式，商品卡片就是一個個原子，列表的排列形式就是分子的組成結(jié)構(gòu)，他們都很重要，我們也將從這兩個部分著手，來看看商品列表的設(shè)計如何提升購物體驗。
首先，卡片作為一個獨立的容器，可以在內(nèi)容上進行良好的布局組織，將信息分塊，突出重點，讓用戶快速找到感興趣的內(nèi)容，避免在繁雜的信息集中浪費時間。通過對標(biāo)競品分析，電商除了商品卡片之外，還可以承載商品的頻道、主題，榜單，關(guān)鍵詞，品牌，類目以及各種運營內(nèi)容等，但其他的卡片種類在我們的小程序產(chǎn)品中還不存在，因此我們今天只單純的從商品卡片來整理分析。
那么一個電商商品卡片上都有哪些元素呢？我們對標(biāo)大量競品，羅列出以下內(nèi)容：
「 商品圖片、品牌標(biāo)簽、國家、產(chǎn)地、標(biāo)題、副標(biāo)（介紹）、服務(wù)標(biāo)簽、促銷標(biāo)簽、發(fā)貨地、好評率、價格、原價、劃線價、會員價、銷售量、購物車icon、更多icon、看相似、推薦理由 」等。
將它們按重要性組織布局，組成一個友好且連貫、整齊且統(tǒng)一的內(nèi)容體，并可以隨著分類導(dǎo)航欄目的切換，變化其內(nèi)容和形式，才能給用戶更加人性化的購物導(dǎo)向及體驗上的新鮮感。下面讓我們把這些元素按照關(guān)聯(lián)性進行分組分析。
A 商品圖片
電商類的APP，由于圖片直接決定用戶的點擊量，雖然圖片的尺寸不盡相同，但往往都會采用1 : 1的這種可將圖片展示最大化的方式。
B 商品卡片元素的排版
這就要說到視覺動線了，視覺動線作為我們控制用戶的移動模型，作為設(shè)計師我們需要通過設(shè)計元素的擺放位置，來刻意引導(dǎo)用戶瀏覽的動線，從而達到刺激購物的目的。我們今天討論其中的兩種視覺動線：F型和Z型。
△ Z型視覺動線
「Z型」顧名思義，從左上角開始到右上角，保留著從左到右的習(xí)慣，眼睛會尋找到最后部分，尋找到頁面的底部。
△ F型視覺動線
上圖是由尼爾森諾曼研究發(fā)現(xiàn)的「F型」視覺動線，發(fā)現(xiàn)用戶傾向于一種 F 模式去查看網(wǎng)站。在移動端，屏幕要小的多，每個產(chǎn)品的內(nèi)容和形式都不一樣，但是用戶都是做著同樣的事情，甚至在小到一個商品卡片的范圍內(nèi)，所以在做設(shè)計時候，我們就需要去思考如何運用用戶這種習(xí)慣去構(gòu)建設(shè)計結(jié)構(gòu)。
按照這種視覺動線，撇除商品圖片，我們對標(biāo)各大電商的豎版商品卡片也得出一個大致的模型：
△ 各大電商豎版商品卡片視覺動線 1. F型
第1行：品牌標(biāo)簽+商品名稱
第2行：促銷標(biāo)簽，如滿減、限時購、秒殺、特價、免息等。
第3行：價格+更多icon / 看相似icon，icon一般設(shè)為灰色
2. Z型
第3行：價格+購物車icon，一般用突出的主色調(diào)顏色來著重強調(diào)，刺激購物欲。
更多附帶的信息則可能會往下繼續(xù)另起一行，或者附屬在這些信息之后，例如榜單信息或劃線價等等。重要的信息一般都擺放在這幾個關(guān)鍵位置。
3. 特殊Z型
特殊Z型，也相當(dāng)于我們一般排版形式中最普遍的居中排版，是非常穩(wěn)定的一種設(shè)計結(jié)構(gòu)，一般用于交替的電商購物節(jié)等活動分欄目的排版。
總結(jié)一下：基于以上的模型，在不同的場景，不同的欄目分類里，我們?nèi)孕枰鶕?jù)用戶的購物需求來定位哪一種元素該排在上面，例如在沒有品牌標(biāo)簽的普通欄目里，則放的是最希望用戶看到的標(biāo)簽，如：購物節(jié)活動標(biāo)簽、推薦等商品標(biāo)簽。根據(jù)不同的類目，第2行的促銷標(biāo)簽，在沒有促銷活動時，也會換成賣點標(biāo)簽、銷售量、屬性標(biāo)簽等。在活動節(jié)排版中，最后一行可能不放購物icon，而是具體滿減折扣等。我們通過組織與排版各種形式標(biāo)簽，來實現(xiàn)智慧選品、智能供貨、導(dǎo)購?fù)扑]，提升用戶的購物體驗。
C 商品卡片元素的設(shè)計樣式
除了商品圖片外，根據(jù)關(guān)聯(lián)性，我們可以將其他元素大致分為3類：標(biāo)簽、購物車 | 看相似 | 更多icon、價格&銷量，下面將從這幾個范圍來進行分析。
1. 不同種類的標(biāo)簽設(shè)計樣式
目前的商品標(biāo)簽可以分為以下幾種：a 品牌標(biāo)簽、b 活動級標(biāo)簽、c 促銷標(biāo)簽、d 屬性級標(biāo)簽，這些標(biāo)簽在每個電商產(chǎn)品中都有各自的一套設(shè)計體系，對標(biāo)競品電商后發(fā)現(xiàn)有一些規(guī)律可循。
① 品牌標(biāo)簽與活動標(biāo)簽一般采用有強烈底色，文字反白的形式。而活動標(biāo)簽一般使用重新設(shè)計后的藝術(shù)字以作區(qū)分。
② 促銷標(biāo)簽一般使用有主題色的線框包起來的文字展現(xiàn)。
③ 屬性級標(biāo)簽的形式不一，有直接文字展現(xiàn)，有的以不影響整體色調(diào)的灰色線框+文字展現(xiàn)。這種標(biāo)簽一般在用戶有強目的性，對比購物時起到提醒作用，因此以較弱形式展現(xiàn)。
△ 京東、淘寶、蘇寧易購標(biāo)簽樣式對標(biāo)
2. 購物車 | 看相似 | 更多icon的使用場景及設(shè)計樣式
① 三種按鈕的使用場景
視欄目情況而定，一般電商主頁的默認欄目“精選推薦”等都是一個大雜燴一般的存在，在這里，任何品類任何價格的產(chǎn)品都有可能出現(xiàn)，因此給出最普適的“看相似”按鈕或不添加按鈕是最為恰當(dāng)?shù)倪x擇，也可以幫助用戶更快速的找到自己想要的東西。而京東的產(chǎn)品列表右上角的“小叉叉”，淘寶右下角的“點點點”，都是用戶在看到不喜歡的商品時，可以關(guān)掉該商品推薦，或是像淘寶直接出交互彈屏，給出更多選擇的功能，這同時也是一種獲取用戶喜好個性的方式。
從消費者心理來說，一般人們對價格高的商品抱有更謹慎的購買態(tài)度，只有這樣低價的商品，消費者才可能會在列表頁就做購物決策。對標(biāo)淘寶、京東等，也只是在便宜好貨、超值優(yōu)惠等分類下的商品卡片，或者是京東優(yōu)惠、盒馬生鮮、蘇寧小店等所有商品價格本身就低廉的卡片中，右下角才會是購物車icon。而像手機這種需要比對參數(shù)，仔細選購的商品，除非消費者對手機數(shù)碼商品十分了解，或者價格過分優(yōu)惠，一般都要點擊商品詳情頁才能下購物決定。
② 設(shè)計的樣式
由于放購物車icon的目的，就是刺激購物下單，用主色調(diào)打底的面圖標(biāo)始終是最普遍的選擇，在卡片的視覺動線中，也可成為一個視覺的重心和著落點，有效引導(dǎo)用戶。而更多icon與看相似一般都是以不影響整體效果的灰色并簡化設(shè)計。
3. 不同購物場景下的價格&銷量是如何設(shè)計的？
這是個讀圖的時代，只看商品主圖往往已經(jīng)能對商品了然于心，名稱只是起到輔助的作用，但價格永遠是消費者最關(guān)注的點，特別是在以超值的價格作為主要賣點的欄目中，銷量、價格越是會重點突出設(shè)計。
以淘寶舉例來說，如下圖，卡片1是淘寶精選欄目，卡片2是便宜好貨欄目，卡片3是最新一次更新后的便宜淘貨欄目，價格元素也是一再強調(diào)，從原有的36px變成了42px，從中黑變成加粗，最后還做了面圖標(biāo)形式的反白效果。而銷售量標(biāo)簽從原來的灰色24號，排列在卡片最底部的視覺盲區(qū)，調(diào)整到了商品名稱下的視覺中點，文字上也從原有的xx人付款調(diào)整成已售xx件這種更能刺激購物欲的語言。
△ 淘寶銷量與價格各欄目對標(biāo) 
說完了細節(jié)，我們來從宏觀的布局形式上來扒一扒什么樣的布局更適合電商列表呢？
電商商品列表一般分成 [ 列表布局 ] 和 [網(wǎng)格布局 ] 兩種表現(xiàn)形式，其中網(wǎng)格布局的形式中，又分成 雙列網(wǎng)格布局、單欄網(wǎng)格布局，那么我們就來聊一聊這幾者的區(qū)別在哪里，各自的利弊又在哪里，具體什么場景用橫版什么時候用豎版。
△列表布局&網(wǎng)格布局
A 列表布局
列表布局也就是我們常見的圖文列表，垂直呈現(xiàn)多個連續(xù)的橫向行元素。一般分為左圖右文或左文右圖的形式。
優(yōu)勢
列表布局遵循自上而下的閱讀模式，有利于商品信息的對比；
同時一屏可展示產(chǎn)品數(shù)最多，信息密度最高。
缺點
重在文本內(nèi)容，因此圖片尺寸較小，圖片細節(jié)展示不豐富；
趣味性和新鮮感較差，瀏覽時間過長會出現(xiàn)視覺疲勞。
什么時候使用？
當(dāng)商品圖片質(zhì)量不高，商品數(shù)量較多，對圖片不敏感的商品，需要通過優(yōu)惠信息、價格參數(shù)等來進行對比。另外對界面效果要求較低時，我們可以采用橫版列表布局。適用于型號參數(shù)等文字描述為主要選擇因素的品類，比如手機，以規(guī)格型號參數(shù)為主要決策因素。
B 網(wǎng)格布局
1. 單欄網(wǎng)格布局
單欄網(wǎng)格，也就是指一行只展示一張圖片，用戶可直接根據(jù)圖片進行商品對比。最常見的使用場景就是以圖片為主的APP推薦列表。
優(yōu)勢
圖片有最大的展示空間，細節(jié)清晰展現(xiàn)，體現(xiàn)精致感；
擴展性強，不需要所有商品一致，不會有混亂感。
缺點
由于其圖片占比較大，因此往往一屏只能展示1到2張，信息密度最低。
什么時候使用？
一般用于商品數(shù)量較少時，或用于強調(diào)主推單品，適合服裝飾品等以圖片視覺為賣點來引導(dǎo)用戶消費的場景，或個性化推薦。
2. 兩列網(wǎng)格布局
兩列網(wǎng)格布局也就是將屏幕一分為二，上圖下文的雙欄網(wǎng)格式，用戶的視覺動線形成一個Z字，因此產(chǎn)品都能均衡的被用戶看到。
優(yōu)勢
圖片占比較高，從產(chǎn)品細節(jié)展示來說，比列表布局更豐富；
相比于大圖展示，一屏可展示更多的商品，有利于信息的對比，信息密度較高；
除了單品，電商還會在布局中加入各種營銷分類入口形式的卡片，趣味性和新鮮感較強。
缺點
不利于需要重點了解或?qū)Ρ壬唐沸畔ⅰ?/span>
什么時候使用？
如果產(chǎn)品是以圖片對比為主，同時又不需要大圖展示，或用戶目標(biāo)不明確的品類，因此一般電商的主頁商品列表都采用這種形式，應(yīng)用最為廣泛。
C 兩種列表布局如何選擇？
通過多次的布局測試表明：在主頁和類別頁面中，其中大多數(shù)參與者在瀏覽和查看他們可能想要的商品詳情時，更喜歡用網(wǎng)格視圖，這又是為什么呢？還記得我們上文所說的視覺動線嗎？Z字視覺動線有一個特殊的變異結(jié)構(gòu)，這種特殊Z布局叫「之」字型布局，我們可以理解為 Z 的重復(fù)排序，有一些的 Z型布局出現(xiàn)，用戶的路線，從左到右，再開始從左到右，這種有一個 Z 運動的瀏覽奇觀我們叫做之字型動線。兩列網(wǎng)格正好制造出Z字型視覺動線，有利于用戶的長時間瀏覽。
△「之」字型布局
同時網(wǎng)格視圖更突出圖像本身，首先通過對圖像的了解，再查看其它更詳細的信息，是用戶在電商產(chǎn)品中的主要使用習(xí)慣。與其相反，列表視圖用于搜索結(jié)果展示頁更受用戶的歡迎，很多電商APP也都會根據(jù)用戶習(xí)慣，在搜索頁提供在這兩種形式之間進行切換。
總而言之，針對不同的分類模塊，我們需要在相關(guān)頁面給出更加合理的視圖才能夠有效的提示購物體驗。如盒馬生鮮中，用戶對時令水果的篩選主要來源于文字信息上的差別，較少通過圖片來判斷，故而采用了左圖右文的形式，而進口水果，由于優(yōu)質(zhì)水果圖片的吸引力更大，因此采用的是上圖下文的形式。
以江蘇泛渠道小程序產(chǎn)品為例，熱銷、新品、爆款、5G這些商品級標(biāo)簽，在原有版本中由于標(biāo)簽過少，為了不讓整體頁面顯得“空空蕩蕩”，都設(shè)計成大圖標(biāo)打在左上角。
但對標(biāo)淘寶、京東，這些標(biāo)簽都是在文字區(qū)單獨做為一個標(biāo)簽展示，并沒有放到主圖的左上角或右上角（如下圖）。除了自營品牌，商品圖片可以自己統(tǒng)一設(shè)計，更多的則是由各個商家自行設(shè)計上傳的，也會受到節(jié)日的促銷等因素的影響變得十分繁雜。這一點與智慧門店+小程序產(chǎn)品十分相像，我們的商品主圖不確定性很多，考慮到日后產(chǎn)品的擴展性，如果再將這些商品標(biāo)簽打在主圖上，則會影響商品圖片的視覺效果，用戶也無法直接get到商品，又如何能愉快的購物呢？
△ 淘寶、京東屬性、新品、熱銷標(biāo)簽對標(biāo)
并且在加入了“限時購”、“預(yù)售”、“拼團”等活動標(biāo)簽后，我們商品卡片的標(biāo)簽展示形式也急需一次統(tǒng)一的整理和收攏。
基于上文的競品分析與理論探索，此次改版我們做了以下調(diào)整：
1. 所有的商品標(biāo)簽“爆款”、“熱銷”、“新品”、“5G”統(tǒng)一收攏到商品名稱的左側(cè)。
2. 活動標(biāo)簽是會對產(chǎn)品的價格產(chǎn)生影響的元素，跟價格最好打包出現(xiàn)，因此統(tǒng)一顯示在價格后。
3. 劃線價與銷售量排在一行，如無劃線價，則只展示銷量，文字也由無感情色彩的“銷量”改具更煽動力的“已售”。
4. 對右側(cè)將購物車按鈕也做了優(yōu)化，原來的按鈕購物車圖標(biāo)不明顯，調(diào)整后更加清晰，而拼團則是改為中間有“拼”字的購物袋樣式圖標(biāo)，預(yù)售則換成有“去預(yù)定”字樣的圖標(biāo)。圖標(biāo)的色系也與各自的主頁色系相統(tǒng)一，讓用戶能更好的聯(lián)系和對應(yīng)，從而提升購物體驗。
5. 針對限時購和預(yù)售，設(shè)計了對應(yīng)的商品主圖，增加活動商品在整體商品列表中的曝光率。
整體而言，商品與活動標(biāo)簽的數(shù)量與種類增加了，文字區(qū)的卡片空間卻從原有的204px縮減到170px，增加了利用率，從而展示更多的商品。
結(jié)語：
一種商品卡片設(shè)計走天下的思維已經(jīng)不能滿足現(xiàn)有電商豐富多樣化的商品分類與運營需求，精細化的用戶定位+個性化的商品列表設(shè)計=高效精準(zhǔn)的用戶引流，從而將用戶想要的東西傳遞到他的面前，幫助引導(dǎo)用戶做購物決策、提升購物體驗、促進用戶買單。
參考文獻：《人人都是產(chǎn)品經(jīng)理》
參考產(chǎn)品截圖：京東、淘寶、蘇寧易購、網(wǎng)易嚴選、京喜小程序、京東購物小程序
Powered by Froala Editor
大牛，別默默的看了，快登錄幫我點評一下吧！:)
登錄 立即注冊