原文:Learn Colors

色彩很难驾驭,因为颜色很容易被滥用,我们都会有过度设计的倾向,更喜欢使用吸引眼球的对比色(competing colors),这样的感觉完全不自然。我的建议是按照最基本的来,然后通过注重实用性和愉悦性来锻炼对颜色的使用。如果拿捏不定,那就只在按钮和重要的元素上使用颜色,以便吸引用户的注意力。

大自然应该是所有事物最大的灵感来源。和谐存在于自然中;你需要做的就是把它转换到数字世界里,转换到你所设计的媒介上。也许你会依据某个天然美的事物来选择颜色,例如天空、云朵、日落和植被。

三原色、二级颜色和三级颜色(Primary, Secondary and Tertiary Colors)

我建议一开始从三原色二级颜色中选择一种活泼的糖果色(pastel color)。没有对错之分,关键是如何使用它,以及选择哪种颜色与其互补。

iOS 调色板

以下是苹果在原生 app 里使用的颜色。活泼但又不俗艳。总的来说,蓝色被系统用作按钮、图标和可操作项目的通用颜色。但其他颜色则可用作品牌色,例如备忘录的黄色、Apple Music 的粉色、信息的绿色等等。如果拿不定注意就用蓝色。设计时要谨记,红色通常被用于破坏性操作,绿色则用于成功的操作。

案例

最小限度地使用颜色,把用户的注意力吸引到可交互的地方。不可操作的项目基本上都更低调和中性,使用黑色、灰色或白色。尽可能只使用一种颜色,让内容成为主角。

色相、饱和度、亮度(Hue, Saturation, Brightness)

处理颜色时,理解与颜色相关的属性非常重要。很多人用 RGB 值,但我发现使用 HSB 值更简单,因为某个颜色中红 Red绿 Green蓝 Blue 的值到底是多少是很难判断的,但可以轻易在脑海中对应出色相 Hue饱和度 Saturation亮度 Brightness 的值。这些值对我来说更有意义。

单色颜色(Monochrome Colors)

最常见的情况是,选定一个主色,然后在它上面放一个 10-90% 黑色或色白图层。坚持使用一种主色是明智的决定,特别是对于那些对色彩还不够了解的人来说。简化总是有助于产生新的概念。

通过添加不同透明度的黑色或白色图层,可以获得新的单色颜色,并且非常好地互补对方。

创建单色颜色

有了充分的了解之后,就可以用选色器来改变**亮度 Brightness **饱和度Saturation **,色相 Hue 值基本保持不变(红色 red 保持不变),然后就得到了单色颜色。

类似色(Analogous Colors)

类似色的意思是挑选与主色相近的颜色。在颜色轮(color wheel)里这两种颜色是挨着的。如果你觉得内容的色彩变化不够,希望添加新的颜色的话,这种方法就非常有用了,

例如,红色橙色挨着,橙色黄色挨着。

创建类似色

把色相 Hue 值改变 30-50,就得到了新的类似色。

互补色(Complementary Colors)

互补色是主色的对立面。在颜色轮上,互补色位于主色的对面。互补色能够提供极佳的对比度,对于给用户界面增加情感非常重要。然而同时使用它们的难度很大,所以要谨慎使用。

创建互补色

使用选色器,只要把色谱条(色相 Hue)拖一半左右即可。

中性色调

也许中性色调是色彩中最重要的方面了。它们是中和剂,避免设计太过沉重。如果颜色太多,就意味更难长时间使用。最重要的是,中性色调可以将用户的注意力保持在内容上。

创建中性色调

中性色调不能影响主色调。要得到中性色调,需要把饱和度 Saturation 拖到近乎为 0 的位置。然后将亮度 Brightness 改为

对比度

颜色不应该影响易读性。对比度是舒适的阅读和沉浸式体验的前提。要获得良好的对比度,需要使用处于对立面的颜色:黑色和白色、浅蓝和深蓝、高亮度和低亮度。

使用图片的色彩

我们周围充满了富有启发性的颜色,当我们看到漂亮的照片、物体或数字设计时,首先注意到的就是它们漂亮的颜色。 这时我们应该拍下一张照片或截图,然后提取其中的颜色,并根据这些颜色创建调色板。

Sip 是一款非常棒的 iOS app,可以让我们根据照片来创建调色板。

手动方式

手动创建调色板是最好的,但需要你对颜色有足够深的理解。使用自动的东西总是会有一个代价:不够精确。最好能够使用直觉。

在这个例子里我挑选了 Medium 的 iOS app,手动提取了三原色、二级颜色和中性色调。

