道長(zhǎng)這里說(shuō)四種是指比較常見的，因?yàn)橛行﹫D片瀏覽模式，是在這四種的基礎(chǔ)上加上手勢(shì)來(lái)實(shí)現(xiàn)另一種讀圖方式，這里不絕對(duì)說(shuō)就這么幾種，那么道長(zhǎng)就談?wù)剛€(gè)人對(duì)每種圖片瀏覽模式說(shuō)說(shuō)自己在實(shí)際使用和工作中的一些理解，以及這些模式在實(shí)際設(shè)計(jì)中，哪一種比較適合你的產(chǎn)品。

橫向鋪滿一列圖片模式

一列圖片的時(shí)候圖片比較大，對(duì)圖片內(nèi)容的獲取是比較好的。目前我們聽的最多的就是卡片式設(shè)計(jì)，比如微博、QQ空間就是卡片式。不過他們是一張或者多張圖，用這種方式設(shè)計(jì)，既能清晰分割內(nèi)容與內(nèi)容，又能承載更多的關(guān)聯(lián)內(nèi)容，并且可以把與用戶互動(dòng)的功能加上去。目前道長(zhǎng)見過加功能多的是lofter。

設(shè)計(jì)時(shí)需要考慮這三個(gè)問題：

保證每一條內(nèi)容在一屏內(nèi)

有一個(gè)應(yīng)用，他們的卡片式設(shè)計(jì)只有一張圖片，但是這個(gè)圖片高度不固定，有用戶上傳的照片很高的時(shí)候，在iPhone第四代手機(jī)上，有一部分圖片是被截取掉的，讀圖的時(shí)候要上下翻，體驗(yàn)不是那么好，所以請(qǐng)保證一條內(nèi)容在一屏之內(nèi)；

充分考慮產(chǎn)品使用情景

這個(gè)地方需要考慮用戶使用情景，比如如果用戶使用時(shí)間集中在早上坐車和下班的時(shí)候，那道長(zhǎng)建議換一個(gè)方式，因?yàn)閳D片太大，下載慢、耗流量會(huì)讓用戶使用的時(shí)候有一定的疑慮，做產(chǎn)品和做設(shè)計(jì)最重要的一條是用戶想要得到什么，那我們就合理的給他們就好，而不是我們認(rèn)為這樣最好就硬塞給用戶；

考慮內(nèi)容更新速度

很明顯，一列圖片閱讀速度會(huì)比較慢的，用戶翻幾屏后會(huì)失去耐心，因?yàn)槿诵远际菓卸璧模匀绻愕漠a(chǎn)品內(nèi)容更新比較快，那我建議再考慮考慮，這樣的話很多內(nèi)容的流量就會(huì)很低，用戶消費(fèi)不了，好多好內(nèi)容就這樣錯(cuò)過了。

兩列圖片

這里需要注意下，兩列圖片的對(duì)齊方式有兩種，一種就是高度統(tǒng)一，一種是瀑布流，高度不統(tǒng)一，之前很多電商類的APP都是采用兩列高度統(tǒng)一的模式，因?yàn)楹苷R，并且也能有效的傳遞商品信息，一屏承載的內(nèi)容也多，相對(duì)一列的來(lái)說(shuō)，加載速度也會(huì)比較快，這種模式是相對(duì)比較合理的。

?

設(shè)計(jì)時(shí)需要考慮這兩個(gè)問題：

高度統(tǒng)一的前置條件

高度統(tǒng)一的前提是圖片是標(biāo)準(zhǔn)的尺寸，這樣會(huì)比較好，不存在說(shuō)需要對(duì)齊而去剪裁和壓縮圖片，所以電商比較常用，電商上傳的圖片都是處理設(shè)計(jì)好的，所以使用比較好，但這種模式有些呆板，就是所謂的不大氣。

高度不統(tǒng)一的瀑布流模式

為什么高度不統(tǒng)一，因?yàn)閳D片不是標(biāo)準(zhǔn)尺寸并且不能壓縮剪裁圖片，比如藝術(shù)品，你必須使用，因?yàn)槟悴荒苋ゼ舨脡嚎s作品，那樣會(huì)損失掉藝術(shù)作品的全貌，花瓣就是這樣的，還有藝術(shù)類的一些應(yīng)用。

