接受伪按钮

九月 24th, 2006 39 Comments »

这是一篇关于文字链接与按钮的分析。这里所说的“文字链接”是指那些点击后能打开一个界面的文字,他们只能打开一个界面,没有起其它功能。“按钮”是指具有表单提交、下载等功能的可点击的元素。实际上,这样的定义本身就是区分文字链接与按钮的一种观点。也是window图形用户界面的设计标准。而在网页上,这样的区分并不总是合适的。

在网页的设计中,经常会遇到这样的问题:“这是一个很重要的文字链接,我们是不是应该把它做成一个按钮,这样会更突出……”

关于按钮的问题,我曾经写了一篇《谁是按钮?它在干嘛?》,先简单复述一下:目前网页上普遍的有一些按钮并不是真正意义上的按钮,只是一个文字链接,我称他们为“伪按钮”。伪按钮不应该使用按钮的表现形式。

那篇文章里并没有给出一个更好的方法来表现伪按钮,现在,我不得不说,或许伪按钮还是要用按钮的形式来表现。

伪按钮需要存在
在现实生活中,电视遥控器上有按钮,门铃是按钮,手机上有按钮,您面前的电脑键盘上也是一大堆按钮。按钮清楚的告诉用户:“这个可以点击。”正是因为它表达的够清楚,所以在电脑的图形用户界面中也模仿现实的样子,出现了按钮。按钮最本质的含义是“可点击”,而点击后的效果则是后来被设计师强行赋予的。也就是说,我们完全可以说,按钮并不意味着将要提交什么表单。这样说来,将一个很重要的文字链接表现为按钮似乎也没什么不对的。

一个网页不能期望着自己的用户象使用word软件那样熟悉自己的网页,网页设计面临的总是比较“新手”的用户,绝大多数页面对于用户来说都是陌生的,在面对一个陌生的页面时,一个斗大的按钮无疑是一盏指路的明灯。

没有其他的表现方式,伪按钮还只能是按钮的样子
一行带下划线的蓝色文字也表示可点击,但是,如果把他们做成按钮会更突出、更抢眼。
uploads/200609/24_154507_1.gif
显然,把这个文字链接改成按钮后,在页面上会更突出。但是google却没有这样做,实际上,google的网页上根本没有伪按钮,他们不会把一个文字链接化妆成按钮来引导用户。而这种做法显然不能满足大多数网站的需求。即使是象flickr这样设计的很精良的网站也需要下图这样的伪按钮:
uploads/200609/24_154531_flickr.gif

或许可以把文字链接图形化?但是图形化后又很容易被误认为是广告。

由于找不到一种比按钮形式更好的表达方式表示“可点击”,伪按钮还只能是按钮的样子。而伪按钮的存在违背了图形用户界面的设计标准。那么,

尝试着区分真、伪按钮
“设计两类不同样式的按钮”—这似乎是个好办法。然而,却并不容易做到。首先,需要设计出两个样子不同的图像,让用户知道这些东西是可点击的,是按钮。它们应该是有立体感的,上面还要能足够清楚的显示文字。

除了看上去像是能点击的,他们两个还要表达出文字链接与按钮的区别:文字链接指向另外一个界面,点击后不会出现什么严重的后果,如果您后悔了,那就点击一下浏览器上的“后退”按钮。而按钮就比较恐怖了,点击后,邮件将发送到对方的邮箱中,文章将被成千上万的人看到……两个这么抽象的概念,要想通过两个方寸大小的图像表达出来是很困难的,yahoo进行了偿试:
uploads/200609/24_154610_yahoo.gif
在鼠标经过“My Yahoo!”的时候,会出现下划线,与这个页面上的其他文字链接的样式一样。看上去是一个按钮,但是不失时机的告诉用户这个“按钮”和页面上的其他文字链接有某些相似的地方。而“Web Search”这个真按钮就没有类似文字链接的表现。设计者用这个下划线来区别真按钮与伪按钮。

