大数跨境
0
0

不是所有的禁用,都需要“禁用”

不是所有的禁用,都需要“禁用” 爱云画AI
2022-05-15
1
导读:禁用样式是UI设计中比较常见的交互样式,比如登录页面的初始状态登录按钮是不可点击的。比如当账号没有获取到一些

禁用样式是UI设计中比较常见的交互样式,比如登录页面的初始状态登录按钮是不可点击的。比如当账号没有获取到一些权限时,对应的功能是置灰禁用的。


因为在最近的工作中发现一些设计师小伙伴在禁用样式的具体应用中出现了一些问题,比如这个禁用按钮可以直接隐藏吗?这个禁用按钮应该用灰色还是常规色(品牌色降低不透明度)?这个按钮在这种情况下需要禁用吗?所以针对这些问题结合一些应用案例进行了一些整理。


首先我们整理一下禁用按钮的种类,结合使用场景再进行分析。

常见的禁用按钮可以分为引导型按钮、功能型按钮、工具类图标按钮,为什么这么划分,可以结合接下来的内容进行理解。


1.引导型按钮


作用:引导用户进行操作,一般会有下一步对应的反馈或者操作,对用户操作流程有指引的作用。

应用场景:促销活动类页面、登录、注册等功能类页面


·活动类页面


如下图活动页面中,按钮是没有做禁用处理的,当用户到达活动页面,所有的内容都是正常显示,按钮也是正常点击的样式,用户是满怀期待进行参与的,当点击后才反馈活动尚未开始,对用户会造成心理落差,除非是大品牌活动或者活动本身对用户有极大的吸引力,否则,用户再次进入活动页面的可能性很小。这种情况下按钮不需要使用禁用样式直接隐藏按钮就可以了,但是要透出活动未开的提示,等活动正常进行时按钮再展示出来。



所以大部分情况下可以按照有按钮即可点击,不可点击即无按钮的原则处理活动页面的引导型按钮。


特殊情况下引导型按钮也可以用禁用的样式展示在活动页面。


下面这个活动页面就是一个禁用样式应用的很好的例子。顶部活动倒计时,首先告知用户活动未开始,通过下面的内容用户会先了解活动内容及流程,“立即邀请”是具有指引性的操作按钮,禁用的样式显示出来可以提前告诉用户获取抽奖的方式,抽奖转盘开始抽奖按钮上toast遮罩提示,既展示了奖品,同时再一次提示用户活动还未开始,从上到下的页面都是一个很友好的展示形式,用户心理上不会产生落差,反而会增加好感。


 


活动页面的引导型按钮是否显示禁用样式的判断原则:对用户的操作是否有正向的引导作用,是否能增加用户对页面或者活动的快速理解提升页面的友好度。


·功能类页面


最常见的就是登录注册页面。页面里按钮的处理方式一般有以下三种:


1 按钮正常显示,点击页面通过表单错误提示样式反馈。

这种处理方式在逻辑上是没有问题的,但是在用户体验的本质上是不合理的。具体的思考逻辑在这里就不做详细分析,大家可以参考用户体验设计相关的知识进行思考。



2 按钮是灰色禁用样式

首先灰色给人禁止使用、没有权限、功能受限的感觉,而这里的下一步只是暂时无法使用,所以灰色一定不是最佳的禁用样式。



3 按钮是常规色禁用样式

常规色按钮禁用样式首先给人一种条件暂时没有满足,暂时无法使用的感觉,样式上也可以加强用户对该产品整体的认知,从交互样式到整体的用户体验都是比较好的。



功能页面的引导型按钮禁用样式应用原则:按钮要有禁用样式,禁用样式使用常规色更合理。当样式上无法取舍时,回归使用场景,好的用户体验是最有说服力的判断依据。


2.功能型按钮


严格上来说,功能型按钮和引导型按钮没有太大的分别,引导型按钮其实也是功能型按钮。但是我们在这里要把功能型按钮单独拿出来的目的是让初入UI设计的小伙伴在做复杂的功能页面时,能理解功能页面里为什么会出现禁用样式的按钮,以及它们出现在页面的作用。


·不可用,且不使用禁用样式按钮

作用:引导用户进行付费类操作

应用场景:休闲类软件


例如音乐类软件,我们在没有开通对应的音乐包下载音乐时,下载图标是正常显示且可以点击的,点击之后会有提示开通音乐包的弹窗出现。如果你特别想购买这首音乐或者别的渠道也下载不到资源,只能在这里购买时,接下来就是点击开通、付款,然后可以欣赏你购买的音乐了。如果你只是随便听听不想购买,那么就关掉弹窗去听其它可以听的就可以了。在这个休闲场景和操作过程中,不会消耗用户太多的耐心和占用用户太多的时间,同时也明确的让用户了解到了购买的原因和流程。体验是友好和流畅的。



