发布时间：2023-11-28 分类： 行业动态
为用户提供即时反馈是交互设计中非常重要的原则。当按钮显示为灰色时，如何向用户提供反馈？我们来看看这篇文章。
为用户提供即时反馈是交互设计中非常重要的原则。它是关于系统如何以立即有效的方式响应用户操作的设计。在用户工作时提供即时，适当的反馈非常重要。
一个简单的例子可以说明这一点：当你的计算机冻结时，无论你指出什么，计算机都不会做出反应。系统没有反馈，用户的心脏将崩溃。我们今天要讨论的是一种非常特殊的反馈：当按钮变灰时，应该如何向用户提供反馈？
我们先来看一个案例。这是一个浮动的投票层。每个玩家下方都有一个投票按钮。每个用户每天只能投票给一名玩家。
看看这个程序没问题。但如果您在投票后添加页面，则会显示问题：
图2为了表达“不能再投票”，所有的按钮都显示为灰色，所以我们在屏幕上得到一个灰色的按钮。虽然按钮是灰色的，但按钮仍然是按钮的形状，仍然有想要点击的愿望。
然后问题就来了。此时点击灰色按钮，应弹出Toast提示：“每天只有一票~~~”？有了这个问题，让我们研究灰色按钮。
灰色按钮
灰色按钮广泛用于登录注册，例如微信：
左图是默认登录页面，登录按钮显示为灰色;当用户输入密码（一次只有一位）时，登录按钮会亮起。
乍一看，只输入一个密码，有些是不合理的。毕竟，用户的密码数字几乎不可能是一个数字。此时，用户不太可能登录，但存在干扰。
但是如果再考虑一下，假设用户的密码是6位数，当微信只有6位数时点亮按钮时，它实际上会伪装显示用户密码的位数。如果设置最小数量的按钮点亮？例如，在用户输入6位数后，它也是一个选项，但它比当前方案稍微复杂一些。它并不简单，更直接。
以下示例应位于登录注册中，灰色按钮应用程序的顶部按钮：
在此示例中，按钮“获取验证码”仅在用户输入11位数（移动电话号码为11位）时亮起。这个程序无可挑剔，没有错。
在登录时，按钮显示为灰色，主要是提示用户现在无法点击该按钮，可以在输入密码/电话号码等信息后点击。在某种程度上，这可以防止用户在没有输入时无法单击。由于按钮呈灰色显示，因此按钮本身设置为不可用，因此灰显的按钮在单击后不应提供反馈。
在这里我们可以看到一种权衡：虽然“即时反馈”的原则很重要，但是不能违反指示对象如何操作的可供性。具体地说，已经设置为灰色状态的灰色按钮清楚地表示该按钮不能被点击;此时，如果单击按钮并弹出Toast，则按钮的可用性不匹配。因此，这是不可取的。
投票案例
分析一下，文章开头的例子很清楚：点击第二张图片中的投票按钮，你不应该弹出吐司。但页面上仍有很多按钮呈灰色显示。这个页面看起来不太友好。作者说我对这个页面不是很满意。
顺便说一句，分享经验：对页面的不满，很多次是我制定好计划的法宝。因为我不满意，我会一直尝试优化。在您不满意的页面上保持不妥协的态度非常重要。
分析这个投票页面，投票后已经投票，用户选择了一名玩家，此时最关注的是“我已投票”。如果您对此活动感兴趣，您可能还想知道投票的排名。您已经浏览了哪些玩家参与了投票。因此，此页面可以更改如下：
在更改之后，在用户点击投票之后，它首先指示用户投票的人，当前投票数以及排名是多少;后续页面显示了投票的排名，从而避免了全屏灰显的情况。
以上使用案例来分析使用灰色按钮的规则。讨论让我们更加了解，欢迎留言。
专栏
新设计青年，每个人都是产品经理专栏作家，2017年作家评选最佳人气奖。爱奇艺高级互动设计师。库尔德海龟曾在腾讯微生活，网易和宜信服务。 5年的互动设计经验，专注于设计领域。微信公众号：新设计青年。
这篇文章最初发表。未经许可，禁止复制。
该地图来自PEXELS，基于CC0协议
