欢迎访问中国领先的企业技术服务平台贤集网

当前位置:首页行业资讯IT — 正文

如何在UI设计中运用颜色?10条建议请收好

在UI设计中,颜色就是一种力量。它可以在转息之间改变图片的基调。它可以增强,减轻,突出,说服,呼吁等等。颜色和文字也可以相互辅助,并使他们更有力量。


设计师有时可以花费大量时间来选择正确的调颜色。在这篇文章中,我们将为您提供一些有用的技巧,帮助设计师选择合适的颜色来进行UI设计,并使这个过程更容易和更有成效。


UI设计中颜色使用的10条原则


1. 颜色术语


颜色术语构成了我们颜色知识的基础。将诸如色相(hue),色调(tint)和阴影(shade)之类的颜色术语视为我们可以用来开发独特调色板的工具。


色调/色相(Hue)


如何在UI设计中运用颜色?10条建议请收好


色相是色彩的技术术语。色相是指父色-一种饱和色,没有添加白色或黑色。


亮化着色/染色(Tint)


如何在UI设计中运用颜色?10条建议请收好


亮化着色是把一种颜色和白色混合后形成的颜色,这将增加该颜色的亮度。


阴影(Shade)


如何在UI设计中运用颜色?10条建议请收好


将黑色添加到色相时,将创建阴影。


明度(value)


如何在UI设计中运用颜色?10条建议请收好


值是指颜色的明暗程度。它指示反射的光量。明度(Value)分为11级,数值越大表示明度越高,最小值是0(黑色),最大值是10(白色)


饱和度(saturation)


如何在UI设计中运用颜色?10条建议请收好


饱和度是指颜色的亮度和强度。高度饱和的颜色充满活力和光芒,而低饱和度的颜色则暗淡。


2. 层次结构


如何在UI设计中运用颜色?10条建议请收好


当某个元素的外观与其周围环境形成对比时,表明该元素具有更高的重要性。我们可以使用颜色和颜色权重建立层次结构。


通过使用色彩,我们可以为元素分配不同的重要性级别。


如果一个元素比另一个元素更重要,则它应该具有更高的视觉重量。这使用户易于快速浏览页面并区分重要和次要信息。


更加醒目,富有重量感的信息内容可以快速吸引用户的注意力,我们可以运用这种视觉规律引导用户视线,并促使用户继续浏览其下方的支持信息。


3. 富有表现力


如何在UI设计中运用颜色?10条建议请收好


在设计产品界面的时候,别忘记融入标志性的品牌色彩,以增强用户心中的品牌印象。


4. 包容性


如何在UI设计中运用颜色?10条建议请收好


设计产品类似于在图书馆或学校之类的公共建筑中建造建筑-它必须包含所有人。因此,产品的包容性也是需要考虑的重要要素。


Web内容可访问性指南(WCAG)提出了一些建议,以确保运动,听觉和认知障碍人士可以无障碍访问界面中的颜色。举个例子,文字标准色差至少需要达到4.5:1的对比度。


5. 颜色的含义


如何在UI设计中运用颜色?10条建议请收好


颜色会吊起用户不同的情感感受,通过了解颜色的心理,我们可以利用与目标受众产生共鸣的品牌颜色。


重要的是要了解您的受众群体的差异,这些差异因为文化和地区而有所不同。例如,在西方文化中,白色通常与婚礼相关联,而在东南文化中,白色被视为哀悼的颜色。


我们可以留意到:许多公司在其品牌营销活动中都使用色彩作为一种策略。许多快餐店的品牌都使用红色和黄色,这是因为红色引发刺激,食欲,饥饿的效果,并引起人们的注意,而黄色则给人带来幸福和友善的感觉。


6. 有限的颜色


如何在UI设计中运用颜色?10条建议请收好


通过限制在应用程序中使用过多颜色,可以使应用颜色区域中的内容受到更多关注,例如界面中的文本,图像以及按钮等单个元素。


您会注意到,许多应用,例如Instagram或Twitter,它们的界面往往非常简洁。它引导用户将视觉焦点聚焦在内容上。


7. 提供状态信息


如何在UI设计中运用颜色?10条建议请收好


颜色的差异可以提供有关应用程序状态,组件和元素的信息。


