UI系列——色彩构成
公司没有UI,也木有产品经理,让我一个前端看着怎么好看,怎么来写页面。
我觉得好看,然后做出来的页面,大家说太丑了,领导说不符合甲方产品。
我好难的,没办法。现学点UI知识。勉强补补课吧。
光是色彩产生的基础,没有光就没有了色彩,物体本身并不具备色彩。红色的波长是最长的。
色彩和颜色是不一样的,有彩色系/无彩色系。
无彩色系有:黑白灰,剩下的当然是有彩色系了。
色彩三要素
色相,明度,饱和度。
色相
色相是色彩的首要特征,是区别各个不同色彩的最标准的标准。
而色相也是由 原色,间色,复色组成。
减色原理三原色(美学)
红,黄,蓝。
加色原理三原色(光学)
红,绿,蓝。
色彩属性:
红色看着就很热血,蓝色看起来就会很深沉。
高明度色彩设计
简约时尚,大气耐看。
浅色画面会让主题突出,大量的留白让画面空灵,引发思考。
红色
正面:喜庆、大胆、热情、能量、尊贵、高档、食欲、性欲、感情
消极:憎恨、愤怒、暴力、血腥、战争、停止、死亡、消灭
色彩搭配技巧:常与黄色、黑、白进行搭配,红绿搭配是禁忌
橙色
正面:兴奋,温暖,朝气,积极,富饶,食欲
消极:危险,警告
色彩搭配技巧:橙色与白,红搭配较多。橙色更多的是辅助色出现,而不是主色系。
黄色
正面:温暖,丰富,柔和,可爱,富有,权力,皇室与佛教使用较多的色彩-象征神圣
西方:象征卑鄙与偏见
色彩搭配技巧:本身颜色明度太高,在浅色下显现不出效果,对应都是深色搭配,更多都是辅助色,或者作为底色。
绿色
正面:舒畅,新鲜,健康,环保,生命,通过
负面:安全病毒、恐怖
基督教:永远延续的爱情与生命
色彩搭配技巧:色彩本身非常刺眼,不能使用高纯度颜色。
比如:手术台的医生穿的是绿色,代表着生命力。
蓝色
正面:梦想,科技,忧郁,凉爽,平静,创意,干练,干净。
负面:忧郁,无情,消极
比如:应用最广泛,使用最方便,最不容易出错,最没个性。蓝色是人们再屏幕前最容易接受的色彩。
紫色
正面:神秘,高贵,权力,梦幻,创意
负面:忧郁,虚荣,病态
色彩搭配:颜色艳丽而刺眼,不耐看,但是同时可以表现奢华,女性,设计中用的少。
配色技巧
单色搭配
同种色彩搭配是指首先选定一种色彩,然后调整其透明度和饱和度,将色彩变淡或加深,而产生新的色彩,这样的页面看起来色彩统一,具有层次感。特点
色相相同、明度或纯度不同优劣
对比效果统一、文静、雅致、含蓄、稳重,但易产生单调、呆板的弊病
近似色搭配
邻近色是指在色环上相邻的颜色,如绿色和蓝色、红色和黄色即互为邻近色。采用邻近色搭配可以使设计避免色彩杂乱,易于达到和谐统一的效果。背景色最常见的色彩搭配方案特点
色相环上相二至三色对比,距离大约 30 度左右,为弱对比类型优劣
效果感觉柔和、和谐、雅致、文静,但感党单调、模、乏味、无力,必须调节差来加强效果
分裂色搭配
分裂补色是指同时用补色及类比色的方法来确定的颜色关系。
补色搭配
是广义上的对比色。在色环上划直径,正好相对(即距离最远)的两种色彩互为补色。特点
色相对比距离 180 度左右优劣
两种颜色互为补色的时候,一种颜色占的面积远大于另一种颜色的面积的时候,就可以增强画面的对比,使画面能够很显眼。一般情况下,补色运用有得有失。
消色搭配
所谓的消色,就是指黑白灰,这类颜色由于本身没有色性,所以可以说是万用搭配色。
由于本身没有色性,他们必须和色性比较强的颜色搭配会比较出效果消色与其他颜色搭配的时候,比例一定要控制好,尤其是灰色,灰色是一种很“高档”的颜色,但不好用。
配色建议
女性:喜欢暖色系,粉色系,色彩鲜明对比,对色彩敏感度高。
男性:喜欢冷色系,低纯度系,单一色系,对色彩敏感度低。
少儿:喜欢高纯度,高明度颜色,喜欢色彩的多样性
老年:喜欢对比强烈的颜色(色相,明度),喜欢高纯度颜色、
餐饮:暖色系(红,橙色)常见,纯度高,有食欲。
旅游:蓝色,绿色常见。亲近大自然。激发想象力,给人轻松愉快。
电商:暖色系。红橙比较常见。激发购买欲。
社交:绿色比较常见,色系柔和,亲近。
配色误区
不要将所有的颜色都用到,尽量控制在三种色系以内
- 70%的底色,低纯度,高、低明度色系
- 25%的主色,中高纯度,明度不限
- 5%的强调色。高纯度,与主色有色相对比。
背景忌讳:
对比强烈、色彩丰富花哨
文字忌讳:
与背景融合,区分不明显,遮挡主题
主题忌讳:
与背景融合,区分不明显,纯度过低
-
忌脏一一背景与文字内容对比不强烈,灰暗的背景令人沮丧
-
忌纯一艳丽的纯色对人的刺激太强烈抗议,缺乏内涵
-
忌跳一一再好看的颜色,也不能脱离整体。脱离群众是自取其辱!
-
忌花一要有一种主色贯穿其中,主色并不是面积最大的颜色,而是最重要,最能揭示和反映主题的颜色
就象领导者一样,虽然在人数上居少数,但起決定作用。 -
忌粉一颜色浅固然显的干净,但如果对比过弱,整得苍白无力了,就象病夫一样无可救药。