配色基础

定了设计风格,接下来就是配色了。了解色彩的含义和影响,以传达正确的语气、信息并引导用户做出预期的行为。 每种色彩都会对我们的思维产生影响,了解可能的影响可以帮助我们设计师传达正确的信息、引导用户行为。

首先是需要确定主色、辅助色、点睛色。

主色是确定画面风格趋向的色彩,主色可以只有一种颜色,也可以多种颜色。一般体现在应用的 logo 以及视觉面积比较大的导航栏上使用。主色跟辅助色的关系都是相反的。

  • 主色:面积最大的色相 /辅助色:面积相对小的色相


    image

    orient/strip%7CimageView2/2/w/1240)


    主色面积大.png
  • 主色:面积最大的色系 /辅助色:面积相对小的色系


    image

    1主色.png
  • 主色:面积最大的冷色或暖色/辅助色:面积相对小的冷色或暖色


    image

    冷暖.png
  • 主色:在面积相等的情况下,颜色最重/辅助色:在面积相等的情况下,颜色轻的


    image

    轻重.png

    主色在很清晰很明确的情况下,最快速、最简单的把画面的气质表达出来。而辅助色一般会使画面更完美丰富,所以辅助色基本用于各种控件、图标和插图的使用。点睛色则在色彩组合中占据面积较小,且比较醒目的颜色。

色彩的基本认识

RGB色彩模式是目前运用最广的颜色系统之一,即红(red)、绿(green)、蓝(blue)三原色,这个标准涵盖了人类视力感知的所有颜色。


image

HSB色彩模式是通过色相(Hues)、饱和度(Saturation)和明度(Brightness)3个元素来表达色彩的。
1、色相即是色彩的相貌,如红橙黄绿青蓝紫


Photoshop中白色部分就是调节色相的值域

2、饱和度即是色彩的鲜艳程度,也就是色彩的浓淡
Photoshop中调节色相的值域.png

3、明度即色彩的明暗度,越接近黑色就明度越低,越接近白色明度越高。


image

HSB 模式中 S 和 B 呈现的数值越高,页面色彩越艳丽,对视觉冲击越迅速和强烈,但不易于长时间观看。还有就是做APP和其它设计中主,主色、辅色、点缀色是不包括黑白灰的。做设计时不要用纯黑色,也就是#000000这个颜色。这个颜色和其他有色相颜色搭配都有一种割裂感,大自然中你能看到的颜色也没有纯黑,如果你周围都是纯黑,那你就什么都看不到,看得到的都是深度灰。

色彩的搭配基础原则

1、色环
色环就是在彩色光谱中所见的长条形的色彩序列,只是将首尾连接一起,色环一般包括 12 种不同的颜色。色环搭配原则可以是对比色(指的是本颜色对应色环120°位置的颜色),同类色(色相不变,只改变饱和度),邻近色(色环里相近的两种颜色)


image

2、互补色(互补色是色环中180°对应的颜色)
3、三色搭配原则
是指一个作品中,单个界面的颜色应该保持3个以内,这里的颜色是指色相。

如何选择颜色

这个可以参考下主流市场应用的颜色搭配。通过分析不同行业的颜色使用趋势,找到规律。如在 App Store 中,可以看到有7种主流颜色,分别为白色、蓝色、红色、橙色、黄色、绿色以及粉红色,其中白色和蓝色是最常见的 APP Icon 颜色,一些分类应用中,白色几乎是最常用的纯色背景。所以当不懂怎么选择时,白色和蓝色是最容易被用户接受的颜色。
在 iOS Humn Inteface Guidelines ( iOS 人机界面指南)文档中给出了八个颜色,这八个颜色是经过反复试验,无论是组合还是单独使用,亮还是暗背景下,这八个颜色的显示效果都非常出色。所以看下自己的手机,APP 图标的配色基本也都是从这8个颜色重找到。

颜色的性格

每种颜色都有其不同的性格,从产品气质考虑出发就会选择相应的不同颜色。

红色:刺激、激励、饥饿、暴力、喜庆
橙色:活力、友好、冒险
棕色:粗糙、勤劳、耐用、树木、舒适、价值
黄色:太阳、快乐、热、财富、能量、警戒
绿色:自然、生长、能量、安全、新鲜、质朴、毒性、疾病
蓝色:水、天空、宁静、信赖、智慧
紫色:神秘、财富、戏剧、魔力
白色:安宁、干净、清晰、灵性、权威
灰色:正式、典雅、冷淡、华贵、技术、控制、能力
黑色:恐怖、虚无、夜晚、死亡、尊严、不可知

根据你想让人感受什么样的情绪来使用颜色,无疑是最好的颜色使用方法。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
禁止转载,如需转载请通过简信或评论联系作者。
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 221,695评论 6 515
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,569评论 3 399
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 168,130评论 0 360
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,648评论 1 297
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,655评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,268评论 1 309
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,835评论 3 421
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,740评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,286评论 1 318
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,375评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,505评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,185评论 5 350
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,873评论 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,357评论 0 24
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,466评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,921评论 3 376
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,515评论 2 359

推荐阅读更多精彩内容