為什么要重視APP的圖文頁面？

從人類進(jìn)化的結(jié)果來看，圖像比文字更受大腦青睞。在沒有文字之前，人類靠的是“見過”的圖像。所以在APP界面的設(shè)計(jì)中，圖片比文字更容易讓人產(chǎn)生點(diǎn)擊的欲望。APP界面的設(shè)計(jì)也廣泛使用圖片

曾經(jīng)有一個(gè)國(guó)外的研究成果，引起了人們的關(guān)注。圖片內(nèi)容排序，人臉>:人>:動(dòng)物>:物體。在選擇單幅圖片時(shí)，也可以在滿足產(chǎn)品要求的同時(shí)，從生理角度考慮對(duì)眼球的吸引力

曾經(jīng)負(fù)責(zé)過百萬訪問量的APP的圖片設(shè)計(jì)，想分享一下制作照片APP時(shí)的一些想法，讓大家在設(shè)計(jì)APP圖片列表、圖文混合、圖片流、設(shè)計(jì)圖片相關(guān)模塊時(shí)提供一些思路和啟發(fā)。

希望對(duì)你有幫助。

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

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

單畫面全屏

定義:單圖全屏是指全圖填充屏幕，一般用于打開啟動(dòng)頁面、指南頁面、登錄頁面背景、詳情頁產(chǎn)品介紹底圖等。

優(yōu)點(diǎn):單幅畫面沖擊力更強(qiáng)，更容易傳達(dá)品牌調(diào)性，畫面處理更靈活。

缺點(diǎn):對(duì)畫質(zhì)要求高，比如構(gòu)圖，細(xì)節(jié)。如果是產(chǎn)品圖片背景，對(duì)主要內(nèi)容集中區(qū)域的顯示會(huì)有一定的要求。

可以使用拼接效果，比如滴滴的啟動(dòng)頁面，或者在圖片頂部添加蒙版和紋理，讓圖片傳達(dá)出文藝、高端或者其他任何與品牌形象相關(guān)的感覺。第二張圖中的圖片是有紋理的，這樣更有紋理。最后一個(gè)把整個(gè)產(chǎn)品作為背景底圖，讓產(chǎn)品表達(dá)的更直接。配合卡片輔助信息或引導(dǎo)按鈕，可以提高用戶的決策效率。

單張圖片卡(不要下拉)

定義:在第一個(gè)屏幕頁面，一個(gè)畫面設(shè)計(jì)是主要的視覺引導(dǎo)，其他的會(huì)有操作信息和文字信息。

用途:一般用于突出產(chǎn)品的調(diào)性，如交友軟件的卡牌頁面、分享的登陸頁面、一些專題的入口等。圖片作為產(chǎn)品的載體和與用戶交流的入口，可以讓用戶的目光第一眼就聚焦在圖片上，從而達(dá)到查看其他信息或引導(dǎo)其他交互操作的目的。

單幅圖片+輔助信息(下拉)

定義:在第一個(gè)屏幕上，出現(xiàn)一個(gè)產(chǎn)品圖片或全幅、高適應(yīng)性的產(chǎn)品圖片。

用途:某些產(chǎn)品的大頁面或詳細(xì)頁面的頁眉，可以增強(qiáng)產(chǎn)品氛圍，引出產(chǎn)品形式和詳細(xì)內(nèi)容。

需要注意的是:

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

2.圖形和文本列表

左側(cè)圖片和右側(cè)文本-更常見的圖片和文本列表組合

F型瀏覽指引線，更重要的圖片信息放在前面，左圖右文模式強(qiáng)調(diào)吸引用戶瀏覽注意力。

應(yīng)用場(chǎng)景:搜索結(jié)果或推薦列表，如房地產(chǎn)APP搜索結(jié)果列表、購物搜索結(jié)果、播放列表、游記類型結(jié)果頁面。

左側(cè)文本在右側(cè)-更常見的圖形列表組合

