C 端項目中，配圖應(yīng)用會對項目的效果產(chǎn)生關(guān)鍵性的影響，直接讓界面效果得到質(zhì)的飛躍。但它考驗設(shè)計師的審美和日常積累，而很多同學(xué)的配圖水平只能用一言難盡來形容，硬生生拉低輸出的效果和檔次。

所以這次的分享就集中在配圖的選擇和應(yīng)用技巧上，如何在項目包裝上實現(xiàn)四兩撥千斤的效果，讓自己的作品集在激烈的市場競爭中不落下風(fēng)。

APP 配圖的選擇邏輯

APP 的配圖首先要遵循一些基本原則，保證其可看性，主要有下面這些要求：

1. 比例正確：置入進畫布比例是正常的沒有被拉伸
2. 內(nèi)容相關(guān)：畫面內(nèi)容和應(yīng)用場景是關(guān)聯(lián)的，不是寵物照片用了雙鞋子特寫
3. 畫面完整：內(nèi)容能展示全，而不是主體殘缺，比如證件照人臉鼻子上方被截斷
4. 畫質(zhì)清晰：畫質(zhì)能達到展示要求，而不是網(wǎng)上被 “盤包漿” 的低質(zhì)圖片
5. 前后關(guān)聯(lián)：指向同一個對象的圖片就應(yīng)該統(tǒng)一，而不是一個用戶在不同頁面就用了不同頭像
6. 避免重復(fù)：不相關(guān)的內(nèi)容就要替換不同的圖片，而不是使用復(fù)制粘貼一圖多用

這些要求本身和技巧沒有任何關(guān)系，只和態(tài)度有關(guān)系，而今天網(wǎng)上很多新手作品集連這些基本的條件都無法滿足，這些問題只要一看見那么這份作品集就可以直接關(guān)閉沒有往下看的必要了，因為態(tài)度很不端正。

上面的要求都很簡單不用多做介紹，但是光滿足這些要求并不足以提升作品的觀感，想要追求更好的效果就需要融入更多的思考和技巧。

我要從下面幾個要點來進行分享：

1. 圖片質(zhì)感
2. 風(fēng)格統(tǒng)一
3. 主體突出
4. 內(nèi)容選擇
5. 色彩選擇

要點 1：圖片質(zhì)感

判斷圖片質(zhì)感的能力是最困難也最需要審美積累的，并且不同的圖片類型要求也不一樣。下面我們列舉一些常見的圖片類型來解釋圖片質(zhì)量的優(yōu)劣，希望大家可以做到舉一反三的程度。

首先我們以人為主的圖片切入，在社交應(yīng)用中人的圖就是攝影圖，而這類配圖選擇最大的誤區(qū)就是 —— 看臉。人長的好不好看和攝影水平?jīng)]有直接聯(lián)系，只挑俊男美女往往是缺少設(shè)計品位的標(biāo)志之一，而初級設(shè)計師挑的俊男美女照片往往又是 “網(wǎng)紅” 的拍法，呈現(xiàn)出來的效果非常差。

舉個比較有代表性的例子，就是蘋果的攝影介紹中，一直會刻意使用長相一般的模特來表現(xiàn)硬件能力，以及通過專業(yè)的攝影手法來提升照片的整體質(zhì)感，而這給觀眾帶來的觀感是非常有質(zhì)地的，不會因為模特不夠好看而覺得它不夠“高端”。

所以選擇人物類照片的核心是講究攝影的水平而不是去比臉的優(yōu)劣，而優(yōu)秀的人像一定是包含清晰的面部肌理和舒適有效的光影環(huán)境，不會增加太多濾鏡、磨皮、銳化讓照片失真。

攝影水平固然重要，但是選圖這里還要有尺度，有時候一些過于專業(yè)、藝術(shù)、高級的攝影是不適合用在常規(guī)產(chǎn)品中的，所以我們要對攝影的水平有判斷，從差到好之間挑出適合的那一檔。

比人用的更多的配圖，就是商品圖，不管是電商還是活動獎品，商品圖的應(yīng)用頻率很高。但是產(chǎn)品圖之間質(zhì)量的差異卻非常大。我們可以簡單劃分成三種：

1. 手機用戶隨手拍的照片
2. 套路化后期加工的照片
3. 專業(yè)布景打光后的照片

第一類沒什么好說的，一眼就能辨識，沒有絕對的必要就不應(yīng)該出現(xiàn)在作品中。而第二類和第三類才是我們要注意的重點，套路化的商品拍攝就是布一個固定的場景，然后替換不同的商品直接按快門，再用準(zhǔn)備好的后期濾鏡批量應(yīng)用。所以這類圖片整體看起來打光生硬（也有精修的問題），背景空洞，甚至在一定程度上會呈現(xiàn)一股土氣。

而真正專業(yè)的商品圖，會投入更多精力在布景和燈光上，畫面看起來必然更和諧、穩(wěn)定、沉浸，會有股看起來就很“貴”的質(zhì)地。

商品圖的攝影質(zhì)感也不是你對哪個商品類型有偏好，我們依舊要以攝影的專業(yè)角度來判斷，即使那是你平常從來不會考慮和購買的商品類型，但只要攝影的質(zhì)量符合，就可以應(yīng)用。

除了人、商品圖，還有室內(nèi)、風(fēng)景、影視、音樂等不同配圖類型，都遵循相同的邏輯，排除掉背后關(guān)聯(lián)的內(nèi)容好壞單以圖片質(zhì)感論長短。

對不同類型照片的質(zhì)感判斷包含一定的主觀臆斷，確實很難用專業(yè)的解析給大家一張張分析過去，我也不建議設(shè)計師在前期要先掌握專業(yè)的分析能力再挑圖，而是通過一定數(shù)量的鑒賞和觀察掌握判斷它們優(yōu)劣的能力，只需要使用最樸素的角度來分析，哪一個看起來——更貴……

審美是通過對比來提升的，強烈建議大家日常消費多看一些小眾的、設(shè)計感強的品牌的宣發(fā)內(nèi)容和包裝，以及日常沒事到 Behance 看優(yōu)秀的攝影作品進行積累。

要點 2：風(fēng)格統(tǒng)一

第二個問題是緊接第一個的，即整套應(yīng)用內(nèi)的配圖選擇要保持風(fēng)格的一致性，而不能每張圖單看都很優(yōu)秀，合在一起就感覺牛頭不對馬嘴。

風(fēng)格統(tǒng)一性包含幾個不同的情況，首先如果是電商平臺，尤其是展示同類商品的情況，那么盡量選用處理方式一致、視角一致、大小一致的圖例，而不是各找各的。

如果是一個獨立的 APP 展示的是 PGC（官方生產(chǎn)內(nèi)容）的情況，那么圖片盡量要從同一套圖里選擇，樹立品牌的統(tǒng)一調(diào)性。

如果展示的內(nèi)容本身是相互獨立的，那也盡量要讓色調(diào)、風(fēng)格、情緒處于接近的狀態(tài)，而不能直接隨便亂選破壞畫面的平衡。

要點 3：主體突出

這是一個非常重要的問題，在攝影的角度中，能突出主體的照片往往更有吸引力也更容易出效果，而畫面元素太多往往會讓我們很難聚焦。

并不是內(nèi)容多就不好，而是不好駕馭。同時在 APP 的設(shè)計中，我們主要展示的是 APP 的整體，而不是單一個圖片，所以圖片越復(fù)雜對頁面的負面影響就越大，即使圖片本身的質(zhì)量過硬也沒用。

所以選擇圖片時盡量確保圖片的要素不會太多，并且圖片本身的主體物是清晰且易于識別的，而那些畫面非常復(fù)雜的圖例可以直接略過。

要點 4：內(nèi)容選擇

即應(yīng)該給 APP 選擇什么主題類型和內(nèi)容的配圖，這是一個很值得認真思考的問題。常規(guī)情況下，我們會認為項目的配圖只能從同一個類型的主題，然后用相同的關(guān)鍵字去不同平臺里搜索。

比如新聞應(yīng)用就去搜新聞、報道，健身應(yīng)用搜健身、運動，音樂應(yīng)用搜音樂、歌曲之類的。在一些圖例本身非常豐富的項目中，這種做法沒有太大問題，但是圖片的來源過于單一，且在一些主題比較偏門的應(yīng)用類型中找到合適結(jié)果很困難。

所以要學(xué)會根據(jù)主題的類型進行發(fā)散查找想要的圖片，比如在找女裝類的專題圖，那就不應(yīng)該用一般的商品圖片，光搜女裝是沒用的。這種照片應(yīng)該是品牌每個季度、系列拍攝的廣告片（Lookbook 或形象片），想要獲得理想的結(jié)果就可以搜索知名品牌+廣告片這樣的關(guān)鍵字組合?；蛘咧苯诱翌愃频钠放乒倬W(wǎng)，進入專題頁找優(yōu)質(zhì)的系列圖例，比如 Zara 的官網(wǎng)專題。

再比如音樂、影視類，首屏廣告圖如果硬是用專輯還是海報可能找不到太好的圖例，所以我們可以有選擇性的，要放人還是場景，如果放人那就搜明星的特寫照片，放場景就搜商業(yè)室內(nèi)設(shè)計的案例等等。

既然發(fā)散了圖片的類型，那么圖片從哪里找也要發(fā)散，絕對不是只有圖片素材網(wǎng)站才有，除了花瓣、Pinterest 以外，還有官網(wǎng)、電商網(wǎng)站等不同平臺。

這也是 APP 端設(shè)計的好處之一 ——不需要使用高清大圖素材，只要超過600px 長寬的圖片直接用 QQ 截圖黏貼到畫布內(nèi)即可，而不是下載高清原片貼進界面的一個小矩形內(nèi)……

要點 5：色彩選擇

原則上內(nèi)容圖不是 UI 的一部分，它不需要遵守 UI 的規(guī)范，但實際展示效果中，圖片色彩對界面的影響卻完全不能忽視。對于作品集中的圖片應(yīng)用，就要把它們當(dāng)成是界面配色過程中的部分對待……

圖片色彩應(yīng)用上包含下面幾個核心的技巧：

第一，圖片的色彩一定不能太多太雜，因為 UI 界面還有其它視覺元素和色彩，顏色太多會看起來更加的混亂難以辨識。

第二，色彩的飽和度應(yīng)用上，只有突出色彩氛圍的場景才能用飽和度特別高且填充面積大的圖片，比如啟動頁背景圖、專題頁頂部背景圖之類的。而一般配圖不要具備太強的色彩傾向性，只要滿足前面的條件即可。

配圖的色彩應(yīng)用就是對該圖主次的判斷，是要突出它還是弱化它。而突出它所選的色彩必然要和產(chǎn)品本身的顏色能協(xié)調(diào)。比如主色是綠色但配圖強行用大紅色（節(jié)假日設(shè)計除外）是很違和的，或者主色是什么這些配圖全用一個顏色也非常的失真。

如果實在對配圖的色彩選擇沒有信心，就可以把壓力轉(zhuǎn)移到界面設(shè)計上，用更豐富的組件元素和色彩搭配來增加畫面的效果，而配圖都選用色彩不突出的類型即可。

配圖的選擇除了上面最重要的五個特點之外，還有非常多的細節(jié)和技巧，需要設(shè)計師自己去發(fā)現(xiàn)和積累。這也反映配圖是具有一定的門檻和專業(yè)性的，是設(shè)計師本身趣味和審美的真實表現(xiàn)，而這種能力還會進一步延伸到作品集的配圖選擇上，重要性不言而喻。

一定要重視起來并做出更多的嘗試和積累，提升作品和作品集的整體視覺表現(xiàn)。

結(jié)尾

大家可以根據(jù)上面的分享檢查下自己項目和作品集內(nèi)的配圖是否存在同樣的問題，并對它們進行優(yōu)化。本文還有下半篇案例的修改演示，對前面這些分享進行總結(jié)，今天做不完了，明天再更新。

我們下篇再見~

作者：超人的電話亭