国产精品一区电影_国产男女无遮挡猛进猛出_日本丰满熟妇videossex8k_中文字幕无码乱人伦,久久综合伊人77777麻豆,亚洲最大在线观看,无码人妻久久一区二区三区app

色彩在UI設(shè)計(jì)中的巧妙應(yīng)用——武漢網(wǎng)站設(shè)計(jì)

作者： 時間：2024-07-30 瀏覽：

我們經(jīng)常會使用到很多產(chǎn)品，一些產(chǎn)品里的色彩搭配也會給我們留下深刻的影響，比如你會記得淘寶的橙色、支付寶的藍(lán)色等等，色彩對于用戶的體驗(yàn)也很重要；本文武漢網(wǎng)站設(shè)計(jì)小編分享了關(guān)于色彩在UI設(shè)計(jì)中的應(yīng)用，我們一起來看一下。

一、色彩的應(yīng)用

人腦對于色彩的記憶度要高于形態(tài)，即一個App給用戶留下深刻印象的往往是界面的色彩；例如說到支付寶，我們可能想不起它的首頁長什么樣子，標(biāo)簽欄圖標(biāo)是那些，但能馬上記起它的界面主色是藍(lán)色；因此運(yùn)用好色彩對UI設(shè)計(jì)十分重要，它能直觀的呈現(xiàn)產(chǎn)品的氣質(zhì)和性格，能有效的幫助用戶組織和閱讀信息，與界面設(shè)計(jì)產(chǎn)生聯(lián)系和記憶。

好的配色往往依靠設(shè)計(jì)師審美、感覺搭配出來，但合理的顏色搭配必定存在合理的配色規(guī)律和配色方法論的支撐，下面結(jié)合相關(guān)案例為大家講解色彩運(yùn)用的幾個技巧。

1. 不得觸碰的禁區(qū)

分析研究了很多優(yōu)秀設(shè)計(jì)作品，發(fā)現(xiàn)他們在用色的時候有一部分區(qū)域是不會使用的，也就是我們常說的“配色禁區(qū)”；當(dāng)然，這里的“禁區(qū)”是帶雙引號帶的，并沒有什么絕對的禁區(qū)，只是說這些顏色不易控制，在連基礎(chǔ)色都沒有駕馭好之前，盡量少碰。

配色禁區(qū)大概分為這三種：三角形禁區(qū)、矩形禁區(qū)、扇形禁區(qū)（紅色為禁區(qū)），如下圖：



綜合看來，不管是那種禁區(qū)，右下角區(qū)域的顏色是很少用的。畢竟他們又臟又深，當(dāng)然什么顏色都能駕馭的大師請略過。

知識點(diǎn)：

在界面設(shè)計(jì)中，一般主色和輔助色都集中在右上角，次要的和不可點(diǎn)的顏色都集中在中中上方，而文字信息和背景色則集中在左側(cè)，右下角禁區(qū)是我們要重點(diǎn)避開的對象。

2. 色調(diào)一致

在App設(shè)計(jì)之前應(yīng)先確定界面的主色調(diào)，主色將占據(jù)界面中很大的比例，通常是品牌色，而輔助色、點(diǎn)綴色、背景色等都應(yīng)以主色調(diào)為基準(zhǔn)來搭配，這樣才能保證App整體色調(diào)的一致。

色調(diào)一致的界面，能帶給用戶始終如一的視覺體驗(yàn)。例如馬蜂窩將黃色（品牌色）作為主色，以及從主色搭配出的藍(lán)色（對比色）貫穿App始終。



3. 60-30-10原則

60% 30% 10%的原則，是達(dá)到色彩平衡的最佳比例。在60%的空間使用主色，可以運(yùn)用到導(dǎo)航欄、按鈕、圖標(biāo)等關(guān)鍵的元素中，使之成為整個App的視覺焦點(diǎn)和色彩關(guān)系；30%的空間使用輔助色，可以平衡過多的主色而造成的視覺疲勞；最后剩下10%的空間為點(diǎn)綴色，可以用在一些不太重要的元素又需要區(qū)分的時候。

6:3:1原則構(gòu)建了一種豐富的色彩層次，讓界面看上去和諧、平衡和不雜亂。



嗶哩嗶哩將粉色運(yùn)用到頁簽、標(biāo)簽欄、按鈕、入口圖標(biāo)等上，藍(lán)色的輔助色用在角標(biāo)、圖標(biāo)上，還有黃色、紅色用在一些小圖標(biāo)、小標(biāo)簽上，主次非常清晰明了。



4. 色不過三

經(jīng)常很多大神在網(wǎng)上說配色不要超過三種色，其實(shí)就是「色不過三」原則，即在一個頁面中不要使用超過3種顏色搭配，這也和上面說的“60-30-10原則”類似，即一個主色、一個輔助色和一個點(diǎn)綴色。

