界面配色配圖技巧

一、簡單思路分析

假設(shè)我們希望完成一個(gè)運(yùn)動(dòng)類APP的設(shè)計(jì)，那么我們需要做什么呢？第一步就是競品分析。我們需要分析出市場上常見的運(yùn)動(dòng)類APP設(shè)計(jì)都長什么樣（如圖1）。

( 圖1 )

我們發(fā)現(xiàn)，現(xiàn)在市場上的運(yùn)動(dòng)類app大多用色比較重，或是暗色調(diào)。這樣的配色方案多少會為了滿足商業(yè)或運(yùn)營的需求，我們在平時(shí)做練習(xí)的時(shí)候可能不容易考慮到這些點(diǎn)，那么就從我們所看到的東西來分析。

       重色調(diào)更加有力量感、品質(zhì)感。我們同樣能看到圖片都做了壓暗處理，這樣在突出文字的同時(shí)也能讓圖片的品質(zhì)感有提升，還有就是能和界面的色調(diào)統(tǒng)一?？吹竭@種配色的界面會有一種我們都要練成專業(yè)運(yùn)動(dòng)員的感覺。當(dāng)然也不能排除競品都這么做我們也要這么做這個(gè)因素。

       這些配色方案當(dāng)然也很不錯(cuò)，但是對于部分上班族來說，包括設(shè)計(jì)師，我們的鍛煉時(shí)間相對較少，而且在經(jīng)常加班的狀態(tài)下，我們的鍛煉方向更應(yīng)該傾向于調(diào)整自己的身體狀態(tài)，讓自己元?dú)鉂M滿地進(jìn)行一天的工作。所以，假如我來做這款產(chǎn)品界面的話，我更傾向于讓界面看起來更加清新且充滿活力。這樣的話既能滿足上班族的狀態(tài)，又能做出差異化。

       基于以上分析，我決定從“活力、清新”的角度出發(fā)，做出一款充滿活力和清新感覺的app。因?yàn)檫@篇文章要將配色和配圖的技巧，我們就不對界面的排版結(jié)構(gòu)等方面做詳細(xì)分析。

       這是我做好的一個(gè)運(yùn)動(dòng)風(fēng)界面，圍繞這個(gè)界面我來講一下配色和配圖的技巧（如圖2）。

( 圖2 )

二、界面配色技巧

我這里采用的是從現(xiàn)有圖片中獲取配色的方法。

首先，圍繞"活力""清新"這兩個(gè)個(gè)關(guān)鍵詞，可以聯(lián)想到比較具象的事物，比如沖浪、植物、陽光等。然后根據(jù)這些具象的關(guān)鍵詞來尋找圖片（如圖3）并挑選出自己喜歡的圖片（如圖4）。

( 圖3 )

( 圖4)

這時(shí)候就可以把挑選好的圖片置入ps，直接用吸管工具吸取圖片中的顏色并記錄下來。我這里選擇了圖4中右上角那張圖（如圖5）。

( 圖5 )  

我通過吸取圖片中顏色得出一組藍(lán)色和綠色的組合。組合必須達(dá)到兩點(diǎn)要求：一是顏色之間要和諧；二是必須有亮色有暗色，因?yàn)榻缑嬷屑扔斜尘耙灿形淖?，所以必須明暗上拉開差距，才能保證閱讀。

我們發(fā)現(xiàn)這些顏色都在調(diào)色板偏右或偏下的位置（如圖6），根據(jù)調(diào)色板的特性，這些位置的顏色飽和度高而且會泛黑。這里要強(qiáng)調(diào)一個(gè)點(diǎn)，我們要的是圖片中的配色方案，比如藍(lán)配綠，藍(lán)配黃等，并不是具體的色值，因?yàn)槲覀兊淖髌肥且谄聊簧巷@示的，直接運(yùn)用原圖片中的色值會讓整個(gè)界面看起來特別暗。

( 圖6 )

于是我們需要做顏色提純的處理。"純度"就是指色彩的鮮明程度，越昏暗的顏色純度越低，無論哪一種顏色，純度越低越貼近灰色。而"明度"指色彩的明亮程度。"提純"即讓所有顏色的亮度提高，飽和度降低。下面給大家說一下提純的具體操作。

