按钮上的内容

最近UCDChina 以“注意界面上的文字”为主题写了一系列的文章,使我在界面文字上的使用受益匪浅。之后,我对按钮上的内容的表现也做了一些总结与分析,与大家分享并希望得到指正。

1. 不必区分按钮还是链接。(这里列举的不是对他人观点进行攻击,而只是得以借鉴。)

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

而事实上,不管是按钮还是链接,按照用户目标向导来完成任务,链接也完全可以做成按钮来实现用户目标的突出。而且并非一定能定义按钮和链接的功能,如果说按钮是为了发生“功能性的事件”而设计的话,那么链接打开一个新的页面是否也是一个功能性的事件?所以,为了突出让用户完成当前页面重要的功能,哪怕只是个链接,都可以从视觉和表意上,通过按钮来实现。当然,不主张在一个页面使用非常之多的按钮。

如淘宝的商品页上,为了让用户方便的找到当前商品的来源等与店主的相关信息,他们将以前的链接改成了按钮:

 

2. 我点击会“发生什么”

目前,各网站上的按钮上的文字内容没有一个主观的思想,想到什么就是什么,没有在文字上的太多推敲。

前面说到链接可以当按钮,但有时一串很长的文字为链接,如一篇文章标题。而按钮上的文字是需要讲究精短易懂的,能快速理解其含义。

先看几个例子的比较:

 

A:这是NOD32防毒软件在遇到病毒时的窗口,当用户遇到病毒时,会有些恐惧与谨慎,他们想快速的病毒拒之门外,而又不确定是否对系统本身会不会受到威胁。当弹出这个窗口时,会对这个“停止”按钮产生有两种疑问,点击了这个按钮是停止软件的阻止?还是停止病毒的威胁?

 

B:仔细看这两个按钮上的文字,“写日志”是从QQ空间里截来的,有谓语和宾语的,当然主语就是用户自己“我”,组合起来就是“我写日志”;“购买”是从淘宝的商品页面上截的,却只有一个谓语(动作),可以完成的组合是“我购买商品”。但他们都恰到好处的在自己的岗位上完成自己的职责。为什么呢?后面再总结。

 

C:“点击进入”完全多余,只是增加了用户在按钮上停留的时间。

所以,通常情况下:一个按钮,结合页面上的其它交互和信息组织,要能恰到好处的组合成一个完整的句子“我点击会发生什么”,而“我点击”三个字是在我和鼠标之间的事,而不必要在网页上出现。所以例子C中按钮上的“点击进入”是多余的。至于什么是恰到好处,为什么淘宝上那个“购买”就只有谓语动词也能恰到好处,这就与页面交互有关了。我的分析是,当用户与页面在完成某个任务时而产生一系列的交互事件,而这个宾语便随着这一系列事件附带而来,而如果这里再加宾语的话,反而会产生回到这个系列的开始的歧义;反之,如果一个页面包含着多个系列交互事件的话,侧必须在按钮上加上宾语,以明确用户点击发生的是哪一个事件。

 

一个系列事件

 

一个页面多个事件

 

3. 以形表意

中国甲骨文便以形绘意,后来对大量文字达成共识后,也就没有太多在意文字的实际来源了。按钮也如此

 

达成共识的按钮

 

不用共识的按钮反而起不到要起作用

4. 再看一些按钮

 

 

 

