做產(chǎn)品需要克制，少即是多，簡(jiǎn)潔的配色能夠把重點(diǎn)第一時(shí)間呈現(xiàn)給用戶(hù)。

研究表明：人類(lèi)在回憶所看到過(guò)的場(chǎng)景和事物時(shí)，對(duì)色彩的記憶度要高于形態(tài)。也就是說(shuō)，從視覺(jué)角度來(lái)看，一款產(chǎn)品給用戶(hù)留下最深的印象往往是界面的配色。由此我們也能夠看出配色可以說(shuō)是設(shè)計(jì)師最重要的武器，很可能沒(méi)有之一，但是這個(gè)武器有使用的“限制”。

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

配色體系的作用

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

通常來(lái)說(shuō)，配色體系的建立主要有以下三個(gè)目標(biāo)：

視覺(jué)區(qū)分

調(diào)整界面風(fēng)格

吸引用戶(hù)注意力

視覺(jué)區(qū)分

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

配色可以完成視覺(jué)區(qū)分，但是視覺(jué)區(qū)分不是只能通過(guò)配色來(lái)實(shí)現(xiàn)。文字，圖像(圖標(biāo))，布局都可以完成視覺(jué)區(qū)分。

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

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

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

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

視覺(jué)風(fēng)格

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

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

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

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

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

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

吸引用戶(hù)注意力

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

其實(shí)我們即使不使用配色也可以很好的吸引用戶(hù)注意力。

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

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

當(dāng)然我們還可以使用模糊效果來(lái)吸引用戶(hù)注意力。用戶(hù)總是會(huì)不由自主的被那些對(duì)焦準(zhǔn)確的部分吸引而忽視掉被虛化的部分。眼球的對(duì)焦機(jī)制好像一個(gè)調(diào)節(jié)器一樣捕捉那些離你忽遠(yuǎn)忽近的物體，這樣才能讓你感受到周?chē)磺惺挛锏纳疃群途嚯x。這就是我們?nèi)搜鄣墓ぷ鳈C(jī)制。設(shè)計(jì)師可以根據(jù)這個(gè)理論將界面中一些不重要的內(nèi)容進(jìn)行模糊處理來(lái)凸顯那些重要的內(nèi)容。

總結(jié)

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

本文名稱(chēng)：簡(jiǎn)潔的平面配色設(shè)計(jì)
鏈接地址：http://jinyejixie.com/news/172903.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、網(wǎng)站設(shè)計(jì)、Google、企業(yè)建站、微信小程序、品牌網(wǎng)站制作

廣告

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