寫(xiě)給UI設(shè)計(jì)師的圖文設(shè)計(jì)指南！超多實(shí)戰(zhàn)案例

為什么要重視APP的圖文頁(yè)面？

從人類(lèi)進(jìn)化的結(jié)果看圖像比文字更受大腦的青睞，在沒(méi)有文字之前，人類(lèi)靠的都是「看」出來(lái)的圖像，所以在APP UI設(shè)計(jì)中圖片比文字更容易讓人產(chǎn)生點(diǎn)擊欲望。圖片在APP UI設(shè)計(jì)中的應(yīng)用也非常的廣泛。

曾經(jīng)有一個(gè)國(guó)外的調(diào)研結(jié)果，吸引人眼球圖片內(nèi)容排序，人臉 >人>動(dòng)物>物體。在單張圖片選擇時(shí)也可以在滿(mǎn)足產(chǎn)品需求的情況下從生理角度考慮對(duì)眼球的吸引力。

我曾負(fù)責(zé)千萬(wàn)級(jí)訪(fǎng)問(wèn)量APP的圖片設(shè)計(jì)，想把做圖片APP時(shí)的一些思考分享給大家，方便大家在設(shè)計(jì)APP圖片列表、圖文混排、圖片流、設(shè)計(jì)圖片相關(guān)模塊無(wú)從下手時(shí)，能提供一些思路和靈感。
希望對(duì)你能有幫助。

圖文混排的方式及場(chǎng)景有哪些？

1. 單圖設(shè)計(jì)

單圖全屏

定義：?jiǎn)螆D全屏也就是整個(gè)圖片撐滿(mǎn)屏幕，一般用于開(kāi)屏啟動(dòng)頁(yè)、引導(dǎo)頁(yè)，登錄頁(yè)面的背景，詳情頁(yè)產(chǎn)品介紹底圖等。

優(yōu)點(diǎn)：?jiǎn)螐垐D片沖擊力更強(qiáng)，更容易傳遞品牌調(diào)性，圖片處理更加靈活。

缺點(diǎn)：對(duì)圖片質(zhì)量要求比較高，比如構(gòu)圖、細(xì)節(jié)都有一定要求，如果是產(chǎn)品圖片背景，以及主要內(nèi)容集中區(qū)域展現(xiàn)會(huì)有一定的要求。

可使用拼合效果如滴滴的啟動(dòng)頁(yè)，或者在圖片上方加遮罩和紋理，使圖片傳遞出文藝、高端或者其他任何跟品牌形象相關(guān)的感受。第二幅圖的圖片做了紋理處理，更加有質(zhì)感。最后一個(gè)把整個(gè)產(chǎn)品作為一個(gè)背景底圖，使產(chǎn)品表達(dá)更直接，搭配卡片輔助信息或者引導(dǎo)button，能增加用戶(hù)決策效率。

單圖卡片（不下拉）

定義：首屏頁(yè)面中，以一張圖片設(shè)計(jì)為主要視覺(jué)引導(dǎo)，其他會(huì)有操作信息以及文字信息。

用途：一般用于突出產(chǎn)品調(diào)性，比如交友軟件的卡片頁(yè)面，分享的落地頁(yè)，以及一些專(zhuān)題的入口等，圖片作為一個(gè)產(chǎn)品的載體及跟用戶(hù)交流的入口，能第一眼把用戶(hù)的眼睛聚焦在圖片上，從而達(dá)到查看其它信息或引導(dǎo)進(jìn)行其它交互操作的目的。

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

定義：首屏出現(xiàn)一個(gè)寬度撐滿(mǎn)，高度自適應(yīng)的產(chǎn)品圖片或者商品圖片。

用途：某一些產(chǎn)品大圖頁(yè)，或者詳情頁(yè)的頭圖，提升產(chǎn)品氛圍，引出產(chǎn)品形態(tài)以及詳細(xì)內(nèi)容。

需要注意：

• 因圖片高度一般不固定，需要設(shè)置一個(gè)最高高度度，比如屏幕高度的75%，wap頁(yè)面要考慮瀏覽器底部操作高度，如超過(guò)區(qū)域或進(jìn)行裁切，或是同比例縮放放一個(gè)底色上，一般采用黑色
• 高度不宜過(guò)高，最好能露出部分輔助信息，新設(shè)計(jì)頁(yè)面時(shí)會(huì)做適當(dāng)引導(dǎo)，比如：提示用戶(hù)可上拉的箭頭或者小手。

