UI設(shè)計的一個基本原則就是避免頁面中出現(xiàn)過多的顏色，這個道理大家都懂，但是在真正自己設(shè)計的時候總是會下意識的引入過多的顏色，導(dǎo)致整個界面看起來非常的雜亂。所以對于設(shè)計師來說，學(xué)會給界面的配色做減法是很重要的一項技能。

配色體系的目的

給一款產(chǎn)品建立配色體系之前，設(shè)計師首先要弄明白的是：我為什么要建立配色體系？這個問題聽起來十分多余而且稍顯無厘頭。但是在我看來，每次做東西之前常問自己為什么可以更好的提高工作效率。只有真正理解了配色的意義，我們才可以做到有的放矢，進行有選擇性的刪減。

通常來說，配色體系的建立主要有以下三個目標(biāo)：

視覺區(qū)分
調(diào)整界面風(fēng)格
吸引用戶注意力
視覺區(qū)分

一個App或網(wǎng)站可能會有好幾個主要且同級別的功能和分區(qū)。這時，設(shè)計師需要對產(chǎn)品的信息內(nèi)容和功能模塊進行整體規(guī)劃，建立界面的基本格局來幫助用戶在視覺上進行更好的區(qū)分。配色可以很好的幫助設(shè)計師實現(xiàn)這一目標(biāo)。

配色可以完成視覺區(qū)分，但是視覺區(qū)分不是只能通過配色來實現(xiàn)。文字、圖像（圖標(biāo)）、布局都可以完成視覺區(qū)分。

例如，一款理財類應(yīng)用中有不同種類的理財產(chǎn)品（普通型，隨借隨還型和可轉(zhuǎn)讓型）和不同的狀態(tài)（投資確認中，投資成功已起息，清算中等合計11種狀態(tài)）。

在這種情況下（3種產(chǎn)品類型，11種產(chǎn)品狀態(tài)），配色就要很小心了。首先我們要對狀態(tài)進行整合，相似的狀態(tài)整合成一種，這樣可以減少顏色的數(shù)量。當(dāng)然會有人感覺六種顏色還是多，因為書本上告訴我們同一頁面中配色不要超過三種。但是我們得從實際情況出發(fā)，對于理財產(chǎn)品來說，用戶不太可能在同一屏中看到全部的六種狀態(tài)，也就是說用戶同時看到六種顏色的概率很小。

另外我們放棄了對產(chǎn)品類型使用配色，因為狀態(tài)已經(jīng)使用了六種配色。在這種情況下，如果我們還對產(chǎn)品類型使用顏色來區(qū)分（一個類型一個顏色），那么整個頁面就會顯得很亂。所以在這里，對于產(chǎn)品類型我們選擇使用文字（標(biāo)簽）的形式來區(qū)分。

文字相對于色彩來說，給用戶的視覺體驗還是稍弱一點。所以我們要對要頁面中的內(nèi)容做一個優(yōu)先級的排序，重要的內(nèi)容優(yōu)先使用配色。在這里我們認為相對于產(chǎn)品類型，用戶更關(guān)注自己產(chǎn)品的當(dāng)前狀態(tài)。

視覺風(fēng)格

產(chǎn)品的視覺風(fēng)格是根據(jù)其自身定位和用戶需求所決定的，有的產(chǎn)品要求界面具有活力，能讓用戶產(chǎn)生興奮感（購買欲望），我們可以使用光波較長紅色和橙色來作為產(chǎn)品的主色調(diào)。

有的產(chǎn)品講究沉穩(wěn)舒適內(nèi)斂，那么我們使用藍色，灰色可能會更加適合點。

配色可以很好的幫助我們建立一個產(chǎn)品的視覺風(fēng)格。但是我們也要知道一款產(chǎn)品的視覺風(fēng)格是由文字，圖像和色彩一起構(gòu)成的。也就是說，文字和圖像同樣可以影響一款產(chǎn)品的視覺風(fēng)格。

文字的跳躍率是指同一界面中不同文字之間的大小比率。不同功能的文字在排版設(shè)計的時候會有字號和字重的區(qū)別，例如主標(biāo)題，副標(biāo)題和正文的字號通常是依次減小的，這種字號的差異會帶來不同的文字跳躍率。一般來說，文字跳躍率高的界面會顯得比較活潑，文字跳躍率低的界面會顯得平靜沉著。

在配色的時候，如果我們減少色彩的使用數(shù)目，大面積使用白，灰，黑或者其他同色相配色（藍色與淺藍色，紅色與粉紅色等），這樣的界面會顯得莊重高雅且富有現(xiàn)代感，但是會顯得單調(diào)。那么我們就應(yīng)該適度的提升文字跳躍率給界面提升一些活力。

當(dāng)然，不只文字有跳躍率，圖片也有跳躍率。設(shè)計師可以通過對圖片和文字跳躍率的控制來削減界面視覺風(fēng)格對于配色的依賴。

吸引用戶注意力

我們經(jīng)常喜歡使用配色來吸引用戶注意力，以下圖中行為召喚按鈕(call to action)為例，配以與背景色差距較大的顏色使其可以從背景中凸顯出來。

其實我們即使不使用配色也可以很好的吸引用戶注意力。

谷歌搜索的主頁出現(xiàn)了大面積的留白，用戶的目光自然就會被吸引到搜索框。這和谷歌的初衷相契合，他們希望用戶在這個頁面完成搜索操作，所以不用展示過多其他的信息來分散用戶的注意力。

陰影效果也可以用來吸引用戶注意力，陰影效果可以提升目標(biāo)元素的“海拔”，進而使其從背景中凸顯出來。

當(dāng)然我們還可以使用模糊效果來吸引用戶注意力。用戶總是會不由自主的被那些對焦準(zhǔn)確的部分吸引而忽視掉被虛化的部分。眼球的對焦機制好像一個調(diào)節(jié)器一樣捕捉那些離你忽遠忽近的物體，這樣才能讓你感受到周圍一切事物的深度和距離。這就是我們?nèi)搜鄣墓ぷ鳈C制。設(shè)計師可以根據(jù)這個理論將界面中一些不重要的內(nèi)容進行模糊處理來凸顯那些重要的內(nèi)容。

總結(jié)

好的設(shè)計應(yīng)該讓用戶短時間內(nèi)就可以找到他們感興趣的內(nèi)容，過多的給予對用戶來說其實是一種負擔(dān)。少即是多，這是當(dāng)前互聯(lián)網(wǎng)時代的信條也是設(shè)計師需要恪守的準(zhǔn)則。希望這篇文章可以給你帶來幫助。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！

文章名稱：學(xué)會給配色做減法，讓你的設(shè)計更加高端！
文章轉(zhuǎn)載：http://m.rwnh.cn/news38/319888.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、網(wǎng)站策劃、企業(yè)網(wǎng)站制作、網(wǎng)站營銷、網(wǎng)頁設(shè)計公司、網(wǎng)站設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)