谁是按钮?它在干嘛?—网页按钮的功能与表现

十一月 29th, 2005 11 Comments »

目前在网页中普遍出现的按钮可以分为两类:一种是有提交功能的按钮---真正意义上的按钮;另一类是仅仅表示链接的按钮,在这里将其称为“伪按钮”。

真正的按钮

真正的按钮有两个作用:
1.实现提交功能;
2.标明当前操作的目的。

说明:

无疑按钮实现着提交功能。当用户输入了关键字后会点击“搜索”按钮,网页中将出现搜索结果;当用户填写了用户名和密码后,点击“登录”按钮,系统将打开自己的邮箱页面。

按钮上的文字说明了整个表单区的内容,比如,有“搜索”按钮的区域显然标明这一区域内的文本输入框和按钮都是为搜索功能服务的,不需要在另外添加标题进行说明了,这也是设计师为提高网页可用性而普遍采用的一种方式―――逐字斟酌按钮文字。

按钮的表现形式可以大致总结为两种:
1.系统标准按钮
2.使用图片自制的按钮

对于真正的按钮应当使用系统标准按钮还是自制的图片按钮?

笔者认为应当使用系统标准按钮。系统标准按钮的设计起源是模拟真实的按钮,无论是真实生活中的按钮还是网页上的系统标准按钮都具有良好的用户反馈。

标准按钮的优势:
1.易识别。与各式各样的图片按钮相比,在网页中标准按钮更容易被用户识别出的按钮。网页中的标准按钮与用户电脑的操作系统中的按钮表现上是一致的,这降低了用户识别上的负担。
2.操作反馈好。标准按钮具备多种状态,“正常状态”“被选中状态”“点击时状态”,多种状态使标准按钮能够传达更丰富的信息,而制作图片按钮的设计师通常没这种耐心为一个按钮制作多种状态,因为使用图片按钮多数时候是因为图片按钮更好看,而设计师并不太在意用用户的使用效率问题。使用图片制作出好看的页面是本能水平上的设计,而使用标准按钮制作易于使用的页面是行为水平上的设计(关于“本能水平上的设计”和“行为水平上的设计”理论请参见Donald A. Norman的《Emotional Design》),我认为针对按钮这个问题应该优先考虑行为水平设计的需要,毕竟按钮是网页”行为”部分(web标准将网页分成三部分:结构、表现和行为)的一个重要元素,何况在我看来系统标准按钮并不难看。

系统标准按钮也存在自己的问题:样式过于呆板,尤其是windows2000风格的按钮甚至被一些网页设计师认为是无法接受的丑陋,相比之下windowsXP式样的按钮更容易被接受,无疑多数网页设计师以及公司boss还是更关注本能水平上的设计―――好看的设计。

css可以对按钮式样进行一些个性化设置,可以改变按钮颜色、立体效果、文字大小、文字颜色。具体方法可以很容易的在互联网上找到,这里不多说了。我认为对于按钮这种程度的变化已经足够了。

我的观点:对于真正的按钮应该使用按钮这种表现形式,并且应该使用系统标准按钮。

伪按钮

在网页中大量存在这样的按钮,从表现上看是一个按钮而实际上只提供了一个链接。

起源:最初网页上随处可见文字链接,设计师为了突出其中的某些特别重要的链接,将其设计成了类似按钮的样子,使得这些链接更为突出,引导用户点击。这也从侧面说明了在网页上按钮是很醒目的元素。

现在在网页上使用伪按钮的原因更为多样,让我们来看看“民意调查”这个例子:
uploads/200603/06_231240_illus.gif
在很多网页中“提交”和“查看结果”被设计成相同系统标准按钮,然而“提交”是将用户的选择提交给网站的系统,存入数据库,而“查看结果”是打开一个小窗口显示目前的投票结果,显然将“查看结果”设计成文字链接是更合理的,设计成按钮的原因通常是为了样式上的美观:最下面一行并排放置两个按钮,都有点击的功能,看上去更和谐,但是这却破坏了用户的可操作性。

上面这个例子是由于视觉设计上的需要,而错误的使用了按钮。当然广告中故意使用伪按钮误导用户也是使用伪按钮的一个重要原因。造成伪按钮泛滥的最根本原因还在于相当多的网页设计师还没能意识到伪按钮与真正按钮的区别,在设计过程中随意的使用按钮这种表现形式。

伪按钮的负面效果是:使用户难以辨别哪些是真正的按钮。用户在使用一个滥用按钮的网站时,会花费很多心思来区分一个文字链接和一个伪按钮的区别,而实际上区别仅仅在于伪按钮更为重要,设计师希望伪按钮的链接能引起用户更多的注意。