2. 圖文列表

左圖右文-較常見(jiàn)圖文列表組合

根據(jù)F形瀏覽引導(dǎo)線(xiàn)，更重要的圖片信息放在前面，左圖右文模式更強(qiáng)調(diào)用圖吸引用戶(hù)瀏覽視線(xiàn)。

應(yīng)用場(chǎng)景：搜索結(jié)果或推薦list，如房產(chǎn)APP搜索結(jié)果 list、購(gòu)物類(lèi)搜索結(jié)果、播放列表、游記類(lèi)型結(jié)果頁(yè)。

右圖左文-較常見(jiàn)圖文列表組合

資訊類(lèi)型、新聞?lì)怉PP，更強(qiáng)調(diào)文字標(biāo)題信息，往往圖片跟標(biāo)題的對(duì)應(yīng)性沒(méi)那么高，有一些是用戶(hù)自己上傳，有很多不可控因素。

應(yīng)用場(chǎng)景：信息流feed，經(jīng)常搭配三圖模式、純文字模式一起出現(xiàn)，如今日頭條、房產(chǎn)APP、新聞?lì)愅扑]結(jié)果、天氣卡片等。

圖片流：

一列限高

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

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

一列不限高

定義：寬高比不固定，寬度撐滿(mǎn)，高度不做限制，主要有圖+文字組合，可上圖下文結(jié)構(gòu)，或者字在圖上2種形式。

用途：一般用于抓取或者用戶(hù)上傳的圖片寬高比不固定的情況，滿(mǎn)足大部分圖片的信息展示，比如：百度的大圖頁(yè)大圖模式就是采用這樣的布局的經(jīng)典例子。

圖片流：二列

二圖限高-經(jīng)典圖片流布局

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

用途：一般用于專(zhuān)輯封面、海報(bào)封面、視頻截圖封面等，比如：bilibili的推薦模塊。

二圖不限高-瀑布流圖片

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

定義：2列圖片組合不限高，通常是指一行2列圖片，圖片高度自適應(yīng)，用于產(chǎn)品圖片高度不固定的產(chǎn)品類(lèi)型，會(huì)有一個(gè)最高高度和最窄高度極端情況定義。

用途：比如圖片短視頻封面，pinterest結(jié)果頁(yè)瀑布流，有上圖下文，或者只有圖片2種結(jié)構(gòu)較為常見(jiàn)

圖片流：三列限高

定義：指一列有3個(gè)圖片，且圖片控制固定比例的設(shè)計(jì)，一般有上圖下文，只有圖片，或者標(biāo)題+三個(gè)圖片的組合搭配。

用途：比如圖書(shū)封面、海報(bào)封面、今日頭條信息流圖文結(jié)合等。

圓形圖片

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

用途：圓形圖片在APP圖片設(shè)計(jì)中也非常的常見(jiàn)，出現(xiàn)最多的應(yīng)該是作為頭像了。

常見(jiàn)組合：左圖右文、上圖下文、一列3-4個(gè)頭像或者可以滑動(dòng)等。

3. 多圖模式設(shè)計(jì)

多圖固定比例

定義：超過(guò)3張以后的圖片模塊搭配組合，用來(lái)引導(dǎo)用戶(hù)查看某一個(gè)圖片列表，或者引導(dǎo)查看更多圖片的目的。

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

下面幾種不同圖片數(shù)量下的展示形式，當(dāng)然還會(huì)有很多，主要是考慮，當(dāng)前數(shù)量的圖片在整個(gè)頁(yè)面中所占的比重以及展現(xiàn)數(shù)量這2個(gè)條件決定設(shè)計(jì)的樣式。

多圖組合的搭配有很多，可參考微信朋友圈自己上傳的不同圖片數(shù)量所呈現(xiàn)出來(lái)的模塊搭配。

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

多圖不固定比例

多圖不固定比例的應(yīng)用其實(shí)并不是很多見(jiàn)，一般出現(xiàn)在，抓取的圖片寬高比比較多且沒(méi)有規(guī)律，又想在一個(gè)模塊中進(jìn)行搭配組合，同時(shí)滿(mǎn)足圖片內(nèi)容的最大化顯示。

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

難點(diǎn)：在設(shè)計(jì)時(shí)需要限定高度，我當(dāng)時(shí)做的時(shí)候是以高圖的數(shù)量分別定義出幾個(gè)模型，再讓開(kāi)發(fā)根據(jù)高圖的數(shù)量往模板里面套。