我們以#0737b5這個(gè)顏為例。為了便于大家理解，我在取色器畫了一條線，這條線的左邊色彩偏亮，右邊偏暗。以這條線為準(zhǔn)，越往右色彩就會越臟，所以提純最主要的是我們要把色彩往左邊提，增加色彩的明度（如圖7）。

( 圖7 )

隨著我把色彩往左邊走，會發(fā)現(xiàn)色彩明度在提高，飽和度在減少。當(dāng)然可以滑動(dòng)旁邊的色條，達(dá)到自己理想的色彩（如圖8）。具體到什么程度才是最合適的，這個(gè)就需要大家多多練習(xí)了。

( 圖8 )

 我們經(jīng)常能看到好多作品會用到漸變色，我們同樣可以根據(jù)提純后的顏色做一下漸變色搭配，如何從單色變成漸變色呢？我要對我剛剛提純的顏色下手了（如圖9）。這里我用了給圖層添加混合選項(xiàng)的方法，方便及隨時(shí)調(diào)出配色方案。

( 圖9 )

或許有些童鞋好奇為什么要做成漸變色。漸變色可以體現(xiàn)一個(gè)圖形有淺變深，從明入暗，由一個(gè)顏色微妙得過渡到另一個(gè)顏色。對比起單色來，漸變有層次感，會顯得豐富許多。也會使的作品更加耐看。隨著扁平化時(shí)代的到來，單色塊也趨于流行，我們?nèi)羰悄茉谄街羞\(yùn)用一點(diǎn)漸變色彩的搭配，會讓作品飽和，更加靈動(dòng)。

最后使用我們的顏色把所用的信息調(diào)整，背景選用比較輕快透亮的顏色，前景沒有直接用白色，而是用了稍微發(fā)藍(lán)的白色，（為了作品的整體性和諧性，我們需要帶入環(huán)境色）加入波浪和細(xì)節(jié)等我們的界面就完成一半了（如圖10）。

( 圖10 )

我對這張圖的顏色進(jìn)行了顏色標(biāo)注（如圖11），它們都取自剛剛提純的色條，有些做了輕微的調(diào)整。

( 圖11 )

為了讓界面清新且充滿活力，我選擇了白色作為背景，因?yàn)檫@個(gè)界面的背景漏出面積很大，所以用白色作為背景可以很有效地提升整個(gè)界面的亮度。文字和圖標(biāo)就的顏色肯定要和背景拉開差距，所以就選擇了色條中的幾個(gè)重色進(jìn)行嘗試，然后結(jié)合我的個(gè)人喜好，最終將圖標(biāo)和文字的顏色確定現(xiàn)在看到的這種藍(lán)色。為了讓畫面有層次感，中間的圓環(huán)我做了上下兩層，在配色的過程中，我發(fā)現(xiàn)如果圓環(huán)只用一種顏色，會比較死板，因?yàn)閳A環(huán)本身在界面中所占的面積比較大，所以我運(yùn)用了漸變色。細(xì)心的同學(xué)可能會發(fā)現(xiàn)，界面中我標(biāo)出來的色值和之前色條上的色值無法完全對應(yīng)起來，這是因?yàn)樵谂渖倪^程中，我會不停作輕微調(diào)整，已達(dá)到整個(gè)界面的和諧統(tǒng)一。之前的色條只是一個(gè)參考標(biāo)準(zhǔn)，并不代表一定要用色值完全一樣的顏色。配色完成后，我發(fā)現(xiàn)這個(gè)界面稍微有些空，大面積的白色讓這個(gè)界面顯得太亮了，為了解決這兩個(gè)小問題，我在界面中加入了一些波浪，這樣畫面也豐富了，背景太亮的問題也得到了解決。當(dāng)然波浪只是其中一種解決方案，還是鼓勵(lì)大家多多嘗試其它的解決方案。

三、界面配圖技巧

接下來我們就要開始配圖了。在配圖之前我先講一下配圖的幾點(diǎn)技巧。

