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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
在颜色上对UX进行技术上的改善
0.0°
2017-02-21 自译外文 经验/观点 原作者: Paula Borowska 举报 15557 64 53 3

在任何设计系统中颜色是一个关键元素。在网站或app,颜色可以用以各种各样的方式:有时可以通过对比或限制颜色来建立一个焦点;颜色也可以帮助建立层次结构,因此影响界面。

本文中,我们将讨论如何有策略得使用颜色。


1.通过颜色比例聚焦

颜色比例的一个很好的例子是Viporte的设计。当你向下滚动主页时,每个部分有一个大写的字母在中心。当滚动动画出现之前这些字母都有着漂亮的颜色。焦点肯定是最中心部分,这一部分要归功于它在集中使用的颜色。颜色的比例变化有时是很小部分的颜色,有时是大块儿的颜色。无论哪种方式,比例都是用来关注焦点。如果颜色在每一处都是很显眼的,就不会清楚的表达出焦点在哪里。

Image title


2.通过颜色对比吸引注意力

另一个颜色可以操控的是对比。当总体设计的颜色是平静或成熟的,添加一个对比色将吸引更多的注意力。

这正是Thinx的设计的关键。它的主页上,整个配色方案是黑色和白色。然而,设计很大程度上依赖于大量的照片。尤其是在顶部,内衣的照片是一个深红色的背景。与页面上的一切相比,这很大胆。毫无疑问,正是因为红色才使它可以很突出。红色比黑色和白色的对比有更高的对比度。我喜欢使用Thinx作为一个例子,因为它证明了明亮的和霓虹灯的颜色并不是唯一适合通过对比来吸引别人的注意力的配色。这只是平衡的两种颜色,让其中一个脱颖而出。

Image title


3.使用颜色来丰富用户体验

创建视觉模式的最佳方式是保持一致性。模式,反过来和创建用户可以习惯有关系。就像用户对特定的图标会关联到特定的行为,例如,垃圾桶的图标意味着删除。颜色会更主观,每一个网站或app可以对颜色有自己的意义。

让我们在网站 Underbelly's portfolio website 中的蓝色为例。这是一个简单的例子,可以完美的解释我的观点。网站的任何地方的点击是蓝色的。使用网站的几秒钟后,就清楚的知道他们的链接是蓝色的。这就是通过颜色创建的用户体验模式。这种模式是很好的,因为他们允许用户很容易得就会理解习惯。需要认知学习的越少,用户需要思考的就越少。

Image title


4.通过颜色建立层次结构

可以利用颜色的另一件事是设定一个层次结构。Skore的页面中,几乎每一个部分都有一个绿色的元素。不仅重复使用相同的绿色,这是创建了一个可识别的模式,有助于区分任何部分的重要元素。通常很容易通过字体大小解释层次结构,但使用颜色也可以很好的设置一个层次结构。

Skore的例子中,绿色与灰色的文本和白色背景有很强的对比度。此外,他们的配色方案中不使用其他颜色,只是绿色。所有部分都以这样的方式显示层次。因此,绿色帮助用户分清在每个部分的重要元素,提供一个层次结构。绿色的元素是用户先会去注意到的。

Image title


5.利用相似色

作为设计师我们会使用许多不同的颜色,在设计中主要是需要保持一致性。我们来研究一下 InVision 今年年底的登陆页。页面的顶部一个粉红色和紫色的渐变作为背景图像。粉红色和紫色也用于按钮的颜色。此外,登陆页相比粉红色和紫色的彩色背景更多的使用了白色。相比白色背景更多在文本上使用黑色和灰色。如果每次的颜色都有变化,那样看起来就不好了。

Image title


让我们看看另一个例子 Co-motion。在他们的主页上使用几个不同的颜色。但在色调上都十分相似,这样就会很和谐。在这个例子中,没有什么特别突出,这也可以是一个很好的目标。在这种情况下,运用颜色的重点是当用户浏览滚动时需要和谐统一。

Image title


总结

颜色可以成为一个很棒的工具,可以帮助你实现各种不同的设计。颜色也可以帮助定义和建立层次结构,并聚焦一个焦点。强调色有各种形式,无论哪种方式,都可以有很多的乐趣。它会影响用户的注意力,更容易的帮助实现战略配色方案。


原文地址:http://www.webdesignerdepot.com/2017/02/5-techniques-for-fine-tuning-ux-with-color/

作者地址:http://www.webdesignerdepot.com/author/Paula-Borowska/


更新:2017-02-21

收藏

64人已收藏

  • 75

    作品

  • 2695

    粉丝

  • 65

    关注

  • 11个表单设计小Tips
  • 产品设计的期望与现实
  • 七个设计的基本原则
  • 为什么大团队失败反而小团队取胜

    猜你喜欢

      2017-02-21 自译外文 经验/观点 原作者: Paula Borowska 举报 15557 64 53 3

      在颜色上对UX进行技术上的改善

      0.0°

      你确定要举报在颜色上对UX进行技术上的改善

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2017年02月20日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      53
      64
      3

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

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

      登录

      手机号

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

      登录
      第三方账号登录