編輯導讀：人是視覺動物，相比於文字，人們更容易被圖片吸引。而如何在介面設計中運用好圖片，給使用者更好的視覺體驗，本文作者有自己的想法，一起來看看吧。
在UI設計中，配圖的好壞將直接影響著介面的品質及使用者的視覺體驗。縱觀如今高質量的介面設計，具有設計感的配圖不僅是吸引使用者的重要元素，能比原本平淡無奇的文字介面更讓人產生點選慾望，還能體現出設計師的品味、以及相關方面的專業性。
在這個快節奏的時代，相比文字，影象的傳達效率會更快、更高、更有助於使用者輕鬆理解及記憶。配圖用的好，往往能起到決定畫面基調、流程引導、視覺平衡等關鍵作用，所以，在同等樣式的佈局下，因圖片的使用及處理方式的不同，介面的品質也會存在較大的差異。本篇文章將介紹一些在UI設計中配圖的基礎知識，幫助大家在圖片列表、背景處理、圖文混排、頭圖等相關介面設計無從下手時提供靈感，在選擇圖片、後續處理時如何做到有規律可循帶來一些思路。
一、瞭解UI設計中的圖片
1。 為什麼要重檢視片
在文字出現之前，人們都是靠看到的影象來理解資訊內容，即便後來文字能表達出很豐富的內容，圖示也不可少，試想一下，當別人拿著密密麻麻的資料給你看時，能看的頭皮發麻，你更希望有一張清晰的圖表，但並不能說明別人的資料不清晰。所以，影象相比文字能更具說服力、更容易傳達資訊，使讀者產生共鳴、震撼內心，讓人看了一目瞭然，能直觀的與人產生互動。
當說到UI設計中的圖片非常重要時，並不是說文字就一定比圖片弱，好的文字也能帶給我們無限的遐想，只能說在更大的機率上圖片和文字哪個更吸引人，所以我更傾向於觀賞圖片，然後感受到帶來的美好。但是，如果非要問我選擇哪一個時，我只能說“只有小孩子才做選擇題，我（設計師）全都要”，圖片可以表達出豐富的內容，再用文字言簡意賅，是一個非常完美的組合。
2。 常用的圖片格式
圖片有多種格式，如JPG、GIF、PNG、TIFF、RAW、BMP、WEBP…等，在UI設計中，最常用的無非JPG、GIF、PNG三種。
JPG：目前為止使用最多的圖片格式，相容各大作業系統瀏覽器及編輯軟體，非常方便被開啟和處理，但不能顯示透明底，壓縮後會失去一部分原始資訊。
PNG：如需編輯，PNG應該算是所有圖片格式中的最佳選擇，支援無失真壓縮及透明底，但針對需要高保真的複雜圖片，壓縮後的檔案較大，且有少數的瀏覽器不支援。
GIF：動效圖片，支援透明底及無失真壓縮，通常由影片格式的內容轉換而來，但對色彩有非常嚴格的要求，數量最多不超過256種，相比前面兩種，GIF格式的檔案更大。
二、圖片的使用及處理方法
1。 圖片的使用比例
在移動端UI設計中，我歸納了最常用的幾個圖片比例，分別是1：1、3：2、4：3、16：9四種，這些比例都是源於最早的膠片攝影及現代相機的感測器演變而來。當我們不知如何選擇比例時，首先需清楚的瞭解介面圖片的應用場景、來源使用者以及圖片比例背後的緣由，否則將很難把控，下面將針對這幾個比例作具體分析。
1）1:1 比例
因為相機結構的原因，早期最傳統的120膠片畫幅就是正方形（6*6cm），即1：1的比例，此比例更容易的將構圖規整，使其最大程度的突出照片主體。
在如今的電商APP中，商品圖片絕大多數都遵循了1：1的比例，不管橫向還是縱向都能將資訊進行完整化的展示，且方便多場景、頁面的適配。另外，使用者頭像也都使用了這一比例。
2）3:2比例
起初135膠捲的比例就是3：2，主要是因相機取景框的大小而決定。在移動端，這一比例使用也比較廣泛，例如新聞、旅遊型別產品，在拍照之後無需裁剪等處理，直接上傳使用，非常方便。
3）4:3比例
隨著攝影的發展，小/微型相機出現而誕生4：3比例，且移動裝置發展迅速，在非專業攝影的情況下，手機能很大程度上代替單反併成為主流拍照裝置，目前市場上主流手機的拍攝尺寸基本都為4：3比例。相比3：2的圖片，4：3圖片佔比更大，能最大化顯示圖片以突出重點資訊。
4）16:9比例
根據人體工程學的研究，人眼視野範圍的比例約為16：9的長方形，所以電視、顯示器及投影範圍的設計都是基於這個黃金比例。
線上產品不用多說，影視型別的產品均採用16：9的尺寸，例如愛奇藝、優酷、騰訊影片等，到目前為止，這個比例在設定上還沒出現過問題。
在上述4個尺寸中，最容易混淆的是3：2和4：3，如果不清楚如何選擇，請根據產品目標定位，看看到底是以內容為主導還是圖片為主導。例如：資訊型別產品很注重標題文案，即會使用上文下圖、左文右圖的版式，選擇3：2作為封面，以降低圖片的視覺重量；旅遊、租房類產品，則可使用4：3的圖片，以傳達更多資訊。這種選擇方式雖然不是絕對，但當我們陷入兩難的困境時，可作為參考依據幫助快速決策。
2。 圖片的使用場景
1）單圖佈局
全屏：具有很強的視覺衝擊力，非常適合用於傳播行業屬性及品牌調性。單圖全屏佈局處理靈活，可整體突出、區域性特寫或加純色不透明度紋理/遮罩，對圖片細節、構圖等有較高的質量要求，一般用於登入、啟動引導、產品介紹背景等頁面。
卡片：以單張圖片作為視覺引導，寬高不固定，但佔據介面大部分割槽域及重要位置，主要突出產品調性和成為吸引使用者的流量入口，促使使用者與其產生互動行為。常用於產品詳情頁頭圖、推薦頁、專題入口等。
2）圖文列表
在圖文列表介面，很多時候，我們都在想一個問題，到底是選擇左圖右文、左文右圖還是上圖下文？所以我們首先要明白F式（從上到下、從左到右）瀏覽佈局，這也跟人眼的瀏覽習慣相吻合，然後確定圖、文資訊內容的權重，根據優先順序將重要的資訊放在關鍵位置。
單列組合
左文右圖：以文字為主、圖片為輔，主要強調文字資訊，且圖片與標題的關聯性不是很大，能減少減少圖片對文字的干擾，對圖片的質量要求不高，很多新聞、資訊類產品都是選用這種方式佈局。
左圖右文：在圖片內容優先於文字內容的情況下，採用左圖右文的方式，更強調以圖片直觀的傳達內容、吸引使用者的視線，對圖片的質量要求高於左文右圖，一般是電商、旅遊類產品的最佳之選。
上圖下文：一行只顯示一張圖片，大多采用橫圖，同屏一般不超過兩個內容，使用者需要從圖片中獲取大量資訊，對圖片的質量要求很高，大多有專門的人員稽核，以完成對圖片的品質的把控。這種方式很佔用介面的縱向空間，部分租房類、藝術類產品會選用此種方式。
雙列組合
並排：相同高度的比例控制，是較為經典圖文佈局，相比單列，同屏可展示更多的圖片內容且空間利用率更高，能同時向用戶傳達更多資訊。
錯位：圖片高度自適應（瀑布流），在限制寬度的條件下，高度自由發揮，讓圖片得到更多的舒展，利用率更高。雙列錯位的排版方式增加了版式的趣味性，可緩解使用者在長時間瀏覽下的視覺疲勞，需要注意的是寬高比例不要太大、成跳躍式的變化，否則可能導致視覺混亂，且低高度的圖片資訊很容易被忽略。
3）多圖組合