2022-3-3 周周
在 UI 設(shè)計(jì)中，配圖的好壞將直接影響著界面的品質(zhì)及用戶的視覺體驗(yàn)?？v觀如今高質(zhì)量的界面設(shè)計(jì)，具有設(shè)計(jì)感的配圖不僅是吸引用戶的重要元素，能比原本平淡無奇的文字界面更讓人產(chǎn)生點(diǎn)擊欲望，還能體現(xiàn)出設(shè)計(jì)師的品味、以及相關(guān)方面的專業(yè)性。
在這個(gè)快節(jié)奏的時(shí)代，相比文字，圖像的傳達(dá)效率會(huì)更快、更高、更有助于用戶輕松理解及記憶。配圖用的好，往往能起到?jīng)Q定畫面基調(diào)、流程引導(dǎo)、視覺平衡等關(guān)鍵作用，所以，在同等樣式的布局下，因圖片的使用及處理方式的不同，界面的品質(zhì)也會(huì)存在較大的差異。本篇文章將介紹一些在 UI 設(shè)計(jì)中配圖的基礎(chǔ)知識(shí)，幫助大家在圖片列表、背景處理、圖文混排、頭圖等相關(guān)界面設(shè)計(jì)無從下手時(shí)提供靈感，在選擇圖片、后續(xù)處理時(shí)如何做到有規(guī)律可循帶來一些思路。
本期大綱
1. 為什么要重視圖片
在文字出現(xiàn)之前，人們都是靠看到的圖像來理解信息內(nèi)容，即便后來文字能表達(dá)出很豐富的內(nèi)容，圖示也不可少，試想一下，當(dāng)別人拿著密密麻麻的數(shù)據(jù)給你看時(shí)，能看的頭皮發(fā)麻，你更希望有一張清晰的圖表，但并不能說明別人的數(shù)據(jù)不清晰。所以，圖像相比文字能更具說服力、更容易傳達(dá)信息，使讀者產(chǎn)生共鳴、震撼內(nèi)心，讓人看了一目了然，能直觀的與人產(chǎn)生互動(dòng)。
當(dāng)說到 UI 設(shè)計(jì)中的圖片非常重要時(shí)，并不是說文字就一定比圖片弱，好的文字也能帶給我們無限的遐想，只能說在更大的概率上圖片和文字哪個(gè)更吸引人，所以我更傾向于觀賞圖片，然后感受到帶來的美好。但是，如果非要問我選擇哪一個(gè)時(shí)，我只能說“只有小孩子才做選擇題，我（設(shè)計(jì)師）全都要”，圖片可以表達(dá)出豐富的內(nèi)容，再用文字言簡意賅，是一個(gè)非常完美的組合。
2. 常用的圖片格式
圖片有多種格式，如 JPG、GIF、PNG、TIFF、RAW、BMP、WEBP…等，在 UI 設(shè)計(jì)中，最常用的無非 JPG、GIF、PNG 三種。
JPG：目前為止使用最多的圖片格式，兼容各大操作系統(tǒng)瀏覽器及編輯軟件，非常方便被打開和處理，但不能顯示透明底，壓縮后會(huì)失去一部分原始信息。
PNG：如需編輯，PNG 應(yīng)該算是所有圖片格式中的最佳選擇，支持無損壓縮及透明底，但針對(duì)需要高保真的復(fù)雜圖片，壓縮后的文件較大，且有少數(shù)的瀏覽器不支持。
GIF：動(dòng)效圖片，支持透明底及無損壓縮，通常由視頻格式的內(nèi)容轉(zhuǎn)換而來，但對(duì)色彩有非常嚴(yán)格的要求，數(shù)量最多不超過 256 種，相比前面兩種，GIF 格式的文件更大。
在移動(dòng)端 UI 設(shè)計(jì)中，我歸納了最常用的幾個(gè)圖片比例，分別是 1:1、3:2、4:3、16:9 四種，這些比例都是源于最早的膠片攝影及現(xiàn)代相機(jī)的傳感器演變而來。當(dāng)我們不知如何選擇比例時(shí)，首先需清楚的了解界面圖片的應(yīng)用場景、來源用戶以及圖片比例背后的緣由，否則將很難把控，下面將針對(duì)這幾個(gè)比例作具體分析。
1:1 比例
因?yàn)橄鄼C(jī)結(jié)構(gòu)的原因，早期最傳統(tǒng)的 120 膠片畫幅就是正方形（6*6cm），即 1：1 的比例，此比例更容易的將構(gòu)圖規(guī)整，使其最大程度的突出照片主體。
在如今的電商 APP 中，商品圖片絕大多數(shù)都遵循了 1：1 的比例，不管橫向還是縱向都能將信息進(jìn)行完整化的展示，且方便多場景、頁面的適配。另外，用戶頭像也都使用了這一比例。
3:2 比例
起初 135 膠卷的比例就是 3：2，主要是因相機(jī)取景框的大小而決定。在移動(dòng)端，這一比例使用也比較廣泛，例如新聞、旅游類型產(chǎn)品，在拍照之后無需裁剪等處理，直接上傳使用，非常方便。
4:3 比例
隨著攝影的發(fā)展，小/微型相機(jī)出現(xiàn)而誕生 4：3比例，且移動(dòng)設(shè)備發(fā)展迅速，在非專業(yè)攝影的情況下，手機(jī)能很大程度上代替單反并成為主流拍照設(shè)備，目前市場上主流手機(jī)的拍攝尺寸基本都為4：3比例。相比3：2的圖片，4：3圖片占比更大，能最大化顯示圖片以突出重點(diǎn)信息。
16:9 比例
根據(jù)人體工程學(xué)的研究，人眼視野范圍的比例約為 16：9 的長方形，所以電視、顯示器及投影范圍的設(shè)計(jì)都是基于這個(gè)黃金比例。
線上產(chǎn)品不用多說，影視類型的產(chǎn)品均采用 16：9 的尺寸，例如愛奇藝、優(yōu)酷、騰訊視頻等，到目前為止，這個(gè)比例在設(shè)定上還沒出現(xiàn)過問題。
在上述 4 個(gè)尺寸中，最容易混淆的是 3：2 和 4：3，如果不清楚如何選擇，請根據(jù)產(chǎn)品目標(biāo)定位，看看到底是以內(nèi)容為主導(dǎo)還是圖片為主導(dǎo)。例如：資訊類型產(chǎn)品很注重標(biāo)題文案，即會(huì)使用上文下圖、左文右圖的版式，選擇 3：2 作為封面，以降低圖片的視覺重量；旅游、租房類產(chǎn)品，則可使用 4：3 的圖片，以傳達(dá)更多信息。這種選擇方式雖然不是絕對(duì)，但當(dāng)我們陷入兩難的困境時(shí)，可作為參考依據(jù)幫助快速?zèng)Q策。
單圖布局
全屏：具有很強(qiáng)的視覺沖擊力，非常適合用于傳播行業(yè)屬性及品牌調(diào)性。單圖全屏布局處理靈活，可整體突出、局部特寫或加純色不透明度紋理/遮罩，對(duì)圖片細(xì)節(jié)、構(gòu)圖等有較高的質(zhì)量要求，一般用于登錄、啟動(dòng)引導(dǎo)、產(chǎn)品介紹背景等頁面。
卡片：以單張圖片作為視覺引導(dǎo)，寬高不固定，但占據(jù)界面大部分區(qū)域及重要位置，主要突出產(chǎn)品調(diào)性和成為吸引用戶的流量入口，促使用戶與其產(chǎn)生交互行為。常用于產(chǎn)品詳情頁頭圖、推薦頁、專題入口等。
圖文列表
在圖文列表界面，很多時(shí)候，我們都在想一個(gè)問題，到底是選擇左圖右文、左文右圖還是上圖下文？所以我們首先要明白 F 式（從上到下、從左到右）瀏覽布局，這也跟人眼的瀏覽習(xí)慣相吻合，然后確定圖、文信息內(nèi)容的權(quán)重，根據(jù)優(yōu)先級(jí)將重要的信息放在關(guān)鍵位置。
左文右圖：以文字為主、圖片為輔，主要強(qiáng)調(diào)文字信息，且圖片與標(biāo)題的關(guān)聯(lián)性不是很大，能減少圖片對(duì)文字的干擾，對(duì)圖片的質(zhì)量要求不高，很多新聞、資訊類產(chǎn)品都是選用這種方式布局。
左圖右文：在圖片內(nèi)容優(yōu)先于文本內(nèi)容的情況下，采用左圖右文的方式，更強(qiáng)調(diào)以圖片直觀的傳達(dá)內(nèi)容、吸引用戶的視線，對(duì)圖片的質(zhì)量要求高于左文右圖，一般是電商、旅游類產(chǎn)品的最佳之選。
上圖下文：一行只顯示一張圖片，大多采用橫圖，同屏一般不超過兩個(gè)內(nèi)容，用戶需要從圖片中獲取大量信息，對(duì)圖片的質(zhì)量要求很高，大多有專門的人員審核，以完成對(duì)圖片的品質(zhì)的把控。這種方式很占用界面的縱向空間，部分租房類、藝術(shù)類產(chǎn)品會(huì)選用此種方式。
并排：相同高度的比例控制，是較為經(jīng)典圖文布局，相比單列，同屏可展示更多的圖片內(nèi)容且空間利用率更高，能同時(shí)向用戶傳達(dá)更多信息。
錯(cuò)位：圖片高度自適應(yīng)（瀑布流），在限制寬度的條件下，高度自由發(fā)揮，讓圖片得到更多的舒展，利用率更高。雙列錯(cuò)位的排版方式增加了版式的趣味性，可緩解用戶在長時(shí)間瀏覽下的視覺疲勞，需要注意的是寬高比例不要太大、成跳躍式的變化，否則可能導(dǎo)致視覺混亂，且低高度的圖片信息很容易被忽略。
多圖組合
規(guī)則：3 張或以上的規(guī)則的圖片組合很常見，主要用圖片列表來引導(dǎo)用戶查看更多，通常利用單排左右滑動(dòng)或九宮格的方式呈現(xiàn)。例如旅游、租房、影視類產(chǎn)品，包括手機(jī)相冊、社交圈子等。
不規(guī)則：多圖不規(guī)則比例并不常見，因移動(dòng)端設(shè)備可視寬度有限，容易導(dǎo)致混亂的錯(cuò)覺。藝術(shù)、拼圖類產(chǎn)品看到的居多，另外，部分社交類產(chǎn)品為了展示不同遠(yuǎn)近距離的層級(jí)關(guān)系也會(huì)用到這種排版方式。
圖片常見的手勢操為：滑動(dòng)、點(diǎn)擊、雙指縮放，除此之外，還有很多針對(duì)所有元素都可以操作的交互手勢，這里就不多說了，下面單獨(dú)對(duì)圖片手勢作出介紹。
滑動(dòng)
上下滑動(dòng)：通常在圖文列表或單張圖片內(nèi)容超過一屏的情況下，通過上下滑動(dòng)查看更多信息。
左右滑動(dòng)：為了拓展更多內(nèi)容，多用于相同等級(jí)的圖片列表或大圖切換，在頁面列表中會(huì)將無法同時(shí)展示的圖片呈現(xiàn)一部分或以數(shù)量作為提示，引導(dǎo)用戶探索以發(fā)現(xiàn)更多。
點(diǎn)擊/長按
單擊：單擊可查看圖片，從縮略圖到詳情或大圖的切換操作；
雙擊：針對(duì)圖片本身進(jìn)行某些操作，比如喜歡、點(diǎn)贊等，另外，部分圖片通過雙擊進(jìn)行一定比例的放大縮小。
長按：調(diào)出圖片的部分屬性信息、下載圖片等進(jìn)行下一步操作。
雙指縮放
當(dāng)我們需要查看圖片的某些局部信息或細(xì)節(jié)時(shí)，就會(huì)使用雙指（開合）縮放的交互手勢。
1. 圖片遮罩
因圖片的色彩變化不規(guī)則，為了保證圖片上層文字的可讀性，通常會(huì)在文字區(qū)域加一個(gè)純色遮罩，也可設(shè)置不透明度的漸變效果，使遮罩跟圖片的過渡更加協(xié)調(diào)，提升視覺美觀度。
2. 毛玻璃（背景模糊）
毛玻璃效果通常出現(xiàn)在應(yīng)用的 2、3 級(jí)頁面，對(duì)應(yīng)用性能會(huì)有一定的消耗，一般使用封面圖片進(jìn)行大幅度的高斯模糊作為背景使用，可在上層加上一定透明度的蒙層配合使用，透明度數(shù)值根據(jù)不同的圖片色彩及使用場景適當(dāng)?shù)恼{(diào)整。毛玻璃效果既能滿足文字內(nèi)容的清晰呈現(xiàn)，又能提供場景氛圍并提升界面的品質(zhì)感與神秘感，我們最熟悉的當(dāng)屬音樂播放頁面的背景模糊效果了。
3. 摳圖+純色背景組合
對(duì)于自營平臺(tái)，內(nèi)容較為固定的商品頁面，可將商品摳圖后自定義背景，讓界面的整體設(shè)計(jì)風(fēng)格可控，延展性更高。不適配平臺(tái)類型應(yīng)用，因?yàn)闀?huì)讓商家產(chǎn)生較高的運(yùn)營成本。
4. 圓角設(shè)定
圖片圓角值設(shè)定，能體現(xiàn)出不同的產(chǎn)品屬性及氣質(zhì)。例如：直角比較硬朗，給人高冷、力量的感覺，小圓角傳達(dá)出安全、專業(yè)的屬性，而大圓角顯得活潑、可愛，更有親和力。
5. 圖片出界
圖片出界常用于運(yùn)營設(shè)計(jì)，例如圖片輪播、膠囊 banner、專題頁等，另外，經(jīng)摳圖處理過的圖片也可用在商品詳情頁頂部圖示。這種效果能有效避免呆板，營造出畫面氛圍，制造出更強(qiáng)烈的視覺沖擊力。
1. 符合產(chǎn)品氣質(zhì)
UI 設(shè)計(jì)中，任何一個(gè)設(shè)計(jì)思路、想法及效果樣式都是為產(chǎn)品而服務(wù)，圖片也不例外，需要根據(jù)不同的場景進(jìn)行合理搭配，好的配圖更能與用戶產(chǎn)生共鳴。
2. 切合主體，表達(dá)產(chǎn)品核心內(nèi)容
配圖必須要明確主體，一眼就能看出核心內(nèi)容，且不可以炫技或好看為主，否則會(huì)被多余的元素、效果影響主體視覺導(dǎo)致沒有重點(diǎn)。但確定好一張圖片的風(fēng)格及色系后，后續(xù)也要保持統(tǒng)一。
3. 風(fēng)格統(tǒng)一
圖片以實(shí)用性為準(zhǔn)，如果一味的追求漂亮、好看，最終可能形色各異造成視覺的不統(tǒng)一，嚴(yán)重影響用戶體驗(yàn)。設(shè)計(jì)師在選圖時(shí)需要對(duì)風(fēng)格精準(zhǔn)把控或后續(xù)稍加處理，以形成統(tǒng)一的視覺。
常見的控制方向有圖片類型（位圖/插畫/形狀）、視角（平視/仰視/俯視）、商品背景（簡約/復(fù)雜/純色）、呈現(xiàn)區(qū)域（堆積/局部/特寫）、構(gòu)圖（中心/水平線/對(duì)稱/對(duì)角線…）等。另外，還有很多抽象的方式但并不是絕對(duì)的，我們都可以嘗試從不同的角度去調(diào)整，力求讓所有圖片達(dá)到最佳視覺效果。
4. 顏色豐富
因人的天性即向往美好、品質(zhì)（非物質(zhì)化）生活，固品質(zhì)感的配圖更容易吸引用戶的注意力，讓人想要擁有的感覺，如果色彩不夠飽滿，不管風(fēng)格是多么統(tǒng)一，也達(dá)不到良好的用戶體驗(yàn)。在選好圖片后，可對(duì)色相、飽和度、亮度稍加調(diào)整，以確保色彩飽滿、豐富。
5. 設(shè)計(jì)稿需呈現(xiàn)上線的實(shí)際效果
有時(shí)候做設(shè)計(jì)為了方便，整個(gè)界面的圖片直接復(fù)用同一張，即便設(shè)計(jì)的再好，也可能隱藏著不易察覺的瑕疵。需要說明的是，一個(gè)成熟且專業(yè)的設(shè)計(jì)師，首先要對(duì)自己負(fù)責(zé)，然后才是設(shè)計(jì)，即便是初稿，在即將呈現(xiàn)給大家或匯報(bào)前，一定要給出上線后最真實(shí)的效果，這樣方便他人貼合實(shí)際給出一些方向性的建議，幫助自己更好的決策。經(jīng)處理過的實(shí)際配圖能體現(xiàn)整體效果，方便找出圖片以外的設(shè)計(jì)缺陷，例如版式、字體大小、層級(jí)關(guān)系等問題。
6. 文件大小處理
靜態(tài)圖片常用的無非 PNG、JPG 這兩種格式，文件較大的圖片會(huì)影響打開頁面或刷新時(shí)的速度，本地圖片更會(huì)增加應(yīng)用包的大小。從設(shè)計(jì)稿中導(dǎo)出圖片時(shí)需要控制文件大小，如無特別（超大圖）情況，切勿主動(dòng)降低圖片質(zhì)量后再導(dǎo)出，否則會(huì)影響界面整體的視覺美觀度。
這里推薦一個(gè)線上無損智能壓縮神器： https://tinypng.com ，僅限 PNG、JPG、WEBP 格式的圖片。
上圖可以看出，圖片在壓縮了76%后，由1.4MB變成了332KB，肉眼很難看出（查看大圖）質(zhì)量上的損失。
7. 倍率切圖
切圖不像以前那么麻煩，同一張圖片需要手動(dòng)導(dǎo)出多套規(guī)范，現(xiàn)在只需在軟件（或安裝插件）標(biāo)記好切圖，上傳到類似藍(lán)湖、摹客等第三方線上應(yīng)用，分享給團(tuán)隊(duì)成員即可各自下載 web、Android、iOS 對(duì)應(yīng)的多套規(guī)范制圖。
設(shè)計(jì)師在設(shè)計(jì)過程中，一定要按照規(guī)范的最大極限保留原圖，以 iOS 系統(tǒng)@1x 規(guī)范設(shè)計(jì)稿為例，如果圖片的寬度是 100px，那么導(dǎo)入軟件中的圖片寬度至少要在 300 以上，然后再進(jìn)行縮?。≒S 中需轉(zhuǎn)為智能對(duì)象），如果低于 300px，開發(fā)在導(dǎo)出@3x 的圖片就會(huì)失真，可能會(huì)因損失像素而出現(xiàn)模糊的情況。
文章中所介紹的圖片使用方法及處理技巧，并非最好、唯一的答案，但在你沒有更好的方法之前，多多少少能從中得到啟發(fā)。UI 中圖片設(shè)計(jì)的本質(zhì)在于自身的專業(yè)能力，然后用自己的視覺產(chǎn)出和設(shè)計(jì)手段去吸引、打動(dòng)用戶，從而為產(chǎn)品帶來利益，也能體現(xiàn)出設(shè)計(jì)價(jià)值。
不得不承認(rèn)，人們很多時(shí)候都是通過視覺表象決定是否需要深入了解、擁有某一件事/物，設(shè)計(jì)師就是在做視覺表象的表達(dá)，如果圖片用的好，不僅能讓你的設(shè)計(jì)更加出彩，還有一定幾率轉(zhuǎn)化用戶，形成商業(yè)價(jià)值。
文章來源：優(yōu)設(shè)網(wǎng) 作者：大漠飛鷹CYSJ
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.alimai.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.alimai.net