另外一种相似的做法是,按钮的文字上始终显示下划线。虽然具体的形式上有些不同,但是思路是一样的:让伪按钮既有文字链接的样子又有按钮的样子。

然而这样的设计恐怕还不足够好,多数用户首先会看到那是一个按钮,如果有耐心仔细研究一下,恐怕也只会觉得那是个有点儿奇怪的按钮,即便确实分辨出了这个“My Yahoo!”与“Web Search”有所不同,又有几个人能明白这样的区别意味着什么呢。

这样的偿试目前为止并不成功。

还有一个办法!
“不区分真按钮与伪按钮,把他们都做成一样的按钮。”这是amazon.com给我们提供的解决办法。

既然那些重要的文字链接需要看上去象个按钮,我们又很难让用户理解一个页面上有两种不同性质的按钮。那么,就不要区分了。给用户看到的只是文字链接和按钮两种元素。而点击按钮将出现的后果由按钮上的文字来说明。
uploads/200609/24_154640_amazon.gif
这样做虽然不符合widow图形用户界面的设计原则,但是在很大程度上却是符合用户使用心理的。我们不可能幻想着用户在浏览一个网页的时候知道什么叫<form>,用户也不会去判断一个按钮是否会把一些数据写入数据库。用户面对一个页面的时候,会被页面上的按钮吸引,阅读上面的文字,确定那个按钮是自己想要做的事后,就点击了。那么,不管是“进入结算流程”还是“登录到我们的安全服务”只要在点击前清楚的交代了点击后的效果就够了。样子并非一定要不同,也并非一定要相同。而相同的好处在于减小了用户的学习成本。不同的网站上的按钮样子往往是不一样的。用户面对一个页面的时候先要学习,认清什么样子的东西是按钮。如果整个网站上的按钮全是一个样子,显然会更容易学习。(amazon.com上实际有不止一种的按钮,为的是区别重要性,与是否提交表单无关。)

使用这种设计方法,不用再强迫图形设计师画出两种几乎不可能画出来的按钮样式了,更重要的是,用户看到的页面更简单了。

不区分真、伪按钮的做法需要我们花更多的心思判断哪些文字链接是可以被“升级”为按钮的。因为把文字链接“升级”为按钮意味着他很重要,而一个页面上不应该有很多重要的内容。同时,按钮上的文字表述也是需要花很大精力的,尤其是对于我们。我相信,在中国多数的网页设计师,象我一样,并不具备很强的文字表达能力。在按钮上显然又不可以长篇大论,要用几个字描述清楚点击后的效果并不简单。但是,却很必要。

需要强调的是,这整齐划一的一个按钮样式不应该是系统标准按钮,因为系统按钮是“真按钮”的标准造型。想象一下,把“了解更多”弄成一个系统标准按钮的样子,绝对会比阿扁现在的言行更可笑。

总结一下
要解决真、伪按钮的问题有两个办法,方法一.是象google那样,文字链接就是文字链接,再重要的文字链接最多也就是显示的稍微大一点儿。这种方法通常不会通过评审的,那么,可以试试第二种方法,不区分真、伪按钮,只使用一种按钮样式,斟酌适用范围,确保页面上重点突出,而不是重点泛滥。推敲文字表述,确保清楚的描述点击的后果。

我不得不承认,这种办法是与《谁》一文中相悖的。但是,我仍旧认为,对于目前的大多数网站,这种不区分真、伪按钮的方法是最好的。

