按钮表状态还是表动作?

记录于

关键字:按钮  状态  动作
在网页中经常见到两类不同的按钮。一类表示当前所示的状态,一类表示将要进行的动作。(如下图)

状态+动作
 
那么,同样是icon类的按钮,为什么有的表状态,有的表动作?

分析两类按钮的使用场景:
场景一:声音开关的按钮


 
场景:这组按钮首先表示当前的状态(声音是开着的,还是关着的),点击以后切换到另一个状态。
分析:声音在视觉的表现上不能直接感知,因此需要一个图形化的icon表示当前的状态;左侧的图标表示当前音乐是开启的,点击后关闭声音。如果说只表示当前状态,那么点击后会产生什么操作就比较难猜,没有一个明确的引导。

场景二:视频播放停止的按钮


 
场景:这组按钮不表示当前的状态,而是表示用户可以进行的操作,跟第一组的表意是反着的。
分析:画面是否在播放是可以直接在屏幕上感知的,因此不需要再讲述当前是怎样的状态,而是提示下一步可以进行的操作;

讨论一下,什么样的体验和表现才是比较好的呢?

1) 其实,如果先说状态,再说动作,用户会更明白,比如一个页面的声音状况可以通过一个icon说当前是怎样的,然后再通过一个icon来说你可以怎么样;
具体的表现就是“当前是怎么样的+可以怎么样”

2) 这样再看来,其实场景一是省掉了后半句(可以怎么样),场景二省掉了前半句(当前是怎么样的),如果实在是界面上位置稀缺,不能像把两种icon都做出来,那是不是可以先判断在当前的场景下用户是更需要知道“可以怎样”,还是“当前是怎样的”。

3) 由此再看其他场景中的设计,比如下拉列表

          

  在前面的部分表述了当前的状态,向下的箭头按钮则表示了可以进行的操作,这个就比较接近于完全展现“当前是怎么样的+可以怎么样”。

4) 生活中,类似“可以怎么样”的场景多用于电器/物品的操作,有极强的状态提示,所以比较关心的是“可以怎么样“。例如插板的开关,有按下去的效果。