但在實(shí)際UI設(shè)計(jì)中，迫于產(chǎn)品的需要可能會使用更多數(shù)量的色彩，但切記不可超過7種色相（注意不是7種色值），每個色相還可以運(yùn)用其飽和度、明度的變化分解出豐富的色彩搭配。



美團(tuán)外賣的首頁20個功能入口大圖標(biāo)的背景用了9種不同的色彩，每種色彩又包含一種低飽和度色彩進(jìn)行彩色漸變，但并沒有顯得雜亂，而是呈現(xiàn)一種年輕時尚的律動感。

這是因?yàn)檫@里雖然使用了9種不同的色彩，但仔細(xì)觀察發(fā)現(xiàn)只使用了3種色彩，其他6種則是從前者鄰近色中提取出來的搭配，再將它們錯落放置，呈現(xiàn)出豐富多彩的色彩搭配，整體和諧統(tǒng)一。

5. 遠(yuǎn)離純黑色和純灰色

黑色就像沒有生命力的深淵，使用戶陷入冷冷的負(fù)面情緒中。遠(yuǎn)離純黑色和純灰色，是因?yàn)樗鼈儾淮嬖谟诂F(xiàn)實(shí)世界里；嘗試在純黑和純灰中加入一些色調(diào)，會讓界面看上去更柔和自然；另外，純黑色還會與白色產(chǎn)生強(qiáng)烈的對比度，看久了會使人疲勞，讓用戶產(chǎn)生焦慮的情緒。

MONO的導(dǎo)航欄并不是深黑色，而是加入了藍(lán)色的低飽和度藍(lán)黑色，它的界面背景也是加入了藍(lán)色的的淺色，這樣就不會讓界面看上去死氣沉沉的。



6. 遵循色彩心理學(xué)

前文我們已經(jīng)了解過各種色彩的心理學(xué)知識，就是為了我們在進(jìn)行App設(shè)計(jì)時提供依據(jù)；這些色彩都是源于人類對大自然最原始的感受，藍(lán)色的天空、綠色的草地、黃色的沙漠等等，自然的色彩，對于我們來說是司空見慣的，但其中卻蘊(yùn)含著豐富的美感，并達(dá)到了和諧統(tǒng)一。

網(wǎng)易云音樂使用紅色作為主色，這種熱情奔放的顏色傳遞出一種充滿能量、自信的氣質(zhì)。



7. 良好的可讀性

良好的可讀性在界面設(shè)計(jì)中能為用戶提供主次分明、層次清晰的閱讀體驗(yàn)，而一個可讀性差的界面則會成為用戶瀏覽的障礙。

那如何確保界面具有良好的可讀性呢？

這就需要在界面設(shè)計(jì)中注意色彩搭配的對比，如在淺色背景上使用深色文字，在深色背景上使用淺色文字，使用高對比的度的亮色展示重要的元素，用低對比度的淺色來體現(xiàn)需要弱化和次要的內(nèi)容；例如蘋果Music的主要功能入口，標(biāo)簽欄圖標(biāo)、按鈕等都是用了高純度的紅色，與其他元素從形成鮮明對比，就連深灰色的輔助文字都有著清晰的可讀性。



8. 從大自然中獲得靈感

配色中盡量使用大眾熟悉的色彩，如自然界中人們常見的色彩等；從大自然中獲取的配色靈感可以使你的設(shè)計(jì)更加切合用戶的審美，非常自然；而藝術(shù)是對自然的直接反映，是非常寶貴的資源，值得好好利用。

我們可以搜集各種與自然風(fēng)光相關(guān)的圖片，從中提取色彩運(yùn)用到設(shè)計(jì)中，這些幾近完美的搭配呈現(xiàn)出來的和諧美感能瞬間打動人心；天氣應(yīng)用Marline就是一個很好的例子，它的界面背景漸變就參考大自然的變化，隨著不同時間段呈現(xiàn)出清晨、日出、正午、日落、深夜、雨天等漸變色，打開應(yīng)用即喚起了用戶的快樂情緒。



9. 將UX顏色與品牌相匹配

品牌價值在創(chuàng)建調(diào)色板中發(fā)揮關(guān)鍵作用，但是它們不是唯一重要的因素，行業(yè)規(guī)范也是關(guān)鍵；使用與品牌主要競爭產(chǎn)品幾乎相同的配色方案不失一種好方法。

配色在品牌視覺中所發(fā)揮的作用是不言而喻的，但是，色彩本身的內(nèi)涵和情緒特質(zhì)并不是全部；比如一個行業(yè)當(dāng)中，很多產(chǎn)品都使用了藍(lán)色，那么你的產(chǎn)品繼續(xù)使用藍(lán)色，可以讓用戶更快「識別出」你所屬的領(lǐng)域；但是本身也存在讓人混淆的風(fēng)險。如果你想要在視覺上脫穎而出，可以試著使用不同的色彩。



