UI设计色彩那些事(下)

人们对色彩的敏感程度高于形状,色彩能在第一时间吸引人们注意力,也是最容易被人们记住的元素,在UI设计中也非常重要,更是逐渐形成了一些色彩的使用规范、技巧与惯用颜色。

UI设计色彩那些事(下)

上篇我们已经分析了UI设计中品牌色和中性色的使用,今天继续功能色和辅助色这两方面。想回顾上篇内容的小伙伴可以直接传送门进入《UI设计设计色彩那些事(上)》

功能色

功能色顾名思义就是代表某种功能或意义,现在常用功能一般都已经有了与其匹配的惯用色,我们在选择的时候遵循现有规律即可,这样对用户来说学习成本才是最低的,能够清晰明了一看就懂。

大家最常见熟悉的功能色,比如绿色代表正确成功,红色代表错误。

UI设计色彩那些事(下)

再比如从链接文字,带颜色的文字会给人以可点击感,有些情况下会选择的主题色,但也有一些主题色不适合的情况,比如主题色是红色,红色本身会带有些警告警示的意味;黄色明度高不适合小文字的阅读等。

除了主题色,还有一种通用的选择就是使用蓝色作为链接文字的颜色,这是从web时期就培养出来的视觉习惯,用户也很熟悉。点击前为蓝色,点击后用紫色。

UI设计色彩那些事(下)

提醒、警示性则以橙红色为主,橙红色系能带来视觉刺激,最能引起用户注意。不管是徽标圆点,还是文字提醒,都选择了它。

UI设计色彩那些事(下)

辅助色

上篇中提到品牌色是体现公司文化、产品特色的重要视觉元素,是人们脑海中对于产品的强烈记忆点。但在一些情况下,只有品牌色不足以表达完整的视觉效果,所以还需要辅助色的帮助,丰富视觉层级,减少审美疲劳。

辅助色的选择可以从三个方面来考虑,分别是:相近色、互补色、渐变色。

UI设计色彩那些事(下)

· 相近色

相近色其实就是与主题色相近的颜色,比如Tints and shades系统:通过对主题色加入白色或黑色(tints加白色,shades加黑色),改变主题色的明度与饱和度,增加颜色的层级变化,以满足不同场景的需要。

UI设计色彩那些事(下)

常见的使用场景比如web端按钮的常态、经过与点击的色彩,就可以使用tints和shades系统的算法来得到。

UI设计色彩那些事(下)

· 互补色

互补色则与相近色刚好相反,相近色的色相不发生改变,而互补色则是选择不同色相,色环相对180°的色彩产生强烈对比。

UI设计色彩那些事(下)

熟悉的例子比如Airbnb、厨房故事都是采用互补色的配色方式。

UI设计色彩那些事(下)

· 渐变色

渐变色选择与主题色在色环内15°的色彩,色相与主题色接近又稍有不同,保持色彩的冷暖一致,过渡更加自然,视觉效果自然和谐。

UI设计色彩那些事(下)

PS:15°以内是安全区域,指不超过15°的范围,但并不是指选择相差最大的色彩,根据现在微渐变的流行趋势,选择与主题色更相近的颜色会更加适合。且不同色相给人视觉上的感观区别程度也不一样,我们还应根据具体情况选择,多尝试对比。

UI设计色彩那些事(下)
UI设计色彩那些事(下)

除了色相上的变化,也可以使用上面定义的同类色来制作渐变色,选择明度和饱和度的变化,这种方式是比较保险的方式,是一张安全牌出错几率小一些,效果更加可控,对新手小伙伴更加友好。

UI设计色彩那些事(下)

配色工具

当然现在也有不少配色工具可以帮助我们,推荐我个人觉得比较好用的两款

·Color Scheme Designer

确定主色后可以选择单色、互补色、类似色等搭配。

UI设计色彩那些事(下)

·material design palette

选择两种颜色后,可以有颜色搭配及页面预览。

UI设计色彩那些事(下)

划重点

  • 选择功能色的时候遵循现有规律对用户来说学习成本最低,一看就懂。
  • 渐变色既可以选择色相的变化,也可以选择明度、饱和度上的变化,需要根据当下流行趋势及具体情况选择。

#相关阅读#

UI设计色彩那些事(上)

业界动态

九阳真经:文旅IP的超级孵化法则

2019-11-5 14:00:45

业界动态

产品前景评估:如何找到更有潜力的产品

2019-11-5 14:49:55

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索