颜色是我们可以在界面中显示状态变化的一种方式。通过静音按钮的颜色,可以指示按钮已禁用,或者通过将其突出显示为红色来表示错误操作。我们还应该在错误颜色旁边附加错误消息和图标,以确保清晰度并吸引色盲用户。


8. 一致性和上下文


如何在UI设计中运用颜色?10条建议请收好


界面中的颜色用法应保持一致,因此即使上下文发生变化,颜色也能保持统一,避免对用户造成混淆。


如果颜色信息在展示内容和状态上有冲突,例如在商标中使用红色的情况,则应避免使用它来通知错误状态。我们可以使用其他颜色(例如黄色)来避免混淆。


9. 调色板


如何在UI设计中运用颜色?10条建议请收好


如何获得完美的调色板?让我们从对颜色理论和基本工具的简单理解开始。


第1步-原色和系统颜色(primary &system color)


设计师首先可以根据偏好,选择调色板的主要颜色,例如使用产品的品牌颜色作为主色。并在此基础上,为文本和背景添加颜色。


第2步-创建调色板


为UI选择基本颜色后,将这些颜色放入Google颜色工具中,以获取该颜色的不同阴影和色度。


(https://material.io/design/color/the-color-system.html#tools-for-picking-colors)


它是生成近乎完美的调色板的一种简单方法,如果需要互补色或要测试辅助功能,则可以使用Google颜色工具完成所有这些操作。


步骤3 —将这些颜色组合在一起


如何在UI设计中运用颜色?10条建议请收好


10. 60–30–10规则


如何在UI设计中运用颜色?10条建议请收好


60-30-10原则是室内设计行业中的一个著名和永恒的装饰原则。它非常简单和高效。这个原则可以用来找到配色方案中的正确平衡。


60%+30%+10%是所用颜色之间的比例:其中60%属于主要颜色的比例;30%是次要颜色的范围;10%是剩余部分的色彩比例。


在产品设计过程中,我们同样可以遵循60-30-10的原则。其中:60%是主色,30%是辅助色,10%是强调色。


颜色参考工具:


Color Tool Material Design


https://material.io/design/color/the-color-system.html


Dribbble.com/colors


https://dribbble.com/colors/109173


Coolors.co


https://coolors.co/palettes/trending


Shaderade


https://prowe214.github.io/color-shader/


来源:美国交互设计资讯

注:文章内的所有配图皆为网络转载图片,侵权即删!

我要评论

不吐不快,我来说两句

相关新闻

在一个企业里,企业的类型决定了IT的地位

企业IT治理是个古老的话题,也是个比较大的话题,聊起来难免空洞,老哈尽量从方向性的角度对随着时代变化,目前多数头部企业对于IT治理的规划方向,方法讲清楚,希望给到一些准备做这块工作的同仁们一些帮助。...

08月12日 05:27

IT入侵OT:自动化已然成为软件行业,软件复用提升开发效率

在智能制造时代,IT与OT融合已经是大家的共识,自动化行业正在成为一个软件行业,它正在改变着整个产业的未来,也将为制造业带来更为广阔的空间,前面在描述工业巨头与IT巨头的数字化布局时: 西门子、施耐德、罗克韦尔等巨头告诉你,为何你大爷始终是你大爷...

08月12日 04:29

疫情过后,IT行业会受到影响吗?一起来看看!

2020年注定是艰难的一年,1月份爆发的一场席卷全国的新型冠状病毒肺炎疫情,让我们黯然失色,谈毒色变,闻野生动物丧胆。往日热热闹闹的大街小巷,现在却冷冷清清,行人个个带起口罩,一听到咳嗽声都会下意识躲开。...

08月12日 02:26

想转行IT行业必须要调整心态,有破釜沉舟的决心

近年来,IT行业的薪资可以说算是各行业里比较高的,在众多一线城市,30岁薪资达到二万三万的大有人在,那么想转行进入IT行业,需要做哪些准备呢?...

08月11日 22:59

闷声入局教育已长达7年,拉勾网能否借此再造“两个拉勾”?

创立的第七年,拉勾创始人、CEO许单单终于袒露了他的野心。拉勾不只是一家招聘网站,还要做一个互联网人才职业成长的平台。 7月下旬,许单单向全体员工发布了内部信,宣布拉勾战略升级为“互联网人才职业成长平台”。拉勾教育、拉勾猎头两大新业务将与拉勾招...

08月11日 23:54

最热资讯