相关分类
photoshop教程
Illustrator教程
CorelDraw教程
painter教程
Indesign教程
UI设计教程
sketch教程
设计理论
飞特网 顶部通栏广告

按钮的禁用状态 | 设计详解

小雷发布于:2019-10-17 14:02 |原作者: 呆总丶|
小雷
上海市 静安区 摄影师
发私信 + 关注
简介: 禁用,我们通常理解的是当前不可点击或禁止使用,在界面上也只是一种占位标识。相对的,当按钮解除禁用后,就变得可点击。仅此一种简单的变化能演化出各类不同的禁用按钮的处理方式。于是,我把这些「禁用按钮」的设计思路概括为两种类型:「召唤类」与「工具类」按钮。 ... ... ...


a.历史遗留问题

相信大家看到「历史遗留问题」这句话,脑袋里就已经出现 PM 推卸责任的画面了。

为什么说这是历史遗留问题呢?要回答这个问题,我们得先说说「工具类按钮」的禁用状态为什么特殊。

在我们平时使用的大部分设计类产品里,它们的设计模式统一为固定工具栏,有哪些工具一目了然,同时哪些禁用,哪些可用,也是展现的一清二楚。

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

按钮的禁用状态 | 设计详解 飞特网 UI设计教程

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

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

按钮的禁用状态 | 设计详解 飞特网 UI设计教程

但!大家是否有发现一个问题?即我们大多数时候在设计类产品里使用的功能也就那么几个。即使下载了很多插件,用得最频繁的估计也就是切图跟标注了。

包括 Word,我至今还是无法相信大学有一门计算机一级考试,是要求学生熟悉使用 office 套装工具的。

需要强行学习的设计是多么反人类?但也没办法,你不能说它设计的有问题。因为从这类工具被生产出来的年代起,无论是在技术层面还是在认知层面,都在促使着工具产品朝着这个方向发展。

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


b.颠覆以往的按钮设计

比如路人甲就不服了:呆总,这样做一定是好的么?把所有这类产品的工具都放出来,合理摆放让用户自己熟悉、适应,就肯定没问题?

真不是。


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

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

按钮的禁用状态 | 设计详解 飞特网 UI设计教程

按钮的禁用状态 | 设计详解 飞特网 UI设计教程

这时候路人甲又会说:但你这不是设计类产品啊!

那我们来看 figma:

按钮的禁用状态 | 设计详解 飞特网 UI设计教程

各位从上图可以看到此时的顶部内容除了固定可操作性的工具外,没有其他任何可操作内容。

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

按钮的禁用状态 | 设计详解 飞特网 UI设计教程

其按钮会出现针对于此图形可操作的工具,且还会根据图形的数量而进行工具的变化。这就是一种进步,一种工具类产品的革新。

当然,我只是拿 figma 举例,并不是说仅此一例。其他很多产品目前也已经逐渐场景化。

比如滴滴打车,从选址、叫车、评价,都是场景引导按钮出现,而不是一窝蜂的出现在界面上,告诉你还没下车,所以不能评价。

而随着「工具类按钮」的演化,我相信最终的结果会回到本篇文章第一部分讲的那样:不该出现的东西,就隐藏掉吧

小结

按钮的禁用状态一直以来都是业界存在的争论点,从样式到逻辑,从文案到可见性。本篇文章我从「召唤类按钮」与「工具类按钮」两个角度详细拆解了其内在逻辑,告诉各位按钮的禁用状态应该随着场景、功能属性的变化而变化。保证用户易于理解,设计师通于属性。

再来一次总结:

  • 无法点击的召唤类按钮,就不该出现在界面上;

  • 当召唤类按钮不是最高操作优先级时,要引导用户使其可用(如上图的请输入手机号);

  • 禁用按钮的样式,应该选择低透明度的常规按钮色;

  • 工具类按钮也随之场景化。

我相信这篇文章可以帮助各位梳理清楚按钮禁用状态的整个框架与体系。

谢谢阅读:)

>

FEVTE编注:更多平面设计理论学习请访问飞特网平面设计理论知识栏目,地址:https://www.fevte.com/plan/shejililun/

123
24

好评
20

差评

刚表态过的朋友 (44 人)

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

小雷
上海市 静安区 摄影师
+关注 发私信

最新评论

您需要登录后才可以评论和提交作业 登录 | 立即注册
本周热点文章
2020 新飞特 从心开始
关于飞特| 广告服务| 付款方式| 版权申明| 网站地图| 联系我们| 加入我们| 举报| 帮助中心| 移动版| 手机版| 飞特网

委托设计