所以对于休闲/娱乐类的软件,禁用按钮正常显示、可点击,既明确了用户的操作方法或费用明细,同时也达到了软件快速推广、精准推广的目的。


·不可用,禁用样式展示的按钮

作用:引导用户进行付费类操作

应用场景:店铺管理等工具类软件


这类按钮出现的目的首先也是吸引用户升级后使用,但是这类按钮要用禁用样式,要在用户不点击的情况下明确告诉他这个功能目前你是没有权限使用的。因为这类软件是和用户的工作场景相结合的,高效、易用是保证用户体验的前提,如果在页面内放置了可点击却不能使用的按钮,点击后提示他去付费,会影响用户的工作效率,有时甚至是做了一些前期操作后才发现功能不可用,增加了用户的工作量造成用户对软件的好感度。下图中就是店铺管理类的软件页面中禁用按钮应用的比较好的例子。




同时禁用按钮可以结合一些交互样式让它发挥出现在这里的最大效果,如下图。




所以,对于操作效率及易用性要求高的管理类工具禁用按钮一定要用明显的禁用样式提前告知用户此功能不可用,同时可以配合轻交互如toast、气泡等形式的交互提示引导用户的付费操作,以达到运营推广目的同时也保证了良好的用户体验。


3.工具类按钮


作用:用户进行软件内操作的工具入口。

应用场景:Photoshop、Figma、Word等软件


我们经常会在这类工具类按钮里发现一些功能不可操作。



当我们在画板内绘制出图形式,工具栏上的操作按钮也会对应解除禁用样式。




那么之前的引导型按钮的逻辑,有按钮即可点击,不可点击即无按钮的原则是否适用于工具类按钮呢。答案是肯定的,可以适用。


读到这里你一定会提出质疑,功能类按钮不管禁用与否都一直在固定位置展示,是大部分软件多年以来固有的样式,比如Word、Excel等,虽然有的设计软件也支持工具面板的自定义,但是在不可用的状态下,工具也不会被隐藏。原因是操作频繁,用户需要反复使用,对界面与工具位置摆放的熟悉度也是这类产品的易用性的保障。


但是有些经典又合理的创新往往就是颠覆大部分用户长期的认知,但是颠覆不一定就是对过去的否定。工具栏被固定,所有工具按钮在固定的位置上,确实是高效率的一种交互方式,也是用户使用习惯的统一。但是如果你拿出一个你经常使用的软件研究一下你会发现,常用的功能不会很多,即使禁用的功能被隐藏,常用的功能工具栏的位置也是固定的,如果他们的位置和之前发生了变化,但这个变化真的会影响你的效率吗?不会因为其它无用图标的减少而提升你的视觉辨识效率吗。


以mastergo界面为例,从上图可以看到此时的顶部内容除了固定可操作性的工具外,没有其他可操作内容。



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




这种全新的交互方式是对传统工具设计思维的挑战,而且在更多的工具类软件设计中慢慢流行起来。当然颠覆设计不是目的,更合理、更易用才是设计创新的目的。

 


总结:


1.活动类页面遵循有按钮即可点击,不可点击即无按钮的原则特殊情况下活动类页面可配合操作方法使用禁用样式的按钮;


2.休闲类软件中,不可用功能不使用禁用样式可正常点击,以达到引导用户付费使用的目的;


3.管理工具类软件中,不可用功能要使用明确的禁用样式提前告知用户功能不可用,同时可以配合轻交互引导用户付费操作。


4.主流工具类软件默认所有按钮都展示,不可用按钮禁用样式展示。全新的交互方式在工具类软件中已经在慢慢被使用,即不可点击的按钮不出现的交互原则;



【声明】内容源于网络
0
0
爱云画AI
爱云画AI是一个专注于电商领域的AI在线作图工具,上万款免费场景满足你电商工作中的各种设计需求,高质量商品图 | 模特图 | 素材,利用AI工具轻松高效的完成工作,随时随地,省钱省力! 🔗aiyunhua.com
内容 80
粉丝 0
爱云画AI 爱云画AI是一个专注于电商领域的AI在线作图工具,上万款免费场景满足你电商工作中的各种设计需求,高质量商品图 | 模特图 | 素材,利用AI工具轻松高效的完成工作,随时随地,省钱省力! 🔗aiyunhua.com
总阅读0
粉丝0
内容80