按钮、状态与设计

按钮是界面设计中最常见的元素之一。比如播放器的“播放”和“暂停”按钮。也正是在使用某一款播放器的时候遇到的问题促使我记录以下文字。

这是Windows Media Player的播放控制区域。在音乐停止时,中间的播放按钮图标显示为一个三角形,这是通用的播放图标,提示用户点击按钮后会开始播放音乐。当正在播放音乐时,按钮图标则显示为暂停,提示用户点击按钮后会暂停播放。

以上设计已经沿用多年,用户也习惯了此类模式,在使用过程中完全不会多想。就如同灯的开关,按一下开灯,再按一下关灯。不过最近在使用某一款视频播放器的时候,播放按钮上图标的设置则是与上面的使用习惯相反:视频正在播放时,图标显示三角形;视频暂停时,图标显示两条竖线。因为这种设计与习惯相反,一开始让我有些不知所措,反复点击了几下按钮才搞明白。细想一下,设计师应该是想用图标表达当前播放的状态。先不说这样的思路对不对,在一个已经成熟的设计模式上做创新挑战用户习惯确实要冒极大风险,且有点不必要。

不过再深入想想,按钮这个简单的东西并不那么简单。

来看看维基百科的解释:按钮,全名:命令按钮。英文:Command Button。程序或网页最常用的一个控件。在程序中,按钮是最常用的用于触发事件的控件,也可以开始,中断,结束一个进程。按钮接受最常用的事件为单击事件(Click),按钮的状态为两种,即:原状态和按下状态。当鼠标单击按钮时,按钮处于按下状态。

按钮需要用户动作触发,然后执行命令。在网页设计中,我们常常会忘记按钮的状态,因为点击网页上的一个按钮后经常会是进入另一个界面,这个按钮已经看不到了,比如“提交”按钮。此类按钮可以叫做单态按钮,或者动作按钮。动作按钮只有一个状态。

在篇首给我带来疑惑的播放/暂停按钮是两态/切换按钮(toggle button)。除了播放/暂停,开/关也是很典型的两态按钮。此类按钮要顺利使用,需要让用户了解当前的状态,同时还要给用户预期,预示点击以后的结果。音乐/视频正在播放时,用户能够感知到,因此不需要在按钮上额外表示当前状态,只需要提供预期即可。因此在播放时,按钮上显示暂停图标预示点击按钮将暂停播放,是正确且符合使用习惯的设计。灯的开关也是如此。

正是因为用户常常可以在不需要额外设计的情况下就可以感知到当前状态,设计师也常常忘记了状态的存在。可以设想以下场景来证明状态的重要性:假如一个房间没有窗户,关上门之后无法看见灯光,灯光开关设置在室外。在关门之后,要求用户在室外开启或者关闭室内灯光。因为无法知道灯当前的状态,如果开关按钮上也不提供状态,用户将无法完成这个任务。如果将开关设计成下面这样,用户就能顺利完成任务了:

因此,在界面设计中常常会看到运用颜色、图形、文字、提示信息等多种方法来达到按钮设计的目的。比如上面说的Windows Media Player播放按钮,当鼠标放在按钮上的时候,就会显示按钮执行动作的提示。而且,就算这样用户也可能需要反复尝试几次之后才能正确使用。

对于两态按钮,目前并没有统一的设计原则,从以往的设计实践中可以总结出以下方法:
1)在当前状态很清楚的情况下,直接预示动作结果。比如播放/停止按钮。
2)显示当前状态,点击后切换至另一状态。比如手机界面常见的WIFI开关。

无论采用哪一种设计方法,都要综合考虑,遵循用户习惯、业界标准、平台原则。

延伸阅读:用户界面设计中“状态”和“动作”的表达

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,636评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,890评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,680评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,766评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,665评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,045评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,515评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,182评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,334评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,274评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,319评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,002评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,599评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,675评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,917评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,309评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,885评论 2 341

推荐阅读更多精彩内容