这个实战案例告诉你高手是如何从零设计控制面板的(二)
配色方案
在配色这件事情上,我很少会采用色轮或者预制的配色方案,我比较喜欢手工取色。但是如果你在取色这件事情上,经验并
不丰富,那么预制的配色方案是非常有用的。
了解色彩心理学,对于配色是非常有用的。不同的行业在配色选取上有哪些习惯和倾向,这些东西是非常有必要了解的。
考虑到我们正在创建一个针对医疗保健行业的控制面板,所以我们选用绿色和蓝色是非常合理的,一方面是蓝色和绿色是契
合行业的,另一方面是它们本身足够讨人喜欢,让人感到舒适、专业和信任。
我在为这个项目选择的主色调的时候,挑选一个鲜艳大胆的蓝色,然后降低不透明度,微调出了第二个蓝色,用作背景。我
尽可能在同一色相中挑选配色。此外,我还调整了饱和度,获得了另外一种蓝色,也可以通过调整不透明度来用作背景配
色。最后,我会选择自己最喜欢的颜色,也就是纯白。

除此之外,我们还需要使用一些强调色来对配色进行区分。我仅仅通过稍稍修改色相(H)的参数来进行选择,就可以挑选出
很不错的强调色。
UI元素样式
选好字体和配色之后,我们需要为 UI 元素来创建样式(容器、图标、按钮等)。
其实只需要为数不多的几种样式进行设计,就可以创建出引人入胜的界面,你可以根据元素的重要性和作用进行合理的混
搭。
你可以看看我下面的元素所使用的参数,都不复杂。

如你所见,我真正创建出来的样式其实只有5种,其中的样式明显是针对不同的目的的(比如容器和按钮)。值得说明的是,
这些样式都是针对主要的交互和 CTA元素来设计的,并且只用于主要的元素和交互。
在创建阴影的时候,务必记得使用和配色同色相的阴影,但是记得降低不透明度。
图标的选取
在选取图标的时候,一致性始终是最重要、最关键的部分。所以,我决定在整个控制面板中统一使用线性图标。

此外,还记得我在上一篇文章当中针对用户头像进行的配色优化嘛?在可用性上可以说是非常无意义的设计,但是非常令人
愉悦!在这里我也做了!