27 Responses To This Post So Far(Rss)

  1. 西贝 | #1
    2008年12月7日 at 21:39

    专业,占位后细看

  2. banlon | #2
    2008年12月7日 at 21:40

    分析的很有意思。

    你的结论也很有价值:按钮中要给出一部分结果提示。

  3. xiaoxiao | #3
    2008年12月7日 at 21:42

    我的想法是:功能性的操作用按钮;页面跳转类的用链接。

    产生问题的根源在于:产品需要某个链接或功能突出,结果形成了按钮或伪按钮。这里涉及到一个标准的问题。 如果整个界面上的元素统一,这个问题不会发生。

  4. 空格 | #4
    2008年12月7日 at 21:43

    TO:xiaoxiao
    嗯。我不是指所有链接都用按钮,而只是 有时需要为了强调当前页面的某个链接。实质上是个链接,而表现的却是按钮。

  5. 臭鱼 | #5
    2008年12月7日 at 21:44

    “不必区分按钮还是链接”—我在第二篇关于按钮的小文中也是这个观点,可能是我言语啰嗦,从回复中看,大概是没说明白。

    我点击会“发生什么”—同意。我的解读是:操作前,能预知结果。让用户在操作前能猜到操作后会有什么结果,是很有意义的,也是很不容易做到的。必定按钮上的文字还要保证简洁,写成小作文显然不成。

    以形表意—可能已经算是广义的按钮了。“中国甲骨文便以形绘意”,我也曾经幻像过是不是有视觉设计师能做一套用文字字形表义的按钮。中文可能是最有可能图、文合一的了。(我只认识中文和屈指可数的几个英文)

    第四点……看到了

  6. banlon | #6
    2008年12月7日 at 21:45

    @xiaoxiao
    “如果整个界面上的元素统一,这个问题不会发生。”
    我认为这是一个理性化的设计理论,而且这种理想化的设计理论在很大程度上不是我们的用户所能接受和理解的。
    诚然,统一标准会使得区分度会很明显。但是,对于引导,对于商业价值,过度的标准可能会给予很大的限制。

  7. 兔子 | #7
    2008年12月7日 at 21:46

    我再想这个问题,按钮和链接有没有本质的区别

  8. 空格 | #8
    2008年12月7日 at 21:47

    TO:臭鱼
    关于链接与按钮,其实还是与两位没有争议的

  9. 完美的骑士 | #9
    2008年12月7日 at 21:48

    兔子
    我再想这个问题,按钮和链接有没有本质的区别

    按钮给人感觉是偏向功能型的

  10. 一叶千鸟 | #10
    2008年12月7日 at 21:48

    曾经有个观点:语义上讲,按钮必须使用在有数据提交的场合。

    后来觉得也不完全对,还没考虑清楚。

  11. 草根网 | #11
    2008年12月7日 at 21:50

    收藏至20ju.com

  12. banlon | #12
    2008年12月7日 at 21:51

    to banlon:你在打自己嘴巴,你设计hummer哪一样不是符合你们制定标准的?

  13. banlon | #13
    2008年12月7日 at 21:51

    @楼上
    用我的名字回复,BS你。

    Hummer的标准是我们制定的,但是我们制定的标准是灵活的,不是严格统一的。

    所以这个问题也不存在哇。

  14. 子条 | #14
    2008年12月7日 at 21:52

    正巧遇到这样一个实例:设计草图中 “返回操作” 与 “搜索” 同时用了按钮,并且放在一排。将“返回操作”优化为“<<返回操作”链接,放置于搜索框的上一排左侧…说不清楚了…

  15. PaPu | #15
    2008年12月7日 at 21:53

    看到友播被“不点名”批评了。

  16. coffee acidity | #16
    2010年08月30日 at 21:47

    You really make it seem so easy with your presentation but I find this topic to be really something which I think I would never understand. It seems too complicated and very broad for me. I am looking forward for your next post.

  17. George Steinbrenner Tampa | #17
    2010年09月1日 at 01:51

    Yes you learn more while you share your knowledge with others. . . . . .

  18. conveyancing | #18
    2010年09月1日 at 05:20

    I love what you guys are always up to

  19. sex toys | #19
    2010年09月1日 at 09:08

    I admit, I’ve not bin on this webpage for so long… however t’was anoda joy 2 c it is such a vital subject and ignored by many.

  20. toledo help you sell | #20
    2010年09月1日 at 13:23

    I must say that overall I am very taken with this site. It is apparent that you know you subject matter and you are passionate about it. I wish I had got your ability to write. I have bookmarked your site and look forward to more updates.

  21. sex toys | #21
    2010年09月3日 at 06:10

    I’ve got to, I have not been on this webpage for so long… but t’was anoda lovely experience to c it is such a vital subject & ignored by alot of pple.

  22. conveyancing | #22
    2010年09月3日 at 09:22

    really loving this website, and wish this, as well as the excellent article some other people have written, will help people

  23. rabbit vibrator | #23
    2010年09月3日 at 11:32

    I will stick a link to dis page on my site. I am sure my visitors will see this post very interesting

  24. rabbit vibrator | #24
    2010年09月3日 at 12:23

    Should there be another interesting post [justlike this] u can put up next time, I’ll be waiting for it.

  25. Yes, you can download full movies. | #25
    2010年09月3日 at 21:48

    Pretty excellent post. I just stumbled upon your blog and wanted to say that I have very enjoyed reading your blog posts. Any way I’ll be subscribing to your feed and I hope you write-up once more soon.

  26. Get Full Movie Downloads Here | #26
    2010年09月4日 at 05:35

    Dear admin, thnx for sharing this blog post. I discovered it wonderful. Greatest regards, Victoria…

  27. dayton help you sell | #27
    2010年09月4日 at 08:34

    Interesting information, may I use a part of it in my website?

Leave a Reply

Spam Protection by WP-SpamFree Plugin

Reply Directions
  • 本人发誓不会泄露您填写的电子邮件地址到第三方,你知,我知,他不知,天也不知,地也不知!
  • 本评论支持Gravatar(全球通用头像)服务,使用方法请看《全球通用头像Gravatar简单介绍与使用教程》。
  • 含有URL的评论可能会被审核为垃圾邮件,请在<a href="里面加入rel="nofollow"。例如:<a rel="nofollow" href="
  • Allow XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>