7個提升UI設計感的配圖方法（送150張高清UI配圖資源）

Sponsor

前言：在UI設計中，配圖是一個不可忽視的細節，好看的配圖可以提升界面的設計感，那么如何判斷一張圖片的好壞？我們又可以從哪些地方找高質量的配圖呢？今天彩設計師和大家分享下他自己的選圖經驗，拋磚引玉，大家如果有更好的方法，歡迎留言交流。

在一幅作品中，配圖往往是吸引用戶的重要元素，而在設計作品中，配圖同樣需要具備設計感，它能直接體現這位設計師的品味。配圖圖選的好，能快速拉高作品的設計品質。(文末會分享給大家我常用的150張高質量圖片資源，記得收藏哦)

圖片來源：dribbble

這里有個點需要引起注意，有些人在做概念稿的時候會糾結到底要用真實場景的圖，還是要用設計感更強的圖。嚴格來說也沒有對錯，但我建議大家選用設計感更強的圖更加分，因為設計師在看作品時的第一印象還是作品本身的設計感，更關注視覺專業能力。優質的選圖能夠體現一個設計師基本的審美，真實的產品配圖雖然更能體現線上實際效果，但第一印象扣分了就很難繼續往下看了。

好看的作品會有一種直覺美，就是你一眼看過去，就能打動你。按我自己的經驗，我會從以下7個方面快速判斷一張圖是否具有設計感：

1.顏色要飽滿

一張圖里應該有暗部，亮部和比較多的灰度區域，有一個簡單的辦法，如果把照片去色后用色階檢查的時候依然從黑到白顏色信息飽滿就是合格的，有1分最暗的地方，1分最亮的地方，8分暗部過渡這種圖片會比較好。（當然這不是唯一的標準，不同的顏色氛圍能表達不同的情緒，這里只是為了方便判斷）

圖片來源：behance

或者也可以直接打開色階，如果直方圖中從白到黑都有較多顏色信息，就代表顏色是飽滿的。

2.光影關系要細節

畫面中有合理的高光，投影有細節，能突出畫面主體內容，避免出現死黑。不僅限于照片，在UI設計中，要注意投影會反射場景中其他的顏色信息，避免使用純黑色投影。有2個做法，一個是直接給投影吸上周圍的顏色然后加深一些，另一個是通過修改投影的疊加模式改為正片疊底。

圖片來源：behance

3.大的留白

要讓畫面具有不錯的設計感，大量留白是一個比較好的辦法，畫面簡潔，具有高級感。

圖片來源：behance

4.構圖有特點

一幅好的作品，首先吸引你注意的多半是構圖，構圖關系比較獨特，往往就能令你印象深刻。常見的畫面構圖方式有：中心構圖、水平線構圖、垂直線構圖、三分構圖、對稱構圖、對角線構圖、引導線構圖、框架構圖、重復構圖。這些常見構圖法引用自知乎上一篇很棒的文章《九種最常用的構圖法》https://zhuanlan.zhihu.com/p/21261635，推薦大家看看，我這里就不詳細展開了。

1）中心構圖

圖片來源：pexels

2）水平線構圖

圖片來源：pexels

3）垂直線構圖

圖片來源：pexels

4）三分構圖

圖片來源：https://www.pexels.com

5）對稱構圖

圖片來源：pexels

6）對角線構圖

圖片來源：behance

7）引導線構圖

圖片來源：pexels

8）框架構圖

圖片來源：pexels

9）重復構圖

圖片來源：pexels

這些構圖方法需要經常在看圖的過程中進行有意識的分辨，才能加深印象，然后潛移默化的改變自己的審美。比如我自己在拍照的時候，看圖的時候，會下意識的判斷下這個畫面屬于什么樣的構圖方式，不論是拍攝的過程中還是后期，都能比較準確的把握好畫面的美感。

5.細節有亮點

在看一副作品時，要注意找畫面中吸引自己的點，并隨時做好筆記。這些亮點可以是一個少見的材質，可以是一個有意思的創意，但凡有點出人意料的小細節，就可以為作品增色不少。

比如可以是這種顛覆的對比關系

圖片來源：behance

比如可以是煙霧加花草的特殊效果

圖片來源：behance

比如這張人像與魚的組合，眼睛部分做成了魚鱗的形狀，就是一個不錯的亮點

圖片來源：behance

這些設計亮點相對比較主觀，只有你能說出你喜歡它的理由，那么這就是它亮點。

6.切合主題

配圖的選擇要有系列感，千萬不要讓畫面顯得凌亂。比如做UI時的概念稿，選定一個配圖風格后，后續的配圖也保持這種風格，統一才有更好的美感。

比如偏概念性的配圖就可以使用下面這個系列，我個人非常喜歡的：

圖片來源：behance

實際案例，以品牌色和用途選擇的主題配圖

圖片來源:dribbble.com/shots/15667376

高質量的主題插畫配圖

圖片來源：dribbble.com/shots/14873066-Cepirit-Japan-Travel-App-Exploration

7.顏色豐富

干凈或者炫酷的顏色，都能非常吸引用戶的注意力，在一些需要設計感的UI配圖中，比如音樂，藝術類的APP設計中非常好用。

圖片來源：behance

實際案例

圖片來源:dribbble.com/shots/14973122

總結

大家平時在看圖的時候，要有意識的進行收藏，有些配圖是可以反復使用的，像文章中的這些配圖被我稱之為“御用配圖”。當然，還可以把常用的配圖做成圖片組件庫，提升效率。

文章中所提到的選圖方法，并非唯一的標注答案，只是彩云在實際工作中的一些快速判斷方法。如果你自己有更好的辦法，也歡迎在留言區與大家分享~

最后，也分享一些常用的免費圖片資源網站給到大家，不用收藏太多，有幾個精品網站足矣：

1）高質量的圖片視頻資源網站，視頻和圖片都可以免費下載

https://www.pexels.com

2）國外的高質量免費圖片下載網站，這個網站的資源分類更加全面，跟sketch也有合作，隨機生成的圖片，來源就是這個網站

https://unsplash.com

3）高質量的作品分享網站，里面的資源比較豐富，這里面有很多攝影師自己上傳的圖片，登錄后即可下載

https://www.deviantart.com

設計達人免費商用圖片推薦：《15個優秀的免費高清圖片素材網站》

如果希望獲得文章中用到的高清大圖資源，還有彩云經常用到的高質量設計感強的配圖資源，彩云也免費分享給大家

↓ 150張高清UI配圖資源 已打包 ↓
掃碼，關注后臺發送「配圖」即可
▽

作者 | 彩云Sky
來源 | 彩云譯設計(id:caiyunyisheji)

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。