赞助商
立即赞助

用一篇超全面的文章,详解「按钮」的禁用状态

UI设计3年前 (2021)发布 流光
2.5K 0 0

@Daidai丶呆 :篇文章我从「召唤类按钮」与「工具类按钮」两个角度详细拆其内在逻辑,希望帮到各位更理按钮设计逻辑。

禁用,通常的理是当前不点击或禁止使用,在界面上也是一种占位标识。相对的,当按钮除禁用,就变得点击。仅此一种简单的变化能演化出各类不同的禁用按钮的处理方式。是,我把「禁用按钮」的设计思路概括为两种类型:「召唤类」与「工具类」按钮。

召唤类按钮的禁用状态

在召唤类按钮里,我们以拆分出两种类型对其进行讲。

1. 不该出现禁用按钮的情况

召唤,意为引导用户进行操的按钮。就不应该出现「禁用状态」。

我通常会一些产品里面体验到这样的况:入 App,看到活动,点击入后,发中秋节活动可领取月饼,累到一数,即可获得奖励。但这时候的领取按钮不可点击的。

用一篇超全面的文章,详解「按钮」的禁用状态

仔细看的话,能看到活动页确实写活动始时间 20:00,然我点击的时间 18:00,所以也就能理解任何反应的原因了。

但这是一个理的方案?这本身是一个「召唤类按钮」,图是让用户聚焦于按钮,但此刻的按钮无法点击,会给用户造成聚焦障碍,似乎在告诉用户:按钮做这大不是给你按的,先把规则给了。

按钮做这么大是给户按的?这是么逻辑?类似于里的电灯开是摆设的,是按的。

于是有了下这个优化版:

用一篇超全面的文章,详解「按钮」的禁用状态

这个优化版论从设计度是开发度来说,都是最平衡能满足体验案。设计不需要再思考其他情况,用条 toast 可以满足多数逆情况。开发不需要满足按钮动态情况,要在不时分获取两情况可以了(活动开放与未开放)。

但当也不是最的方案,毕竟上面有提到,「召唤类按钮」是引导用户点击的,而「点击提示不用」仅比「无法点击」在逻辑上显得正确而已,但质上也是不合理的。

合理的方案应该:按钮即可点击,不可点击即无按钮。

用一篇超全面的文章,详解「按钮」的禁用状态

或者倒时,到点后自动呈式活动页面。很多比较型的活动或厂推出的节日活动里,常会看到这样的形式。

用一篇超全面的文章,详解「按钮」的禁用状态

面这截图指得「入中文直播」后的倒时页面,但我之截图,所以就用这张图替了。

当然还有一类情况是,活动持续间为一周,但每只开启 2 。

用一篇超全面的文章,详解「按钮」的禁用状态

即便如此,活动开启再呈现按钮也比按钮一直呈现会更好。因为用户会反复通过点击按钮来确认是否可点击,是否可参活动,即使未活动开启间。所以无法点击的召唤类按钮,就不该出现在界面上。

产界面通会引导户思考。

然如为了图便话,上第类案,即「按钮可击并提示活动暂未开启」也是可取。是大家要知这里逻辑关系。

2. 样造成认知觉

其实上述内容有处,我没有深入去聊,即按钮处于「禁用状态」情况下,颜色为浅灰色是否为最佳案?

灰的禁用状态给用户一种错,即个按钮从始至终将不用。

但会人反驳:那的「登录/注册」功能,按钮不可点击,且灰色的。这怎么解释?

用一篇超全面的文章,详解「按钮」的禁用状态

这被简化的流程里两逻辑,我们需拆看,分别:按钮样式,以及违背了述的「无法点击的召唤类按钮,就不该出界面」的结论。

先式。通过下图的对比可以发现,都是不可点击,后者比前者起来更像是同类型的操作按钮,且暗示用户该按钮足条件即可被点击。而纯灰色按钮更像是禁止且不可用的状。

用一篇超全面的文章,详解「按钮」的禁用状态

使用品牌色,降低不透度,可加用户对该产品按钮的认知。所以在这层关系上,第二种方案会更理。

类似的例子有很多,这里简单放两个,就一一举例了。

用一篇超全面的文章,详解「按钮」的禁用状态

用一篇超全面的文章,详解「按钮」的禁用状态

重点来聊聊逻辑关系。

先说结论:这里的按钮操作优先级在此流程里低于输入框,可被暂时禁。

所以上述这个案是可,从本质上来说,多级操作流程召唤类按钮被禁用,看起来是意思。

时就有人问:否根据上面提到的一样,给按钮加一个点击提示呢?

用一篇超全面的文章,详解「按钮」的禁用状态

单个按钮的单个逻辑提示,相比两个按钮的重判断提示,简单很,者不仅让用户混乱,甚至让设计师混乱。

比如图的可直接点击按钮,那么点击「获取验证码」需判断手机确与否,以及否输入了手机。或者直接点击「登录」,除了需判断手机的两逻辑,还判断验证码否确与数否 6 。

所以在这个方案,「召唤按钮」虽然还「召唤按钮」,但它的优先级相比于输入框低,且输入框也操作控件,因此也需引导用户聚焦(比如直接弹出输入框)。

即需要多次判断,需要用户多重聚焦,以至于上面个方案无法成为最佳方案。

于是,后来就演了如方案。

用一篇超全面的文章,详解「按钮」的禁用状态

先聚焦输入框,再唤起按钮,之后输入验证码自验。仅一次判断,且按钮逻辑被拆分至同页面,户更好解。

