APP常見的6種圖片瀏覽模式

3 評論 37555 瀏覽 84 收藏 9 分鐘

道長這里說四種是指比較常見的,因為有些圖片瀏覽模式,是在這四種的基礎上加上手勢來實現另一種讀圖方式,這里不絕對說就這么幾種,那么道長就談談個人對每種圖片瀏覽模式說說自己在實際使用和工作中的一些理解,以及這些模式在實際設計中,哪一種比較適合你的產品。

橫向鋪滿一列圖片模式

一列圖片的時候圖片比較大,對圖片內容的獲取是比較好的。目前我們聽的最多的就是卡片式設計,比如微博、QQ空間就是卡片式。不過他們是一張或者多張圖,用這種方式設計,既能清晰分割內容與內容,又能承載更多的關聯內容,并且可以把與用戶互動的功能加上去。目前道長見過加功能多的是lofter。

設計時需要考慮這三個問題:

保證每一條內容在一屏內

有一個應用,他們的卡片式設計只有一張圖片,但是這個圖片高度不固定,有用戶上傳的照片很高的時候,在iPhone第四代手機上,有一部分圖片是被截取掉的,讀圖的時候要上下翻,體驗不是那么好,所以請保證一條內容在一屏之內;

充分考慮產品使用情景

這個地方需要考慮用戶使用情景,比如如果用戶使用時間集中在早上坐車和下班的時候,那道長建議換一個方式,因為圖片太大,下載慢、耗流量會讓用戶使用的時候有一定的疑慮,做產品和做設計最重要的一條是用戶想要得到什么,那我們就合理的給他們就好,而不是我們認為這樣最好就硬塞給用戶;

考慮內容更新速度

很明顯,一列圖片閱讀速度會比較慢的,用戶翻幾屏后會失去耐心,因為人性都是懶惰的,所以如果你的產品內容更新比較快,那我建議再考慮考慮,這樣的話很多內容的流量就會很低,用戶消費不了,好多好內容就這樣錯過了。

兩列圖片

這里需要注意下,兩列圖片的對齊方式有兩種,一種就是高度統一,一種是瀑布流,高度不統一,之前很多電商類的APP都是采用兩列高度統一的模式,因為很整齊,并且也能有效的傳遞商品信息,一屏承載的內容也多,相對一列的來說,加載速度也會比較快,這種模式是相對比較合理的。

2?

設計時需要考慮這兩個問題:

高度統一的前置條件

高度統一的前提是圖片是標準的尺寸,這樣會比較好,不存在說需要對齊而去剪裁和壓縮圖片,所以電商比較常用,電商上傳的圖片都是處理設計好的,所以使用比較好,但這種模式有些呆板,就是所謂的不大氣。

高度不統一的瀑布流模式

為什么高度不統一,因為圖片不是標準尺寸并且不能壓縮剪裁圖片,比如藝術品,你必須使用,因為你不能去剪裁壓縮作品,那樣會損失掉藝術作品的全貌,花瓣就是這樣的,還有藝術類的一些應用。

但瀑布流有個不好的地方就是,讀圖效率低,你可以想象這么個場景,在同一屏幕內,左邊一張圖片特長,超出了一屏,而右邊列有三張短圖片,你就可以想象這個場景了,處理辦法一般是程序會去計算屏幕高度來截圖,但還是相對效率低。

圖片+文字模式

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

3

設計時需要考慮這兩個問題:

  1. 圖片傳遞信息有限,圖片表現力會打折,如果這個能夠接受,那就沒問題;
  2. 圖片大小和內容有關,但圖片寬度別超過設備屏幕寬度的二分之一;

三列圖片

這種模式圖片很小了,它其實是跟手機相冊差不多,好處是能夠在一屏內放比較多的圖片,現在的情況是,出現這種情況都是在用戶個人頁面,并且支持三列圖片跟卡片式、圖片+文字模式的切換。

4

設計時需要考慮這兩個問題:

  1. 界面內容相對擁擠并且能夠顯示的尺寸更小了,所以不能夠承載文字內容在下面,對用戶來講,只是個縮略圖而已,關聯內容傳遞更少;
  2. 每多少張圖片為一組,這樣不會壓抑,道長測試過某個APP,當我喜歡了400+商品時,三列圖片全是擠在一堆的,看起來很壓抑的,道長的建議是,在設計的時候,考慮3的倍數來顯示,比如顯示9張后,更下一組9張圖片之間有分隔,這樣看起來清晰并且不壓抑。

四列圖片

這樣的方式除了手機相冊,其他的APP采用這個模式是很少見的,它跟三列圖片類似,不過在iPhone手機相冊里面,是按照時間線來分開圖片的,app設計我還是不太建議采用。

5

橫向多列圖片

目前除了artsy這個app,還有藝術狗app也采用這個模式來顯示,無可厚非,因為線下看藝術展都是這樣橫著來的,產品是想去盡量模擬線下體驗。除了這樣的特殊使用情景外,其他的就是nice,他們是采用橫向多列,不過只顯示一排,每張圖片的尺寸都統一,配合手勢左右滑動來查看其余信息。

6

設計時需要考慮這三個問題:

  1. 橫向顯示的圖片有限,如果太多,那么后面的圖片就會沒有用戶流量,所以artsy在首頁是這樣的,并且限制顯示的圖片不超過10張,點進詳情頁面后就使用瀑布流方式。
  2. 圖片太多會帶來另一個技術上的問題,不能做分布加載,如果超過四五十張,整個內容加載會比較慢;
  3. 需要注意一點是,在用戶認知里面,橫向滑動更多是導航,縱向滑動更多是內容,所以在設計的時候設計師需要多考慮。

本文系人人都是產品經理專欄作家@芒果道長 授權發布,未經許可,不得轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 還有一種metro風格的排列方式,之前的同程,攜程都是采用的這種方式,linkedin的好友新聯系人提醒就是用這種方式的~

    來自江蘇 回復