公司新闻

将想法与观点,与您一起分享~

开发案例插画 插画-树 插画-树

颜色可访问性 - UX在设计中使用颜色的最佳做法

润雪科技 时间:2017-09-25 09:07 浏览量:3340

颜色是UX设计师可用的最强大的工具之一,并且一个话题肯定会在平面设计师之间产生一些热烈的辩论。在UX设计中颜色选择的重要性比简单地选择美观的调色板要深刻一些。除了应用颜色心理影响网站用户之外,设计师还必须说明我们的大脑如何看待颜色,颜色对可用性的影响以及颜色的文化内涵。


颜色组合可以使您的设计更容易(或更难)查看


你有没有访问过一个网站,并且惊叹于这两种颜色如何相辅相成,提供恰当的对比度?这个效果可能是有意的。颜色值在可读性和用户体验中起着重要作用。每种颜色都有一个基于它在颜色轮中的位置的值,它决定了它与其他颜色的一致性。色轮两侧的色彩搭配可以使阅读更容易 - 特别是对于用户在明亮的光线下阅读智能手机屏幕的用户而言。另一方面,将文本放置在背景相似的颜色值上可以使阅读更加困难。


在为您的网站设计配色方案时,您应该避免使用一些颜色组合。你有没有看过一个图像,某些颜色似乎弹出屏幕?这种效应称为色谱。这种现象在图像或文字中产生了深度的幻觉,这种效应可能会造成疲劳。大脑经常使用某些颜色组合,特别是蓝色和红色的色差,并且可以在网页设计中创造一个令人吃惊的效果 - 只是看下面的例子。以下是一些简单的设计提示,可帮助您在网页设计中有效地使用颜色:


覆盖颜色不同的值可读性。

不要使用具有一致的色彩模式的背景。

请勿重叠亮起或暗黑暗。

不要使用霓虹灯或彩虹设计。


在UX设计中考虑色盲


UX设计师面临的一个特殊挑战是容纳具有色盲或色觉缺陷(CVD)的游客。这种共同的病情影响了超过百分之八的男性和约百分之零点五的北欧血统妇女。由于CVD的这种高度流行性,UX设计师采用适合于多种颜色盲人的彩色盲人调色板。在某些情况下,个人不能在红色和绿色之间破译,而在其他情况下,蓝色和黄色显示相同。在非常罕见的情况下,个人可能根本看不到颜色。以下是创建色盲可访问设计的一些有用提示:


避免在具有相似颜色值的背景上重叠文本。虽然这对大多数读者来说是困难的,但CVD患者可能无法在具有相似颜色值的背景上阅读文本。换句话说,您的网页可能看起来像一个纯文本的颜色,没有文字。这并不意味着您不一定使用您想要的颜色组合,只需确保调整颜色值,使其具有足够的独特性。


符合颜色和线条厚度编码。提高可访问性的一种方法是向用户提供多种方式来了解您的内容。例如,如果您的网站上的文字或图形是一致的颜色,请选择一致的线条厚度。这样一来,即使有人无法区分出另一种颜色,他们仍然能够理解你的模式。


要考虑到最常见的难以辨别的颜色。您对用户吸收内容的能力了解越多,您可以对设计做出更明智的选择。例如,为了避免使用蓝色CVD的人难以实现的网站设计,可以帮助您吸引更多的用户,并提高整体的可访问性。一个很好的一般提示是避免严重依赖于红色,绿色和蓝色的设计。


检查你的工作 对于那些没有CVD的人来说,尝试猜测一个设计可能是很难的。幸运的是,有一些国外的网站,如Vischeck,Colorblind网页过滤器和Coblis,可以向您展示如何显示不同类型的色盲患者。Colbis甚至为设计师提供了有色盲人的机会,以检查您的设计的可读性,以确保您的设计可访问。


建立与文化的颜色设计


了解人类大脑生理解释颜色的方式只是UX设计师的难题之一。除了生物学方面,文化和语境也在您的用户体验和反应颜色方面发挥巨大的作用。这个概念可以更复杂的应用,因为不同于几乎每个观察者的红绿色组合,颜色可以在不同的文化中带来显着不同的含义。了解用户的文化遗产对于创建有效的网页设计至关重要。黄色可能在美国造成温暖友善的感觉,但意味着法国背叛,中国色情,日本勇敢,泰国运气。紫罗兰色可以表示西方人的使用权,中国观众的贵族和巴西文化的哀悼。在开始设计之前了解这些文化线索研究是一个好主意。请咨询概述不同文化的常见颜色含义,以确保您不会产生任何令人遗憾的错误。有效地使用颜色可以打破或破坏您的用户体验。了解不同背景下的颜色可以帮助您避免刺激性设计,使您的网站更易于访问,并与文化多样的受众更深入地共鸣。


来源声明:本文【颜色可访问性 - UX在设计中使用颜色的最佳做法】由润雪科技编辑原创或采编整理,如需转载请注明来自润雪科技。以上内容部分(包含图片、文字)来源于网络,如有侵权,请及时与本站联系。

TAG标签:网站开发 网站设计

相关文章
如果您感觉我们的案例非常不错,请与我们取得联系~
立即咨询
获取方案及报价 023-6288-5285
网站建设流程 需求沟通
网站建设流程 签订合同
网站建设流程 项目开发
网站建设流程 上线/运营维护

张经理

186-9655-6121

邹经理

188-1980-6503

润雪科技二维码
电话咨询 在线咨询 微信咨询