UI設計中，除了界面整體的布局，還有一些圖標、插畫的設計，大部分都是素材的填充，而這么重要的部分往往被設計師所忽略。

對于素材的隨意挑選，殊不知選圖的技巧和方法有很多，眾多素材中如何找到我們心儀的配圖呢？這就是今天要和大家分享的主題，用科學合理的方法找到最合適的素材。

一、選擇配圖的常見錯誤

在為產(chǎn)品尋找配圖素材時，是一個長久過程。所以素材的運用即能幫你提升界面的效果，也能拉低界面的效果，很多設計師不在意選材的重要性，往往因為配圖后界面效果還不如原型圖看起來規(guī)范好看。下面我總結(jié)出三個方法可以提升配圖的效果。

1、素材與用戶預期：

不真正調(diào)研產(chǎn)品的用戶群里和心里。搭配的素材必然達不到用戶預期。每款產(chǎn)品的使用人群是不同的，我們的素材配圖要符合產(chǎn)品使用人群的預期。

如下圖：是一款有關(guān)于售車的界面效果，此項目的用戶的目標已經(jīng)確定，主為高端用戶，我們來看看左右配圖的區(qū)別。

左圖中我們在找配圖時如果不能保證對高端車的認知，必然會有低端車的產(chǎn)品圖的出現(xiàn)，由于不符合產(chǎn)品的使用人群，給用戶造成心理落差；而右圖則是我們了解高端車后的選圖，內(nèi)容是符合用戶心理預期的，同時通過配圖再次提升產(chǎn)品的逼格。

PS：我上面說到圖片內(nèi)容的心理預期與用戶不符，其實在關(guān)于選圖上，也是存在這個問題的，例如左側(cè)是通過百度找到的素材，不夠精致，無法提高界面的整體效果，而右側(cè)則是在站酷海洛找到的素材：

只要進行裁剪，縮放比例即可使用，界面整體檔次也提升很多。

2、素材與主視覺：

說到主視覺，就先要說說有關(guān)顏色的歸類，顏色主要分為暖色系，冷色系和中性色系三種，在界面中不同的顏色可以帶來不一樣的感受，如果不理解主視覺所要表達的感受，便找不到合適的配圖，無法提升界面效果。所以我們在選擇配圖時一定要追尋界面的主色系所以傳達的情感。

如下圖：左側(cè)是以冷色為主的直播界面，右側(cè)是以暖色為主的產(chǎn)品詳情頁。

左圖由于忽略了主視覺的關(guān)系，配圖為顏色過多，頁面整體表達出來的情感不夠直觀，無法產(chǎn)生共鳴。

右圖中我們通過控件可知主色為暖色系，選擇同色系的素材進行搭配，通過素材和主視覺的完美搭配才能明確傳達產(chǎn)品想要給用戶的感受。

3、素材與素材：

這是最容易出現(xiàn)的錯誤，我們通常只關(guān)注于素材的整體感覺，反而忽略同類素材之間的差異，不是所有的同類素材都可以放到一起來用的，我們還要注意素材與素材內(nèi)容的差異化。

如下圖：左圖為一款外賣食品列表的效果圖，右圖為商品列表的效果圖，大家可以分別感受一下左右兩側(cè)的哪個更舒服些。

左圖中列表的素材與素材的內(nèi)容是不同的，雖然都是食物圖，但有的是實物，有的是適量圖，給人的感覺是不同的，這也是大家總是覺得哪里不對，卻又說不出來的問題。

再看右圖中的列表，配圖元素統(tǒng)一，同為國外真人模特，符合素材與素材之間風格的統(tǒng)一。

PS：我們平時在做概念稿時，找同類型的產(chǎn)品圖消耗的時間也是很大的，不是圖片少，而是同質(zhì)量的素材太少了。

所以一定要在專業(yè)的素材平臺找查找，因為專業(yè)的素材平臺會根據(jù)設計師的需要提供方便快捷的素材集合。

例如上圖，我在站酷海洛中的搜索水果，便的到各個角度和不同風格的同質(zhì)量圖片，可以有更多的選擇去搭配。

二、運用配圖的常見錯誤

上面我們說的是如何選擇素材，而下面一部分主要是讓大家了解到?jīng)]有量身定做的素材，不是什么素材都可以拿來直接用的，理想是豐滿的，現(xiàn)實是骨感的。

辛辛苦苦找到的素材，就差一步便可以提升作品的效果，卻因為嫌修改麻煩而失之交臂，我們來看看下面三種方法是如何將素材進行優(yōu)化的。

1、統(tǒng)一素材比例：

在設計界面時，素材被拉伸變形，填充不滿等低級問題出現(xiàn)的已經(jīng)越來越少了，所以這里要說的不是基礎的尺寸問題，而且是素材內(nèi)容的占比比例。要保證素材中的內(nèi)容與背景的占比是一致的，才能提升界面規(guī)范性。

如下圖：兩張運動類產(chǎn)品的界面列表，我們來分別單獨預覽兩個界面，有沒有發(fā)現(xiàn)同樣的界面同樣的產(chǎn)品，但預覽產(chǎn)品的順序是不同的，這是什么原因?qū)е碌哪?？我們往下看?/span>

左圖中的產(chǎn)品展示內(nèi)容與背景的占比不統(tǒng)一，可能是按現(xiàn)實中的比例進行擺放的，有大有小，界面顯亂，干擾用戶的閱讀順序。

右圖通過更改圖片比例后，統(tǒng)一了圖片內(nèi)容與背景的比例，不會干擾用戶閱讀界面的順序。

2、統(tǒng)一素材角度：

素材因為角度不一，給人的感受也是不同的，在一個界面中的素材如果角度各式各樣，會影響到用戶的點擊欲望。所以在挑選素材時應該注意參考圖的角度，統(tǒng)一的拍攝角度可以讓界面變得更有秩序。

如下圖：左右兩張界面的產(chǎn)品展示部分。