【译文】为何你不能将不可用的按钮设计成灰色

最近在做一个 UI 优化项目时,调研了一下业内各主流 APP 在登录注册页面操作按钮的可用与不可用的样式,简言之有降低透明度与置灰有两种,当时觉得置灰的 button 不利于引导用户,在用户注册流程中会阻碍用户转化。实际项目上线做 AB test,新版降低透明度按钮得到很好的引导和转化。

【译文】为何你不能将不可用的按钮设计成灰色

再看到有这样一篇文章,引起共鸣,所写即我所欲言,分享给大家。

【译文】为何你不能将不可用的按钮设计成灰色

当你需要设计一个在特定场景下不可操作的按钮时,你会怎么处理?把它从原来的位置删掉,稍后再展示它,这种做法显然会让用户感到惊讶。取而代之,设计师将指出这个按钮是禁用的,以避免显示界面前后发生巨大的变化。

大多数设计师在表达一个不可点击的状态时,会把按钮设置成灰色。但是,这个方式也常常会让用户感到惊讶,因为按钮的启用状态和禁用状态几乎没有相似之处。

【译文】为何你不能将不可用的按钮设计成灰色

一个按钮从灰色成为全彩是一个意想不到的变化,会让用户怀疑刚刚发生的事情。为了给用户提供一个流畅无缝的体验,最好避免这种情况。与其使禁用的按钮变灰,不如降低不透明度以使其透明。

当这个禁用按钮是透明的时候,用户可以在启用状态下看到该按钮的外观。虽然该按钮已经淡出,但仍有一些颜色显示出来供用户识别。当禁用按钮切换到启用状态时,新外观不会让用户猝不及防。

透明按钮更容易融入背景,而灰色按钮则留在前景上(除非背景本身是灰色)。前景元素是更加吸引用户注意力的。用户看到它们会觉得是可进行交互操作的,这意味着用户会更有可能地去点击这些灰色的禁用按钮。

【译文】为何你不能将不可用的按钮设计成灰色

用户不太可能将透明按钮与其他按钮混淆。一个灰色的按钮并不总是表示它是禁用的。有时在一组按钮中,灰色的按钮会被用作优先级低的按钮(例如,取消按钮)。用户可以很容易的将灰色的按钮误认为是低优先级操作。或者,最坏的情况是,他们可能会把它误认为是一个设计糟糕、色彩对比度低的按钮。

当设计禁用的按钮时,请调节透明度,而不是颜色。最佳不透明度值将根据您的背景颜色而变化。根据经验法则将透明度调整为 40% 或者更低。把透明度设置到足够低是很重要的,否则一些用户仍然会觉得这个按钮是可点击的。

根据这个技巧,你将使不可用的按钮看起来是禁用的,而不会给用户带来困扰。取而代之的是,用户唯一会感到惊讶的是你的界面是多么的流畅和无缝衔接。

编译作者 | 樱桃小丸子 | 上海 | UI设计师

评审指导 | TCC 委员团 | 胖鱼、呵呵、弹跳

编辑整理 | 三分设运营编辑 | 皮皮

原文作者 | anthony

原文地址 | https://uxmovement.com/buttons/why-you-shouldnt-gray-out-disabled-buttons/

业界动态

企业服务设计中的三要素

2019-11-13 9:15:13

业界动态

临摹的三个技巧,你尝试过吗?

2019-11-13 10:21:26

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