注意點(diǎn)：

左右2圖圖片寬度要有一個(gè)極端情況，當(dāng)時(shí)定義是75%：25%，為什么要按比例來(lái)？是用戶(hù)使用的屏幕分辨率有很多，只能按比例來(lái)避免有圖過(guò)寬或者過(guò)窄的情況。

圖片比例有哪些以及應(yīng)用場(chǎng)景？

1. 圖片比例 1：1

1：1圖片比例能更大程度突出主體物，對(duì)橫豎圖做裁切之后，應(yīng)用方圖能能完整的保留圖片信息。

應(yīng)用場(chǎng)景：電商結(jié)果頁(yè)圖片、專(zhuān)輯封面等。

2. 圖片比例16：9

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

應(yīng)用場(chǎng)景：電視劇、電影相關(guān)推薦頁(yè)。

3. 圖片比例3:2

3:2的圖片比例是我們最常見(jiàn)的，它是傳統(tǒng)135膠片的標(biāo)準(zhǔn)比例，也是大部分?jǐn)?shù)碼相機(jī)圖像傳感器的比例。使用3:2比例拍照時(shí)，橫豎構(gòu)圖都很方便。

應(yīng)用場(chǎng)景：資訊類(lèi)app配圖、用戶(hù)自己拍攝圖片上傳如愛(ài)彼迎。

4. 其他比例

其他比如4：3的比例也是比較常見(jiàn)的圖片比例，一般出現(xiàn)在大圖單個(gè)圖片的定義上6：8或者黃金分割比例也會(huì)在一些APP里面看到。

5. 設(shè)計(jì)APP頁(yè)面時(shí)選擇什么樣的圖片比例呢？

首先我們?cè)诙x圖片是選用豎圖還是橫圖的時(shí)候，是看我們?cè)O(shè)計(jì)的產(chǎn)品本身，是某一種固定的比例圖，還是不規(guī)則圖片比例。

高圖

人物類(lèi)

高圖隨著智能手機(jī)的普及，越來(lái)越多的應(yīng)用于我們的app設(shè)計(jì)中，首先是人物類(lèi)豎版更容易看出全身信息。

圖書(shū)封面

電影海報(bào)

橫圖

橫圖在設(shè)計(jì)時(shí)更節(jié)省屏幕空間，比如風(fēng)景、短視頻封面、房產(chǎn)推薦圖都比較喜歡用橫圖。

視頻封面

方圖

方圖的應(yīng)用其實(shí)是最廣泛的、不管是橫圖還是豎圖，方圖都能最大限度滿(mǎn)足主體物最大顯示，而且方圖還能滿(mǎn)足文藝感，所以，APP設(shè)計(jì)時(shí)很受設(shè)計(jì)師青睞。

電商圖

商品圖

裁切規(guī)則

有的人可能會(huì)問(wèn)，按比例之后圖片怎么放到框框里面呢？

一般的裁切規(guī)則有以下幾種，其中第一種比較常見(jiàn)，第二種視覺(jué)效果略差，但是能滿(mǎn)足圖片信息全部展現(xiàn)，第三種智能裁切，對(duì)技術(shù)要求比較高，圖像識(shí)別技術(shù)這塊會(huì)有一定的要求。

圖片手勢(shì)操作有哪些？

圖片的手勢(shì)操作分為：上下滾動(dòng)、左右側(cè)滑、單擊、雙擊、放大這幾種，最新發(fā)布的手勢(shì)交互，無(wú)觸碰交互可能未來(lái)也會(huì)是一個(gè)趨勢(shì)。

1. 上下滾動(dòng)、左右側(cè)滑

上下滾動(dòng)：

上下滾動(dòng)這個(gè)常見(jiàn)的手勢(shì)一般用于頁(yè)面內(nèi)容超過(guò)一屏?xí)r，可以滑動(dòng)查看下面的信息，一般內(nèi)容屬于相同層級(jí)且可以一直滾動(dòng)查看相同內(nèi)容，如瀑布流。

左右側(cè)滑：

左右側(cè)滑手勢(shì)更多用于側(cè)滑之后的圖片頁(yè)面為相同層級(jí)，且圖片本身需要拓展更多內(nèi)容的情況，更大拓展橫向豎向內(nèi)容空間利用率。

2. 單擊、雙擊、放大

單擊：

