UI配色中的色彩選擇

在眾多的UI設計規範中,色彩部分的介紹,都必然包含三種類型,分別是:

主色: 應用的核心色彩,品牌色

輔色: 豐富頁面視覺和傳達效果的次要顏色

中性: 沒有色相的文字、背景用色

1、主色的選擇

主色是一個應用的最核心的色彩,品牌的象徵色,比如想到餓了麼的藍色、微信的綠色、京東的紅色、淘寶的橙確定主色,並沒有大家想象的那麼複雜,它的要點在於一一你想讓用户感受到哪種情緒,然後通過情緒關聯一個大致的色彩範圍,再進行微調。

屏幕快照 2020-08-20 上午9.29.51.png

2、輔助色的選擇

輔助色是豐富應用中的次要色彩,它會包含一到若干個和主色不同的色彩,除了品牌傳達外,具有更強的實用性。前面我們提到過色環,這裏就要派上用場了。我們知道色環是個色彩序列首尾相連的環形模型,它藴含一個最樸素的原則,即兩個顏色在這個環形中角度越大,那麼視覺差異性越大,對比越強,

這些配色的模式是不能閉着眼隨便挑的,它們僅僅作為一個色彩對比度的判斷標準。而真正輔助色的選擇,是根據實際場景的功能決定的。比如通知、提醒、取消用大紅色,確認、同意用綠色或者藍色,收藏、打分、評價用橙黃色。都是已經在用户心智中建立了標準的用色類型,跟着常規方法來做,是沒有其它思路的情況下最簡單、最安全的輔助色選擇方式沒有標準元素用色的情況下,再考慮應用色環的“角度原則”,越需要被突出的顏色,可以在色環中離主色越遠越不需要被突出的則越近。比如攜程的應用,主色在藍色的情況下,支付、保險金標籤這些需要被重點突岀的色彩,使用了主色的互補色,讓我們一眼就能看見併產生強烈的操作慾望。

3、中性色的選擇

中性色,是頁面中文字、背景用到的顏色,它們承擔起最基本的層次表現、便於閲讀的重任。多數新手覺得中性色無關緊要,實際情況恰恰相反。主色輔助色決定了界面視覺是否岀彩,而中性色的應用直接決定了頁面能不能正常使用。如果看過比較多的原型案例,就應該明白,即使只有黑白灰的狀態下,我們理解這些頁面和進行使用也不會有絲毫的障礙。

想聊聊文中的方向?

我們從產品設計到上線交付都在做,可以先聊聊你的實際場景。

深圳小助手科技有限公司 · 0755-82494862 · 13760424861

聯繫我們

← 返回新聞動態