爲什麼要重視APP的圖文頁面？

從人類進化的結果看圖像比文字更受大腦的青睞，在沒有文字之前，人類靠的都是「看」出來的圖像，所以在APP界面設計中圖片比文字更容易讓人產生點擊慾望。圖片在APP界面的設計中的應用也非常的廣泛

曾經有一個國外的調研結果，吸引人眼球圖片內容排序，人臉 >人>動物>物體。在單張圖片選擇時也可以在滿足產品需求的情況下從生理角度考慮對眼球的吸引力

我曾負責千萬級訪問量APP的圖片設計，想把做圖片APP時的一些思考分享給大家，方便大家在設計APP圖片列表、圖文混排、圖片流、設計圖片相關模塊無從下手時，能提供一些思路和靈感。

希望對你能有幫助。

圖文混排的方式及場景有哪些？

1. 單圖設計

單圖全屏

定義：單圖全屏也就是整個圖片撐滿屏幕，一般用於開屏啓動頁、引導頁，登錄頁面的背景，詳情頁產品介紹底圖等。

優點：單張圖片衝擊力更強，更容易傳遞品牌調性，圖片處理更加靈活。

缺點：對圖片質量要求比較高，比如構圖、細節都有一定要求，如果是產品圖片背景，以及主要內容集中區域展現會有一定的要求。

可使用拼合效果如滴滴的啓動頁，或者在圖片上方加遮罩和紋理，使圖片傳遞出文藝、高端或者其他任何跟品牌形象相關的感受。第二幅圖的圖片做了紋理處理，更加有質感。最後一個把整個產品作爲一個背景底圖，使產品表達更直接，搭配卡片輔助信息或者引導button，能增加用戶決策效率。

單圖卡片（不下拉）

定義：首屏頁面中，以一張圖片設計爲主要視覺引導，其他會有操作信息以及文字信息。

用途：一般用於突出產品調性，比如交友軟件的卡片頁面，分享的落地頁，以及一些專題的入口等，圖片作爲一個產品的載體及跟用戶交流的入口，能第一眼把用戶的眼睛聚焦在圖片上，從而達到查看其它信息或引導進行其它交互操作的目的。

單圖+輔助信息（可下拉）

定義：首屏出現一個寬度撐滿，高度自適應的產品圖片或者商品圖片。

用途：某一些產品大圖頁，或者詳情頁的頭圖，提升產品氛圍，引出產品形態以及詳細內容。

需要注意：

• 因圖片高度一般不固定，需要設置一個最高高度度，比如屏幕高度的75%，wap頁面要考慮瀏覽器底部操作高度，如超過區域或進行裁切，或是同比例縮放放一個底色上，一般採用黑色
• 高度不宜過高，最好能露出部分輔助信息，新設計頁面時會做適當引導，比如：提示用戶可上拉的箭頭或者小手。

2. 圖文列表

左圖右文-較常見圖文列表組合

根據F形瀏覽引導線，更重要的圖片信息放在前面，左圖右文模式更強調用圖吸引用戶瀏覽視線。

應用場景：搜索結果或推薦list，如房產APP搜索結果 list、購物類搜索結果、播放列表、遊記類型結果頁。

右圖左文-較常見圖文列表組合

資訊類型、新聞類APP，更強調文字標題信息，往往圖片跟標題的對應性沒那麼高，有一些是用戶自己上傳，有很多不可控因素。

應用場景：信息流feed，經常搭配三圖模式、純文字模式一起出現，如今日頭條、房產APP、新聞類推薦結果、天氣卡片等。

圖片流：

一列限高

定義：寬高比固定，主要上圖下文，或者字在圖上2種形式。

用途：一般用於抓取或者用戶上傳的圖片高度比例較爲固定，多采用橫圖，首屏至少能顯示2張半圖，豎圖也有，但是比較少。

一列不限高

定義：寬高比不固定，寬度撐滿，高度不做限制，主要有圖+文字組合，可上圖下文結構，或者字在圖上2種形式。

用途：一般用於抓取或者用戶上傳的圖片寬高比不固定的情況，滿足大部分圖片的信息展示，比如：百度的大圖頁大圖模式就是採用這樣的佈局的經典例子。

圖片流：二列

二圖限高-經典圖片流佈局

定義：2列圖片組合限高，通常是指一行2列圖片，圖片高度按比例進行控制，採用相同比例。

