如何科学的定义一套色彩规范

用户头像
合肥/设计爱好者/1年前/196浏览
如何科学的定义一套色彩规范
用户头像
ppone_
今天和大家聊聊色彩,其实色彩这个话题很大,也好多设计师分享过关于色彩的经验,今天不分享虚的,只告诉大家我们如何定义一套界面中色彩体系和规范~
如何科学的定义一套色彩规范(图ZMTQ5NTMxNTY=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
收藏
在我的花瓣收藏夹里有着大量我觉得优秀的设计,每次我一次又一次去看他们的时候,不停问自己为什么当初这个设计吸引了我,后来终于找到一个点,就是色彩,在我们看到第一眼时候,夺走我视觉焦点的就是色彩,所以色彩设计里面重要性不言而喻!
如何科学的定义一套色彩规范(图ZMTQ5NTMxNjA=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
收藏
色彩是设计师的一个魔法棒,它能吸引你的注意力,唤起设计情感,传递很重要的一样,在色彩对于营销设计中,研究发现,对于很多产品,人们对产出做出的90%的快速决策来源于色彩,所以为什么国内电商的立即购买会是橙色,红色,因为这个颜色能刺激用户,能产生戏份感受!
所以有效的使用颜色对设计很重要,今天我们重点来讲讲在U设计中,我们如何来定义一套调色板!一套色彩指南。
⭐️ PART 1  ——————
怎么去定义?
如何科学的定义一套色彩规范(图ZMTQ5NTMxNjQ=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
收藏
 
1. 了解产品性格
在定义色板的时候,首先我们需要去确定好我们的设计目的是什么,试着去问问自己,我们的这个色彩需要给用户传递什么样的信息,是希望他有购买欲望,还是希望他感受到尊贵感受,还是希望唤起他某种情绪?色彩可以设定品牌的的基调,情绪!
如何科学的定义一套色彩规范(图ZMTQ5NTMxNjg=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
收藏
如何科学的定义一套色彩规范(图ZMTQ5NTMxNzI=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
收藏
可口可乐旗下Fuze Tea红茶 品牌,采用自然的绿色作为品牌颜色,来传递他们这款茶融合植物、茶淬取物和其他健康成分。
如何科学的定义一套色彩规范(图ZMTQ5NTMxNzY=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
收藏
如何科学的定义一套色彩规范(图ZMTQ5NTMxODA=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
收藏
如何科学的定义一套色彩规范(图ZMTQ5NTMxODQ=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
收藏
Uber(优步)越南推出的网路“摩托车”接送服务,在UberMOTO全新品牌形象设计中,因为在越南天气很炎热,所以采用了蓝色绿色配色,斜45度的色块拼接,延伸出了会反光的安全外套,还有醒目的安全帽,在一大票的“摩托车”群中,立刻就可以一目了然司机的位置。
2. 
了解用户人群
如何科学的定义一套色彩规范(图ZMTQ5NTMxODg=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
男生和女生最喜欢的颜色
收藏
如何科学的定义一套色彩规范(图ZMTQ5NTMxOTI=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
男生和女生最讨厌的颜色
收藏
男性通常更喜欢大胆的颜色,而女性喜欢更柔和的颜色。此外,男性更喜欢深色的颜色(加入黑色的颜色),而女性更容易接受明亮的颜色(添加了白色的色彩)。
人们对于颜色的看法不同,颜色根据个人喜好,文化宗教信仰不同,有不同的看法,所以我们在设计时候一定要去考虑我们的用户谁在使用!
如何科学的定义一套色彩规范(图ZMTQ5NTMxOTY=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
收藏
在西方世界里面,红色代表恐怖和死亡,火灾,暴力战争。
如何科学的定义一套色彩规范(图ZMTQ5NTMyMDA=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
收藏
但是在中国,红色却是和繁荣富强,性格,火热激情等联系在一起,不同国家的文化差异是我们做设计时候需要去考虑。
如何科学的定义一套色彩规范(图ZMTQ5NTMyMDQ=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
收藏
在西方国家,黑白代表纯节,优雅,尊贵,高端感觉包括很多大牌的服装设计,店面装修都是采用黑白。
如何科学的定义一套色彩规范(图ZMTQ5NTMyMDg=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
收藏
在东方国家,黑白代表死亡,黑白喜事,丧礼等,文化的差异,和人群差异所以在设计的时候一定要重复考虑到。
3. 
了解色彩心理学
如何科学的定义一套色彩规范(图ZMTQ5NTMyMTI=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
收藏
了解基础的色彩心理学,关于色彩心理学这里不做详细分享,有兴趣的同学可以去搜索相关资料看看!
如何科学的定义一套色彩规范(图ZMTQ5NTMyMTY=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
收藏
红色:最容易引起人的注意、兴奋、激动、紧张。
如何科学的定义一套色彩规范(图ZMTQ5NTMyMjA=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
收藏
橙色:是一种充满生气和活力的颜色让人联想到大地以及秋色,变化和运动的感觉。
如何科学的定义一套色彩规范(图ZMTQ5NTMyMjQ=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
收藏
黄色:明亮、辉煌、灿烂、愉快、亲切、柔和的印象。
如何科学的定义一套色彩规范(图ZMTQ5NTMyMzI=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
收藏
绿色:表现价值是丰饶、充实、平静与希望.绿色继承了蓝色所有具备的平静的属性。
如何科学的定义一套色彩规范(图ZMTQ5NTMyMzY=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
收藏
蓝色:蓝色是冷色。蓝色表现千种精神领域,让人感到崇高、深远、纯洁、透明、智慧。蓝色也是公司最偏爱的颜色,代表着科技和理性。
如何科学的定义一套色彩规范(图ZMTQ5NTMyMjg=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
收藏
紫色:紫色给人高贵、优越、奢华、幽雅、流动、不安的感觉,灰暗的紫色则是伤痛、疾病,容易造成心理上的忧郁、痛苦和不安的感觉。因此,紫色时而有胁迫性,时而有鼓舞性,在设计中一定要慎重使用。
4. 
寻找色彩灵感
有时候我们早期时候很难去选定一个品牌色,或者一个色板,这个时候我们一定要去寻找灵感,没关系,伟大的艺术家都是头,我们可以从很多地方获取灵感。
如何科学的定义一套色彩规范(图ZMTQ5NTMyNDA=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
收藏
https://brandcolors.net/
 是一个特别好的网站,里面有全世界500强的品牌色板,所有知名公司的品牌色板这里都可以找到答案,我们可以从他们的品牌色板中去寻找我们想要的那种,和我们产品比较匹配的颜色。
如何科学的定义一套色彩规范(图ZMTQ5NTMyNDQ=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
收藏
Dribbble和Behanc上搜索关键词也能找到很多设计师的色板。
如何科学的定义一套色彩规范(图ZMTQ5NTMyNDg=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
收藏
https://www.materialui.co/colors
  谷歌色板库上色彩同样很多值得我们去学习。
如何科学的定义一套色彩规范(图ZMTQ5NTMyNTI=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
收藏
http://www.home-designing.com/
 我们也可以从室内设计师经常用的室内网站配色中去获得一些设计灵感。
当你找到你喜欢的配色方案时候,你可以用吸管根据来梳理你喜欢的这个配色,做成色板,有必要时候可以进行调整。
⭐️ PART 2  ——————
如何去定义一套UI配色?
好嘞,前面说了那么多,到今天的重点来了,如何去定义一套APP的配色,今天告诉大家的这个小方法是如何运用HSB去定义一套配色。
什么是
HSB?
HSB是一种颜色模式,在HSB模式中,H代表色相,S代表饱和度,B代表亮度。
如何科学的定义一套色彩规范(图ZMTQ5NTMyNjg=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
收藏
1. 
多尝试不同的配色
如何科学的定义一套色彩规范(图ZMTQ5NTMyNzI=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
收藏
在制作色板的时候,需要我们尽可能的把所有颜色和颜色灵感都创造出来,不要怕尝试不好,然后把所有颜色尝试处理后,再去缩小色板范围,怎么缩小范围,可以结合我前面说的那些原则!在UI设计中,可能额外需要注意几个问题:
  1. 超链接颜色
  2. 品牌色
  3. 主要颜色,辅助颜色
  4. 成功颜色,错误颜色
  5. 文字颜色,背景颜色
2. 利用hsb色彩模型
第一步我们要确定品牌色,品牌色一般企业LOGO的颜色,如果没有可以去确定一个品牌色。
如何科学的定义一套色彩规范(图ZMTQ5NTMyNzY=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
收藏
以品牌色为基准得出24色带
如何科学的定义一套色彩规范(图ZMTQ5NTMyODA=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
收藏
我们拿Spotify举例,我们来定义他的一套色彩体系
如何科学的定义一套色彩规范(图ZMTQ5NTMyODQ=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
收藏
基于色带得出16色相环
细心的同学可能发现色带上其实很多颜色都比较接近比如绿色,蓝色,我们需要再进一步筛选出合适的颜色作为16色相环,尽量选取一些和主品牌色比较舒服的颜色搭配h值(色相)以15,S和B不变,递增得到基于品牌色的24个色带,为什么是24个,24X15=360刚好围绕色环盘一圈所以因此我们得到一圈基于品牌色,明度和饱和度一致性的颜色。
如何科学的定义一套色彩规范(图ZMTQ5NTMyODg=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
最后根据筛选后得出我们的16色相环
收藏
调整S(亮度)和B(饱和度)
这一步我们需要去定义同频的辅助色,也就是16色相环的辅助色,我们可以在亮度(S)按-10,-20去加减,也可以在B上面以+-5去增加色相,原则就是需要有对比度,需要明显。
如何科学的定义一套色彩规范(图ZMTQ5NTMyOTI=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
调整明度,如果对比不明显,可以-20,-30
收藏
如何科学的定义一套色彩规范(图ZMTQ5NTMyOTY=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
调整B饱和度值
收藏
如何科学的定义一套色彩规范(图ZMTQ5NTMzMDA=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
收藏
最后得出一套同频下的色盘,但是其实我们设计中其实发现很多都很解决,所以我们需要去筛选和排出一些对不明显的。
制定色板
如何科学的定义一套色彩规范(图ZMTQ5NTMzMDQ=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
和品牌色同频的辅助色板
收藏
制定色板,这里需要使用到一个网站 https://coolors.co/ 这里只需要输入我们的对应的品牌色,就可以得出根据明度递减递增的色板,当然你也可以去调整明度来得出色板。
如何科学的定义一套色彩规范(图ZMTQ5NTMzMDg=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
收藏
如何科学的定义一套色彩规范(图ZMTQ5NTMzMTI=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
收藏
如何科学的定义一套色彩规范(图ZMTQ5NTMzMTY=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
收藏
自此我们得出了我们的整个产品的调色板,很多电商大促,包括Airbnb和谷歌都是通过类似的方法得出他们的色盘。最后根据我们前面定义的:警告色、超链接颜色、成功提示色。我们可以从我们的辅助色盘中得出对应的颜色,警告用红色,超链接用蓝色,警告黄色,成功绿色。
如何科学的定义一套色彩规范(图ZMTQ5NTMzMjA=) - 教程 - 站酷设计师ppone_原创素材 - 站酷ZCOOL
收藏
⭐️ PART 3  ——————
总结
以上就是制定色彩规范的全部内容,如何定义一个色彩体系和色盘知识量比较大,特别是关于HSB的运用,色盘出来了其实只是根据,关于如何色彩搭配其实是需要我们不断的去尝试!希望大家都能掌握这个方法!
3
举报
|
8
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
平面人物插画
金色颗粒质地的平面
平面风格黄绿色系花朵装饰
平面男孩喝咖啡插画设计
中国传统纹样创新图案设计
空的平台平面和自然景观
城市园林平面布局航拍
玄关入门地毯印花图案红地毯
牛奶乳液层次平面平铺平面
金色颗粒质地的平面
倒计时,海报,平面
城阙凡花
水蜜桃和李子的平面水果图案
平面设计 吊牌设计
牛奶乳液层次梯田平铺平面
平面花卉图案扁平简约无缝拼接插画
平面书法字手写
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
金色颗粒质地的平面
海底世界插画
空的平台平面和自然景观
“知识宅急送”外卖,快递,平面,海报,素材,教育
金色颗粒质地的平面
城市园林平面布局航拍
金色颗粒质地的平面
你可能喜欢
相关收藏夹
大家都在看
登录注册