UI色彩那些事（上）

学画的时候老师常说一幅作品的组成需要形体与色彩，同样的产品页面也一样，整体的视觉风格由框架布局、色彩和文字构成。人们对色彩的敏感程度高于形状，色彩能在第一时间吸引人们注意力，也是最容易被人们记住的元素，在UI设计中也非常重要，更是逐渐形成了一些色彩的使用规范、技巧与惯用颜色。

有页面显得生硬、细节不到位，很多时候可能是颜色的问题，比如分割线颜色如果过重，就会对页面内容产生干扰，影响阅读。

那么下面我们就从品牌色、中性色、功能色、辅助色这四个方面来分析一下，UI设计中的色彩使用吧。

品牌色是表现公司文化、产品特色，体现品牌性的重要视觉元素，是人们脑海中的强烈记忆点，比如提到支付宝，会想到蓝色，提到网易云音乐，则会想到红色。

品牌色的使用让产品保持自身的品牌性与统一性，于竞品也是一种区分，作为产品的主题色，被广泛运用。在按钮、顶部导航、图标、缺省图、开屏页、背景图等中都需要使用到。

·按钮

按钮在页面中需要用户点击发生交互行为，所以通常也都使用品牌色以引起用户注意。

·背景

顶部导航、标题栏、个人中心等页面的页头，也常使用品牌色。

值得注意的是，现在越来越多的产品，选择“素白”的轻量化设计，让用户更加关注内容本身，逐渐减少了大面积的主题色使用。如在新版淘宝中，就取消了页面头部标志性的橙色，改为使用白色。

同样的哔哩哔哩减少了页面中对品牌色的使用，不过为了照顾用户的视觉习惯，也给了用户自己选择的权利，可以继续选择使用品牌色的模式。

·图标

图标也是品牌色的主要使用区，尤其是底部tab图标，大多数产品的选中状态都为产品品牌色。

金刚区图标则有两种趋势，多色或单色，各有其优点。多色让页面更加丰富，让每个图标的内容更容易被识别，特点更加鲜明，是电商类产品普遍使用的方案。

而单色则让页面更加统一，排除过多视觉干扰，通过图形形状来区分内容。

·缺省图

缺省图在产品为空状态或是发生错误时起到安抚用户情绪，美化和填充页面的作用，而品牌色的使用，让产品的整体视觉更加统一、成体系。

·开屏页

开屏页大面积的品牌色使用，是强化品牌视觉的重要窗口，容易留下深刻印象，用户打开产品的一瞬间，就能感受到颜色带来的熟悉感。当然开屏页也还有许多不同形式，在设计的时候，需要根据产品所处阶段，当前需求以选择适合的形式。具体可参考《 开屏页设计，看这篇就够了！》。

品牌色是页面中代表产品特色、个性的部分，中性色则是通用的基础的部分，普通但却重要，也是设计中不能忽视的一环，主要用于背景、分割、文字等。

· 背景

页面使用中性色作为背景，让用户更专注于内容，提升使用和阅读体验。

· 分割

页面中的分割分为面性分割和线性分割，通过分割以明确内容模块之前的亲疏关系，让用户更容易理解页面页面层级，更好地浏览内容。

面性分割通常是与页面背景的结合，多用于模块与模块之间的分割，可以理解为在背景上放置不容内容模块，而模块之间的间距距离漏出的底层背景其实就是面性分割，所以面性分割的色值多与产品的背景色是保持一致的。

线性分割的分割感比面性分割的小，常用于模块中的内容分割，颜色选择应该尽量柔和，使用过深的颜色会使其成为页面中的“噪音”，导致阅读的舒适度下降，影响用户对信息的获取。

·文字

文字也是中性色的势力范围，大部分的内容性文字都使用中性色，根据其重要程度对应不同的色值，比如标题文字、主要内容、次要内容、失效文字等，由深至浅。

常用的色值如 #333333、#666666、#999999、#CCCCCC，深色模式下则相反。

PS：考虑到深色模式（Dark Mode）的适配，也可以直接使用一个固定色值，然后调整其透明度以区分层级。这样后期标注会更加方便，且文字与背景不容易出现相融的情况。如下图中不仅文字是调整透明度为层级区分，边框、分割线、背景等中性色，都可以通过透明度的调节来确定色值。

· 品牌色是表现公司文化、产品特色，体现品牌性的重要视觉元素，常使用与按钮、背景、图标、缺省图、开屏页等。

· 为了让用户能更好的关注内容本身，“素白”的轻量化设计逐渐减少了大面积的主题色使用。不过照顾用户的视觉习惯，也可以给了用户自己选择的权利。

· 中性色可以直接使用一个固定色值，然后调整其透明度以区分层级。

参考引文

http://1t.click/aGbn《一篇吃透 Dark Mode ，搞定“暗黑/深色”适配》

海盐社Q3招新，回复数字【2】查看