《规律与逻辑·用户体验设计法则》 学习笔记3

视觉设计能力是用户体验设计师的必备能力，也是基础能力。应当先了解基本原则，根据原则把版面做到整体看起来舒适， 再尝试突破理论原则进行创新。

该部分学习笔记为第一大块内容，颜色。笔记摘自《规律与逻辑》。

用户界面设计中的色彩

色彩理论基础

下面这个玩意叫色相环。

• 三原色：光的三原色，包括红黄蓝。在实际使用中使用的以RGB（红，绿，蓝）居多，以此为基础可以调配出多种颜色。
• 间色：两种原色混合后得到的颜色， 比如黄+蓝=绿，蓝+红=紫，红+黄=橙
• 复色：两种间色或一种原色与其相对应的间色混合得到的颜色
• 互补色：色相环中呈180°角的两种颜色
• 同类色：色相环中呈45°向的两种颜色
• 对比色：色相环中呈120°-135°角的两种颜色
• 邻近色：色相环中呈90°向的两种颜色
• 冷色：色相环中偏向蓝，绿的色相
• 暖色：色相环中偏向红，橙的色相
• 无彩色：黑白灰
• 色相：色彩的主要特征，是区别不同色彩的标准，不同的色相是由射入人眼的光线的光谱成分决定的
• 纯度：色彩的鲜艳程度，色彩含有色成分的比例越大，则纯度越高。当颜色掺入无彩色时，纯度会发生变化
• 明度：色彩的亮度，针对同一种颜色，混入不同的黑色或白色后，会产生不同明暗的层次感。黄色明度最高，蓝紫色明度最低，红绿明度中等。纯度发生改变时，明度一般发生改变。

色彩在界面设计中的作用

由于用户需要长时间浏览页面，所以每一种色彩都应该带有功能性，尽量避免为了丰富而添加不必要的色彩。比如彩色文字会让用户提升点击欲望，而灰色文字则可能会被认为不可点击。

• 厘清整体架构，用户接触到一个产品界面时，看到的往往是由底色、几何色块、图标、按钮等元素构成的图形符号系统，清晰的色块分布可以让整个版面层次感更强，更容易让用户理解
• 明确视觉层级关系，不同的内容应该呈现出不同的层级关系。红色在视觉层级上最高，重要按钮和重要文字一般使用红色
• 突出产品风格，色彩的搭配可以反映出产品的风格和属性。比如电商类一般用橙红色，工具类一般用蓝绿色，内容类一般用净白色

色彩的对比

• 同类色对比
  • 优点：营造出和谐统一的界面效果
  • 缺点：容易让界面显得太过稳重，让人觉得乏味
  • 适用于品牌格调鲜明的场合，如网易云音乐，整个界面基本贯穿红色这一色相
• 互补色对比
  • 优点：让画面更具张力，营造出视觉反差，吸引用户关注
  • 缺点：较难把控，如果控制不当会让界面看起来非常俗气，或看起来刺眼
  • 一般采用“大调和，小对比”的原则，将一种颜色大面积显示，另一种对比色局部点缀显示
  • 可以采用明度差距较大的互补色，这样不会造成刺眼效果，比如黄色和紫色
  • 比如简书app，主色为红色， 将一些按钮设置为绿色可以提升按钮视觉层级，提升点击欲望
• 纯度对比
  • 优点：可以让页面分清主次，将重要的元素提升明度，会更容易被注意到
  • 缺点：颜色纯度过高，尤其是多种高饱和度颜色同时出现时，会看起来不舒服，当然纯度也不宜太低，会让界面显得脏乱沉闷
  • 实例：支付宝app的口碑页列表
  • 纯度对比越弱，画面冲击力越弱，表现越含蓄，适合长时间近距离观看
  • 纯度对比越强，画面冲击力越强，表现越明朗，表现效果更直观
• 明度对比
  • 物体受不同明度背景的影响，可以产生不同的视觉感受
  • 黑色和白色是最强的明度对比组合，黑色与深灰色，白色与浅灰色是较弱的对比组合
  • 可以展现出色彩的层次感，空间感，立体感
  • 对比合理可以让信息展现更直观，提升阅读效率
  • 一般来说，明度越低的物体越靠后，明度越高的物体越靠前
• 面积对比
  • 同面积红+绿不好看，大面积绿+小面积红好看，大面积红+小面积绿也好看
  • 处理某种颜色太跳跃的问题：可以改变色相和纯度，但是也可以改变颜色所占面积，跳跃色占面积较小，柔和色占面积较大
• 动静对比
  • 指的是花哨与纯净的对比
  • 太过稳重的搭配容易造成视觉疲劳，太过动感的视觉搭配容易引起视觉不适，适当进行动静对比可以解决这一问题

色彩的性格与重量

当然，以下结论只是常规认知上，也常有用于另外情景的情况。

• 冷色会让用户产生正义、平静、安全、理智、高科技的感受

• 暖色会让用户产生积极、喜庆、食欲和亲近的感受。

• 白色象征纯洁、神圣、信任、安静，给人感觉平淡，视觉层级低，常用于内容类产品

• 蓝色象征着诚实、希望与科技，耐看，让人感到平静，长时间浏览不会产生浮躁心理。但是不适用于娱乐产品

• 红色象征着热情、性感、自信、充满能量。在音乐类，电商类等需要活跃气氛的app中可以使用，但是不适用于医疗类，安全类app

• 橙色与红色相近，但橙色更具有亲切感和活力感。可以增加食欲和消费欲望，所以在电商，食品类app使用较多，但是橙色浏览时间较长会让人烦躁。

• 黄色象征着青春、活力、创意和乐趣，特点是明度极高。一般在定位为年轻人的产品中使用，但是缺乏权威感和稳重感，并且较难把控。

• 绿色象征着安全、自由、新鲜、生命力，给人感觉温和，用于强调安全感并想要获取用户信任的场合。比如安全类，理财类app

色彩的重量是人的一种心理感受，重量一般由明度决定，明度较高的颜色给人的感觉较轻，明度较低的颜色给人的感觉较重。明度由重到轻可以排列成黑红紫蓝绿黄白。同色系中明度越高重量越轻。

通过对色彩的把控可以让重量更为合理。比如较多图片的界面，导航栏可以使用浅色，避免深色过多导致产生视觉负担。针对文字较多的界面，导航栏可以使用深色，这样可以人为增加页面的重量感，避免在视觉上感觉太轻。

不同色彩的应用场景

• 60+30+10色彩搭配原则：60%主色，30%辅助色，10%点缀色
• 有彩色一般应用在按钮、图标、提示性元素上
• 无彩色一般应用在字体、分界线、背景元素上
• 主题色是一款产品给用户留下第一印象的颜色，一般情况下主题色要占比60%以上
• 辅助色一般伴随着主题色出现，当界面中需要提示的内容不止一种时，就可以用辅助色加以区分
• 点缀色出现的场景有如下几种。1是需要区分的信息有两种或两种以上，2是界面中有信息需要被特别强调，3是界面内主题色与辅助色色系相同时平衡画面
• 体量较小或特殊属性的产品会使用单色，体量较大的产品3种颜色也远远满足不了要求，此时可以使用点缀色辅助显示，穿插使用颜色。