UI设计-COLOR

Posted by wangfan on 2021-10-31

UI设计-COLOR

​ 色彩是设计构建的基础之一。它可以成为影响众多因素的强大工具,对视觉感受至关重要。色彩对我们的头脑有重大影响。它会在几秒钟内改变我们对物体的感受,并让人们做出反应,甚至采取行动。

技巧1-掌握60-30-10原则

​ 60-30-10原则最早是源自于室内设计领域,室内设计师借助这一原则,创造出协调的室内设计配色。这一原则很容易理解,为了达到平衡的配色,几种色彩遵循这60%—30%—10%这样的色彩配比。其中占据60% 的是主色,而30%则是次住色,而占据10%的色彩应当为提亮色。

​ 这一的配色比例被认为是颇为令人愉悦的,在视觉感知上,它提供了一个颇为让人舒适的色彩层次,这样的控制让整个UI的色彩以一种可控的比例呈现出来,而不是将整个设计弄得一团糟。

技巧2-实用工具-色彩的对比

​ 在探讨UI的可访问性的时候,对比度始终是关键性的因素。在 A11Y 这个力求提升网页可访问性的项目当中,他们对于对比有下列一系列的建议:在配色的时候,借助色轮选择处于相对位置的对比色,让视觉上的对比足够明晰;在选择字体的时候,借助不同类型的字体差异,来创造视觉上的对比,也是如今网页设计中经常用到的技巧。

​ 空间上的对比营造也很有技巧,使用不同的留白来营造疏密对比。如果你想让某一部分内容更容易吸引用户的注意力,不妨让它周围有更多的留白。

​ 简而言之,对比是通过对立的差异化来创造吸引力。看似不同的元素实际上可以搭配起来,达到一目了然的效果。(不止色彩对比,更可以明案对比,如下图)

技巧3-参考色彩心理学

红色
颜色通常与激情,强烈或侵略性的感觉联系在一起。它象征着思想和灵魂的好坏状态,包括爱,信心,激情和愤怒。在设计中,红色的使用是吸引用户注意力的有效方式。此外,建议谨慎使用红色以避免负面反应。

橙色
这是一种充满活力和温暖的色彩带来的兴奋感。橙色结合了红色的力量和黄色的友善,因此它可以带来动力,热情和对生活的热爱。如果设计师需要赋予创造力和冒险精神,他们就会使用这种颜色。

黄色
这是幸福的颜色,象征着阳光,欢乐和温暖。黄色被认为是最容易看到的颜色。更重要的是,它具有最强大的心理意义之一。在设计中看到黄色的用户可以感受到灵感和自信。虽然,你需要记住,过多的黄色可能带来负面反应,如焦虑或恐惧的感觉。

绿色
它通常被称为自然,平衡和和谐的颜色。绿色带来平静和更新的感受。此外,它是增长和缺乏经验的标志。它具有比大多数其他颜色更多的正能量,但有时它与物质主义联系在一起。绿色设计完全适合与自然相关的产品。

蓝色
它通常代表一些企业形象,因为蓝色是信任的颜色。它通常表现出可靠性,可能会给用户带来平静的感受。然而,作为一种很酷的颜色,它也与距离和悲伤有关,因此设计师需要保持平衡。

紫色
由于许多国王都穿着紫色衣服,因此与皇室和财富密切相关,它对于展示一些奢侈品非常有用。它也是神秘和魔力的颜色。它混合了红色和蓝色的能量,因此它具有动力和稳定性的平衡。颜色的浓度可能会分散用户的注意力。

粉色
它是希望,敏感和浪漫的颜色。粉红色比红色柔软,因此它创造了无条件的爱。粉红色与年轻女性气质密切相关,因此如果目标受众主要是女孩和年轻女性,它可能是一种有效的颜色。

棕色
像地球母亲一样安全和保护的颜色。设计师通常使用棕色作为背景颜色,从浅到深的各种色调。它为设计带来温暖和舒适的感觉。此外,它可能用于显示经验和保证。

黑色
颜色有很多含义。它与悲惨的情况和死亡有关。它意味着一个谜。它可以是传统的,现代的,严肃的。一切都取决于你如何使用它以及它采用哪种颜色。黑色与任何其他颜色匹配良好,因此它非常适合背景。设计师经常用它来设置对比。

白色
颜色意味着纯洁和纯真,以及整体和清晰。怀特经常与一张白纸相关联,激励人们产生新的想法。然而,过多的白色会导致孤立和空虚的感觉。在设计中,白色通常用作背景颜色,特别是对于可读性是重要部分的资源。

技巧5-色彩协调

​ 明度是指色相的明暗程度,它显示了色相的明暗差别,或者说是色块的素描关系。每一色相都有其自身的光谱明度范围,加入白色会提高明度,加入黑色则会降低明度。明度在色彩的搭配中扮演着一个重要的角色。
​ 优秀的设计作品,无论是运用同类色搭配,还是运用非同类色(补色)配置,当我们把它们还原成黑白图片时,我们就会发现这些作品的黑白灰关系非常的协调统一。这说明了画面中的各个色块融于素描关系的大区域中,融于整个画面的黑白灰关系之中,在黑白灰的关系中寻求色相的信息承载。
​ 色块的明度关系是画面相对隐蔽的骨骼,是一个潜在的问题。画面中如果没有明度关系的支撑,画面必然显得纷繁无序,杂乱无章。只考虑色相间的协调问题,画面仍然会显得杂乱无序,到处发光。画面中的各部分色块和无色彩部分应该共同构成一个协调统一的黑白灰关系。用色相的搭配和明度变化共同为主题服务,才能达到协调统一的画面效果。

结语

就目前来看,数字产品的成败与否,与配色方案的选取有着紧密的关联。正确而舒适的配色方案不仅能够让用户感到舒服,而且能够赋予产品以正确的调性,传递情绪,真正创造出深入人心的产品。