信息類型，新聞?lì)恆pp，比較強(qiáng)調(diào)文字標(biāo)題信息，往往圖片和標(biāo)題對(duì)應(yīng)度沒那么高，有的是用戶自己上傳的，不可控因素很多。

應(yīng)用場(chǎng)景:信息流feed，經(jīng)常和三圖模式、純文本模式一起出現(xiàn)，比如今日頭條、房產(chǎn)app、新聞推薦結(jié)果、天氣卡等。

圖像流:

一列的高度限制

定義:寬高比是固定的，主要是圖片上下，或者圖片上兩種形式的文字。

用途:一般用于拍攝或上傳固定高度比的圖片，多采用水平圖片，第一屏至少可以顯示兩張半圖片，垂直圖片也有，但很少。

柱子的高度不受限制

定義:寬高比不固定，寬滿，高不限。主要有兩種形式:圖片+文字組合，上下結(jié)構(gòu)，或者圖片上的文字。

用途:一般用于捕捉或用戶上傳圖片的長(zhǎng)寬比不固定時(shí)，以滿足大部分圖片的信息顯示。比如百度的大頁面大圖片模式就是采用這種布局的經(jīng)典例子。

圖像流:兩列

雙畫面高度限制-經(jīng)典畫面流布局

定義:兩列圖片的組合高度限制通常是指一行兩列的圖片，圖片的高度按照相同的比例控制。

用途:一般用于相冊(cè)封面、海報(bào)封面、視頻截圖封面等。，例如:bilibili的推薦模塊。

兩張圖不限高度——瀑布流水圖

瀑布流布局的出現(xiàn)，一方面可以避免造成視覺疲勞，另一方面可以滿足在寬度有限的情況下，圖片的高度可以延伸更多的要求，使圖片的空利用率更高，產(chǎn)品信息更豐富。

定義:兩列圖片的組合高度不限，通常指一行兩列的圖片。圖片適應(yīng)性強(qiáng)，用于產(chǎn)品圖片高度不固定的產(chǎn)品類型。最高高度和最窄高度會(huì)有一個(gè)極端的案例定義。

用途:例如，圖片的短視頻封面，pinterest結(jié)果頁面的瀑布流，上下，或者只有圖片比較常見

圖片流:三列高度限制

定義:指一欄三張圖的設(shè)計(jì)，圖片控制固定比例。一般只有上下圖，或者標(biāo)題和三張圖的組合。

用途:例如，書籍封面、海報(bào)封面、今日頭條信息流、圖形組合等。

圓形圖片

定義:圖片為1: 1比例的圓形。

用途:圓形圖在APP圖片設(shè)計(jì)中也很常見，最常見的應(yīng)該是作為頭像使用。

常見組合:左圖、右圖、上圖、下圖、3-4個(gè)頭像一列或滑動(dòng)等。

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

多圖固定比例

定義:3個(gè)以上圖片模塊的組合，用于引導(dǎo)用戶查看某個(gè)圖片列表或引導(dǎo)用戶查看更多圖片。

用法:多圖定標(biāo)是多圖模式下最常見的情況。固定模塊下使用什么樣的搭配組合？一般要看拍攝的圖片數(shù)量。

當(dāng)然，在不同的圖片數(shù)量下會(huì)有很多顯示形式，主要是考慮到當(dāng)前的圖片數(shù)量占整個(gè)頁面的比例和顯示的圖片數(shù)量決定了設(shè)計(jì)風(fēng)格。

多圖組合有很多。可以參考微信朋友圈上傳的不同圖片呈現(xiàn)的模塊組合。

單幅畫面比例:一般有橫版和方圖兩種，取決于拍攝畫面本身的比例。

多圖不固定比例尺

其實(shí)不固定比例的多圖應(yīng)用不是很普遍。一般拍攝的圖片寬高比大且不規(guī)則，他們想在一個(gè)模塊中匹配組合，同時(shí)又能最大限度的顯示圖片內(nèi)容。