界面設(shè)計(jì)由擬物化走向扁平化這是大家眾所周知的事情，（比如男同學(xué)們越來越喜歡周迅而不是柳巖了 = =），扁平化的重要理念就是突出內(nèi)容本身，所以好的內(nèi)容（文字、圖片、視頻）就成了界面設(shè)計(jì)整體中特別重要的一環(huán)。比如我們看這張圖（如圖12），同樣的界面但配圖不同，會讓你覺得他們的逼格不在一個(gè)宇宙里。

( 圖12 )

我們來分析一下這兩個(gè)界面。右邊不合適的配圖會讓界面看起來很山寨。在找圖片的時(shí)候我們先得分析我們已有的界面信息。以上界面在沒有配圖的情況下，信息已趨于飽和，所以為了調(diào)整畫面節(jié)奏感，我們需要找的是有空間感的配圖，而不是右邊那樣構(gòu)圖很飽滿的圖，不然會破壞節(jié)奏感，使得整個(gè)界面秩序較差，不知道是先看圖還是先看文字信息。左邊的配圖本身就有了空間，作為這個(gè)界面的配圖，不僅能增加節(jié)奏感，還能營造氛圍。當(dāng)然，最重要的是，我們的配圖和界面在配色上一定要達(dá)到統(tǒng)一。

我們在挑選一張好圖的時(shí)候要注意貼近實(shí)際內(nèi)容，不能因?yàn)閳D片本身的美觀和逼格忽略了實(shí)際要表達(dá)的主題；還要注意圖片上是否有多余的信息影響主題的表達(dá)，如果有的話盡量去掉或是用另一張圖片來替換；最后一點(diǎn)很重要，圖片的清晰度一定要過關(guān)?？傊?，一張好圖并不是簡單的好看就可以，重要的是主題表達(dá)是否到位。

結(jié)合上面所說的技巧，我們?yōu)閯偛胚\(yùn)動(dòng)界面來配圖，這個(gè)界面我事先預(yù)留了放置圖片的位置（如圖13）。

( 圖13 )

因?yàn)槭且豢钸\(yùn)動(dòng)類的界面，所以我要找一張運(yùn)動(dòng)類圖片，并且要貼合“活力”“清新”這兩個(gè)關(guān)鍵詞，經(jīng)過多次嘗試，最終用"跑步男"這個(gè)關(guān)鍵詞找到了我想要的素材（如圖14）。

( 圖14 )

首先這張人物素材的動(dòng)作幅度較大，速度力量感都很到位，而且人物衣服的配色和我們界面的配色非常的搭；還有一點(diǎn)，人物傾斜的身體和眼神具有非常好的引導(dǎo)視線的作用，能引導(dǎo)用戶注意界面中的重要信息，我想嘗試把這一點(diǎn)運(yùn)用到界面中，所以我決定選擇這張圖片。

我們放入設(shè)計(jì)稿之中看看吧！然后把人物調(diào)整到合適的大小，這時(shí)候看起來好像也沒什么毛病了（如圖15）。

( 圖15 )

但是沒有對比就沒有傷害（如圖16）。

( 圖16 )

這是我調(diào)整之后的，大家可以看看前后（圖15為調(diào)整前，圖16為調(diào)整后）的對比效果。下面我具體講一下為什么調(diào)整成這樣。      

首先，人物素材雖然服裝配色和界面配色比較搭，但是從明暗上明顯比界面暗了幾個(gè)等級，所以人物素材放在這個(gè)界面中會顯得比較暗顏色比較臟。我們可以用吸管取色的方式來測試顏色。用吸管工具選取人物服裝中介于最亮和最暗中間的顏色，為了更加準(zhǔn)確我這里選取了5x5平均（如圖17）。

( 圖17 )

根據(jù)前邊的分析，顏色處于調(diào)色板中間的地方會看起來顯臟（顏色偏灰暗），所以我做了如下調(diào)整（如圖18）。

( 圖18 )

最終呈現(xiàn)效果如下（如圖19）。

( 圖19 )