用途：一般用於專輯封面、海報封面、視頻截圖封面等，比如：bilibili的推薦模塊。

二圖不限高-瀑布流圖片

瀑布流佈局的出現，一方面是避免引起視覺疲勞，一方面能滿足在限寬的情況下，圖片的高度能更多的舒展，使圖片的空間利用率更高，產品信息展現更豐富。

定義：2列圖片組合不限高，通常是指一行2列圖片，圖片高度自適應，用於產品圖片高度不固定的產品類型，會有一個最高高度和最窄高度極端情況定義。

用途：比如圖片短視頻封面，pinterest結果頁瀑布流，有上圖下文，或者只有圖片2種結構較爲常見

圖片流：三列限高

定義：指一列有3個圖片，且圖片控制固定比例的設計，一般有上圖下文，只有圖片，或者標題+三個圖片的組合搭配。

用途：比如圖書封面、海報封面、今日頭條信息流圖文結合等。

圓形圖片

定義：圖片爲圓形，比例1：1。

用途：圓形圖片在APP圖片設計中也非常的常見，出現最多的應該是作爲頭像了。

常見組合：左圖右文、上圖下文、一列3-4個頭像或者可以滑動等。

3. 多圖模式設計

多圖固定比例

定義：超過3張以後的圖片模塊搭配組合，用來引導用戶查看某一個圖片列表，或者引導查看更多圖片的目的。

用法：多圖固定比例在多圖模式的時候是最常見的情況，固定模塊下采用什麼樣的搭配組合呢？一般要看圖片抓取的數量。

下面幾種不同圖片數量下的展示形式，當然還會有很多，主要是考慮，當前數量的圖片在整個頁面中所佔的比重以及展現數量這2個條件決定設計的樣式。

多圖組合的搭配有很多，可參考微信朋友圈自己上傳的不同圖片數量所呈現出來的模塊搭配。

單個圖片比例：一般有橫版和方圖2種，看抓取的圖片本身的一個比例。

多圖不固定比例

多圖不固定比例的應用其實並不是很多見，一般出現在，抓取的圖片寬高比比較多且沒有規律，又想在一個模塊中進行搭配組合，同時滿足圖片內容的最大化顯示。

定義：圖片寬高比不固定且要組合成一個模塊。

難點：在設計時需要限定高度，我當時做的時候是以高圖的數量分別定義出幾個模型，再讓開發根據高圖的數量往模板裏面套。

注意點：

左右2圖圖片寬度要有一個極端情況，當時定義是75%：25%，爲什麼要按比例來？是用戶使用的屏幕分辨率有很多，只能按比例來避免有圖過寬或者過窄的情況。

圖片比例有哪些以及應用場景？

1. 圖片比例 1：1

1：1圖片比例能更大程度突出主體物，對橫豎圖做裁切之後，應用方圖能能完整的保留圖片信息。

應用場景：電商結果頁圖片、專輯封面等。

2. 圖片比例16：9

16：9的屏幕比例是現在大部分電影片源的比例，從成本的角度考慮實際是16:9相比16:10和4:3更省成本，同樣一塊大面板，用16:9切割出的小面板多，所以一直沿用這個比例。

應用場景：電視劇、電影相關推薦頁。

3. 圖片比例3:2

3:2的圖片比例是我們最常見的，它是傳統135膠片的標準比例，也是大部分數碼相機圖像傳感器的比例。使用3:2比例拍照時，橫豎構圖都很方便。

應用場景：資訊類app配圖、用戶自己拍攝圖片上傳如愛彼迎。

4. 其他比例

其他比如4：3的比例也是比較常見的圖片比例，一般出現在大圖單個圖片的定義上6：8或者黃金分割比例也會在一些APP裏面看到。

5. 設計APP頁面時選擇什麼樣的圖片比例呢？

首先我們在定義圖片是選用豎圖還是橫圖的時候，是看我們設計的產品本身，是某一種固定的比例圖，還是不規則圖片比例。

高圖

人物類

高圖隨着智能手機的普及，越來越多的應用於我們的app設計中，首先是人物類豎版更容易看出全身信息。

圖書封面

電影海報

橫圖

橫圖在設計時更節省屏幕空間，比如風景、短視頻封面、房產推薦圖都比較喜歡用橫圖。

視頻封面

