视觉设计中的理论原则与应用-颜色篇

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

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

用户界面设计中的色彩

色彩理论基础

下面这个玩意叫色相环。

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

色彩在界面设计中的作用

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

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

色彩的对比

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

色彩的性格与重量

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

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

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

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

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

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

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

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

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

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

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

不同色彩的应用场景

  • 60+30+10色彩搭配原则:60%主色,30%辅助色,10%点缀色
  • 有彩色一般应用在按钮、图标、提示性元素上
  • 无彩色一般应用在字体、分界线、背景元素上
  • 主题色是一款产品给用户留下第一印象的颜色,一般情况下主题色要占比60%以上
  • 辅助色一般伴随着主题色出现,当界面中需要提示的内容不止一种时,就可以用辅助色加以区分
  • 点缀色出现的场景有如下几种。1是需要区分的信息有两种或两种以上,2是界面中有信息需要被特别强调,3是界面内主题色与辅助色色系相同时平衡画面
  • 体量较小或特殊属性的产品会使用单色,体量较大的产品3种颜色也远远满足不了要求,此时可以使用点缀色辅助显示,穿插使用颜色。
打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  • © 2018-2020 Shawn Zhou
  • Powered by Hexo Theme Ayer
  • PV: UV:

感谢打赏~

支付宝
微信