所以到这里,可以理解为什么说很多「登录/注册」功能会拆分步骤了么?原有很多,我这里提到两块内容「判断逻辑」与「按钮状态」是关键素。

3. 小结

根据前分析,出了这三个结论:

  • 无法点击的召唤类按钮,就该现在界面上;
  • 召唤类按钮不是最高操作优先级时,要引导用户使其可用(如上图请输入手号);
  • 禁用按钮的样式,应该选择低透明度的常规按钮值。

如单看结论,会生矛盾。经过上述分析,相信各位可以充分理解其含义了。

工具类按钮的禁用状态

设计师平时用最多设计工具应该是 Photoshop 或 Sketch 了,我们经常会在这类「工具类按钮」里发现些功能不可操作。

用一篇超全面的文章,详解「按钮」的禁用状态

如根据「召唤类按钮」逻辑来说,是否「工具类按钮」禁用状态也不应该出现或能浅色显示呢?

从正常逻辑来说:是的。

但因「具类按钮」其特殊性,所以我们还从分析一遍好给出结论。

1. 历史遗留问题

什么这历史遗留问题呢?回答这问题,我们得先「具类按钮」的禁用状态什么特殊。

在使用的大部计类产品,它的计模式统一为固定工栏,有哪些工一目了然,同哪些禁用,哪些可用,也是展现得一清二楚。

原因是操作频繁,户需要反复使,对界面与工具位置摆放的熟悉是这类产的可性保障。

用一篇超全面的文章,详解「按钮」的禁用状态

包括他很多设计类产,都可对工具进行自定义摆放,目的与我上述说的是相吻合。

Word、Excel 等品也是类似,虽然不能自定义摆放,是设计宗旨基本类似。

用一篇超全面的文章,详解「按钮」的禁用状态

大家是否发现个问题?即我们大多数时候在设计类品里使用功能也那么几个。即使下载了很多插件,用最频繁估计也是切图跟标注了。

即使到现在,很工具也依样被设计出来,不是因为设计者思固化,有时用户的使用习惯反而决定个结果。但从某个角度来说,工具栏被固定,各类按钮被设计者钉在它们被安排的位置上,确也是高效率的一种方案。但肯定不是最的方案。

2. 颠覆以往的按钮设计

样做一定是的么?把所有类产品的工具放出来,合理摆放让用户自己熟悉、适应,就肯定没问题?

真不。

好的工类按钮,一定是根据景来呈现的。也就是随着用户功能的互动而出现相应的内容。

用一篇超全面的文章,详解「按钮」的禁用状态用一篇超全面的文章,详解「按钮」的禁用状态

比如网盘品,用户勾选某个文件或文件夹前后操作逻辑也是随着场景改变。

我们来看 figma:

用一篇超全面的文章,详解「按钮」的禁用状态

从上图以看到此时的顶部内容除固定操的工具外,没有其他任何操内容。

这时候选取界面中的图形,顶部具栏发了变化:

用一篇超全面的文章,详解「按钮」的禁用状态

其按钮会出针对于此图形可操作的具,且还会根据图形的数行具的变化。这就一种,一种具类产品的革新。

其多产品目前也已经逐渐景化。比如滴滴车,从选址、叫车、评价,都是景引导按钮出现,而不是一窝蜂地出现在界面上,告诉你还没下车,所以不能评价。

而随着「工具类按钮」的演,我相信最终的结果会到本篇章第一分讲的那样:该现的东西,就隐藏掉。

总结

按钮的禁状态一直来都是界存在的争论点,从样式到逻辑,从案到可见性。本篇章我从「召唤类按钮」与「工具类按钮」两个角详细拆解了在逻辑,告诉各位按钮的禁状态应该随着场景、功属性的变而变。保证户易于解,设计师通于属性。

  • 无法点击的召唤类按钮,就不该出现在界面上;
  • 当召唤类按钮是最操作优先级时,要引导户使可(如上图的请输入手机号);
  • 禁用按钮样,应该选择低透明度常规按钮色;
  • 工具类按钮也随之场化。

欢迎关注作者微信公众号:「呆呆U理

用一篇超全面的文章,详解「按钮」的禁用状态

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

我们常说,现在是体验至上的时代,用户对产品的使用不再是单纯的需求满足,更要获得满意的体验。服务设计的发展为我们改善用...
交互设计
你知道吗?按钮位置的设计会影响用户完成任务的速度。更快地完成任务会带来更满意的用户体验。如果你也想带给用户更满意的用...
交互设计
写文章也像做一款产品一样,随着技术的进步、知识的迭代要进行合理的优化与更新。过去的 2 年里,移动设备的更新迭代让振动反...
iOS振动
UI 设计师在做需求的时候,经常会接到以提升点击率为目标的需求。 提升点击率,设计师朋友第一反应就是提升操作功能的视觉抢...
交互设计
前言 西蒙·斯涅克在他的《从“为什么”开始》一书中提出了“黄金圈法则”的概念。他发现,人们一般向别人表达或者激励时,常规路...
交互设计
最近收到的一则问题,大概是:在做设计的时候,经常会遇到一个问题,就是一个按钮,在同一页面的不同情况下,有时可用,有时...
交互设计
网易UEDC – 周倩 :这篇文章的想法萌发于我产假期间,那是我心态急剧变化的一段时间。从怀孕开始,我变得懒惰、暴躁、脆弱,...
交互设计
我在前面的文章里有提到设计研究和建立人物模型,在这两个阶段,主要是研究分析阶段,我们知道了目标用户以及用户目标,但是...
交互设计