主色基本上都是用来为行为召唤(call to actions)吸引注意力。次颜色则用于补充主色,增加变化。至于背景颜色则用于突出内容以及为整个设计添加对比度。这也是为什么既有浅色背景,也有深色(contrasted)背景。

使用 Adobe 的 Kuler

如果拖一张图片到 Adobe Kuler 中,就能够获得主色,甚至还能获得背景中的颜色。

可以尝试不同的主题,甚至可以把圆圈移动到 UI 而不是背景上。这款工具并不完美,但只要微调一下就可以从上传的图片中获得理想的调色板。

收集颜色

可以在 Dribbble 上浏览和保存杰出的配色方案,还可以看那些给你启发的设计的配色。

中性调色板

主色很容易提取,但背景和文字的颜色并不容易。它们更加细致,需要更多的实验和学习才能正确使用。以下是 UI 设计中我最喜欢的中性色调调色板:

蓝色调色板

蓝色是一种令人愉快的颜色,因为它会让人们想起天空和大海。用户看见蓝色时更容易感到冷静和信任。蓝色和其他大部分颜色都很容易搭配。

灰色调色板

UI 应该避免使用纯黑色。黑色的对比度太高,又会和 iPhone 的黑屏彻底融合在一起。

灰色的用法

如果要使用灰色的话,记住要确保亮度要么低于 30%,要么高于 70%。中间的灰色色调过于平淡,不能很好地补充其他颜色。

在下面的例子里,亮度 Brightness 在这个范围之间时,文字的对比度会好很多很多。而灰色位于中间的色调时,文字就会很难阅读,颜色搭配起来也没有吸引力。

自定义调色板

除了常规的蓝色和灰色调色板,还可以选择任意一种喜欢的颜色,只要确保他们能够互补就好。

在选色器上滑动 色相 Hue,实验一下单色颜色、类似色和互补色(就以这个顺序)。然后调节饱和度 Saturation亮度 Brightness 来增加对比度和活力。

深色和浅色 UI

有时候为了品牌特点或是实用性需要在深色和浅色 UI 之间切换。想一下 iBooks:在环境光线不足时自动切换为深色模式的用户界面。

深色 UI 案例

另一个例子是 Apple Watch:使用纯黑背景以便与物理边框完美融合。

浅色 UI 指南

  1. 内容应该比背景更浅。聚焦的物体总是会比背景更亮。
  2. 不要过度使用颜色,他们会吸引用户的注意力,只把颜色用来强调按钮和高亮状态。
  3. 避免使用平均数值的颜色。90-100%的白色通常是最好的。

深色 UI 指南

  1. 不要使用纯黑。漆黑一片会很难看到细节,和白色的对比度也太高了。
  2. 如果必须使用黑色,那就用深灰色来加入变化,以免对比度太高。
  3. 使用蓝色时要避免使用灰色。相比灰色,深蓝色和蓝色互补的更好。

其他资源

理解颜色是如何作用的、互相之间如何补充以及何时使用颜色对于 app 的品牌特点或是实用性都至关重要。下面这些资源可以让你更加掌握颜色,此外还提供了有价值的工具和实例,这些知识可以应用在真实的项目里。

Material Design 颜色

谷歌的 Material Design 里面关于颜色的指南非常棒。对于 iOS 同样会有帮助。

Sketch Palettes

Sketch Palettes 可以轻松导入和导出全局或文档颜色的调色板。我用 iOSMaterial DesignFlat UI 的颜色创建了调色板

UI 渐变

众所周知,iOS 拥有漂亮的渐变。用两种互补的颜色就可以低成本地把渐变整合到 UI 中。这个渐变合集很棒

Skala Color

支持 Swift 和 HEX 的超棒选色器

设计时要考虑无障碍性(accessibility)

Contrast App 这个工具很实用,根据无障碍指南设计和选择合适的颜色。

这样就可以确保界面设计中文字不会太亮。可以手动输入 hex 码,也可以使用内建的选色器直接从设计中采样颜色。

它可以悬浮在正在使用的设计工具上,以便快速获取 WCAG 对比度得分。

Coolors.co

Coolors.co 是一款快速配色方案生成器,只要按一下空格键就能立刻浏览不同的调色板。如果你喜欢其中的某一款颜色,可以锁定它并继续浏览直到调色板让你满意为止,然后可以导出该调色板。它的 iOS App 也很好用。

Color Juicer

还有另一款实用的 app,可以从图片从获取主要的颜色并快速创建调色板,只要把图片拖拽到 app 中即可。app 创建好调色板后,单击其中的任意一种颜色就可以复制。