UI設(shè)計(jì)中圖片列表的排版教程

　　人類是感性生物，眼睛對于圖像捕捉的興趣程度往往是大于文本的。也正是因?yàn)閼?yīng)用程序中無處不在的圖片，讓我時(shí)常對于圖片的展示方式習(xí)以為常、司空見慣。今天AAA教育郭老師就針對UI設(shè)計(jì)中圖片列表的排版教程進(jìn)行簡單的說明。
 

　　圖片出現(xiàn)的場景有很多，但這篇UI設(shè)計(jì)中圖片列表的排版教程文章我主要總結(jié)一下圖片在列表中排列的方式。以下是我對幾十款A(yù)PP進(jìn)行總結(jié)分析后進(jìn)行的整理，希望能夠有助于你以后對圖片列表的展示排版更加游刃有余。
 

　　圖片比例
 

　　線上圖片的比例最為流行的無非是 1:1、4:3、16:9 這幾種了。但只是記住了這幾個(gè)被設(shè)計(jì)師用來津津樂道的比例數(shù)據(jù)，而不去了解它們背后的緣由，可能你還是很難去運(yùn)用它們。
 

　　1. 1:1
 

　　1:1 的圖像因?yàn)槠湔叫蔚囊?guī)整性，讓圖像能夠最大程度地突出主體。并且正方形對于非1:1圖片的適配也最為容易，能夠找到一個(gè)普適的適配方案來最大化地保留主體關(guān)鍵信息(我認(rèn)為這也是為什么頭像往往都讓用戶裁剪為正方形的原因之一)。

 

　　2. 4:3
 

　　說到4:3一定有很多小伙伴會(huì)馬上想到3:2的圖像比例，因?yàn)樽钇鸪?35膠卷輸出的照片比例就是3:2。但隨著手機(jī)端攝影在大眾中普及，4:3的圖像逐漸流行起來。并且目前市場上的主流手機(jī)攝影的照片尺寸一般都為4:3。
 

　　類似的案例比如58同城讓房東自行上傳租房信息的圖片。不可能每一個(gè)房東都有專業(yè)的攝影設(shè)備，大部分的圖像可能都是由手機(jī)拍攝的。所以這時(shí)候設(shè)置圖像展示為4:3對于用戶圖像的適配裁剪損失最小。

 

　　馬蜂窩和愛彼迎是兩款主打旅行衍生業(yè)務(wù)的產(chǎn)品，大多數(shù)生產(chǎn)內(nèi)容的用戶可能在旅行過程中對于攝影都有所涉獵。所以UGC圖像來源的渠道很可能是相機(jī)， 對于相機(jī)設(shè)備輸出的圖像，采用3:2的比例對用戶圖像的適配裁剪損失便是最小的了。

　　3. 16:9
 

　　16:9不用贅述了， 這是一個(gè)非常典型的視頻比例尺寸了，一般視頻類列表的圖片尺寸會(huì)比較常用，例如愛奇藝、優(yōu)酷這樣的視頻類產(chǎn)品，基本都是采用16:9的尺寸來展示圖像。

 

　　倒也不是說圖像的比例一定要遵循以上這幾種，只能說這幾個(gè)比例覆蓋了大多數(shù)的圖像場景。使用這些比例展示圖像，在非常規(guī)比例圖像需要適配裁剪的情況下，損失的像素能達(dá)到最小。
 

　　圖片列表的排列
 

　　1. 單列+文本=列表布局

 

　　列表布局是最為常見的排列方式，列表布局中圖片展示較小，用戶一般不會(huì)去注意圖片細(xì)節(jié)，所以列表布局往往是更注重文本內(nèi)容的展示。
 

　　2. 單列=大圖布局

 

　　大圖布局一行只展示一張圖片，這種排列方式很耗損移動(dòng)端屏縱向空間，但同時(shí)也能夠幫助用戶過濾繁瑣信息，一屏內(nèi)只關(guān)注1-2個(gè)內(nèi)容。
 

　　3. 兩列+并排=網(wǎng)格布局

 

　　兩列網(wǎng)格布局相對于單列大圖布局來說，一屏內(nèi)能夠展示的圖像內(nèi)容更多，能夠更快速地將內(nèi)容傳遞給用戶。相對于列表布局來說，網(wǎng)格布局更希望在屏幕空間利用率高的前提下，用圖像去命中目標(biāo)不明確用戶。
 

　　4. 兩列+錯(cuò)位=瀑布流布局

 

　　為了增加網(wǎng)格布局的趣味性，避免用戶視覺疲勞，從單一的并排形式衍生出了錯(cuò)位展示形式，也就是瀑布流了。
 

　　5. 多列+拼圖=拼圖布局

 

　　拼圖布局也是增加了圖像排版的趣味性，并且根據(jù)拼圖形式，可以由更多列來組成。相對于用瀑布流來增加趣味性，拼圖能顯得更加規(guī)整。拼圖中如何配置單個(gè)拼圖比例大小是相對自由的，對于質(zhì)量高的圖像可以占據(jù)大版面，對于質(zhì)量低的圖像可以適當(dāng)縮小。如何去定義，更在于設(shè)計(jì)師前期規(guī)劃的把控。
 

　　總結(jié)
 

　　上面我詳細(xì)的講解了UI設(shè)計(jì)中圖片列表的排版教程，相信同學(xué)們對圖片列表的排版有一定了解了，希望我的文章能夠幫助到你，郭老師之前也分享過《UI設(shè)計(jì)中下拉刷新設(shè)計(jì)使用技巧》、《UI設(shè)計(jì)中節(jié)日閃屏設(shè)計(jì)指南》、《如何做好UI底部導(dǎo)航欄圖標(biāo)設(shè)計(jì)》、《如何做好UI詳情頁設(shè)計(jì)》等，因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果你想了解更多的知識，請把問題留言給在線小姐姐，我會(huì)進(jìn)行一一解答。郭老師最近接到很多同學(xué)的問題，我也進(jìn)行了詳細(xì)的整理，后續(xù)會(huì)更新上來，敬請關(guān)注AAA教育網(wǎng)站。