幾何

辽宁35选7开奖哪个台 www.duulp.com 在設計產品列表時,一些同學就遇到不知道如何選擇布局樣式的問題。最后大家的解決方案大多是參考競品,覺得樣式不錯就用到自己的產品中,它是否合適并不清楚。本文歸納了常見的六大布局樣式,即列表、大圖網格、兩列網格、兩列瀑布流、兩列拼圖、三列網格布局,通過對他們優缺點和使用場景的分析,從而掌握在什么情況下采用何種布局方式。

 

列表布局

列表布局也就是我們常見的圖片列表,主要由商品縮略圖和多個文字信息組合而成,列表布局重在文本內容,對于圖片的質量要求不高,主要為了起到視覺引導的作用。

優勢是,遵循自上而下的閱讀模式,有利于信息快速的掃視和對比;空間占比小,一屏可展示更多的商品;拓展性好,可展示更多促銷信息。

缺點是,圖片尺寸小質量差,細節展示不豐富;樣式單一、趣味性差;由于信息量過大,長時間瀏覽會引起視覺疲勞。

大眾點評和淘票票都可以算團購類商品,用戶在購買時不會看商品圖片是否好看,決定用戶購買的關鍵是這個商品是否是用戶需要的,因此在列表布局中,標題、產品參數、促銷信息是用戶比較關心的點。

什么時候使用?

當你的產品圖片質量不高;產品數量較多;需要通過優惠信息、價格參數等來進行對比;對界面效果要求較低時,我們可以采用列表布局。

 

大圖網格布局

大圖網格布局一行只展示一張圖片,由于圖片占比較大,因此一屏只能展示1到2張;在設計上它可以分為通欄和非通欄設計,通欄可展示更多的信息;非通欄也就是卡片風格其視覺表現力更強,多用于以圖片瀏覽型為主的產品。

優點是,圖片占比大,可以展示更多的商品細節和豐富界面效果,同時至上而下的瀏覽順序,有利于信息有效傳達。

缺點是,頁面空間的消耗大,一屏可展示內容少,不利于信息的查找和對比。

螞蟻短租和懶人周末分別是短租和生活類APP,其共同點是用戶在使用時主要通過圖片決定是否購買,采用大圖布局可展示更多的細節,幫助用戶瀏覽,提升整體的界面效果。

什么時候使用?

當你的產品數量較少,圖片有專人維護,需要突出品牌感時,我們就可以采用大圖展示,大圖展示往往視覺效果好,多用于圖片類、租房類、商品推薦等列表中。

 

兩列網格布局

兩列網格布局也就是將屏幕一分為二,圖片和文字進行上下展示,類似一個網格,瀏覽次序類似一個Z字,因此產品都能均衡的被用戶看到,該布局圖片占比較大,對圖片質量要求較高,適用于圖片對比為主的商品。如下圖所示:

優點是,利于圖片類商品的對比選擇;頁面空間消耗小,一屏可展示4到6條信息;視覺效果較好。

缺點是,文字信息展示少,只能展示商品標題、價格、標簽等參數,當界面信息過多時界面會顯得凌亂。

Keep商城和嚴選產品列表,雖然產品有所不同但是都是都需要通過圖片對比進行選擇,從產品細節展示來說比列表布局更豐富,從產品信息對比來說,比大圖更便捷,因此目前兩列網格布局應用較為廣泛。

什么時候使用?

如果你的產品是以圖片對比為主,同時又不需要大圖展示時,即可采用該布局進行設計。兩列網格布局往往和列表布局會一起使用。

 

兩列瀑布流布局

兩列瀑布流布局也就是將屏幕一分為二,和常規布局類似,其中圖片的寬固定,高隨圖片的尺寸變化而變化,相比于兩列宮格布局,瀑布流布局采用不規則的Z字布局,適用于產品數量較多,用戶目標不明確的情況下使用。如下圖所示:

優點是,可根據圖片比例自適應高度,圖片的細節表達更有力;產品展示數量多,用戶在使用時可以無限下滑。

缺點:采用預加載的實現方式,不能預估產品多少,在瀏覽時產品圖片大小不一,大圖很容易被記住,而小圖很容易被忽略。

在匯總時我發現現在很多APP列表都采用了瀑布流的形式,比如小紅書和淘寶,它們均是以圖片展示為主,同時圖片多為第三方上傳,圖片質量不統一,產品數量較多,采用瀑布流提升了界面的趣味性,避免用戶視覺疲勞。