定義:圖片的長(zhǎng)寬比不是固定的，要組合成一個(gè)模塊。

難度:設(shè)計(jì)的時(shí)候需要限制高度。我在做的時(shí)候根據(jù)高圖數(shù)定義了幾個(gè)模型，然后讓開發(fā)者根據(jù)高圖數(shù)插入模板。

注意事項(xiàng):

左右圖應(yīng)該有一個(gè)極限的畫面寬度。當(dāng)時(shí)的定義是75%: 25%。為什么要規(guī)?；?？但是用戶使用的屏幕分辨率很多，只能進(jìn)行縮放，以避免畫面過寬或過窄的情況。

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

1: 1的圖片比例可以更大程度的突出主對(duì)象，在剪切橫縱圖后，應(yīng)用圖可以完整的保留圖片信息。

應(yīng)用場(chǎng)景:電子商務(wù)結(jié)果頁面圖片、相冊(cè)封面等。

2. 圖片比例16：9

16:9的屏幕比例是目前大部分電影來源的比例。從成本來看，16:9其實(shí)比16:10和4:3更劃算。同一塊大面板有很多小面板是16: 9切的，所以這個(gè)比例一直沿用。

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

3. 圖片比例3:2

3:2的畫面比例是我們最常見的，這是傳統(tǒng)135膠片的標(biāo)準(zhǔn)比例，也是大多數(shù)數(shù)碼相機(jī)圖像傳感器的比例。3:2比例拍照非常方便。

應(yīng)用場(chǎng)景:帶圖片的信息app，用戶像奧德馬斯·皮格特一樣拍照上傳。

4. 其他比例

其他的比例，比如4: 3，也是常見的圖片比例，一般出現(xiàn)在大圖中單個(gè)圖片的清晰度上，6: 8或者黃金分割比例也可以在一些應(yīng)用中看到。

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

首先，我們?cè)诙x畫面是垂直的還是水平的時(shí)候，要看我們?cè)O(shè)計(jì)的產(chǎn)品，是固定比例的畫面還是不規(guī)則比例的畫面。

高徒

字符類

隨著智能手機(jī)的普及，我們的app設(shè)計(jì)中越來越多地使用高畫質(zhì)。首先，在人物畫像中更容易看到全身信息。

圖書封面

電影賬單

水平圖

水平圖在設(shè)計(jì)上節(jié)省更多的屏幕空。比如風(fēng)景，短視頻封面，物業(yè)推薦圖都比較喜歡用橫排圖。

視頻封面

方形圖

其實(shí)，方塊圖的應(yīng)用是最廣泛的。無論是橫排還是豎排，方塊圖都能滿足主體最大限度的展示，也能滿足文藝感，所以APP設(shè)計(jì)很受設(shè)計(jì)師歡迎。

電子商務(wù)地圖

商品地圖

切割規(guī)則

可能有人會(huì)問，圖片縮放后怎么放入邊框？

一般切割規(guī)則有以下幾種，其中第一種比較常見，第二種視覺效果略差，但能滿足所有圖片信息顯示，第三種技術(shù)要求較高，圖像識(shí)別技術(shù)會(huì)有一定要求。

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

圖片的手勢(shì)操作可以分為:上下滾動(dòng)、左右滑動(dòng)、點(diǎn)擊、雙擊、放大。新發(fā)布的手勢(shì)交互和無觸摸交互可能是未來的趨勢(shì)。

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

上下滾動(dòng):

上下滾動(dòng)是一種常見的手勢(shì)，通常用于當(dāng)頁面內(nèi)容超過一個(gè)屏幕時(shí)，通過滑動(dòng)來查看以下信息。一般內(nèi)容屬于同一級(jí)別，可以隨時(shí)滾動(dòng)查看同一內(nèi)容，比如瀑布流。

左右側(cè)滑:

左右側(cè)滑手勢(shì)在側(cè)滑后的圖片頁面處于同一水平時(shí)使用較多，圖片本身需要擴(kuò)展更多的內(nèi)容，從而大大擴(kuò)展橫向和縱向內(nèi)容的利用率空。

2.單擊、雙擊并放大

點(diǎn)擊:

單機(jī)操作是常見的交互方式，還有圖片、文字、鏈接、按鈕等。將應(yīng)用于它。

雙擊:

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

放大:

放大圖片常用在想看圖片細(xì)節(jié)的時(shí)候。部分APP圖片不支持放大功能，在大頁面中應(yīng)用廣泛。

圖版率是什么？

在頁面設(shè)計(jì)中，除了文本，通常還會(huì)添加圖片或插圖等視覺視覺內(nèi)容。這些視覺元素占據(jù)的面積與整個(gè)頁面的比例就是版材率。簡(jiǎn)單來說，版材率就是頁面上圖片面積的比例。這種文字和圖片的比例會(huì)對(duì)頁面的整體效果和內(nèi)容的可讀性產(chǎn)生很大的影響。

但是，板率越高越好。這取決于實(shí)際項(xiàng)目是否需要向用戶傳達(dá)豐富、生動(dòng)、活潑的感受。

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

提高印版率的方法:增加一些圖標(biāo)設(shè)計(jì)或圖片與色塊結(jié)合，可以在視覺上提高印版率。當(dāng)然，如果沒有圖片，可以結(jié)合背景畫一些插畫。

還有哪些圖片處理效果？

除了圖片的排列，圖片的比例，手勢(shì)等等，如何在設(shè)計(jì)圖片的時(shí)候讓APP更有特色？讓我們來看看一些常見的圖像處理技術(shù)。

1.摳圖+背景顏色效果

應(yīng)用場(chǎng)景:圖片內(nèi)容比較固定，比如一些類別的入口，類別不要太多；否則，操作和設(shè)計(jì)專業(yè)的學(xué)生將面臨很大的壓力，如果經(jīng)常更換，操作成本會(huì)更高。

優(yōu)點(diǎn):背景可定制，與圖片本身結(jié)合產(chǎn)生強(qiáng)烈的設(shè)計(jì)感，頁面整體設(shè)計(jì)風(fēng)格可控。

2.圖片+磨砂玻璃效果

應(yīng)用場(chǎng)景:一般用于APP頁面，消耗一定的性能，wap應(yīng)用較少。

優(yōu)點(diǎn):磨砂玻璃效果可以更大程度上滿足畫面氛圍，同時(shí)可以兼顧文字內(nèi)容的顯示。

3.圖片+漸變蒙版效果

應(yīng)用場(chǎng)景:一般用于在背景圖片顏色未知的情況下，將背景圖片放置在文本的底部，以保證任何圖片下文本的可讀性。插畫中還加入了色彩，具有一定的審美視覺體驗(yàn)。

圖片默認(rèn)和極端情況

圖片加載本身比文字慢。當(dāng)網(wǎng)絡(luò)不好或者沒有網(wǎng)絡(luò)的時(shí)候，用戶有哪些方式可以減少挫敗感？

1.徽標(biāo)+灰色背景，或僅灰色背景

如果有必要強(qiáng)調(diào)品牌可以以logo的形式加入，也不要太深，可以起到傳達(dá)品牌形象的作用。還有一種方法是直接占領(lǐng)灰色色塊，讓用戶知道這個(gè)區(qū)域是圖片，但是還沒有加載。還將有一個(gè)應(yīng)用程序在灰色塊上添加白光效果，以傳達(dá)它正在加載的信息。

2.色塊

一般用于圖片瀑布流，觀看圖片滑動(dòng)過快或者網(wǎng)絡(luò)不好的時(shí)候，有兩種顯示規(guī)則。第一種是設(shè)計(jì)師定義一批色值，隨機(jī)展開。第二種是計(jì)算目前需要顯示的圖片的平均顏色，給出一個(gè)色塊，效果比較好，但是有一定的開發(fā)成本。