提升作品集最快的方式：5個要點幫你選好配圖

推薦閱讀

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

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

APP 配圖的選擇邏輯

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

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

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

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

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

1. 圖片質感
2. 風格統一
3. 主體突出
4. 內容選擇
5. 色彩選擇

要點 1：圖片質感

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

首先我們以人為主的圖片切入，在社交應用中人的圖就是攝影圖，而這類配圖選擇最大的誤區就是 —— 看臉。人長的好不好看和攝影水平沒有直接聯系，只挑俊男美女往往是缺少設計品位的標志之一，而初級設計師挑的俊男美女照片往往又是 “網紅” 的拍法，呈現出來的效果非常差。

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

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

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

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

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

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

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

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

除了人、商品圖，還有室內、風景、影視、音樂等不同配圖類型，都遵循相同的邏輯，排除掉背后關聯的內容好壞單以圖片質感論長短。

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

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

要點 2：風格統一

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

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

如果是一個獨立的 APP 展示的是 PGC（官方生產內容）的情況，那么圖片盡量要從同一套圖里選擇，樹立品牌的統一調性。

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

要點 3：主體突出

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

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

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

要點 4：內容選擇

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

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

所以要學會根據主題的類型進行發散查找想要的圖片，比如在找女裝類的專題圖，那就不應該用一般的商品圖片，光搜女裝是沒用的。這種照片應該是品牌每個季度、系列拍攝的廣告片（Lookbook 或形象片），想要獲得理想的結果就可以搜索知名品牌+廣告片這樣的關鍵字組合。或者直接找類似的品牌官網，進入專題頁找優質的系列圖例，比如 Zara 的官網專題。

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

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

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

要點 5：色彩選擇

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

圖片色彩應用上包含下面幾個核心的技巧：

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

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

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

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

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

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

結尾

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

我們下篇再見~

歡迎關注作者的微信公眾號：「超人的電話亭」