多颜色主题设计

如果要做一个有多种颜色主题(甚至可以支持自定义)的网站,我们可以为不同颜色主题分别写样式,但更好的方式是抽象出一套颜色体系,定义出颜色规范,确定几种元颜色值,不同颜色主题都通过这几种元颜色值按一定的变化方式产生,于是,多颜色主题的支持将会非常方便,并且其结果也将会令人满意,不会出现颜色值不协调、对比度不够等问题。

就像一个方程,给定特定几个参数,然后生成一套颜色主题。

而这也与通常设计的习惯相同,一般一套主题不会有特别多的色调,很多颜色都是相近或者是通过变换产生的。设计师们可能没有一种明确的计算方式,但凭他们的设计直觉会选出较合适的颜色值。

定义颜色类别

Primary Color 主要色

这是网站的主色调,承载着页面主题需要向用户传递情感的任务,一般是网站 Logo 主颜色(品牌色),或者也可能是出现频率最高,面积最大的区域颜色。

通常情况下这种颜色(或者其派生颜色)可以用在导航背景色、网站全局背景色、一些边框颜色、普通按钮颜色(及按钮选中、激活、失效状态)等。

有些情况下也可能需要多种 Primary Color,可以再定义 Secondary Color。

Accent Color 辅助色

这种颜色是强调色,或者叫 衬托色,用于一些需要强调、引起用户特别关注的颜色,一般与 Primary Color 会有较强的对比反差,常用的如互补色,或者冷暖对比色。

通常用于 选中的文字背景色,悬浮按钮、执行操作按钮、进度条、选中的表单项高亮 等。

通常 Secondary Color 不会占比太多,一种较合适的颜色分布是: Primary : Secondary : Accent = 6 : 3 : 1

Semantic Colors 功能色

这种颜色是含有语义的,用于表示出错、失败、成功、警告等,通常分以下四种:

  • 红色:代表 失败,出错,危险
  • 黄色:代表 警告,注意,小心
  • 绿色:代表 成功,安全,通行
  • 蓝色:代表 普通中性提示信息

Neutrals 中立色

这种颜色是中性颜色,通常是 黑、白、灰,用于文字颜色、文章背景等,灰色是公认的安全色、百搭色,通常可以由另外两种颜色调配出来。

颜色变换规则

将以上几种颜色作为元颜色,其它所有颜色都从以上颜色中变换产生,于是接下来我们主要关注的是变换的方法,定义一套变化规则。

例如对于按钮,通常会有 默认状态、选中状态、禁用状态等:

以上颜色都是从同一个颜色,通过变化 透明度、饱合度、对比度 等变换产生,这便是变化的规则。

定义变化的规则,应该着重注意识别度,不要让文字与背景不易被阅读。

定义元颜色

使用 CSS3 Variables 特性定义元颜色变量:

定义出不同颜色主题元颜色后,便可以给 <html> 标签添加不同的 class 来改变页面主题。

注意:变量名称尽量不要用颜色名称,而是要用其代表的实际意义,抽象出其在样式主题中的意义。

进一步阅读

  • https://medium.com/@erikdkennedy/color-in-ui-design-a-practical-framework-e18cacd97f9e
  • http://www.jianshu.com/p/e662eb54c35e

1 评论

发表评论