按钮来操作是不是更明白一些呢?大家是否有不同看法。

  • http://dindant.com Vincent.H

    声音是可以用听觉感知的,只是因为没有声音的时候系统不一定处于静音状态,所以需要在视觉上加以辅助,帮助用户去判断。

    “当前是怎么样的+可以怎么样”或许可以让ICON显示当前怎么样,鼠标移上时,通过触发动画去帮助用户了解可以怎么样。但这样就会降低可用性,无法一目了然。

    个人觉得可以使用两个ICON表示两种状态,按下“||”时“1>”就弹起来~互相切换就OK,毕竟电脑屏幕那么大,不像手机和其它家用电器的操作区那么小。

    在家用电器中,按钮统一表动作,按下去时为运行,弹起时关闭,满好的。很老人家的认知。

  • cranelet

    归纳的好,当我更换手机时,发现为了开关声音:“打开”在这个品牌里表状态,在那个手机品牌里表动作,于是,很别扭

  • 嘟嘟

    很精辟的。欣赏之

  • 轻疯自在

    项目中遇到同样的问题,更可怕的是按钮中不仅有ICON,还有文字,结果是ICON表状态,文字表实现,关注大家的讨论,关注大家的倾向。

  • 小强

    这个问题很早就困惑我(一个网民的身份)了,还有一个方法就是把两个状态同时列出,让用户选择方向即可。

  • http://www.at9t.com at9t

    应该是表状态?

  • jsz

    这个,alan把控件分为,命令,选择,输入,显示控件,像上文讨论的播放与声音,就是命令,与输入控件的区别,下拉列表的那个例子属于选择控件,这样会比较容易区分理解

  • askaqing

    作者对按钮的设计最终提出了可行性方案,思路清晰。有所收获。thanks a lot

  • 小南瓜

    我觉得在同一个软件 界面中有的是“表示当前的状态” 有的是“可以怎么样” 对于不熟悉的人很容易弄混的 我觉得统一点还是比较好的 平时在线看视频的时候 电脑卡时 我就经常的分不清 它现在是播放状态还是暂停的 经常是乱点 因为这些小的按钮没有人去研究它 它就是为人更方便服务的 如果说一个小小的按钮在使用前还要想他的功能 那就太麻烦

  • 小南瓜

    我觉得在同一个软件或是界面中按钮最好还是统一的好 不要既有“当前是怎么样的” 又有 “可以怎么样”这让很不上手 在使用前还要去了解他们的各个要表达的意思 而且如果长时间不去用就会产生按钮功能混淆了 我经常在线看电影的时候 电脑卡主了 就经常分不清楚是卡主了还是暂停就乱点 我觉得一个小小的按钮不能很方便的使用 在使用前还考虑 就有点小题大做了 这是简单的暴风影音 还是这样 那要是复杂点的软件或者是不常见的界面就给热带来麻烦了

  • 新手

    声音在视觉的表现上不能直接感知,因此需要一个图形化的icon表示当前的状态;左侧的图标表示当前音乐是开启的,点击后关闭声音。如果说只表示当前状态,那么点击后会产生什么操作就比较难猜,没有一个明确的引导。

  • 新手

    上面的那句话看不懂啊

  • http://www.gu818.cn/ 林子

    不错,很喜欢看你写的东西,能学到不少东西

  • alps

    1楼2楼说的都是一个“一致性,consistency”的问题~·

    尤其是在导航里,如果某些信号是(如icon)引导用户得出不一致的信息(判断/结论/逻辑),那这就是所谓的缺乏一致性(inconsistencies) ~ 会导致用户极大地困惑(confusing users),从而丧失继续使用的信心和兴趣。

    虽然导航的设计会涉及很多特性点,usibility,functionality,navigationality,consistency,accessibility,portability,….,但最核心的一定是“让 用户不用思考也能够使用”这个特性。
    隐喻(metaphor)曾是个好用的方式,但在实际交互设计中,隐喻常常会起不到相应的作用,
    如果我在“播放”键上设一个向右渐亮的箭头,用户一定会莫名其妙,这不仅因为“不一致性”也因为这里隐喻已经不适用了,就用符合用户背景知识的最广泛易识别的符号就可以。隐喻可以用在这样的场合:节省一些文字而引发用户简短思考,即“自学习”(self-learning)的过程,依靠潜在的常识逻辑(也有可能是行业/通用逻辑)完成对隐喻符号的理解和操作。
    联系楼上所说,打个比方,当电话面板的一个“绿色的,提起的,话筒”这样一个icon出现,用户意识中会理解为“可通行/允许的,拿起/拨出的,通话”这样的行为,当再次出现时,用样的认识却不成立,导致了一个歧义,这就“透透里,啃富有银”了~~ 呵呵 :P

    So,楼主所说的“当前状态–下一个操作”这是一个方向性的操作暗示,如果换个方式,将操作暗示略去,直接提示下一个状态(如“停止播放”),把操作过程留给机器完成,这样不仅面向用户的icon逻辑一致性得到提高,同时更避免了可能的困惑。

    仅供参考。

  • 木棉小敏

    这个这个,原则上表状态的比较多哈

  • cheung40

    视频播放的按钮,lz分析是说视频是否在播放可以看到,所以无需按钮提示当前状态,这只是正常的情况
    小南瓜提到的情况无疑是很好的例外的场景,就是当在线视频卡住的时候,用户就会混淆现在是暂停了还是播放中,这个时候是需要提示播放状态的

  • 饭饭叮铛鼠

    可以理解为操作可识别性的类型

  • http://www.jerry-design.com jerry

    动作一般都需要有反馈。我觉得将动作和反馈集成在一个按钮中是有优点:点击了动作后,马上能够看见反馈,这种反馈是最直接,最容易理解的。如果要通过其它方式来反馈,可能就没那么直观。假设我们不将按钮的动作和状态集成,比如声音,如果音响外设有问题,用户就比较难判断自己的操作有没成功,同样的例子还有观看网络视频,如果网速有问题,点击播放按钮,也会让用户不知道是否操作成功。当然你可以在其它地方对用户的操作进行反馈,但这个认知过称肯定比直接反应在按钮上要慢一些。
    当然这样做的问题就像文章中所说的,怎么让用户明白表示状态的按钮是可以操作的,并且对这个操作有预期。这个的确需要我们从生活的实体交互中去学习。比如电器开关、燃气灶阀门、等等

  • wayne

    这个问题的几个制约因素是:
    1. 当前用户最需要的是什么?
    2. 当前除了按钮之外的周边信息是否可以提供用户当前操作的状态?
    3. 用户是否在没有指引下也可以快速进行下一步的操作?
    综合考量一下就形成现在的状态,同时声音的例子不够典型,因为声音还有个辅助的icon,就是那个声音调节。

  • http://memoryofdust.blogbus.com/ justing

    To be or not,this is a problem.
    按键本来最开始的时候是表动作,后来人们也偶尔拿他来看状态,再后来就变态了。
    http://memoryofdust.blogbus.com/logs/70394944.html

<< 返回首页 <<   >>

关于薯片会

...
第一步骤:左手拿起薯片,右手用鼠标慢慢滑动。

第二步骤:吃下薯片(你可以不吃,咬着),然后左手、右手放在键盘位置上,把你想要说的话写上。
...

薯片会成员


臭鱼(李钊)

北京人,男,29岁
www.chouyu.com.cn


Seven

外星人,男,25岁
www.hiseven.net


tesion

很热情的同学
www.tesion.cn


Evanchen

一个真正的交互设计师,应该能够丰富设计这一概念。
www.UExperience.cn


西贝

单纯使人更加专业
www.xibeidesign.cn


艺文

用爱心规划设计
QQ:4251538


流沙

Design to change the world
www.uesand.com


yanyan

真诚是设计的灵魂
Qzone


margaret

蛋小荒—女神


vijeun

按着心里的感觉走
Qzone


vv

万年12岁

readers