于是我們完成了一個(gè)比較滿意的概念性設(shè)計(jì)。這樣的概念性設(shè)計(jì)并不是直接用來投入產(chǎn)品的，而是用來豐富我們的思維。在我們需要設(shè)計(jì)一個(gè)現(xiàn)實(shí)中的頁面時(shí)，我們就可以找到我們的概念作品，將概念作品中的顏色和風(fēng)格直接運(yùn)用在真正的產(chǎn)品頁面中（如圖20）。

( 圖20)

需要注意的是：正式的產(chǎn)品設(shè)計(jì)里導(dǎo)航的高度、標(biāo)簽欄的高度等都是有具體規(guī)范的，我們需要遵守這些設(shè)計(jì)規(guī)范，不能天馬行空。比如我們在iOS平臺上設(shè)計(jì)APP的話，界面尺寸為750x1334px，頂部信息欄加導(dǎo)航欄的高度為128px，底部標(biāo)簽欄的高度為98px。如果你設(shè)計(jì)的平臺是Android，那么需要遵守另外的規(guī)范。關(guān)于字體，概念性APP可以使用任何字體，但是我們需要投產(chǎn)的設(shè)計(jì)字體應(yīng)是蘋果的默認(rèn)自帶字體，英文通常為SF-UI字體，中文為蘋方字體。

當(dāng)當(dāng)當(dāng)！設(shè)計(jì)任務(wù)出色地完成了！是不是要感謝概念設(shè)計(jì)的鋪墊呢（如圖21）？

(圖21)

四、色彩的配置方法

文章的最后，我想分享配色中的幾個(gè)小方法。

1．色彩統(tǒng)一

在我們把握界面色彩的同時(shí)，我們要把控住色彩的明度、純度、色相在一定范圍內(nèi)，不能懸殊過大。我們可以看到下圖中（如圖22），畫面中顏色明度純度都差不多。

(圖22)

想要作品比較亮眼，最好避免使用純度太高的顏色，純度高的色彩組合在一起，雖然純度上達(dá)到統(tǒng)一，但是也會顯得十分的花哨和辣眼睛（如圖23）。

( 圖23 )

2．畫面節(jié)奏感

節(jié)奏感是指我們在用色的時(shí)候，界面上難免會出現(xiàn)冷色和暖色，在他們的配色比例上我們需要做到偏重哪一邊。大面積冷色調(diào)中如果出現(xiàn)一點(diǎn)暖色，那么整個(gè)畫面會出現(xiàn)亮點(diǎn)和協(xié)調(diào)。下圖中（如圖24），冷色面積和暖色面積比例還是有偏重的，藍(lán)色面積、灰色面積、紅色面積和橙色的面積各不一樣，這種色彩的層次感就增加了節(jié)奏感，給人帶來印象深刻的視覺沖擊。

( 圖24 )

3．色彩的重量

畫過顏料畫的同學(xué)可能知道，在我們構(gòu)建一幅畫的時(shí)候，會有一個(gè)大調(diào)子，比如說冷色明亮的調(diào)子，暖色昏暗的調(diào)子。我們在亮調(diào)子的畫中，會多加白色亮色顏料；在暗調(diào)子的畫中，會加入深色的顏料調(diào)和。決定這些的因素是色彩的明度和純度。我們把明度提高純度降低，會使得畫面變亮變輕，同時(shí)給人的感覺是輕快放松的；我們把明度降低純度提高會使得畫面變沉重，給人的感覺是沉穩(wěn)冷酷。我們在思考一個(gè)界面配色的同時(shí)，不是看到好的配色就立馬用到設(shè)計(jì)中，首先考慮的是設(shè)計(jì)的主題是什么，符合什么樣的特性，然后我們再根據(jù)分析結(jié)果找到最匹配的色彩范圍。

這是我總結(jié)出來的一些配圖以及如何讓配圖與界面整體更加和諧的小技巧，希望各位都能設(shè)計(jì)出更棒的作品來！

最后來做一個(gè)作業(yè)吧，請依據(jù)今天所學(xué)，為下面三個(gè)新聞界面配色配圖（如圖25）。源文件可下載。