方圖

方圖的應用其實是最廣泛的、不管是橫圖還是豎圖，方圖都能最大限度滿足主體物最大顯示，而且方圖還能滿足文藝感，所以，APP設計時很受設計師青睞。

電商圖

商品圖

裁切規則

有的人可能會問，按比例之後圖片怎麼放到框框裏面呢？

一般的裁切規則有以下幾種，其中第一種比較常見，第二種視覺效果略差，但是能滿足圖片信息全部展現，第三種智能裁切，對技術要求比較高，圖像識別技術這塊會有一定的要求。

圖片手勢操作有哪些？

圖片的手勢操作分爲：上下滾動、左右側滑、單擊、雙擊、放大這幾種，最新發布的手勢交互，無觸碰交互可能未來也會是一個趨勢。

1. 上下滾動、左右側滑

上下滾動：

上下滾動這個常見的手勢一般用於頁面內容超過一屏時，可以滑動查看下面的信息，一般內容屬於相同層級且可以一直滾動查看相同內容，如瀑布流。

左右側滑：

左右側滑手勢更多用於側滑之後的圖片頁面爲相同層級，且圖片本身需要拓展更多內容的情況，更大拓展橫向豎向內容空間利用率。

2. 單擊、雙擊、放大

單擊：

單機操作是常見的交互方式，圖片、文字、鏈接、按鈕等都會應用到。

雙擊：

一般用於對圖片本身進行某些操作，比如喜歡、收藏、贊等。

放大：

放大圖片在圖片想查看細節時會經常用到，有一些APP圖片是不支持放大功能的，在大圖頁應用較多。

圖版率是什麼？

在頁面設計中，除了文字之外，通常都會加入圖片或是插圖等視覺直觀性的內容。表示這些視覺要素所佔面積與整體頁面的之間比率的就是圖版率。簡單說來，圖版率就是頁面中圖片面積的所佔比。這種文字和圖片所佔的比率，對於頁面的整體效果和其內容的易讀性會產生巨大的影響。

但並不是圖版率越高越好，要看實際項目中是否需要傳遞給用戶豐富、活潑、熱鬧的感受。

圖片本身的內容也會起到一定作用。

提升圖版率的方法：加入一些圖標設計，或者圖片和色塊結合都可以起到視覺上提升圖版率的作用，當然如果沒有圖片也可以畫一些插畫跟背景結合的形式。

還有哪些圖片處理效果？

除了上面我們介紹的圖片的排布方式，圖片的比例、手勢操作等，設計圖片時，怎麼能讓APP更有特色呢？我們來看下一一些圖片常見的處理手法。

1. 摳圖+背景色效果

應用場景：圖片內容較爲固定，圖比如某一些品類的入口，品類不宜過多，要不然運營設計同學會有很大壓力，如果經常更換運營成本也較高。

優勢：背景能自定義，跟圖片本身結合能產生很強的設計感，頁面整體設計風格可控。

2. 圖片+毛玻璃效果

應用場景：一般用於APP頁面，對性能有一定的消耗，wap端應用比較少。

優勢：毛玻璃效果能更大程度滿足圖片氛圍的同時，又能兼顧文字內容展現。

3. 圖片+漸變遮罩效果

應用場景：一般用於背景圖片顏色未知的情況下放在文字底部保證文字能在任何圖片下的可讀性，例圖中也加入了顏色，具備一定美觀視覺感受。

圖片缺省及極端情況

圖片加載本身要比文字要更慢一些，在網絡不好，或者沒網的時候，會有哪些辦法讓用戶減少挫敗感呢？

1. logo+灰底，或只有灰色底

如果需要強調品牌可以加入logo的形式，不宜過深，能起到傳達品牌形象的作用，還有一種就是直接灰色色塊佔位，讓用戶瞭解這個區域是一個圖片，但是未加載出來。還會有一個app在灰色塊上面加一個白光動效，傳遞正在加載中這一信息。

2. 彩色塊

一般用於圖片瀑布流，查看圖片滑動過快或者網絡不好時，有2種展現規則，第一種是設計師自定義一批色值，開發隨機調取，第二種計算當前需要展現的圖片的顏色平均值，給出一個色塊，效果更好，但是有一定開發成本。

看到最後的小夥伴有福了，最後送上高清免費國外網站：

歡迎關注公衆號：藝動設計