State-Switch Controls——状态切换控件,该怎么使用?

1 评论 4836 浏览 8 收藏 8 分钟

编辑导语:如何利用好按钮设计,帮助用户更明确、更清晰地了解“状态”,避免产品使用过程中的操作失误?这要求产品在设计过程中,更好地应用状态切换控件。本篇文章里,作者总结了状态切换控件的应用策略,一起来看一下吧!

一、背景

按钮在用户界面随处可见,是通过单击来触发行为的组件。大部分时候我们都不会对按钮的使用产生困惑,点击“查看”按钮就会触发查看,点击“搜索”按钮就会触发搜索。因为它们都表示“动作”,用户很容易理解之后会发生什么,但是我们仍然能看见非常规的按钮。

下面是两种按钮的例子。

下左图是腾讯云的“开始个人认证”的按钮,上面的文案表示了点击之后的状态。用户点击按钮后跳转至另外一个页面,然后开始填写个人认认证的相关信息。

下右图“bilibili视频播放器”中的“静音”按钮不同,它表示当前静音的“状态”,而不是静音的“动作”。并且点击后会切换成正常喇叭的图标。不一样的处理方式可能引起用户的认知错误。

这引出了我们今天要讨论的主题,如何让用户更清晰地理解“按钮”的含义,特别是那些表示“状态”的按钮。

二、状态切换控件的两种情况

1. 两个状态,两个元素

Tesla车子的开关有两个状态,下图是Tesla app在iPhone中的界面。上面的“锁”图标是否打开用来表示车子目前的状态。下面的按钮表示“动作”,暗示了下一个状态。例如上面“锁”图标是关上的状态,只要点击下面“Unlock”的按钮,就能把锁打开。

2. 两个状态,一个元素

有时候我们能看见一个控件,既是表示现在状态,也是一个行动点。比如下面Bilibili视频播放器的音量控件,“未静音”图标表示现在是“未静音”状态,点击之后视频会静音。这与“动作”按钮逻辑不同,但神奇的是我们使用起来却是非常自然。

这让我想起小时候晚上进入房间的场景。房间一片漆黑,想要开灯。我不需要思考向上按还是向下按,只要换个当前不一样的放下按下去就行了。这是因为我对周边“黑暗”的环境有明确的认识,又知道那个开关能控制电灯的开启和关闭。

同样在Bilibili视频播放器的音量控件的例子中,视频所发出的声音已经明确表现了当前的状态——声音已开启。所以用户只要知道某个东西能控制声音开关,是通过点击的方式操纵的,就能知道关闭它的方法。

但是请记住,任何类型的推论都需要时间和认知努力,而且人们往往承受着快速反应的时间压力。所以强化用户对现在状态的认识非常关键。

三、强化用户对现在状态的认识

1. 强化对现在状态的认识

1)从按钮本身强化认知

按钮的类型中有一种图标按钮,它能在较小的空间里放下更多的按钮,常常出现在工具性应用中。但因为没有动作文字说明,表现它的状态就需要新的方法。

生活中我们常常能看见实体按钮,像是下图这样老式的收音机,它通过按下按钮然后触发行为。可以发现被按下去的按钮,因为其他按钮的阴影而视觉上更深(如下右图)。

同样的处理方式我们用在图标按钮上。语雀中的Button Group的交互就模仿了上面的做法,选中加粗后会在图标的背景加层“阴影”。这表示“加粗”按钮已被按下,说明“加粗”已经生效了。

2)从环境上本身强化认知

下图是在iOS的语音备忘录中的两个按钮,其中一个是“开始录音”按钮,另外一个是“停止录音”按钮。从视觉上看,一时间很难对应上。

一旦看见下图软件的使用界面,我们很容易判断按钮的作用。下面是推论的方式。

  1. 当前状态:下右图中的波状声音很明显地说明“当前正在录音”;
  2. 行动点:有一个能控制录音开关的按钮;
  3. 结论:点击后就会停止录音。

这就是从环境上强化了“正在录音”的认知,从而理解按钮作用的方式。

2. 使用有动词文案的按钮

如果上面有表述动作的文字,用户更容易知道点下来会发生什么事情。比如下图站酷修改前的“已关注”按钮,看起来像是在描述现在的状态,但是又错误地使用了按钮的样式。

下图的“取消关注”按钮则含义明显得多,代表点下去会改变关注的状态。

有意思的是,设计者正是考虑到了使用“取消关注”按钮的话表意明确,然后反方向设计出一个表示状态的按钮来迷惑用户。用户就难知道如何取消关注了。

四、结论

让用户更清晰地理解“状态切换控件”的含义有下面几种方式:

  1. 使用有动词文案,让用户去理解文字;
  2. 从控件本身强化认知。依据用户的认知设计控件的样式,比如收音机案例中按钮的颜色变深;
  3. 从环境上本身强化认知。使用明显的视觉、听觉效果,让用户容易理解现在界面所处的状态。

 

本文由 @biubiu 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

给作者打赏,鼓励TA抓紧创作!
更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 嗯…算是比较简洁明了的设计,但是设计switch还是第一次见

    回复