但瀑布流有個(gè)不好的地方就是，讀圖效率低，你可以想象這么個(gè)場(chǎng)景，在同一屏幕內(nèi)，左邊一張圖片特長(zhǎng)，超出了一屏，而右邊列有三張短圖片，你就可以想象這個(gè)場(chǎng)景了，處理辦法一般是程序會(huì)去計(jì)算屏幕高度來(lái)截圖，但還是相對(duì)效率低。

圖片+文字模式

圖片+文字的模式比較常見，它跟兩列圖片的模式有點(diǎn)類似，只是排列方式變了，談不上好壞，不過承載信息量比較多。

設(shè)計(jì)時(shí)需要考慮這兩個(gè)問題：

1. 圖片傳遞信息有限，圖片表現(xiàn)力會(huì)打折，如果這個(gè)能夠接受，那就沒問題；
2. 圖片大小和內(nèi)容有關(guān)，但圖片寬度別超過設(shè)備屏幕寬度的二分之一；

三列圖片

這種模式圖片很小了，它其實(shí)是跟手機(jī)相冊(cè)差不多，好處是能夠在一屏內(nèi)放比較多的圖片，現(xiàn)在的情況是，出現(xiàn)這種情況都是在用戶個(gè)人頁(yè)面，并且支持三列圖片跟卡片式、圖片+文字模式的切換。

設(shè)計(jì)時(shí)需要考慮這兩個(gè)問題：

1. 界面內(nèi)容相對(duì)擁擠并且能夠顯示的尺寸更小了，所以不能夠承載文字內(nèi)容在下面，對(duì)用戶來(lái)講，只是個(gè)縮略圖而已，關(guān)聯(lián)內(nèi)容傳遞更少；
2. 每多少?gòu)垐D片為一組，這樣不會(huì)壓抑，道長(zhǎng)測(cè)試過某個(gè)APP，當(dāng)我喜歡了400+商品時(shí)，三列圖片全是擠在一堆的，看起來(lái)很壓抑的，道長(zhǎng)的建議是，在設(shè)計(jì)的時(shí)候，考慮3的倍數(shù)來(lái)顯示，比如顯示9張后，更下一組9張圖片之間有分隔，這樣看起來(lái)清晰并且不壓抑。

四列圖片

這樣的方式除了手機(jī)相冊(cè)，其他的APP采用這個(gè)模式是很少見的，它跟三列圖片類似，不過在iPhone手機(jī)相冊(cè)里面，是按照時(shí)間線來(lái)分開圖片的，app設(shè)計(jì)我還是不太建議采用。

橫向多列圖片

目前除了artsy這個(gè)app，還有藝術(shù)狗app也采用這個(gè)模式來(lái)顯示，無(wú)可厚非，因?yàn)榫€下看藝術(shù)展都是這樣橫著來(lái)的，產(chǎn)品是想去盡量模擬線下體驗(yàn)。除了這樣的特殊使用情景外，其他的就是nice，他們是采用橫向多列，不過只顯示一排，每張圖片的尺寸都統(tǒng)一，配合手勢(shì)左右滑動(dòng)來(lái)查看其余信息。

設(shè)計(jì)時(shí)需要考慮這三個(gè)問題：

1. 橫向顯示的圖片有限，如果太多，那么后面的圖片就會(huì)沒有用戶流量，所以artsy在首頁(yè)是這樣的，并且限制顯示的圖片不超過10張，點(diǎn)進(jìn)詳情頁(yè)面后就使用瀑布流方式。
2. 圖片太多會(huì)帶來(lái)另一個(gè)技術(shù)上的問題，不能做分布加載，如果超過四五十張，整個(gè)內(nèi)容加載會(huì)比較慢；
3. 需要注意一點(diǎn)是，在用戶認(rèn)知里面，橫向滑動(dòng)更多是導(dǎo)航，縱向滑動(dòng)更多是內(nèi)容，所以在設(shè)計(jì)的時(shí)候設(shè)計(jì)師需要多考慮。

本文系人人都是產(chǎn)品經(jīng)理專欄作家@芒果道長(zhǎng) 授權(quán)發(fā)布，未經(jīng)許可，不得轉(zhuǎn)載。