咨询电话:400-810-1418服务与监督电话:400-810-1418转接2
  • 相关推荐
  • 字体排版需要掌握的10条小技巧
  • B端产品按钮设计技巧
  • 2021年UI/UX设计趋势前瞻
  • 如何设计出漂亮的模糊效果背景?
  • 如何做好分类导航设计?
  • Figma都有哪些好用的快捷键?
  • 禁用按钮应该怎么用?

    发布时间:2021-01-12 11:08:23

    最近收到的一则问题,大概是:在做设计的时候,经常会遇到一个问题,就是一个按钮,在同一页面的不同情况下,有时可用,有时不可用,我们到底是显示不可用时的禁用状态呢?还是直接隐藏这个按钮呢?禁用按钮应该怎么用?

    大家还是喜欢提这种通用性问题,希望有一个说法,可以概括所有情况。但我多次说过,不存在这样的好事,一定是具体问题具体分析的。

    尤其是这个问题,想要聊透彻,得用不少例子来举证说明,不过也可以通过总结的方式长话短说了。

    禁用按钮的使用,可以从两个维度来分析,分别是:「无效的禁用状态」和「有效的禁用状态」。

    无效的禁用状态

    有一种情况是,在一个页面里,一个按钮,可能会有几种不同的情况存在。那人要问了,既然是一个页面,为什么会有多种状态同时存在的情况呢?

    比如,在出行场景中,普通乘客发起订单,司机接单后是可以发送消息的(左图)。但是从第三方渠道来的乘客,司机是无法发送站内消息的,只能通过电话联系乘客(右图)。

    1.jpg

    不同渠道来的用户,司机端的页面会呈现不同的按钮状态。相同的页面,第三方渠道来的乘客,在司机端就不需要露出消息按钮了,这样可以减少无效信息对司机的干扰,还可以避免司机习惯性操作带来的无效反馈,比如点击消息,显示「无法发送消息」。或者显示禁用,也会影响司机的操作判断。

    从这个案例中我们可以看出,当一个按钮在某种情况下始终无法被触发时,就会选择让它直接消失,而不是呈现禁用状态。

    很多人在这类设计里会给按钮提供一个禁用状态,以免按钮消失而打乱页面布局。但是要知道,在某种情况下,按钮无用时,无意义的展示反而会产生干扰信息,就像上面说到的那样。

    所以这里有一个结论是:禁用按钮需要可触发的时机,如果没有这个时机,禁用状态就没有存在的必要。如果存在,那它也是一个无效的状态。

    既然是无效的,最好就不要出现了。

    有效的禁用状态

    在上面的例子里,有一个前提不可忽略,那就是司机是否可以理解我们不显示的原因。当然,司机会接受相关培训,产品中也会有渠道标识,所以司机能够明白页面中存在的差异。

    但在其他产品中,当状态不同,按钮变化无法自洽的时候,又怎么去处理呢?我们就需要通过合理的解释来消除用户潜在的困惑。

    对于这点,比较典型的案例是在线上购物时,一件商品会有多个类型供消费者选择,比如不同的尺寸、型号等,当其中一种类型被抢光时,这个商品依然是可见的,只是无法选择,展示出了禁用状态。

    在这种场景中,我们不能一下子把其他无法购买的类型隐藏,因为用户需要知道我们所有的商品类别,了解商品的全部属性,尽管当下无法购买,但有上新的可能,用户依然可以选择等待,并将其加入收藏,还是会有机会促成这笔交易。而且当可选类型变多的时候,只是禁用没有库存的类型,可以使其他可选项保持固定的位置,有利于我们二次搜索和加购。这种场景的禁用也是暂时的,直到商品下架或者上新。

    但就像我以前说过的,常常我们见多了的东西,就认为是正常的,但它并不一定好的。禁用也是这种情况。

    虽然我们现在还是会在各个地方看到禁用操作,但是禁用的原由始终没有给到用户合理的解释,以至于许多人见到类似的操作都是一头雾水。所以在设计过程中,尤其要谨慎对待,尽可能的避免出现无法解释的禁用操作。

    好比淘宝的商品选择页面,如今也将原来的商品纯禁用按钮,替换成了「缺货」。选择缺货的商品之后,按钮会变成「提醒掌柜补货」。

    2.jpg

    从原来的用户单方面接收无法点击的按钮,到现在直观显示缺货,点击后同时提醒到商家,这样的操作从功能角度来说是一个升级。

    这就是我说的,有效与无效的禁用按钮之间的区别。禁用不该是真的禁止使用,而是告知用户,它如何可被使用。

    小结

    如果一个按钮在不同的阶段有禁用和可用的状态显示,那么意图是很明显的。比如一些活动页面,某个按钮的禁用状态是倒计时,就像电影的前期宣传,为电影的上线制造话题和热度,来鼓励更多人的观看一样。

    对于按钮来说,显示禁用则代表它在满足一定条件后即可拥有可点击性,让我们明确地了解它就在这里,未来是可操作的。按钮也有很多的设计空间来为未来的使用做好铺垫,特别是营销类的活动,像是「明日 8 点可抢」、「提醒商家补货」的按钮文案,无一不在传达「可用性」的信息,引导用户持续性的关注。

    但是还有一类禁用状态只是静默地提示,多出现在表单中,当用户没有完成输入的时候则无法点击,因为看的多了,我们就以为这是正常的。但我们都知道它仍可优化,比如,在它以禁用状态出现时,用更为友好的方式去提醒用户应如何激活,而不是漆黑一片,且完全不知道它所存在的意图。

    我们要知道的是,禁用按钮本身不是一个特殊的对象,只是禁用状态在页面中是一个特殊的存在,它是产品设计中的一种规则。为什么按钮不可用,或者说一定场景下为什么功能不可用,当无法依靠用户直觉理解的时候,是需要作出解释的,也就是怎么禁的问题。

    但是最开始设计时就应该去想的是,禁用状态对用户和产品的意义在哪里,这和我们设计方案时脑海中涌出的无数目标一样,是一个基础的出发点。而后,一切迎刃而解。

    按钮在产品界面中是非常重要的元件之一,按钮作为用户引流和行动触发来说都是至关重要的。如何把按钮设计做到最好,是设计师需要不断探索的问题,把控好每一个细节才能让每一个元件更精致。

    文章来源:微信公众号:「呆呆U理」