定了设计风格,接下来就是配色了。了解色彩的含义和影响,以传达正确的语气、信息并引导用户做出预期的行为。 每种色彩都会对我们的思维产生影响,了解可能的影响可以帮助我们设计师传达正确的信息、引导用户行为。
首先是需要确定主色、辅助色、点睛色。
主色是确定画面风格趋向的色彩,主色可以只有一种颜色,也可以多种颜色。一般体现在应用的 logo 以及视觉面积比较大的导航栏上使用。主色跟辅助色的关系都是相反的。
-
主色:面积最大的色相 /辅助色:面积相对小的色相
image
orient/strip%7CimageView2/2/w/1240)
主色面积大.png -
主色:面积最大的色系 /辅助色:面积相对小的色系
image
1主色.png -
主色:面积最大的冷色或暖色/辅助色:面积相对小的冷色或暖色
image
冷暖.png -
主色:在面积相等的情况下,颜色最重/辅助色:在面积相等的情况下,颜色轻的
image
轻重.png
主色在很清晰很明确的情况下,最快速、最简单的把画面的气质表达出来。而辅助色一般会使画面更完美丰富,所以辅助色基本用于各种控件、图标和插图的使用。点睛色则在色彩组合中占据面积较小,且比较醒目的颜色。
色彩的基本认识
RGB色彩模式是目前运用最广的颜色系统之一,即红(red)、绿(green)、蓝(blue)三原色,这个标准涵盖了人类视力感知的所有颜色。
HSB色彩模式是通过色相(Hues)、饱和度(Saturation)和明度(Brightness)3个元素来表达色彩的。
1、色相即是色彩的相貌,如红橙黄绿青蓝紫
2、饱和度即是色彩的鲜艳程度,也就是色彩的浓淡
3、明度即色彩的明暗度,越接近黑色就明度越低,越接近白色明度越高。
HSB 模式中 S 和 B 呈现的数值越高,页面色彩越艳丽,对视觉冲击越迅速和强烈,但不易于长时间观看。还有就是做APP和其它设计中主,主色、辅色、点缀色是不包括黑白灰的。做设计时不要用纯黑色,也就是#000000这个颜色。这个颜色和其他有色相颜色搭配都有一种割裂感,大自然中你能看到的颜色也没有纯黑,如果你周围都是纯黑,那你就什么都看不到,看得到的都是深度灰。
色彩的搭配基础原则
1、色环
色环就是在彩色光谱中所见的长条形的色彩序列,只是将首尾连接一起,色环一般包括 12 种不同的颜色。色环搭配原则可以是对比色(指的是本颜色对应色环120°位置的颜色),同类色(色相不变,只改变饱和度),邻近色(色环里相近的两种颜色)
2、互补色(互补色是色环中180°对应的颜色)
3、三色搭配原则
是指一个作品中,单个界面的颜色应该保持3个以内,这里的颜色是指色相。
如何选择颜色
这个可以参考下主流市场应用的颜色搭配。通过分析不同行业的颜色使用趋势,找到规律。如在 App Store 中,可以看到有7种主流颜色,分别为白色、蓝色、红色、橙色、黄色、绿色以及粉红色,其中白色和蓝色是最常见的 APP Icon 颜色,一些分类应用中,白色几乎是最常用的纯色背景。所以当不懂怎么选择时,白色和蓝色是最容易被用户接受的颜色。
在 iOS Humn Inteface Guidelines ( iOS 人机界面指南)文档中给出了八个颜色,这八个颜色是经过反复试验,无论是组合还是单独使用,亮还是暗背景下,这八个颜色的显示效果都非常出色。所以看下自己的手机,APP 图标的配色基本也都是从这8个颜色重找到。
颜色的性格
每种颜色都有其不同的性格,从产品气质考虑出发就会选择相应的不同颜色。
红色:刺激、激励、饥饿、暴力、喜庆
橙色:活力、友好、冒险
棕色:粗糙、勤劳、耐用、树木、舒适、价值
黄色:太阳、快乐、热、财富、能量、警戒
绿色:自然、生长、能量、安全、新鲜、质朴、毒性、疾病
蓝色:水、天空、宁静、信赖、智慧
紫色:神秘、财富、戏剧、魔力
白色:安宁、干净、清晰、灵性、权威
灰色:正式、典雅、冷淡、华贵、技术、控制、能力
黑色:恐怖、虚无、夜晚、死亡、尊严、不可知
根据你想让人感受什么样的情绪来使用颜色,无疑是最好的颜色使用方法。