起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識商品展示列表——大圖、多圖、圖文列表該如何選擇？
本文分別針對大圖展示、多圖展示、圖文列表進行舉例分析，希望能夠讓大家在做APP時能夠快速確定商品列表的樣式。
這篇文章在我所寫文章里面，耗時最長，不是因為它很復雜，而是要寫清楚它的可操作性確實是一件不易的事情，這里要感謝為我指出文章問題的@劉清@W.T.Y；同時要感謝在我茫然不知如何下筆時為我提供幫助的小伙伴@角馬@小溜Epik@橙子的橙子。
以下是正文部分，大家有疑問可隨時留言。
618我去逛了淘寶，本來是想去看看衣服，于是輸入了“半裙”，然后選擇了他推薦的關鍵詞“半裙女下2018新款”，就出現了篩選列表，我習慣的分別看了各個分段控件（全部、天貓、店鋪、淘攻略、挑尖貨），發現其展示效果還不一樣。
例如：全部一欄和天貓一欄都采用雙圖展示；而挑尖貨則采用大圖展示。因此，猜測不同品類的商品展示效果也應該不相同。
于是我又分別輸入了《最好的UI設計師》一書，發現其展示效果和衣服的展示效果果然不同，其全部一欄展示效果采用的列表式設計，天貓和挑尖貨和衣服類的樣式保持一致。
懷著研究的精神我再次輸入了“蘋果”，出來的是蘋果手機其可以歸類到數碼類，這次全部和天貓的展示效果均采用了圖文列表的形式。
看完了之后就進入今天的主題，大家一起來想一下，為什么同樣是淘寶的產品其展示效果不同呢？
當然你會說我們的產品相對單一，不用考慮得像淘寶那樣復雜，但是你知道商品展示列表有大圖展示、多圖展示、圖文列表，你在做的時候又該選擇哪種展現方式呢？
下面我們分別針對大圖展示、多圖展示、圖文列表，希望通過分析大家在做APP時能夠快速確定商品列表的樣式。
一、大圖展示
大圖展示是指一行只展示一張圖片，由于其圖片占比較大，因此往往一屏只能展示1到2張，適合以圖片為主單一內容瀏覽型的展示。大圖也可以分為通欄和非通欄。
通欄展示可以展示更多的信息；非通欄也就是我們說的卡片，其視覺表現力更強，同時它可以將一個模塊內的信息集合起來，比較適合活潑年輕類的App。
優勢：
1. 呈現細節更豐富
圖片小，往往看不清細節，需要點進商品詳情進行瀏覽，因此，圖片大細節展現更豐富，即使不點進詳情頁能夠清晰的查看商品。
以2列圖片的嚴選和采用大圖展示的挑尖貨為例，同樣采用界面較為簡潔的摳圖形式，但是采用大圖的挑尖貨明顯圖片更大，我們看到的商品細節也就更多，給人的視覺感受也更強烈，從而提高轉化率。
2. 有利于信息的有效傳達
圖片小或者一屏采用多列的形式時，一些不搶眼的圖片就容易被忽略，容易錯過有用的信息。
采用大圖的展示方式就可以避免這個問題。這是由于大圖展示視線是從上向下的，不容易被忽略，從而有利于信息的有效傳達。
左側是嚴選3列圖展示，右側是懶人周末大圖展示，我們可以看出采用小圖展示的嚴選列表人們的瀏覽視線從左到右，然后從上向下呈現一個Z字形。
在用戶快速瀏覽時很容易被忽略掉。右側懶人周末采用大圖展示，其瀏覽視線直接是從上向下，同時圖片大，展示細節多，傳遞的信息就越多，往往看到圖片大概就能決定是否感興趣。
3. 商品數量少時，可豐富界面效果
如果你的商品圖片較少比如只有二三十個，那么采用多圖或者列表展示翻幾頁就沒有了。
采用大圖展示可以讓商品列表看上去更飽滿。
例如：懶人周末的今日推薦和嚴選的識物，在展示數量上都比較有限，采用大圖展示會讓整個界面更加豐富。
值得注意的是，采用大圖設計往往對圖片的要求較高，如果你的商品質量差，或者商品圖片為第三方提供，從而圖片質量無法保證時，建議不要采用大圖展示。
左側我將愛彼迎原有的圖片換成一般旅館的圖片，你發現瞬間品質感降低，往往這種價格便宜的旅館的用戶人群更喜歡去對比價格和各種參數，因此采用大圖設計并不是很適合。
缺點：
1. 頁面空間的消耗大，一屏可展示信息少
移動屏幕寸土寸金，采用大圖比例一屏只能展示1-2個內容模塊，一屏信息太少，比較商品很不方便。因此如果你的商品列表式想要讓快速閱讀和購買那么最好不要采用大圖展示。
2. 不適合信息查找
大圖展示更加注重不同內容模塊之間的排版，很少考慮它們之間的先后次序或重要程度。
另一方面，由于圖片過大，信息查找就較慢，在重點突出某項內容或方便用戶查找方面比較遜色。相對而言，多圖展示和圖文列表式可以更好的迎合用戶這一瀏覽特點，可對內容作重點突出。
二、多圖展示
多圖展示是指一行并排展示二張或三張圖片，其中雙圖展示使用較為常見，你打開視頻、電商類的App大多都是這樣的展示方式。
三圖展示在列表中相對較少，往往是在首頁中以某個推薦形式展現，其主要是盡可能多的展示商品。
下面以一屏2張圖的商品展示為例來具體分析：
優勢：
1. 利于圖片類商品的對比選擇
圖片往往更能吸引用戶，因此多圖展示對于以轉化率為目的商品，更具有優勢。賣貨的商品你采用大圖列表顯然不太適合，它會浪費很多時間用于瀏覽，然后采用多圖的展示方式，在一定時間下，可瀏覽更多的商品。
比如：愛彼迎和嚴選我們可以通過圖片確定商品是否有興趣，然后通過關鍵文字信息，可以快速滑動選擇自己喜歡的商品。
2. 頁面空間的消耗小，一屏可展示信息多
時間就是金錢，你需要盡量短的時間讓用戶對比更多的商品。
多圖列表其展示商品數往往是大圖展示的2倍。
比如：嚴選的大圖展示和下廚房的多圖展示，左圖是2個商品，而右圖是4個商品，明顯多圖展示展示數量更多。
3. 適用于圖片對比為主的商品
在淘寶里輸入衣服、鞋、書出來的展示效果均為多圖展示，其主要原因是衣服、鞋都是需要通過圖片對比進行樣式對比從而購買。
缺點：
1. 圖片呈現細節不如大圖豐富
圖片越小呈現的細節越不豐富，因此當商品采用多圖展示，當你發現感興趣的商品時，需要點擊詳情才能看到商品細節。
2. 圖片信息傳遞較弱
當商品一屏展示2列或者3列時，圖片越小，被忽略的可能性就越高，因此你會看到在商品列表往往很少出現3列的商品樣式。
三、圖文列表
圖文列表可以是左圖右文，也可以是左文右圖，但在商品展示中往往使用左圖右文的方式。在電商團購類的產品中較為常見。
優勢：
1. 有利于文字信息的瀏覽
圖文列表以從上向下貫通的形式展現，圖片往往較小，視覺流程往往是從上向下，更利于信息快速的掃視，利于商品之間的快速對比，往往適合于以文字為主的商品列表。
左圖淘寶我搜索“蘋果”其展示效果和搜索衣服完全不同，其采用列表的形式，其主要目的就是進行介紹信息的對比。右圖淘票票同樣的電影圖片只是起到視覺引導作用，我們真正進行對比讓我們下單的還是這些介紹信息。我們可以通過快速掃描這些信息來決定是否有自己想要的產品。
2. 可展示更多促銷信息
采用圖文列表往往商品圖片不太重要，因此圖片尺寸往往較小，而右側的文字信息，比如：介紹信息、促銷信息是用戶購買的只要指標。
圖文列表的一大優勢就是，添加或者減少促銷信息和標簽時，對界面影響較小。
缺點：
1. 視覺樣式單一
圖文列表在界面樣式上較為單一，不如大圖展示、多圖展示的視覺效果好。因此不太適用于以圖片為主，或者用戶需要對比圖片的商品中。
2. 信息過多，容易導致視覺疲勞
圖文列表往往圖片較小，文字較多因此長期瀏覽容易造成視覺疲勞，因此可考慮一個列表采用多種形式進行展示。
例如：淘寶搜索“蘋果”手機，淘寶會推薦一個最適合的展示樣式，然后如果你想換成多圖展示也是可以的，點擊篩選欄上的多圖展示按鈕即可。
四、總結
通過上面的分析，大致可以總結為：大圖展示、多圖展示、圖文列表的區別分別在于圖片質量要求高低；商品對比快慢；圖片信息傳達高低。
因此，商品列表展示主要根據產品屬性決定，同時根據我們實際要求來進行列表選擇：
- 大圖展示：圖片質量要求高；但是商品對比速度慢；圖片信息傳達高。往往適合文藝類商品或推薦商品展示。
- 多圖展示：圖片質量要求較高；商品對比速度較高；圖片信息傳達較高。因此目前大多數商品列表均采用多圖的形式：
- 圖文列表：圖片質量要求低；商品對比速度高；圖片信息傳達低。適合文字信息對比為主的商品。
參考：
《通用設計法則》留白恐懼128頁
《方寸指間》細節設計-圖片布局 69頁
《我用這個極限推敲法，有效推進視覺設計》https://www.uisdc.com/limit-push-method-to-promote-visual-design
作者：風箏KK，公眾號：海鹽社
本文由 @ 風箏KK 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自 Unsplash ，基于 CC0 協議
- 目前還沒評論，等你發揮！
