恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
UI设计中色彩使用的十个原则
0.0°
2020-07-18 自译外文 经验/观点 原作者: Danny Sapio 举报 2148 2 8 0

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

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

(1)色相

(2)饱和度

(3)明度


2、层级

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

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


3、表达

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


4、包容性

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

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

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


5、意义

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


6、有限

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


7、状态

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


8、一致性

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


9、调色板

如何获得完美的调色板?

(1)原色

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

(2)创建调色板

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

(3)色彩使用


10、60-30-10原则

       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是一种快速简便的工具,可利用数值精确的色彩和色调生成单色配色方案。

Powered by Froala Editor

更新:2020-07-18

收藏

2人已收藏

荚鱼是甜的

学习与分享(๑•̀ㅂ•́)و✧

  • 6

    作品

  • 0

    粉丝

  • 1

    关注

  • 苹果Newton(牛顿)在27年前教给我们的UX相关知识
  • 用户体验设计方法和可交付成果
  • 用户体验中的游戏化设计
  • 25本适合数学家和设计师阅读的有趣书籍
相关标签
设计用户体验ui

    猜你喜欢

      2020-07-18 自译外文 经验/观点 原作者: Danny Sapio 举报 2148 2 8 0

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

      0.0°

      你确定要举报UI设计中色彩使用的十个原则

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年07月18日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      8
      2
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录