UI配色

一、零售业—— “七秒钟定律”

在挑选商品和服务时 ,只需 7 秒钟就可以确定是否感兴趣,而在这短暂的 7 秒钟内,色彩的作用占到了 67%。

2

色彩的首尾都是红色,那是因为色相的序列是一个首尾相接的环形模式,所以它实际上就是色环的柱状展示图,应用起来和色环没有实际区别。如下:

3

二、配色的色彩选择

  • 主色:应用的核心色彩,品牌色
  • 辅色:丰富页面视觉和传达效果的次要颜色
  • 中性:没有色相的文字、背景用色

1.主色

确定主色,要点在于 —— 你想让用户感受到哪种情绪,然后通过情绪关联一个大致的色彩范围,再进行微调。

4

2.辅助色

包含一到若干个和主色不同的色彩。

两个颜色在环形中角度越大,视觉差异性越大,对比越强。

5

这仅仅作为一个色彩对比度的判断标准。而真正辅助色的选择,是根据实际场景的功能决定的。

比如通知、提醒、取消用大红色,确认、同意用绿色或者蓝色,收藏、打分、评价用橙黄色。差不多是用户通用的用色类型,跟着常规方法来做,是没有其它思路的情况下最简单、最安全的辅助色选择方式。

越需要被突出的颜色,可以在色环中离主色越远,越不需要被突出的则越近。

对照上面的色环,例如携程:

6

3.中性色

中性色,是页面中文字、背景用到的颜色,它们承担起最基本的层次表现、便于阅读的重任。

主色辅助色决定了界面视觉是否出彩,而中性色的应用直接决定了页面能不能正常使用。原型中即使只有黑白灰的状态下,理解这些页面和进行使用也不会有丝毫的障碍。

7

三、配色方式的四象限

8

1.主色占比大,色彩丰富度高

加深用户对品牌的认知和辨识度。而产品中又包含了大量功能和服务,需要用丰富的色彩来进行暗示,吸引用户关注。

9

2.主色占比大,色彩丰富度低

适用于图片内容丰富的题材中,或者是相对正式、品牌感强的应用。

10

3.主色占比小,色彩丰富度高

多数主流应用的趋势,留出更多的空间给内容模块的展示上,突出自身带有的服务和功能。

11

主色占比大,色彩丰富度低

产品的服务相对单一,但也需要用户投入注意力时使用。

12

本文来自投稿,不代表微擎百科立场,如若转载,请注明出处:https://www.w7.wiki/develop/4202.html

发表评论

登录后才能评论