有39 条对“接受伪按钮”的评论

  1. hauy 说:

    很不错,以前几乎不会去深入考虑这类问题。

  2. demo 说:

    其实yahoo的解决方法我觉得是不错得

    按钮得外表起到了吸引作用,链接的样式又起到了解析的作用。

    就算用户没有跟真正的按钮对比过,但是当他把鼠标移到伪按钮上面,而看到文字和鼠标样式的改变的时候,他已经得到足够的提示了:这是一个链接

  3. leijun 说:

    个人认为针对不同的用户群体可以采用不同的方案,很多用户在使用的过程中并不会去在意或者深入思考链接的意义,不论是文字还是按钮,都是目前流行的习惯用法,更重要得是保持风格的统一和页面的表意清晰,如果站内发生自相矛盾的问题那是最为糟糕的。

  4. ashchan 说:

    "google的网页上根本没有伪按钮"
    http://www.google.com/adsense,"申请AdSense"。这是一个伪按钮吗? [idea]

  5. 白鸦 说:

    1、首先要看我们如何定义“按钮”和“链接”
    我的定义和臭鱼的不同,所以臭鱼的这个命题不存在。
    我认为他们只是不同的视觉表现方式,有时候我们有必要根据需求选择不同的表现方式…

    2、不是所有带GOOGLE字样的产品都有google特色。
    “ ashchan ”也不一定成立。
    请看看googlecamp…
    http://hi.baidu.com/ucdchina/blog/item/987fb609d338d0246b60fbd8.html)

  6. xiaoxiao 说:

    终于发帖了啊? [lol] [lol] [lol]

  7. sume 说:

    非常精彩,谢谢!

  8. 臭鱼 说:
    引用自 白鸦
    ……我的定义和臭鱼的不同,所以臭鱼的这个命题不存在……

    应该写做:“……我的定义和臭鱼的不同,所以,在我看来,臭鱼的这个命题不存在……”

  9. 感觉 说:

    一口气看了好多文章,爽!

    非常精彩,你好厉害呀!

    教了我好多!

    [yes]

  10. xwxw 说:

    其实在制作中,只要保持表单按钮的统一性就好了,也就是说所有表单的按钮统一样式,而系统中如果要强调一个链接与其说是永按钮,不如说是图形代替原来的文本,因为图形有两个份好处,1.点击范文更大 2.看上去更加醒目。对于用户来说他们是不会区分什么按钮什么不是按钮,只要让他知道这个可以点,如果你做的醒目的话他就知道这个链接比较重要,在用户的心里模型中,这个链接的优先级就比较高,如果点的话他就会先点这个,就这么简单~!

    [heart] [heart] [heart] [heart] [heart]

  11. fung 说:

    一般用户在点击的时候不会想那么多吧,一般点之前只会考虑能否把我带到我要去的页面,而不会去考虑它们的功能区别。能清晰表达哪个可以点,哪个不可以点就可以了。

  12. Shark 说:

    一般来说,大多数用户(至少我的用户)是不会考虑这些“系统”方面的问题,他们根本不关心这是“提交表单”还是“简单的跳转”,对他们来说,重要的是“页面上的内容变了”和“我要的东西出来没有”。所以个人觉得讨论这个命题好像意义不大。

  13. 林子 说:

    林子(E鹰网络品牌) http://www.yw11.com 祝站长中秋快乐!网站做得不错,有空来我的小站坐坐!

  14. GTXS 说:

    用户更关心的是文字链接、按钮 点击之后所得到的结果,从web体验来说都是打开(刷新)了页面,对于用户而言都是一样的效果。把表单的提交按钮改为文字链接用户也一样操作,只是可能会不容易找到。
    所以个人认为web按钮的存在意义在于突出显示这个点击很重要。而不是去区分什么真伪或者背后有什么系统功能的不同。
    比较喜欢amazon的方式。分出功能的轻重使用不同样式的按钮风格。

  15. 天马行空正版 说:

    每个设计师有自己的风格,整体性和统一性很重要,同时也要针对系统提供的服务来定义,个人认为没有必要对按钮或连接做太多的剖析

  16. ddk 说:

    按钮的定义是什么?

    在我认为 链接本身就是按钮的一种。 是一个用户可以进行点击交互的对象。

  17. ddk 说:

    我想说的是没有必要发明一个 伪按钮 的新名词故弄玄虚。

  18. 路过的 说:

    按钮大多数是存在于表单中,链接大多数出现在文字中。不知道你这篇我呢姿势何意思

  19. 风的影子 说:

    就像在a标签中加onclick一样,如果按钮和链接是一样的话,那就没有必要出现两个东东了。
    伪按钮这个词有意思,如果从字面上看的话,就是一个看上去像按钮的但不实现一般按钮功能的按钮。那如果一个伪按钮实现了一般按钮的功能,那就不能算是伪了吧?

    所以应该是:不实现按钮功能的就不应该以按钮的形式表现,不管是不是伪按钮。至于什么是按钮的功能,大家可以讨论下。最简单的像提交表单、执行操作。

  20. 幻沙 说:

    白鸦 2006-09-25 10:54:30
    1、首先要看我们如何定义“按钮”和“链接”

    请问是不是可以这样理解 “按钮”是页面内的交互 “链接”是页面直接的交互

  21. badst 说:

    在用户点之前交代清楚就是了,我觉得对此做这么长的评论真的没有必要,不过还是钦佩你的文笔,一下能写这么多。
    按钮不是连接,但也可以成为连接,主要就是为了强调。
    但却有背与Zeldman的《使用有意义的标签》,按钮到底是用来做什么的?只是Form里的Submit吗?

    https://www.google.com/adsense/
    是伪按钮,真按钮真链接。

    http://get.live.com/getlive/overview
    也是伪按钮,假按钮只是做的象按钮。

    没什么大不了的,访问者不会在乎这些的。
    如果是按钮就应该像按钮本来的样子,Google的按钮没有任何样式。他告诉我们:这是一个按钮,我将用你提供的信息带你去你想去的地方。
    而如果像你的blog这样,估计会有些人评论后找不到提交按钮,以为那只是一个图片。

    真按钮变成假按钮了,哈哈!

  22. sheng 说:

    完完全全的吹毛求疵

    文章假设用户都是从远古来,从来没有见过现代的任何东西,包括计算机和互联网,如果真的这样,那么这篇文章挺有学术价值。

    但事实上,设计讲究的是脑子里的概念和现实东西的映射,而超链、按钮已经在受众的脑子里形成了很强连的现实映射了–即可以点击的东西,至于之间的细微区别,基本上已经不会再有太大的影响,只是在必须特别强调的时侯不要用链接罢了。

    这种文章让我想起了孔乙己告知我们其实我们并不知道回字的四种写法,以及之间的细微差别

  23. coletree 说:

    同意楼上的,很多时候是做交互的这些人把许多问题想复杂了,因为太专注于这个行业。表现在这个问题上:我觉得如果是“提交”这样的按钮的话,之前肯定有需要用户填写的内容,那已经提示了后面可能产生的效果。

    实际上都是超连接而已,如果之前用户没有填写什么,谁会去想他是按钮还是文字连接呢? 反正就是连接就是了,也不会有什么坏的后果。

    按钮在吸引用户方面起的作用更大,伪按钮在WEB小广告也有很好的运用,虽然有点耍人的意思。 [smile]

  24. 叶子风铃 说:

    不同意楼上某些人的观点,交互之所以存在是有他存在的意义,交互是为了给用户更好的体验,而不是什么"复杂化".

    个人倾向于amazon.com的做法,不管是真按钮还是伪按钮,他的目的都是为了给用户一个视觉上较为醒目的提示,说明这个内容是重要的。所以根据信息的权重来设置按钮的样式感觉更为合理一些。

  25. aghost 说:

    吹毛求疵,我想没什么不好

    之所以你们这么想

    我想是因为大多数人都去模糊了两者之间的概念。

    按钮就是按钮,连接就是连接。

    效果或许一样,但是意义或许不同。

    愚见。

  26. […] 4、在超链接和文本混排的情况下,下划线更容易让我们去点击。 5、独立超链接,不加下划线不足以“明示”。 6、需要特别突出显示的链接,必要的时候使用“伪按钮”;关于伪按钮的问题,臭鱼在其接受伪按钮已阐述的比较明确,在此不再赘述。 […]

  27. 最老古董的按钮 说:

    看了很受用,我之前还不知道什么伪按钮
    不过现在知道了,也了解了
    说到最后的解决办法我觉得两者都不错
    第一种是土了点
    第二种相对漂亮点

    链接VS伪按钮?
    你选哪个,我觉得想google那个样子比较好
    如果要是想突出显示的话我觉得并非一定需要伪按钮
    你完全可以换种字体,改个大小,变个颜色,加个重点标志的线来告诉浏览网页的人啊
    伪按钮的的作用是什么?
    好象就是提醒或者提供给我们更多的信息,还是表单的需要?

    不过网页上的东西太多变化了
    我现在又想到韩国的网站上对表单方面的按钮很多都是伪按钮
    这也是适应页面的需求吧……

    顶楼的帖子

  28. Juno 说:

    我觉得象Yahoo那样的做法比较聪明,杨了按钮的长,避了超链接的短。

    不过我会让设计师在按钮上加一个箭头(有click fo more的感觉),做为伪按钮的区分于普通按钮的标志,试试看。如果此法不通过usability test,那么我会采用yahoo的方法.

  29. 抓错之王 说:

    LS扬长避短的扬打错了

  30. arigstou 说:

    不认同,如果这样的话,css就没必要出现很多新的伪类了

  31. arigstou 说:

    当然也可以在css中存在更多button的伪类,但是button在css中没有单纯的标签类,所以a是最好的方法

  32. 反反复复 说:

    目前大多网页都存在伪按钮。。。这已经是被大众所接受的。正如上面朋友说的,孔认为“回”字有四种写法。。。时代在进步,谁还去记他们到底是什么写法呢?如果思想一直停留在传统上。。。谈什么创新~

    从你的blog样式上来看,我找不到任何设计的感觉,只是单纯的图文堆砌!论用户体验,这是非常糟糕的!

  33. […] 第一步.未操作前;操作可识别,结果可预知。 这是两个准则。操作可识别,是说按钮应该象按钮,链接应该象链接。《麦当劳两则》中的第一则提到了“链接应该看上去象链接”;第二则提到了操作应该给用户明确的提示。 按钮应当是有立体感的,看上去就感觉像是可以点击的。《接受伪按钮》《谁是按钮?它在干嘛?》都是在说有关按钮的事儿。不过与现在说的这个主题似乎不是很一致,还是别去看了。 […]

  34. 匿名 说:

    一个网页不能期望着自己的用户象使用word软件那样熟悉自己的网页
    这句话不错

  35. 关于超链接的下划线 | 第一站长站 说:

    […] 关于伪按钮的问题,臭鱼在其接受伪按钮已阐述的比较明确,在此不再赘述。 […]

  36. facebook login 说:

    好贴有关 ??????? » Blog Archive » ?????. 我印象非常深刻,你已经把写这个故事的时间和精力。我会给你一个在我的博客社会媒体的联系。所有最优秀的!

  37. coupons 说:

    给我留下了深刻的印象,阅读这样一个强大的故事讲述 ??????? » Blog Archive » ?????. 我会后对我的优惠券网站链接到这个博客帖子。我会回来的阅读更多.

  38. 交互行为三部曲 | MoonCLoud 说:

    […] 第一步.未操作前;操作可识别,结果可预知。 这是两个准则。操作可识别,是说按钮应该象按钮,链接应该象链接。《麦当劳两则》中的第一则提到了“链接应该看上去象链接”;第二则提到了操作应该给用户明确的提示。 按钮应当是有立体感的,看上去就感觉像是可以点击的。《接受伪按钮》《谁是按钮?它在干嘛?》都是在说有关按钮的事儿。不过与现在说的这个主题似乎不是很一致,还是别去看了。 […]

  39. 关于超链接的下划线 使用说明 – 阿斯达 说:

    […] 关于伪按钮的问题,臭鱼在其接受伪按钮已阐述的比较明确,在此不再赘述。 […]

发表评论

您的大名: