今天來討論 UI 設計過程中配圖的應用。正所謂設計5分鐘，配圖兩小時，找不到好配圖難倒英雄漢的事相信大多數人都親身體驗過。

所以廢話不多說，下面進入正題。

配圖的主要應用

在 UI 設計過程中，出現的圖片頻率非常高，包括廣告圖、背景圖、內容圖、頭像等等。雖然設計 UI 是設計界面的交互元素，不負責廣告和內容的上傳等等，但是所有界面的可視元素都會影響觀看者的觀看體驗。

比如下面這樣的案例，在真實項目設計中，配圖隨意填充，而且使用一樣的圖形填完。

雖然還沒上線不錯，以后的內容也不是 UI 設計師負責的，但拿出這種設計稿去評審相信會有非常多的同事會有意見，覺得你設計的效果差，不負責，專業度不夠等等，設計稿被反稿的幾率非常大。

所以我們做個調整，把里面的配圖做一次梳理，再看看效果，就會發現新的版本看起來明顯舒服多了對吧。

這種操作雖然增加了我們的工作量，但不得不說，這是想要提升過稿率和讓別人覺得設計師注重細節的重要表現之一，和其它職業寫一份商業報告注重行文格式的意義是相同的。

真實項目中的圖片也不全是 UGC 內容，還有類似引導頁背景、注冊登錄頁背景、用戶頁背景等等，也都是需要 UI 設計師自己查找和解決的場景。

當然，作為 UI 設計師，職業上要解決的問題不僅僅只是工作的內容，還包含我們個人作品集的設計和制作。在這個過程中，好的配圖不僅是應用在我們設計的界面內部，還和我們項目展示包裝密切相關，比如看看下面這些案例。

面對現實點的問題，如果你的作品和這么用圖的作品擺在一起，那么基本上就 —— 輸了……

圖片的應用，表現看起來像是以取巧、功利的方式提升我們作品的質量，但實際上，配圖應用直接反應了設計師個人的審美和趣味，也在側面表現一個設計師的能力。

配圖的渠道

知道配圖的重要性，就要開始著手解決找配圖的渠道和方式了。

很多新人以為，我們找配圖找的就是圖片 「素材」，就一定要到各種提供免費素材圖片的地方找，這個思路只正確一半。

對于應用正式上線后使用的背景圖、啟動圖等，確實是需要免費素材，保證不會侵權。而常用的免費高清圖庫，網上的分享已經非常多了，我就簡單羅列出來，大家可以自己輸入網址訪問。

這些免費圖庫是不錯，也是設計師們的福音，解決各種商業需求。但對于我們 UI 中的配圖和展示來說，并不是萬能的。

它們有這樣的問題：

• 訪問速度慢，加載高清圖所以瀏覽效率并不高
• 基本只支持英文關鍵字搜索，對抽象內容用詞難以把握
• 質量參差不齊，大多數圖片質量不符合實際要求
• 往往自己想要的題材內容依舊搜不到

選擇配圖，一定要把圖片是從免費圖庫里找出來的想法改掉，而要養成萬物皆可為我所用的意識。比如我們設計下面這個案例，該怎么找圖呢？

我首先會直接忽略掉前面提到的這些素材圖庫，而是就考慮一件事，和這個題材有關的圖片，在哪里出現得最多且最好。

比如這是女性購物類的電商，要獲取相關的配圖，首先應該想到的，就是對應產品的品牌。比如居家用品可以去造作找，服裝可以在 ZARA 里找，口紅美妝等可以去 M.A.C 找等等。

定向查找，可以找到的圖片和主題關聯度最高，同時，品牌官網會應用的宣傳攝影圖、產品攝影圖，質量也會遠遠比普通的素材圖網站更優質，更符合用戶群體。

當然，官網有時候也不是萬能的，有些題材內容官網找的攝影圖質量不一定太好，那么還有一個萬金油的渠道，就是 —— 淘寶。

在今天，淘寶店家為了商品的包裝盒詳情頁可以說是用盡混色解數，感人的是優質店鋪無論在攝影質量，包裝設計，平面排版上都有非常明顯的提升，對于配圖的取材來說是非常有利的。

比如下面我列舉一些店鋪案例：

無論是做填充的底圖、臨時做效果的 Banner、還是縮略圖，在優質商家店鋪內都可以找到。并且對于 APP UI 的畫布來說，圖片應用寬度最大也就在 750px寬 （2x即可），使用 QQ 截圖就可以獲取非常完整的配圖素材。

而如果是需要一些透明底圖的圖片，同樣可以使用截圖的方法，再置入到軟件中（PS、Sketch）使用魔棒工具將白底去除，而不是去各種找 PSD 源文件素材。

就用上面那個案例，我們將它修改成一個面向飲食類的電商頁面，從淘寶中進行取圖，下面是調整后的效果。

除了在淘寶取圖以外，還有一些特殊的場景需要一些高大上配圖來提升質感，那么能上 Behance 的同學，就可以從 Behance 攝影區中查找適合的圖片素材。

Be 攝影區聚集了最多先鋒視覺類攝影，不僅質量極佳，而且非常適合目前 UI 類設計的相關展示，只要基礎的 UI 元素設計達標，那么立馬就能產生 「追波風」 既視感。

結尾

任何來源的圖片，在你的作品集、線上展示、項目DEMO、練習都可以隨意使用，只要記得最終上線的產品中不包含即可，就沒有版權風險。

而還有一些同學糾結與最終上線的產品圖片內容和 DEMO 質量差太多了，在配圖上畏首畏尾，也大可不必。在一整個項目中引導和管控圖片質量也是 UX 設計師的職責之一，不過那就是另一個話題了，先學會配圖的使用方法相比之下更為重要。

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