您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計(jì)教程 >> 設(shè)計(jì)理論 >> 瀏覽設(shè)計(jì)教程

學(xué)會(huì)給配色做減法,讓你的設(shè)計(jì)更加高端!

王M爭: 人類在回憶所看到過的場景和事物時(shí),對(duì)色彩的記憶度要高于形態(tài)。也就是說,從視覺角度來看,一款產(chǎn)品給用戶留下最深的印象每每是界面的配色。由此我們也能夠看出配色可以說是設(shè)計(jì)師最緊張的武器,很可能沒有之一,但是這個(gè)武器有使用的「限定」。

UI設(shè)計(jì)的一個(gè)基本原則就是避免網(wǎng)頁中出現(xiàn)過多的顏色,這個(gè)道理大家都懂,但是在真正本身設(shè)計(jì)的時(shí)候總是會(huì)下意識(shí)的引入過多的顏色,導(dǎo)致整個(gè)界面看起來特別很是的紊亂。所以對(duì)于設(shè)計(jì)師來說,學(xué)會(huì)給界面的配色做減法是很緊張的一項(xiàng)技能。

配色系統(tǒng)的目的

給一款產(chǎn)品建立配色系統(tǒng)之前,設(shè)計(jì)師首先要弄曉暢的是:我為什么要建立配色系統(tǒng)?這個(gè)題目聽起來十分多余而且稍顯無厘頭。但是在我看來,每次做東西之前常問本身為什么可以更好的進(jìn)步工作服從。只有真正理解了配色的意義,我們才可以做到對(duì)癥下藥,進(jìn)行有選擇性的刪減。

通常來說,配色系統(tǒng)的建立重要有以下三個(gè)目標(biāo):

  • 視覺區(qū)分

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

  • 吸引用戶細(xì)致力

視覺區(qū)分

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

配色可以完成視覺區(qū)分,但是視覺區(qū)分不是只能通過配色來實(shí)現(xiàn)。筆墨、圖像(圖標(biāo))、布局都可以完成視覺區(qū)分。

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

在這種情況下(3種產(chǎn)品類型,11種產(chǎn)品狀況),配色就要很警惕了。首先我們要對(duì)狀況進(jìn)行整合,相似的狀況整合成一種,如許可以削減顏色的數(shù)量。當(dāng)然會(huì)有人感覺六種顏色照舊多,由于書本上告訴我們統(tǒng)一網(wǎng)頁中配色不要超過三種。但是我們得從現(xiàn)實(shí)情況出發(fā),對(duì)于理財(cái)產(chǎn)品來說,用戶不太可能在統(tǒng)一屏中看到悉數(shù)的六種狀況,也就是說用戶同時(shí)看到六種顏色的概率很小。

另外我們摒棄了對(duì)產(chǎn)品類型使用配色,由于狀況已經(jīng)使用了六種配色。在這種情況下,假如我們還對(duì)產(chǎn)品類型使用顏色來區(qū)分(一個(gè)類型一個(gè)顏色),那么整個(gè)網(wǎng)頁就會(huì)顯得很亂。所以在這里,對(duì)于產(chǎn)品類型我們選擇使用筆墨(標(biāo)簽)的情勢來區(qū)分。

筆墨相對(duì)于色彩來說,給用戶的視覺體驗(yàn)照舊稍弱一點(diǎn)。所以我們要對(duì)要網(wǎng)頁中的內(nèi)容做一個(gè)優(yōu)先級(jí)的排序,緊張的內(nèi)容優(yōu)先使用配色。在這里我們認(rèn)為相對(duì)于產(chǎn)品類型,用戶更關(guān)注本身產(chǎn)品的當(dāng)前狀況。

視覺風(fēng)格

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

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

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

筆墨的跳躍率是指統(tǒng)一界面中不同筆墨之間的大小比率。不同功能的筆墨在排版設(shè)計(jì)的時(shí)候會(huì)有字號(hào)和字重的區(qū)別,例如主題目,副題目和正文的字號(hào)通常是依次減小的,這種字號(hào)的差異會(huì)帶來不同的筆墨跳躍率。一樣平常來說,筆墨跳躍率高的界面會(huì)顯得比較活潑,筆墨跳躍率低的界面會(huì)顯得鎮(zhèn)靜沉著。

在配色的時(shí)候,假如我們削減色彩的使用數(shù)目,大面積使用白,灰,黑或者其他同色相配色(藍(lán)色與淺藍(lán)色,紅色與粉紅色等),如許的界面會(huì)顯得端莊文雅且富有當(dāng)代感,但是會(huì)顯得單調(diào)。那么我們就應(yīng)該適度的提拔筆墨跳躍率給界面提拔一些活力。

當(dāng)然,不只筆墨有跳躍率,圖片也有跳躍率。設(shè)計(jì)師可以通過對(duì)圖片和筆墨跳躍率的控制來減少界面視覺風(fēng)格對(duì)于配色的依靠。

吸引用戶細(xì)致力

我們經(jīng)常喜好使用配色來吸引用戶細(xì)致力,以下圖中舉動(dòng)召喚按鈕(call to action)為例,配以與背景色差距較大的顏色使其可以從背景中凸顯出來。

其實(shí)我們即使不使用配色也可以很好的吸引用戶細(xì)致力。

谷歌搜索的主頁出現(xiàn)了大面積的留白,用戶的目光天然就會(huì)被吸引到搜索框。這和谷歌的初衷相契合,他們盼望用戶在這個(gè)網(wǎng)頁完成搜索操作,所以不用展示過多其他的信息來分散用戶的細(xì)致力。

陰影結(jié)果也可以用來吸引用戶細(xì)致力,陰影結(jié)果可以提拔目標(biāo)元素的“海拔”,進(jìn)而使其從背景中凸顯出來。

當(dāng)然我們還可以使用模糊結(jié)果來吸引用戶細(xì)致力。用戶總是會(huì)不由自立的被那些對(duì)焦正確的部分吸引而忽視掉被虛化的部分。眼球的對(duì)焦機(jī)制彷佛一個(gè)調(diào)節(jié)器一樣捕獲那些離你忽遠(yuǎn)忽近的物體,如許才能讓你感受到四周統(tǒng)統(tǒng)事物的深度和距離。這就是我們?nèi)搜鄣墓ぷ鳈C(jī)制。設(shè)計(jì)師可以根據(jù)這個(gè)理論將界面中一些不緊張的內(nèi)容進(jìn)行模糊處理來凸顯那些緊張的內(nèi)容。

總結(jié)

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

迎接關(guān)注作者的微信公眾號(hào):「王M爭」


[教程作者:互聯(lián)網(wǎng)]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://pkvc.cn/tutorial/di3820.html
如何把設(shè)計(jì)技巧融入進(jìn)用戶體驗(yàn)?來看高手的方法!
已然成熟的卡片式設(shè)計(jì),遵循著怎樣的設(shè)計(jì)規(guī)則?
圖趣網(wǎng)微信
建議反饋
×