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

UI设计教程——按钮禁用状态设计详解

乖乖发布于:2019-9-17 12:05 |原作者: 呆总丶|
乖乖
安徽 贵池 平面设计师
发私信 + 关注
简介: 本篇文章我从「召唤类按钮」与「工具类按钮」两个角度详细拆解了其内在逻辑,希望帮到飞特网的设计师朋友们更好理解按钮设计逻辑。

版权申明:本文出自“呆总丶”原创,感谢“呆总丶”的原创文章分享!

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

召唤类按钮的禁用状态

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

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

召唤,顾名思义,意为引导用户进行操作的按钮。引导用户操作?那就不应该出现「禁用状态」。

我通常会在一些产品里面体验到这样的情况:进入 App,看到有活动,点击进入后,发现中秋节活动可领取月饼,累计到一定数值,即可获得奖励。但这时候的领取按钮是不可点击的。

UI设计教程——按钮禁用状态设计详解 飞特网 设计理论

仔细看的话,能看到活动页确实写着活动开始时间是 20:00,然而我点击的时间是 18:00。所以也就能理解没有任何反应的原因了。

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

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

按钮做这么大不是给用户按的?这是什么逻辑?类似于家里的电灯开关是摆设的,是按不下去的。

于是有了下面这个优化版。

UI设计教程——按钮禁用状态设计详解 飞特网 设计理论

这个优化版无论从设计角度还是开发角度来说,都是最平衡且能满足体验的方案。设计不需要再思考其他情况,用一条 toast 就可以满足多数的逆向情况;开发不需要满足按钮的动态情况,只要在不同时间点分别获取两种情况就可以了(活动开放与未开放)。

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

最合理的方案应该是:有按钮即可点击,不可点击即无按钮

UI设计教程——按钮禁用状态设计详解 飞特网 设计理论

或者倒计时,到点后自动呈现正式活动页面。在很多比较大型的活动或大厂推出的节日活动里,经常会看到这样的形式。

UI设计教程——按钮禁用状态设计详解 飞特网 设计理论

上面这个截图指得是「进入中文直播」后的倒计时页面,但是我之前没截图,所以就用这张图代替了。

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

UI设计教程——按钮禁用状态设计详解 飞特网 设计理论

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

产品界面通常会引导用户思考。

当然如果为了图方便的话,上面的第二类方案,即「按钮可点击并提示活动暂未开启」也是可取的。只是大家要知道这里面的逻辑关系。

b.样式造成的认知错觉

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

灰色的禁用状态会给用户一种错觉,即这个按钮从始至终都将不可用。

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

UI设计教程——按钮禁用状态设计详解 飞特网 设计理论

在这个被简化的流程里有两个逻辑,我们需要拆开看,分别是:按钮样式,以及违背了上述的「无法点击的召唤类按钮,就不该出现在界面上」的结论。

123下一页
26

好评
27

差评

刚表态过的朋友 (53 人)

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

乖乖
安徽 贵池 平面设计师
+关注 发私信

最新评论

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

委托设计