在网页设计中如何正确运用色彩强化用户体验?
颜色和其他东西一样,最好是适度使用——少了,寡淡无味,多了,过犹不及。如果你能坚持在自己的配色方案中最多不会超过三种主色调,那么一般来讲,你的设计都会获得比较好的效果。在一个设计项目中,应用的颜色与设计最终呈现出来的平衡感有着莫大的关系,你选择使用的颜色越多,那么想要实现平衡感就越难。
"色彩并不能为你的设计作品增添令人愉悦/舒适的质感——它的实际作用是强化了这种质感。"
—— Pierre Bonnard
如果在设计过程中,你已经确定好了自己的调色板,但是又需要一些额外的颜色来做补充,可以运用阴影和色调来做一些变化,它们结合起来会呈现出一种和谐的效果。
一.60-30-10原则
这个室内装修的配色原则是经时间检验的配色技巧,可以帮助你轻松地将配色方案组织在一起。60%+30%+10% 的比例是为了实现平衡色彩,这个公式之所以起作用,是因为它创造了一种平衡感,让眼睛可以舒服地从一个焦点移动到另一个焦点。难得的是它的使用也非常简单。
其中:
主色调占60%
辅助色占30%
重点突出颜色占10%
(墙漆;家具;配饰)
二.颜色的含义
科学家研究了几个世纪以来某些颜色对生理的影响。除了美学,色彩是情感和想象力的创造者。颜色的含义很大程度上取决于文化和环境。这就是你经常看到黑色和白色的时尚商店的原因——他们想要使自己显得优雅、品质卓越。
(Asos网页)
Asos网页设计是纯粹黑白色,而“加入购物袋”按钮选择了绿色,这是有原因的。
· 红色:激情、爱、危险
· 蓝色:冷静、可靠的、安全的
· 黑色:神秘、高雅、恶魔
· 白色:纯洁、安静、干净
· 绿色:崭新的、新鲜的、自然的
如果你想了解更多颜色的含义,可以查看这个列表:
(色彩文化)
三.灰度优先
在设计过程中,我们都喜欢不停地尝试各种色彩和色调,但是当你意识到你花了3个小时来调整基色,却发现你之前都在做无用功。这种习惯对于设计师来说具有致命的吸引力,但是你应该学会克制,避免总是走进这个死胡同。
相反,你要强迫自己专注于元素的间距、布局等,这样会为你节省大量的时间。这种约束是十分有效的,而且它并不是一件无聊的事情。如果你想让它更加好看,可以尝试使用不同的色调。
(我在dribbble上的作品,只用了简单的单色,专注于元素的调整)
四.避免使用纯粹的灰色或黑色
我所学的用色技巧中,有一点很重要,那就是避免使用没有饱和度的灰色。在现实生活中,纯粹的灰色基本上是不存在的,同理黑色也是一样。
(这张照片中最深的颜色色值不是#000,而是#0A0A10)
始终记得给自己的颜色添加一点饱和度,这样潜意识中,用户看着它会觉得更加自然和亲切。
五.相信自然
最棒的色彩组合来源于大自然,这些色彩组合总会看起来非常舒服自然。从环境中选取适合的颜色组合,但是设计最佳的最终方案还是需要不停地调试你的调色板。
(要汲取(配色)灵感,我们只需看看周围)
六.保持对比度
有些颜色很相配,但是有些颜色却会相互冲突。关于它们是如何相互匹配、相互作用的规则,是可以在色轮上观察到的。你应该对这套理论有认识,但是不必自己手动去操作。
(从左至右:互补色、相近色、三色系、分散的互补色、方形色系、矩形色系)
七.获取灵感
当我们说起UI设计参考的时候,dribbble是最好的寻找灵感的地方。它也有搜索颜色的工具,所以当你想对其他设计师“如何使用特殊颜色”进行视觉研究时,请使用。
视频、印刷设计、室内设计、时尚……有太多可以获取灵感的地方。不要太依赖那些固有的调色板样式,而是要把所有你看起来非常喜欢、觉得有趣、让你眼前一亮的东西存起来。
(我经常从一些韩国视频里偷颜色,它们非常漂亮)
总结
色彩是一个很难掌握的概念,特别是在数字时代。上面提到的技巧可以为查找正确的色彩这项工作提供一些便利。而如果你想创造出让人惊艳的配色方案,最好的方法归根到底,还是需要不断地练习。所以,别光看文章,动起手来,沉浸到色彩的世界中,玩儿起来~