中國區(qū)或美國區(qū)，紅色和藍(lán)色都是最流行的顏色

在進(jìn)行品牌設(shè)計(jì)的時候，選擇配色的第一步，始終是了解各種顏色或者色相的氣質(zhì)和情感屬性；然后，在具體設(shè)計(jì)的時候，再進(jìn)一步根據(jù)品牌的氣質(zhì)和需求，再在色相的基礎(chǔ)上調(diào)整明暗和飽和度。也可以打破常規(guī)創(chuàng)造出與眾不同的配色方案。

10. 從強(qiáng)調(diào)色入手

想要讓配色方案更加突出，在設(shè)計(jì)中添加強(qiáng)調(diào)色可能是最容易入手的地方；舉個例子，一個律師咨詢的App可能會使用傳統(tǒng)的藍(lán)色作為基礎(chǔ)配色，但是，如果能夠加入檸檬綠作為強(qiáng)調(diào)色，會顯得獨(dú)特很多。

11. 冷暖色對比搭配

冷暖對比色是自然平衡的規(guī)律，可以在設(shè)計(jì)中大量使用，這樣的配色會使作品非常的出彩，同時不顯單調(diào)，讓用戶感覺舒服平和；而且這種搭配方法基本沒有啥缺點(diǎn)，使用在設(shè)計(jì)中，技巧性比較多，對設(shè)計(jì)的細(xì)膩感受要求比較高，需要多練習(xí)。



12. 黑白色搭配不過時

黑色是所有中性色中最強(qiáng)的，而白色是最常用的背景顏色。

黑色是一個很好的選擇，有種高端和永恒的感覺，而白色可以帶給用戶自由，寬敞和透氣的感覺；如上所述，黑色和白色也是最大的對比色，如果合理的使用黑色配合白色，會營造出一種優(yōu)雅的氛圍。



13. 強(qiáng)交互色彩

交互色彩在執(zhí)行過程中必須清晰且在界面中保持一致。

號召性用語必須相對于背景具有足夠的對比度，并且相對于其他組件必須具有足夠的視覺權(quán)重，以便用戶可以輕松識別它們；Nike健身應(yīng)用中，「開始」按鈕以高飽和度的檸檬綠作為主色，從背景中脫引而出。



但是，交互色彩并不總是以最具飽和度或最亮為特征，而是通過色調(diào)、形狀、大小或?qū)Ρ榷龋瑥钠聊簧厦摲f而出；因此，交互色彩的有效性將基于用戶識別交互區(qū)域和執(zhí)行任務(wù)的速度來衡量。

同時，次要功能權(quán)重要更輕，并在視覺上更接近信息元素。如上圖Nike Training界面中，“設(shè)置”和“聲音”按鈕只用簡單的白色，減輕對主按鈕的干擾，也避免了頁面中出現(xiàn)多個強(qiáng)交互按鈕。

14. 保證良好的可讀性

可讀性是任何設(shè)計(jì)中的重要因素。你的顏色應(yīng)該清晰易讀，尤其是在處理文字時；因此對比度對視覺效果對影響就非常關(guān)鍵，對比度過小，就會使得界面出現(xiàn)灰蒙蒙對效果。

清晰的對比度，一般會采用色彩的兩極，黑紙白字或白紙黑字；而在彩色背景上要讓內(nèi)容清晰可見，就需要搭配純白或高明度的文字，避免灰色文字；也要注意避免彩色背景上搭配互補(bǔ)色和明度接近的文字，因?yàn)檫@兩種搭配會產(chǎn)生一種“震顫效應(yīng)”，發(fā)出光暈的視覺效果。



15. UI中的陰影

沒有完全純黑的陰影，陰影的顏色是會受到物體本身固有色的影響，一定要避免使用純黑色（#000000），使用不太深的灰色，效果會更好；對于有顏色的元素，好的做法是為陰影設(shè)定與元素相同的顏色，并使其更暗一些。



如果是有顏色的元素，并且它處在黑暗的背景下，一般情況下，是不建議使用陰影的；但是如果你一定要用，把陰影透明度調(diào)到小于10%及以下，并且顏色跟隨主色調(diào)來；比如按鈕為綠色，則可以為按鈕設(shè)定一個更深的綠色陰影，并加上小于10%的透明度數(shù)值。

好了，色彩在UI設(shè)計(jì)中的巧妙應(yīng)用就到這，接下來武漢網(wǎng)站設(shè)計(jì)小編還會更新一些其它相關(guān)的研究和總結(jié)，一定會給你在工作中帶來幫助的。