Adapted from our book and video series, Refactoring UI.
你有用过那些色表盘生成器吗？当你选择一个初始颜色，调整选项之后，可能生成了5个完美的用音乐术语命名的色表盘，你就用这些开始设计了吗？
这种选择完美色彩体系的方法非常诱人，但是并没有实际的作用，除非你想要你的页面如下：
你真正需要的是什么？
你不能用色相来进行设计。为了设计真实的项目，你需要更多、更有体系的大量色彩。
你可以把色表盘体系分成三个类别。
灰色
文字、背景色、面板、表单----基本界面上所有的东西都是灰色的。
你需要的灰色非常多--3、4种色度看着很多但是你可能需要比2号色度更黑一些或者比3号色度更浅一些
实际上，你需要8-10种色度（可能后面需要更多。）如果不够多的话，你可能纠结于用77号色度还是用88号色度；但是如果数量足够多的话，你就不要妥协了。
真正的黑色看着特别不真实，所以从一个黑灰色开始并且用你自己的方式一点点增加白色进去。
主色调
大部分设计需要1到2种颜色作为主色调。用来标注指示性的元素等。这些颜色可以确定设计的整体外观--比如你觉得Facebook是蓝色的，尽管他大部分是灰色的。
跟灰色一样，你需要多种（5-10）深浅不一的主色调色盘以供选择。
特别浅的色彩在如警示的情况下特别有用，而更深的颜色对文字特别有用。
强调色
在主色调之外，每个设计还需要一些强调色为了告诉用户一些特别的信息。比如说，你可能想要需要一些夺人眼球的颜色，比如黄色。或者用青色来高亮新特性。
你也同样需要一些颜色强调特别的状态，比如用红色去确认破坏性的操作。
用黄色来展示警示性的信息
用绿色来高亮积极的趋势
你需要复杂的色度，即使在UI设计中需要谨慎的使用。
如果你需要用颜色去区别或者分类相似的元素，比如图标中的线，日历中的事件或者项目中的标签，你可能需要更多的强调色。
在一个复杂的UI系统中，用10个不用的颜色和5-10个色度并不常见。
首先定义你自己的色度
当你的色盘需要建立更浅或更深的颜色变化，不要用CSS函数比如“浅色”或“深色”来建立色度。那会产生35个轻微不同的蓝色并且看上去v 都一样。所以，你就需要为你的工作定义一系列固定的色度，这样你就可以挑选了。
那怎样把调色板放在一起的呢？
首先选择基本的色彩。
首先选择你想要创建的基本色彩----颜色是处于中间的，这样你可以在这个基础上选择更浅或更深的色度。
选择色彩并没有一种特别好的办法，但对于主色调和强调色来说，好的经验是选择一个可以作为按钮背景的颜色。
很难总结出规律，比如从50%的亮度开始选择--因为每个选择颜色的行为都是不同的，都依赖于你自己的眼睛。
寻找边界
下一步，选择最深的色度和最浅的色度。这也并没有规律，但可以通过观察上下文的规律来选择。
最深的色度一般用在文字，而最浅的色度可以用在元素的浅背景上。
一个简单的提示部分就是一个很好的展示例子，所以你可以从这里选择这些色彩。
从一个满足你基本色彩的色相开始，调整饱和度和明度直到你满意为止。
填充空隙
一旦你找到你基本的、最深色的和最浅色的色度，你需要把色阶补充完成。
对大部分项目来说，每种颜色至少需要5种色度；如果你觉得太受约束，也可以选10种色度。
9是个非常好用的数字，因为很容易分割并且填充色阶的时候也变得简单。我们把最深色的色度叫做900，我们基本的色度叫做500，我们最浅色的色度叫做100.想要选择色度700和300开始，就在两个色度中间选择，这样可以看起来像两边色度的完美折中。
这种方式可以创建4个色阶 (800, 600, 400,和200), 你就可以用比较接近的色度来填充了。
当你的色表盘可以提供足够的选择从而展示你的设计思路不受限制，那就够了。
灰色怎么样？
灰色的基础色不是很重要，但是色阶也是使用同样的方法。从边界入手，填充空隙知道你足够用。
选择你最深的颜色作为项目中文本颜色，选择最浅的颜色比如细微的灰白色作为背景。
这不是科学
虽然很诱人，但你不能单纯依靠数字来搭建完美色表盘。上文描述的系统方法对于你的开始很有帮助，但是不要害怕当你需要的时候作出小调整。一旦你真正开始在设计中使用颜色，你想调整明度或色度，或者想要色度更亮更暗都是不可避免的。相信你的眼睛，不要相信数字。
尽量避免频繁增加新的色度。如果你不努力限制你的色板，你还是没有最终建立你的色表盘。
网友评论