从网页可用性角度考虑有必要将链接与按钮区别开来,因为点击按钮代表提交一个表单,这不仅仅是网页的技术模型,同时也是用户的心理模型。

我的观点:伪按钮不应该使用按钮表现形式,更不应该制作成系统标准按钮。因为这将给用户造成误解,降低用户的使用效率。如果要使链接更为突出,网页设计师完全有义务花费更多的心思进行设计,更出色的表现这个链接,而不是偷梁换柱的模仿按钮,这种带有欺骗性的做法除了给用户造成误会还会使用户产生被愚弄的感觉,激怒用户显然是不明智的。

有11 条对“谁是按钮?它在干嘛?—网页按钮的功能与表现”的评论

  1. 匡扶 说:

    让浏览者预先知道 他的每一个操作会产生什么样的结果是必要的。

    但是很多不是太重要的时候,是可以进行妥协的。但就当前这一问题点看,我个人觉得应该把提交作为按钮放在右下角,而查看结果作为超连接文本样式放在按钮的左边。对外观是没有多大影响的

    因为就人的视觉来说(从左到右书写的文字)一般情况下他看文字最后的落点多数情况下是在右边。

    备注:我刚刚看到这里有重置按钮,我个人觉得任何情况下都不要提供这个按钮,没谁会打了半天字然后觉得都需要删除——即使我不想发布了我也直接关闭浏览器就是。

    我为了证实下这个重置是不是真的去掉我写过的内容,所以我把文章都复制了再点了下——结果我发现连上面的发布人和邮箱都没了。。。。。看来我猜的还不够准确。不过我想一般对可用性这些有兴趣的都不会是程序员,所以这个BLOG多半也不是臭鱼写的吧。我只是提一下。什么时候我要有自己写的BLOG就好了,别人的用起来不爽

    不过我最后有一个问题,我并不能确定
    比如我有一个删除的功能,删除文章,点击之后直接删除。我是选择按钮好呢还是使用文本超连接呢?如果我使用按钮个人感觉同一个页面太多按钮是不好的。而使用文本超连接,我下意识又会觉得应该会出来一个页面告诉我是否确定删除。 不过我目前暂定是使用文本超连接,并且点击后直接删除。

  2. 匡扶 说:

    关于你的BLOG的的建议,将所有你原来站点的文章全部删除(如果你没有其他手段进行跳转之类的话),迟早那些是要丢弃的,越早丢弃越好
    ,虽然会造成搜索里的一些空连接

    如果你暂时都不想失去,请把到新站的连接设置为在本页打开。我就因为没有注意到新旧版本的不同,而把留言都发到了旧版本,这也算是一个可用性问题——起码经过我无意中的测试证明了问题的存在
    哈哈

  3. 臭鱼 说:

    To:匡扶
    多谢你的建议,说的有道理,我没注意到这个问题。
    已经把把原来blog中的那两个链接改成“_self ”了。

  4. momoc_a » 按钮上的内容 说:

    […] 很多人主张区别链接与按钮。这里,思域有一篇”关于鼠标点击对象:哪些应该是按钮,哪些应该是链接的说明。” 臭鱼的”网页按钮的功能与表现“,将按钮分成真正的按钮和伪按钮两类。 […]

  5. 空格 » 按钮上的内容 说:

    […] 很多人主张区别链接与按钮。这里,思域有一篇“关于鼠标点击对象:哪些应该是按钮,哪些应该是链接的说明。” 臭鱼的“网页按钮的功能与表现”,将按钮分成真正的按钮和伪按钮两类。 […]

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

  7. Van 说:

    我一直觉得“按钮表示提交表单”这个判断只存在于对网络很熟悉的人群当中吧。对于大部分人而言,他们理解按钮会参考真实世界的按钮:启动某项功能。
    所以我一直倾向于将表示操作的都用按钮,比如“删除”之类,而打开一个页面则使用超链接。

  8. 交互行为三部曲 | myhaha.net 说:

    […] 按钮应当是有立体感的,看上去就感觉像是可以点击的。《接受伪按钮》《谁是按钮?它在干嘛?》都是在说有关按钮的事儿。不过与现在说的这个主题似乎不是很一致,还是别去看了。 […]

  9. www.liquan.org 说:

    老帖子照样很精彩

  10. www.qqfenzu.cc 说:

    就爱看这样的好文章

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

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

发表评论

您的大名: