使用颜色防止混淆并帮助您的用户

作为设计师,我们可以使用 颜色 引导用户朝着正确的方向有效高效地完成任务。但有些设计师更关注公司的需求而不是用户的需求,他们可能会扭曲事物,使颜色变成令人困惑的噩梦,隐藏用户真正需要的按钮和信息。在这里,您将看到颜色选择如何成为帮助用户和防止混淆的重要因素。

看看下面这封旧的电子邮件简报消息;颜色可能会让用户感到困惑,让找出如何退订的工作变得更加困难。如果电子邮件地址的字体为灰色,背景为浅灰色,用户很难看清它到底说了什么。同样,虽然“订阅设置”文本带有下划线,但用户不一定能识别出链接——这要归功于显示中使用的颜色令人困惑的性质。由于设计师没有遵循使用明显蓝色下划线文本的惯例 内联链接,用户可能没有注意到文本实际上是可点击和链接的。

许多电子邮件简讯的布局与 wonderbly.com 的历史布局类似。取消订阅选项的颜色与背景几乎没有对比,因此很难找到该选项。

© Wonderbly,合理使用

为什么这被归类为黑暗模式?

颜色是前注意力属性之一;我们这些拥有全色视觉的人可以利用视觉阵列的这一元素来区分物品并立即提取信息。然而,当某些颜色组合在一起时,我们发现阅读文本并立即理解所呈现的信息非常困难。鉴于此,我们遇到了一个问题,那就是我们不仅会以一种方式让用户感到困惑,而且会

  • 文本颜色与背景对比度低。这样,文本就无法足够突出地吸引用户的注意。而且,一旦用户终于发现文本,他们就会发现文本很难阅读。

  • 内联链接的颜色与非交互式文本的颜色相同。 这样一来,用户就可能会 不是 无法区分可点击的链接,并可能忽略找到相关信息的可能性。

在这个 Codecademy 的旧示例中,“服务条款”文本乍一看并不引人注目,无法点击。结合默示同意设计模式,此解决方案可能会说服用户在未阅读这些条款的情况下进行注册。

© Codecademy,合理使用

如果你在这里考虑的是伪装,那你就对了。对于设计师来说,风险在于我们可以扭曲和变形我们创造的几乎任何东西的元素,无论是掩盖物品还是将其带出来。用户的眼睛 油灰 在我们手中,因为我们知道人眼是如何工作的,以及它如何与大脑一起,接受暗示、线索和 幻象 (作为 格式塔原则 证明)。如果我们愿意,我们可以将用户的注意力吸引到元素上,促使他们采取行动。我们可以静音和隐藏消息(通常称为“细则”),这样用户就会继续使用。在这里,我们必须问自己用户是否可能遭受某种形式的损失。如果答案是“不”,我们就可以松一口气,并考虑如何以更积极(或至少无害)的方式引导用户,并真正帮助他们在我们的产品上实现他们想要的东西。

“颜色并不会给设计增添愉悦的品质——它只会强化这种品质。”
— 皮埃尔·波纳尔,法国画家、版画画家、后印象派先锋派画家纳比派的创始人

当您使用与文本相似的颜色背景时,用户必须将更多的注意力放在显示上才能阅读其内容。如果您不想让用户看到,那么以这种方式组合颜色可能是一种非常卑鄙的方式,可以偷偷地向他们传递信息。信息仍然存在;只是设计师可以隐藏它,就像用破旧的黄色荧光笔在页面上书写一样。

然后有设计师 不是 希望用户错过信息,而只是让它成为 小的 让他们更难做出某种行动。例如,这可能是选择不接收新闻通讯。这些设计师可能会考虑另一种 暗纹 或自私的手段,例如将命令放在不常用的位置,或在程序中添加额外的、繁琐的步骤。考虑一个退出复选框,用户必须有意识地选中它,这样他们就不会分享他们的信息或注册订阅。或者取消选中该框。设计师可以设置默认选项,让用户通过单击“确定”自动订阅新闻通讯,而无需阅读和取消选中该框。如果设计师使用的颜色不突出,缺乏对比度也会让用户感到困惑,无意中订阅他们不想要的东西。

在另一个旧示例中,Shutterstock 在这里使用颜色来突出特定订阅。由于使用了灰度,其他订阅似乎处于非活动状态。

© Shutterstock,合理使用

有时,这是为了使理想的订阅或交易脱颖而出。如上所示,颜色是一个无辜的盟友。合理使用颜色既可以瞄准目标,也可以隐藏您不希望用户过多关注的内容。只要您的客户是一家有道德的组织,您就应该有足够的余地来计划如何通过巧妙地突出期望的目标来为他们增加价值,同时选择在包含必需(如果不太需要)元素或信息时不会引起他们注意的颜色。

当你考虑玩转色彩的丰富可能性时,请牢记另一个考虑因素。除了避免“史诗级失败”的选择(例如红蓝或蓝红相互作用)外,还要记住你的用户有某种形式的 色盲,尤其是红色和绿色元素。始终问自己“我想展示什么以及为什么?”和“有什么我想淡化以及为什么?”,并平衡这些问题与道德考量,例如 可访问性 以及用户可能的结果。话虽如此,你可能会惊讶地发现,通过正确的颜色选择,你可以引导用户走向 转换 领土,同时帮助他们得到他们想要的东西并到达他们想要的地方,无需任何诡计。

总结

颜色可以增强 可用性 界面的对比度。通过正确的对比度,您可以帮助用户快速找到与其任务相关的内容。但界面创建者也可以将颜色用于不那么高尚的目的。当公司想要诱使用户选择更昂贵的订阅选项,或者想要让找到某些“取消订阅”选项变得更加困难时,设计师可以以黑暗的方式使用相同的颜色知识。他们可以选择低对比度来吸引注意力,或者选择明亮的颜色来吸引用户并引导他们的行为。所以,做一个负责任的设计师——在为任何你伸出援手的人实现利益最大化的同时,对用户零伤害,并为所有相关人员创造双赢的局面。

参考资料和更多信息

英雄图像:© Unsplash,CC0。

詹妮弗·蒂德威尔, 设计界面:有效交互设计的模式,2010 年

马丁·范韦利, 图案库,2008 年

Harry Brignull 的网站致力于 暗纹

Leave a Reply

Your email address will not be published. Required fields are marked *

近期新闻​

编辑精选​