單機(jī)操作是常見(jiàn)的交互方式，圖片、文字、鏈接、按鈕等都會(huì)應(yīng)用到。

雙擊：

一般用于對(duì)圖片本身進(jìn)行某些操作，比如喜歡、收藏、贊等。

放大：

放大圖片在圖片想查看細(xì)節(jié)時(shí)會(huì)經(jīng)常用到，有一些APP圖片是不支持放大功能的，在大圖頁(yè)應(yīng)用較多。

圖版率是什么？

在頁(yè)面設(shè)計(jì)中，除了文字之外，通常都會(huì)加入圖片或是插圖等視覺(jué)直觀性的內(nèi)容。表示這些視覺(jué)要素所占面積與整體頁(yè)面的之間比率的就是圖版率。簡(jiǎn)單說(shuō)來(lái)，圖版率就是頁(yè)面中圖片面積的所占比。這種文字和圖片所占的比率，對(duì)于頁(yè)面的整體效果和其內(nèi)容的易讀性會(huì)產(chǎn)生巨大的影響。

但并不是圖版率越高越好，要看實(shí)際項(xiàng)目中是否需要傳遞給用戶(hù)豐富、活潑、熱鬧的感受。

圖片本身的內(nèi)容也會(huì)起到一定作用。

提升圖版率的方法：加入一些圖標(biāo)設(shè)計(jì)，或者圖片和色塊結(jié)合都可以起到視覺(jué)上提升圖版率的作用，當(dāng)然如果沒(méi)有圖片也可以畫(huà)一些插畫(huà)跟背景結(jié)合的形式。

還有哪些圖片處理效果？

除了上面我們介紹的圖片的排布方式，圖片的比例、手勢(shì)操作等，設(shè)計(jì)圖片時(shí)，怎么能讓APP更有特色呢？我們來(lái)看下一一些圖片常見(jiàn)的處理手法。

1. 摳圖+背景色效果

應(yīng)用場(chǎng)景：圖片內(nèi)容較為固定，圖比如某一些品類(lèi)的入口，品類(lèi)不宜過(guò)多，要不然運(yùn)營(yíng)設(shè)計(jì)同學(xué)會(huì)有很大壓力，如果經(jīng)常更換運(yùn)營(yíng)成本也較高。

優(yōu)勢(shì)：背景能自定義，跟圖片本身結(jié)合能產(chǎn)生很強(qiáng)的設(shè)計(jì)感，頁(yè)面整體設(shè)計(jì)風(fēng)格可控。

2. 圖片+毛玻璃效果

應(yīng)用場(chǎng)景：一般用于APP頁(yè)面，對(duì)性能有一定的消耗，wap端應(yīng)用比較少。

優(yōu)勢(shì)：毛玻璃效果能更大程度滿(mǎn)足圖片氛圍的同時(shí)，又能兼顧文字內(nèi)容展現(xiàn)。

3. 圖片+漸變遮罩效果

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

圖片缺省及極端情況

圖片加載本身要比文字要更慢一些，在網(wǎng)絡(luò)不好，或者沒(méi)網(wǎng)的時(shí)候，會(huì)有哪些辦法讓用戶(hù)減少挫敗感呢？

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

如果需要強(qiáng)調(diào)品牌可以加入logo的形式，不宜過(guò)深，能起到傳達(dá)品牌形象的作用，還有一種就是直接灰色色塊占位，讓用戶(hù)了解這個(gè)區(qū)域是一個(gè)圖片，但是未加載出來(lái)。還會(huì)有一個(gè)app在灰色塊上面加一個(gè)白光動(dòng)效，傳遞正在加載中這一信息。

2. 彩色塊

一般用于圖片瀑布流，查看圖片滑動(dòng)過(guò)快或者網(wǎng)絡(luò)不好時(shí)，有2種展現(xiàn)規(guī)則，第一種是設(shè)計(jì)師自定義一批色值，開(kāi)發(fā)隨機(jī)調(diào)取，第二種計(jì)算當(dāng)前需要展現(xiàn)的圖片的顏色平均值，給出一個(gè)色塊，效果更好，但是有一定開(kāi)發(fā)成本。

看到最后的小伙伴有福了，最后送上高清免費(fèi)國(guó)外網(wǎng)站：

關(guān)注更多設(shè)計(jì)思維、UI動(dòng)效、創(chuàng)意請(qǐng)關(guān)注：有愛(ài)設(shè)計(jì)站