恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反??!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
大厂都在用的“色彩地图”到底是什么?(附色彩地图模版下载)
6.7°
原创文章 / 规范/资料 / / 举报
1295 5 3 0

2021-08-13

今天我们将向你介绍,为设计建立颜色系统需要用到的最重要工具之一——UI色彩地图。


它可以帮助你在设计、迭代色彩系统时,更好地在品牌、现有的设计规范、易用性要求、产品目标和行为心理导向之间找到平衡。

(UI色彩地图,在 SDL艺术实验室 公众号回复“ 地图 ”即可下载模版)



如何运用色彩地图


UI色彩地图包含两个部分,灰阶和彩阶。

两者的排列规律都是越往上越是容易引人注意的颜色。(色彩地图包含波长为400-700纳米的颜色,因为不包括非光谱颜色,所以没有棕色、粉色或红紫罗兰色)


虽然科学研究显示,我们每个人对颜色的反应具有一定的差异,但我们可以将这张UI色彩地图看成一个大的方向指引,再在每次的设计中不断细化对色彩的定义。
同时,这其中有许多细节需要我们留意:比如在白色背景上的内容,我们需要保证其灰度的对比,让它更易于吸引用户的同时让保证用户浏览舒适度。


举个例子,在光谱颜色中只有几个是最能吸引人注意力的颜色。而这其中的蓝色、绿色,就是属于既能吸引人们注意,同时让人们处于舒适区间的颜色。


而暖色与冷色相比,在吸引人们的注意力的同时更能提高其内容的凸显度。所以当遇到重要的任务,如危险、障碍,我们可以用红色来吸引用户注意力并激发用户的紧迫感。

(颜色的视觉平均显著性)



调整颜色层级


UI色彩地图让颜色可以像文字一样有梯度层级(如H1、H2、H3…)。


如果想要提高色彩的层级,我们可以在地图顶部的红色区域中选择;如果想降低色彩层级,则是往地图中部的冷色移动,甚至再下移到底部的灰色区域。

但是因为颜色并不是从低到高的线性递进关系,所以我们在应用时需要做一些调整(如明度、纯度等):


比如让色彩系统中的红色,可以压倒其他所有颜色;让绿色比蓝色更明显;让所有彩色的强调色比灰色更引人注意。

(颜色的明度、纯度变化)



建立颜色系统


我们可以从白色背景开始,设定页面中所需的灰色和彩色部分(强调色)。


对于灰色部分,我更喜欢建立在黑白灰基础上(而不是混有其他彩色的灰),以保证画面具有干净的结构美感;对于彩色部分,我们可以寻找具有明显对比度的强调色,然后使用无障碍设计标准进行检验和校准,直到色彩的对比度能符合AAA标准。

(颜色系统的规则设定因人而异)


当然这需要很多工作,但如果做得好,你会拥有一个强大的颜色系统并为你服务很多年。



提升颜色可识别性


其实色板中默认的红色(FF0000)和绿色(0AFF00),对于色盲的人会难以识别。


UI色彩地图中标明了最普遍的色盲区(如红绿色盲),让你明确哪些颜色是难以被识别的,所以对于这个色盲区里的颜色你需要谨慎使用,尽量在设计中减少这些颜色的出现,避免将认知关联归因于这些颜色。
如果你确实需要用到色盲区里的颜色,你需要找到一些能提高它可识别性的方法,如调整其对比度、添加图形符号描述等等。

当然,在我们设计色彩系统时还会受到更多标准的限制,如品牌、现有的设计规范、产品目标、用户情感等等,但可识别性标准的优先级永远是排在第一的。


如果你还想了解色彩与用户情感间的关联,可查看我们之前分享的文章《奇怪的知识又增加了~从科学角度验证,色彩对用户情感的影响》


SDL艺术实验室 公众号,

回复“ 地图 ”,即可获取色彩地图模版


+++++

本文由 SDL艺术实验室 公众号原创,如需转载,请联系公众号后台

原文链接:https://mp.weixin.qq.com/s/2lgcTrBPWrphLJac88PK5A

Powered by Froala Editor

  • 17

    作品

  • 51

    粉丝

  • 1

    关注

  • 图标还能怎么玩?微软官方分享背后的设计思路
  • 要放那么多信息点,如何用“间距设计”把内容讲清楚?
  • 6条提问套路,让你获得有效设计反馈
  • 【京东JDC分享】多做这一步,让你的方案更快过稿

猜你喜欢

    SDL艺术实验室

    SDL艺术实验室

    小有见解话唠
    • 51

      粉丝

    • 54.9

      人气

    • 885

      颜值

    作品

      SDL艺术实验室

      点赞:3

      收藏:5

      评论:0

      大厂都在用的“色彩地图”到底是什么?(附色彩地图模版下载)

      你确定要举报大厂都在用的“色彩地图”到底是什么?(附色彩地图模版下载)?

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2021年08月13日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      账号或密码错误

      发送验证码 120s 验证码错误

      登录
      全网福利资源合集搜索处解压码