什么時候使用?

兩列瀑布流布局和兩列網格布局的使用場景類似,唯一區別就是兩列網格布局在數量少時,或者用戶目標明確時都可以采用。而瀑布流多用于用戶目標不明確,同時產品數量多,可以無限下滑的時候。

 

拼圖布局

拼圖布局,頭部常以一張大banner的形式出現,下面是由幾張圖片以各種拼圖形式呈現。一般來說下面展示的信息都是和他相關列表的商品,適合平臺主動推薦的商品列表。如下圖所示:

優點是,采用雜志式排版,樣式上更活潑美觀;產品主次表達更清晰,通過圖片占比大小就可以確定主要和次要信息。

缺點是,圖片一般有大有小,小的也很容易被忽略;另外該樣式編輯成本高,往往需要單獨推薦。

小紅書的推薦頁面可看成是專題頁,采用拼圖的形式展現,將重要信息放到大圖上,次要信息放到小圖上,引導用戶購買。

什么時候使用?

兩列拼圖布局,在列表中使用較少,因為不規則的拼圖會導致維護成本過高,同時小圖片很容易被忽略,因此多用于推薦頁面中,圖片由編輯經過處理之后在進行上傳。

 

三列網格布局

三列網格布局,也就是將屏幕一分為三進行展示,也可以叫宮格布局,由于??楸冉閑∫虼酥饕醞計故疚?,文字信息一般只有簡單的標題,適合用在用戶需求不明確的頁面。如下圖所示:

優點是,從排版上界面利用率高,一屏可展示的產品數量最多,利于用戶快速瀏覽選擇自己感興趣的。

缺點是,圖片展示尺寸小質量低,文字信息展示簡單,對比性較弱,界面的趣味性和新鮮感都比較低。

NOTHING日榜和嗶哩嗶哩番劇,用戶進來主要為了看看有沒有自己感興趣的內容,采用三列網格布局可以展示更多的內容,幫助用戶快速瀏覽。

什么時候使用?

如果你的產品只是為了展示更多的信息,不需要通過圖片進行對比時,可采用三列網格布局。

 

劃重點

1、當用戶需求明確,我們需要選擇適合高效對比的布局方式,推薦使用列表布局、兩列網格布局、兩列瀑布流布局;其中列表布局適合以文字對比為主的商品;兩列網格布局和瀑布流布局適合以圖片為主的商品。

2、當用戶需求不明確時,就需要根據你的產品目標進行選擇。產品目標是體現品牌性或推薦商品,推薦使用大圖網格布局和兩列拼圖布局;當產品目標想快速促成交易達成,方便用戶對比,推薦使用兩列瀑布流布局;當產品目標只是展示界面,推薦使用三列網格布局。

3、當產品數量較少時,推薦使用兩列網格布局、大圖網格布局。其中大圖網格布局適合圖片質量高,有專門編輯進行維護的產品中;兩列網格布局要求相對少很多。反之當產品數量較多時,推薦使用兩列瀑布流布局、三列網格布局。

 

原文地址:海鹽社(公眾號)

作者:風箏KK

轉載請注明:辽宁35选7开奖哪个台 » 一看就會一做就廢,產品列表樣式試試這樣思考!

登錄收藏
 
你可能喜歡的:
千頭萬緒!該如何解決產品遺留的一致性問題千頭萬緒!該如何解決產品遺留的一致性問題
出海商品詳情重構小記出海商品詳情重構小記
iPhone如何改變手機的交互方式iPhone如何改變手機的交互方式
UI設計組件-時間選擇器,日歷設計從未如此簡單!UI設計組件-時間選擇器,日歷設計從未如此簡單!
內容型產品交互規范的搭建指南內容型產品交互規范的搭建指南
淺析教育APP中的兒童鎖設計淺析教育APP中的兒童鎖設計
從這五點看體驗設計如何助力運營轉化從這五點看體驗設計如何助力運營轉化
今日頭條發布器路徑優化方案今日頭條發布器路徑優化方案
如何通過積分功能設計,激勵用戶積累積分?如何通過積分功能設計,激勵用戶積累積分?
產品設計中的「驚喜感」 | 交互問答 002產品設計中的「驚喜感」 | 交互問答 002
?