UI笔记——设计、可用性、色彩

打好基础

色彩入门

不同色彩混合后会产生数以百万计的颜色，被称为色度（hue），影响不同的接收器。这些色调可以通过一个圆（通常被称为色盘）以度数的形式展示。每60°会产生一个不同的基色。这些基色中的3个被称为第一原色（红、绿、蓝），另外3个被称为第二原色（黄、青、品红），它们之间的6个基色被称为第三原色。

一个通用的计算模型被称为HSB。它使用色度和其他两个相关的术语，饱和度（saturation）和亮度（brightness）来定义和描述色彩。

饱和度（0～100%）是指色彩的鲜艳程度与它最大可能的鲜明程度的比值。

亮度是指色彩的明亮程度（0～100%）。

纯色具有最高的亮度和饱和度，使它们看起来更加鲜明。

暗色亮度比较低，使它们看起来暗一些。

颜色越不饱和，看起来越淡，饱和度为0时完全没有颜色。

亮度和饱和度是比较复杂的概念，容易产生误解，这使它们在讨论颜色时不太常用。

也许讨论颜色时使用色彩（tint）、色度（shade）和色调（tone）这三个术语是有好处的。

把色调、饱和度和亮度结合起来，我们就可以创建任何一种人眼哦可见的颜色。

色彩学理论

色彩学理论研究的是纯色之间的关系，以及它们混合的效果。

设计一个配色方案通常是决定设计中哪些颜色放置一块视觉效果最好的第一步。

单色：使用一种色调不同的包饱和度和亮度

近似或混合：使用色盘中邻近的色调

互补：使用色盘中直接相反的色调

分割互补：使用一个色调和两个与它的补色邻近的色调

三分色阶：使用色盘中彼此等距的三个色调

双互补色或直角四阶色：使用两个色调和它们的补色

四分色阶：使用色盘中彼此等距离的四个色调

近似互补：使用两个互补色调和一个与其中一个颜色相近色调

中间色：使用没有色度的颜色

突出：在没有色调的颜色中突出一个高饱和度的色调暖色：使用色盘顶部的颜色，使用分布在271°和90°之间的色调（色盘0～180°）

冷色：使用色盘底部的颜色，使用分布在91°和270°之间的色调（色盘180～360°）

色彩和易用性

色彩不但可以使你的网站赏心悦目，还可以帮助读者使用网站。

Mint主页上最引人注目的色彩元素是使用了双互补色配色方案的个人理财数据图表和写着“Free！Get started here”（免费！现在就使用）的亮橙色按钮，它们在淡绿色的背景上显得尤为突出。当表单出错时，这个网站还通过使用色彩来快速地给出反馈。红色的提示在淡绿色的背景下显得非常突出，很难被忽视。

色彩与注意力

色彩能使用户注意力集中并哄着用户专注地使用网站。

你应该用色彩把用户拉到你的设计和内容中去，可以使用色彩将他们的注意力吸引到你的设计和内容中去，可以使用色彩将他们的注意力吸引到你的网站最重要的部分。

即使你的网站使用了很多颜色，你也可以把用户的注意力吸引到某个元素上去，你可以通过给这个元素一个与众不同的颜色做到这一点。

可能发生的最糟糕的事情是新用户无法理解网站的导航，在感到迷惑后离开。色彩可以帮助他们从正确的地方开始。

对于一个包含大量内容的网站，内容的颜色持续变化的地方，使用中性的或者冲突的背景色有时是最好的选择。这样内容会在屏幕上凸显出来，不会和背景混为一体。

色彩与体验

考虑网站所用色彩的文化内涵是很重要的，尤其是如果你希望网站能带来国际流量。

色彩也会影响人们的情绪和心理。

色盘中所有的颜色都有自己的解读、民间传说和象征意义。所以，实际上合并没有选择颜色的法则或秘方。在选颜色时，你还得依赖你自己的判断，什么颜色看起来好一些，什么颜色更适合你的项目。不要畏惧，坐下来看什么颜色最能打动你的心，而不是你的眼球。

灵感

优秀的艺术家复制。卓越的艺术家偷情——帕布罗.毕加索

 

希望在使用色彩时能够获得灵感。