UI设计中色彩使用的十个原则

释放双眼,带上耳机,听听看~!

本文是设计师Danny Sapio总结的UI设计色彩使用十大原则,包括基本的色彩理论及UI设计中色彩设计实践,在文章最后附上了色彩工具和资源。

1、色彩术语构成了色彩知识的基础

(1)色相

UI设计中色彩使用的十个原则

(2)饱和度

UI设计中色彩使用的十个原则

(3)明度

UI设计中色彩使用的十个原则

2、层级

UI设计中色彩使用的十个原则

       当一个元素的出现与它的环境形成对比时,则表示这个元素具有重要的层级,我们可以运用色彩和色彩的重量在界面中建立层级。

       可以运用色彩展现元素的重要性,如果这个元素比其它元素更重要,它应该有一个更强的视觉重量,让用户能快速浏览页面,并且区分重要信息和次要信息。让更加突出的信息抓住用户的视线,然后将他们的视线移到次要信息上。


3、表达

UI设计中色彩使用的十个原则

       展示品牌颜色可以强化品牌独特的风格,但是展示品牌色也需要适度,不宜过多或过少,当要在你的界面中加强你的品牌色彩,需要想清楚什么时候以及在哪里添加。


4、包容性

UI设计中色彩使用的十个原则

       设计产品和设计公共建筑例如图书馆或者学校很像——它需要包容所有人,需要考虑无障碍设计。
       网页内容可访问性准则(https://webaim.org/articles/contrast/) 提出一些建议,确保听觉和认知障碍的用户可以访问界面中的色彩。例如,他们的文字标准至少需要4.5:1的对比度。

       为了确保符合这些标准,请下载Stark(https://www.getstark.co/ ),它将检查你的设计是否具有可用性,你还可以模拟色盲并且根据插件进行设计的调整。

      通常,我们会尝试设计看起来不错的产品,但是忽视与我们产品进行互动的用户需求。随着我成为越来越成熟的设计师,我已经接受各种破坏我对完美设计的想法的制约因素,当我们为了在dribbble获得更多喜爱时,可以避免这种情况,但是在为真正的用户开发产品时,这不是一个好习惯。

5、意义

UI设计中色彩使用的十个原则

       颜色会引起不同的感觉或情感,通过理解色彩的心理,我们可以利用品牌色与我们的目标受众产生共鸣。重要的是了解你的受众,对颜色的感知因文化而异、因地区而异。例如在西方文化中,白色通常与婚礼相关,而在东南文化中,白色通常被视为哀悼的色彩。你对颜色及其含义了解得越多,它的功能就越强大。公司在其品牌和营销活动中使用色彩作为一种策略随时来影响我们的情绪。你是否注意到几乎所有的快餐都在其品牌中使用红色和黄色吗?这是因为红色能引起刺激、食欲、饥饿等感受,并引起注意,而黄色有幸福和友善的感觉。


6、有限

UI设计中色彩使用的十个原则       在应用程序设计中需要限制性的使用色彩,有色彩的区域受到更多关注,例如文本、图像以及按钮等单个元素。您会注意到,在许多应用中,有很多五颜六色的帖子和不可预测的内容如各大社交平台,它们的界面往往非常简洁,能将用户的焦点聚焦在内容上。


7、状态

UI设计中色彩使用的十个原则

       颜色可以提供有关应用程序状态,其组件和元素的信息。颜色是我们可以在界面中显示状态变化的一种方式。通过使按钮的颜色变灰,可以指示按钮已禁用,或者通过将其突出显示为红色来表示错误。我们还应该在错误颜色旁边附加错误消息和图标,以确保清晰度并吸引色盲用户。


8、一致性

UI设计中色彩使用的十个原则

       使用颜色应保持一致,如果在商标中使用红色,则应避免使用它来通知错误状态。我们可以使用其他颜色(例如黄色)来避免混淆。 这是一个容易解决的问题,因此没有理由避免在我们的品牌中使用红色或黄色。


9、调色板

UI设计中色彩使用的十个原则

如何获得完美的调色板?

(1)原色

UI设计中色彩使用的十个原则

       我喜欢根据偏好、研究或在上文原则5中分享的颜色含义确定原色。 我选择的主要颜色是品牌色, 一旦有了原色,就需要为文本,背景,容器等添加颜色。 通常,我会选择用于文本的深色和用于背景的浅灰色。 

(2)创建调色板

UI设计中色彩使用的十个原则

       为UI选择基本颜色后,将这些颜色放入Google颜色工具(https://material.io/design/color/the-color-system.html#tools-for-picking-colors ),以获取该颜色的不同阴影和色度。这不总是完美的,但是它是生成近乎完美调色板的简单方法,可以根据需要添加或调整它。如果我需要互补色或要测试辅助功能,则可以使用Google颜色工具完成所有这些操作。这是一站式服务。

(3)色彩使用

UI设计中色彩使用的十个原则


10、60-30-10原则

UI设计中色彩使用的十个原则

       60%是主色,30%是辅助色,10%是主色。我首先从“如何在UI设计中使用颜色”这篇文章(https://blog.prototypr.io/how-to-use-colors-in-ui-design-16406ec06753 )中学到了这一概念:这种室内设计规则是一种永恒的装饰技术,可以帮助您轻松地将配色方案组合在一起。 

       60%+ 30%+ 10%的比例是为了使颜色平衡。这个公式之所以有效,是因为它创造了一种平衡感,并使眼睛舒适地从一个焦点移动到另一个焦点。与我之前提到的技巧类似,例如使用少量颜色来增强重点和加强品牌效应,60–30–10是确保我们不会在颜色上出错的粗略工具。 还有一种方式是后退几步,眯起眼睛,如果我使用的颜色过多,那么模糊的图像将使我更好地了解层次结构。 


附注:色彩工具和资源

(1)Color Tool Material Design

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

这是我所知道的用于生成调色板的最佳工具。它利用一种算法来创建易于访问且美观的调色板。 

(2)Dribbble

https://dribbble.com/colors 

Dribbble是我最喜欢获得UI灵感的地方。通过按颜色搜索功能,可以轻松了解其他设计师如何在设计中使用特定颜色。

(3)Coolors

https://coolors.co/palettes/trending 

 Coolors是浏览流行调色板并将其快速复制到设计中的好地方。 阴影 Shaderade是一种快速简便的工具,可利用数值精确的色彩和色调生成单色配色方案。

(4)Shaderade 

Shaderade是一种快速简便的工具,可利用数值精确的色彩和色调生成单色配色方案。

人已赞赏
交互设计

UI设计入门书籍推荐

2020-7-14 23:40:41

交互设计

如何让表单设计更加高效简单?

2020-7-22 22:14:29

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索