UI禁用按钮应该怎么用

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

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

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

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

一、无效的禁用状态

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

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

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

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

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

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

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

二、有效的禁用状态

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

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

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

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

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

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

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

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

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

三、小结

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

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

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

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

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 161,780评论 4 369
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 68,424评论 1 305
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 111,397评论 0 254
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,576评论 0 218
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,997评论 3 295
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,945评论 1 224
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,107评论 2 317
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,850评论 0 208
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,625评论 1 250
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,804评论 2 253
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,285评论 1 265
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,613评论 3 261
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,291评论 3 242
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,164评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,963评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 36,096评论 2 285
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,886评论 2 278

推荐阅读更多精彩内容