链接 - UCD大社区

按钮还是链接？(一)

周文韬 — 2009-05-02 19:13:44

在做网页设计的时候，经常听到产品或运营经理说这样的话：“这里太弱了，不要用链接，用按钮！”，“这里我想搞个大大的按钮来吸引用户点击”。是不是按钮就会让用户想点击？按钮是不是越多越好？是不是所有链接都能替换为按钮？这都要归结到一个基本的问题：按钮和链接有何区分？是否可以混用？
问了很多人，答案各种各样，总结起来有三种。

1，没必要区分。这一派认为：链接和按钮在本质上没有什么区别，没必要区分。在视觉上需要强化的地方就用按钮，一般的、不需要强化的就用链接。

2，有严格的区分。这一派认为：按钮和链接代表着不同的含义，其用法应该严格区分开。

按钮代表着“做某件事”，即点击了按钮代表着操作了一个功能。例如下面的搜索按钮：

并且，做的这件事是有后果的，不易挽回的：

点击了这个按钮之后，所写的东西就会被全世界看到了，尽管可以删除，但毕竟不能简单的按下浏览器的返回键就撤销这个操作。

登录页。

点击了之后，就登录了该网站。

搜索、回复、注册，他们的共同点是：都是在“做”一件事，并且绝大多数都是对表单的提交。从技术上讲，这类按钮的作用是向后台提交了数据，“命令”服务器去做了一件事。

而链接的作用是：“带你去另一个页面”，你无论点几次链接，都是在“看”，而并没有“做”任何事。
典型的链接是文字标题。点击了去看详情。

按照这种逻辑，一些即使是表示动作的词也应该用链接。

上图中的“edit”和“Delete”虽然是动词，但是点击他们之后，用户只会被带到一个页面（或浮层），而不是点击后就真的编辑或者删除了这张照片。他的作用是“带你去看编辑或者删除的页面”，而不是“编辑”或“删除”这个操作。因此点它还是在“看”，而不是“做”。

而接下来这里点击“save”了之后才是真正“编辑”了这张照片。因此该使用按钮。

按照这种设计思路的网站，比较典型的是google，还有QQ邮箱。它的好处是逻辑上会非常清晰。
然而，它也存在有问题，按这种思路设计出来的网站，在一些需要被强化的地方，一些需要引导用户点击的地方，仅用链接很难在视觉上突出表现。

3，有区别，但不绝对。
此派同意上一派的部分观点：在一些表单页（例如填写注册信息页，搜索框，购买下单页等）的“提交”功能中应该使用按钮。而其他的页面则应根据实际情况来判定。既可以用链接，也可以用按钮。

这里面观点又分两小派：

其中一些人认为，在这些非表单的页面中，链接和按钮的作用对用户来说是一样的，应该把页面中那些重要的、需要突出的元素做成按钮的样子。而其他没必要突出的地方做成普通的链接。这也是很多视觉设计师和产品、运营人员的想法。也是很多中国网站的做法。
拍拍网：

QQshow：

这样好处是：按钮可以有效地成为视觉焦点，吸引用户注意。

另一些人则认为：应该把那些看起来像“操作”的地方做成按钮，把看起来像“浏览”的地方做成链接。这和第二派观点的区别在于：一个是从逻辑上分辨“操作”和“浏览”，一个是从字面上分辨。

按这种设计思路的是Amazon网站，下图中，“edit”虽然也只是带用户到编辑页，但对用户来说更像个动作，像个操作，因此可以用按钮。

以上就是三种关于按钮和链接的不同设计思路，那么，到底哪种更有道理呢？

相关话题：链接源地址：http://ixiangyi.cn/?p=54

减少新开窗口提升可访问性

千鸟 — 2009-04-19 20:17:57

论证完使用target=_blank并非绝对错误之后，分场景探讨如何减少新开窗口。自有意识注意这个问题，是看到蓝色经典Plod大叔在04年提倡不乱弹窗的奔走相告。

抛开某些不合逻辑意图不论，为什么大量使用弹出页面？因为设计师担心用户迷失方向。为什么用户会迷失方向？因为导航系统不够好。为什么导航系统不够好？因为产品功能太多太乱。为什么功能太多太乱？因为需求没控制好。为什么需求没控制好？因为提需求的人自己也没想清楚。

说白了，很多场合都不仅仅是设计师的问题，因此只能选择不断妥协用劣质方案堆砌豆腐渣结构体系。快节奏中有些事情没法避免很正常，但设计师应该尽责做到迭代式的全局统筹重构。

应该强制target=_blank

文件下载链接
文件打印链接
非主线任务并打断进程的链接

以上参考淘宝的老包同学在08年总结符合国情的链接新窗口打开中的应用场景。下载各种文件、打印各种文档，需要前后对比的帮助，注册表单的隐私条款都有必要target=_blank。

能够定论target=_blank必然提升用户体验的场景很少，并且个人认为随着客户端技术的发展，会被逐步取代。比如lightbox这个ajax应用，给设计师带来了“查看大图不用再新开窗口”的全新设计理念，这在以前是不可想象的。

可选择target=_blank

跨域名链接
跨应用平台链接
布局改变链接

主域名更换比如友情链接、网志内嵌的关键词外部链接等，而跨应用平台的链接通常也得更换二级域名。如果全部不新开窗口，为了避免意外跳出，应该先提醒用户这是外部链接；如果部分新开窗口，那么应该有统一规则进行约束，并明确告知将opens new window。见过三类案例：

msdn例子，icon告知用户这是站外链接。

gblog例子，icon告知用户这是站外链接，同时可以点击target=_blank。

egloos（韩国）例子，触发时才icon告知用户这是站外链接，也可以点击target=_blank。

来自sitepoint的Neil Turner文章补充了三种形式，大同小异。值得一提的是，有个使用title提示open in new window的案例，其实也符合使用Title提升可访问性中提到“操作指引”的应用。

版面改变如列表页与内容页的区别，用户需要在内容页长时间阅读，每次都返回列表进入其实更不方便。最典型是Google大概在06年初做出的改进，给搜索结果列表链接默认target=_blank，这个例子几乎同时满足以上三个条件，并且提供默认设置自定义改回去，100%保险。

不能强制target=_blank

导航链接
tab条目链接
返回操作链接
翻页链接
表单

特殊的网站地图、索引表也属于导航，都应该给用户最大的控制可能。不管全局导航、局部导航、辅助导航、上下文导航，还是友好导航，都建议杜绝target=_blank。比如wordpress程序的sidebar容器内，几乎所有站内链接都是导航，target=_blank会严重影响可访问性的流畅感。

tab是很常见的页面内容组织形式，但不管直接隐藏显示、异步加载显示，还是类似导航的跳转，都不建议target=_blank，因为此时用户更加期望模块内的变化，或者在当前窗口载入新页。

另外，导航链接与返回操作链接有部分重合，比如面包屑导航，分级往回点其实就是返回操作。在任何页面进行返回操作都代表当前页面已经不需要了，因此不能新开窗口。这个返回包括点击logo返回首页，同时也是能碰到的典型错误之一。

表单的场景比较宽泛，比如注册、登录、搜索都应该杜绝target=_blank。大量字段的数据表单提交有条很重要的可用性规范，点击返回应该能保留数据，这点wordpress后台录入很出色。

总结

基本可以广义概括为只要影响访问、操作流畅度的链接，都不建议target=_blank。其实不管什么规则，只要没有清晰逻辑传达给用户，都会造成意外。只不过设计难点在于，无法准确判断这个意外是否在用户所期待的可接受范围之内。

既然用户所期待是否需要target=_blank的场景不好判断，但是应该强制、不能强制这两类常见错误场景相对容易达成共识，因此个人认为还是容易找到解决问题的思路。简单例子不再赘述，有机会另补充。

相关话题：链接源地址：http://blog.rexsong.com/?p=6063

新开窗口应该浏览器控制

千鸟 — 2009-04-16 07:35:56

是否打开新窗口是个古老话题，并且多开窗口的问题基本已有了原则上的定论。

后退、前进按钮不可用；
用户无法控制链接在本页还是新窗口打开；
增加任务栏负担；
不便手动全部关闭。

从操作角度考虑，其实用鼠标右键菜单可以新开标签页，中键点击链接可以新开标签页，按住链接拖拽到页签也可以在本窗口打开，都能避免定义target=_blank链接的新开窗口问题。但毕竟不顺手，而且不是通用方案，但是我更有理由相信target=_blank不是绝对错误。

首先，完全依靠w3c标准来定论绝对不能使用target=_blank有欠说服力，我比较赞同按需打开新窗口的结论，同时也百思不得其解为什么Strict DTD抛弃target标签，因为需求很典型。

其次，对中国网民，或全世界发展中国家网民来说，能灵活使用shift键的基本都是中高级用户，排除少数也知道按住shift再点击链接的其他用户，这个用户群的量级也太小。

第三，在浏览器完全页签化、独立页签进程的趋势下，target=_blank是打开新窗口还是新标签页对用户更友好，是否应该浏览器来改进？比如Chrome和FF中点击target=_blank默认是打开新标签页，而不是新窗口。（IE, Safari都是打开新窗口）

并且针对Chrome和FF中如果按住shift点击链接打开新窗口的情况，我推断它们还是比较容忍target，并且最大程度从良了这个属性。尤其Chrome还支持tab拖出和重组，让是否新窗口的问题得到了弱化，操作流畅感胜过其他浏览器。点击“确实应该新开窗口”链接的target=_blank似乎也不是那么讨厌，并且可以方便用户不再思考、动手按住shift。

因为中国特色网站呈现、渲染效率普遍很低，里边无数个脚本调用，还有外链广告。我习惯是一个窗口一个网站，比如网易新闻首页到内容页的链接，淘宝搜索结果到商品页的链接，都是强制target=_blank。用IE和Safari浏览的体验很差，但Chrome和FF不仅没问题而且还很顺手。

试想，如果所有浏览器处理target=_blank都是新标签页而不是新窗口，点击后既不会增加任务栏负担，也不会造成全部手动关闭麻烦。世界会不会清净很多？web设计师也不再那么痛苦？或者说target=_blank本身确实不合理，应该拆为target=_window和target=_tab两个定义。意外的是，在网上查到哈斯日志、MozTW都已在05年有类似想法提出，我假设应该如此：

链接默认在本窗口打开；
链接定义target=_window新开窗口；
链接定义target=_tab新开标签页；
链接只要按住ctrl键统一新开窗口；
链接只要按住shift键统一新开标签页。

另外关于新标签页(new tab)中文说法，Chrome和FF翻译是“新标签页”，IE是“新选项卡”，Safari是“以标签方式打开”。个人认为既不是“标签”也不是“卡”，叫做“新页签”最合适，起码应该呼吁所有浏览器统一说法，太不象话了。

事实同样证明，好方案应该从根源上解决问题，退一步海阔天空。如果仅停留在页面上纠缠target=_blank的对错，似乎永远也无解，希望我的判断没错。

注意：文中提到的各浏览器版本特指IE7, FF3, Chrome1, Safari4。

相关话题：链接源地址：http://blog.rexsong.com/?p=6061

探讨链接打开方式

jason — 2009-03-13 03:27:59

一．链接打开方式
1、新窗口打开
优点：用户点链接的时候，当前浏览的内容不会被替换，不需要通过前进、后退去看自己看过的内容；
缺点：访问一会，就会产生大量窗口，占用资源。每个窗口都需要手动关闭；
2、当前窗口打开
优点：可以一直在一个窗口内看内容，不会打开很多窗口、占用太多资源。窗口只有一个，关闭容易；
缺点：当用户需要看几个页面的内容，或者需要对比着看的时候，就很麻烦。或者必须按住SHIFT点击链接，但很少人知道和使用该操作；
3、有选择的使用新窗口和当前窗口
优点：可以比较人性化的解决以上两种方式所带来的不便。不会大量增加窗口数量，同时用户也可以在多个窗口切换阅读；
缺点：用户在点某个链接时的需求未必与设计人员的想法完全一样。用户无法确定到底现在这个链接是在新窗口还是当前窗口打开，给用户造成一定的心理“压力”。
二、如何选择链接打开方式
1. 对于同类型的信息，使用同样的链接打开方式；
2. 中国人更接受链接在新窗口打开的方式；
3. 以下情况使用新窗口打开：
频道的内容链接、导航链接、文章内延伸阅读的链接、文章的相关内容链接、在用户需要对同类型产品进行比较时；
4. 以下情况使用当前窗口打开：
文章的分页标签、列表的翻页标签、文章的上/下一篇文章的链接、线性的任务（用户注册、发布信息等）、当链接属于用户线性的阅读/操作需要时。
三、链接可用性设计指南
1. 使用有意义的、易于理解、容易识别的链接标签；
2. 保证链接标签和链接到的页面标题是相吻合的；
3. 不要误导用户去点击不是链接的文本、图片；
4. 重复重要的链接；
5. 尽量使用文字作为链接的标签；
6. 使用不同的颜色区分用户未使用/使用过的链接；
7. 提供一致的链接标签；
8. 使用“pointing-and-clicking”的方式让用户打开链接；
9. 使用合适的链接长度，一个链接的文字标签不要超过一行；
10. 告诉用户哪些是内部链接、哪些是外部链接；
11. 如果页面上有一张图片是有链接的，那么就要保证页面上的所有图片都是可点击的。
四．新观点
1. 让用户自己去选择如何打开链接。例如设计师为用户提供一个询问-盒子（a small check-box），让用户来决定链接如何打开。

2. 一些网站使用图标对链接的性质进行描述和指引。如维基百科的外部链接，采用小箭头的形式来和站内的链接进行区分。

五、国内典型网站链接打开方式

1. 网上购物类

当前窗口0 新窗口1	频道切换	List			Detail
当前窗口0 新窗口1	频道切换	从类目	从搜索	内部	产品图片	进入企业/店铺
阿里巴巴	0	1	1	1	1	1
慧聪	0	1	1	1	1	1
中国制造网	0	0	0	0	0	0
环球资源	0	0	0	0	0	无
拍拍	0	1	0	1	1	0
淘宝	0	1	1	1	1	1
卓越亚马逊	0	0	0	0	0	无

*在频道切换上，各网站都采用在当前页打开的方式，其他链接操作多采用在新窗口打开的方式

2. 综合门户类

当前窗口0 新窗口1	频道切换	首页/频道内的链接
新浪	0	1
搜狐	0	1
雅虎中国	0	1
网易	1	1
腾讯	1	1
中华网	1	1

*在频道切换上，使用这两种打开方式的网站各占一半，在其他链接的操

作上都采用在新窗口打开的方式

3. 综合搜索类

当前窗口0 新窗口1	频道切换	首页/频道内的链接
Google	0	1
百度	0	1
雅虎	0	1
搜狗	0	1
腾讯soso	0	1

*在频道切换上，均采用在当前页打开的方式，在其他链接的操作上都采

用在新窗口打开的方式

因此，在频道切换上，推荐使用在当前页打开的方式；在其他页面的操作上，推荐使用在新窗口打开的方式。不合理的窗口打开方式在支付宝的网站上也是大量存在的，希望上述的探讨会给大家在设计窗口打开方式时有一定的帮助作用。

相关话题：链接源地址：http://ued.alipay.com/?p=996

鼠标悬停的交互

季子乌 — 2009-03-03 18:19:16

在当当找以前买的书的时候遇到了这个东西：
(当当网)
“我的书架”中的“阅读进度-修改”当当是用MouseOver展开的菜单。
让我感觉有点突然，又说不出哪里有什么问题。所以我决定综合我所了解的各种情况来研究一下这个MouseOver的问题。

一、鼠标悬停在界面设计中的用途

触发事件。减少点击操作，更便利的人机交互，如前面当当的“修改”操作框。
表示可点。这个通常与鼠标指针变化为“手形”一起用，告诉用户这个是可以“按”的。
(Facebook)
悬停菜单。
(Facebook)
显示操作选项。可避免操作选项重复出现所造成的页面排版和显示的混乱。
(饭否)
指示鼠标的位置，帮助浏览(如上图中鼠标悬停后出现的背景颜色），常用于多个内容显示列表。
帮助选择，常用于评分系统。
(豆瓣)
诠释细节信息。HTML中的alt就有这种作用，也可以用CSS和JavaScript来实现更多的效果和媒体信息。
(Flickr)
内容展示。许多门户网站为了节省信息空间，通常把信息集中在相同位置，用内嵌Tab实现信息显示，有时候Tab还会自动播放。
(腾讯网)

二、悬停触发事件的显示效果
显示效果就像从前用FrontPage做网页设过程页面效果一样，有很多，而且能更多。这里总结一些现在网页中常用的几个效果，并不一定只会触发一个效果，有时候会是几个效果同时或先后用到。不用怀疑，这些效果的用途跟其他被操作触发的事件几乎是相同的。

即现和即逝
(Facebook)
渐现和渐隐
展开和缩拢
(Yahoo)
抽拉式
(WordPress管理后台)
过程加载

三、悬停菜单的要素
悬停菜单是鼠标悬停中使用得最多的一个用途。我试着分析一些案例，总结一下悬停菜单的要素，也许对朋友们在将来做交互设计中会有一些帮助。我总会用“尽可能”、“最好”这种词语，因为我说的并不是在制定一项标准。

可视。被悬停对象本身看上去是可以点的，类似像：文字链接、图标链接、按钮、区域、符号等；
(Yahoo)
统一。综合上面两条，不管是悬停、还是点击，触发的都尽可能是相同的事件（这一点上，可以和点击操作进行区别）。如果不相同，建议使用点击菜单，而非悬停菜单；
独立。悬停时不会因为进行下一步操作而“触犯”到其他不相关的事件，使当前操作中断。在Tab使用中经常遇到这种问题，不般不建议在不转换位置横的向菜单中使用悬停效果；
合理。既然为了“节省”点击操作，同样接下来的操作也最好不要弄得太复杂，否则还是留给点击菜单操作吧。

四、联想：什么情况下用悬停效果？

在什么情况下用悬停(over)，什么情况下用移开(out)，什么情况下用按下(press)，什么情况下用放开(realese)，什么情况下用拖拽(drag)……这些问题，都跟我们使用操作系统鼠标单双击一样的值得思考。这些问题是两面性的，你用着成了习惯，所以就知道什么是单击，什么是双击；而另一面，正是因为我们日常的习惯，操作系统才为我们看到的安排上单击和双击两种操作。更奇妙的是，你还可以给操作系统更换这个习惯，把需要单击和双击的操作都调个个儿。
在我教妈妈使用电脑的时候，她经常搞不清什么时候该单击，什么时候该双击，而我却没有去仔细思考，用怎样的语言组织这个区分方法。
我的理解：操作系统（很遗憾我只用过Windows）中的单击应该主要有三个目的，一是选中对象，二是展开操作，三是快速开启/运行。

双击的主要就两个目的打开和运行。
但这种说法，对于刚刚才接触电脑的妈妈来说，似乎不那么容易记住呢？！
让我们跳出这种逻辑思维吧，不必要想着数据和效果的区别，只需要想象我们平时生活中的如何处理。
什么东西会让我们要去拉、去推、去拖、去放，也有一些不需要用力（或是用了轻微的力）就可以被你带动改变起来。
如：拉门、推窗、拖碗、播种，被挡住光线的地方会变成阴影，手动一动可以扇出一丝风来……

在做这些效果选择时，尽量不去挑战用户的耐心和思考，这样我们就功德圆满了。

五、使用悬停的一些提示

慎用悬停效果
如果不能做到明确、易懂，尽少用户造成困扰，最好的方法是不用悬停效果。跟我们的生活上的理想一样，我们主动去推动一件事的机会总是大得多，不需要为了融合一方面的需求（减少用户的操作）而忽略了其他的感知。
相同符号不应出现效果的混用
这里指的混用并不是说一个网站不可以用多种效果，而是特指某些我们认为是相同或相似的标识。如倒三角【▼】，在许多地方是用来点开或展开下拉菜单，但如果同个网站在不同的区域倒三角点或不点出现混乱，这样用户会像我妈妈那样思考：什么时候该点，什么时候只用移上去就好了？
WordPress管理后台多处用到三角和倒三角符号，但效果却各不相同，下面从左到右效果分别是：点击、悬停/点击、点击展开。
悬停和点击在菜单中常用方法
有许多时候有着相同的用途，但更多的时候点击菜单用于“选项”、“操作”，悬停菜单用于“扩展”和“诠释”。

经过上面许许多多的思考和分析，终于明白当当的悬停操作为什么感觉有点怪了：看上去不可点（光蓝色字体？），鼠标移上去想点的时候突然跳出来操作框，“吓一跳”的感觉。哈哈。不过，其实心里还是有点欣慰的，因为我不用点了。。。不过，也许这种欣慰来源于职业，其他用户会不会也这么觉得呢？

最后，请不要因为我写了这么多而陷入疑惑，这些都是个人研究和提议，你可以突破它、改善它。

相关话题：链接源地址：http://p.pnq.cc/ue/?p=30

页面是否新开窗口的一点补充

木头 — 2008-09-04 01:24:20

前段时间我们部门的粉丝和布林同学都写过关于这个问题的文章。刚好阅读了关于这个问题的其他争论文章。所以顺便在这补充几点。

这是老问题
确实可以肯定这在中国大陆是个老问题。只有在中国大陆的网页才会出现这么多”target=_blank”的代码；

为什么称只在中国大陆呢。以yahoo为例。无论是yahoo.comca.yahoo.com（雅虎加拿大in.yahoo.com(雅虎印度）yahoo.co.jp还是在雅虎香港和台湾。都是极少极少用”target=_blank”语法的。

在国内不知道从什么时候开始由门户带头普及用新开窗口，大家现在可以看到yahoo.cn和其他yahoo family都不一样。是跟随大流来决定是否用”target=_blank”语法。相信这段语法在很多网站都普及得很广@.因为连google.cn都迫于用户本土化习惯而改变了搜索页面的打开方式.(google.com还是沿用当前窗口打开）

到底要不要开？

本来是个简单的问题。现在变得很难了。

我们部门的三七同学在2005年6月7日发表在他自己blog的一篇文章《target=_blank不符合标准?》说到。

开始引用/
我们要在新窗口中打开链接通常的做法是在链接后面加target=”_blank”，我们采用过渡型的DOCTYPE(xhtml1- transitional. dtd)时没有问题，但是当我们使用严格的DOCTYPE(xhtml1-strict.dtd)时，这个方法将通不过W3C的校验，会出现如下错误提示：”there is no attribute target for this element(in this HTML version)”原来在HTML4.01/XHTML1.0/XHTML1.1严格DOCTYPE下，target=”_blank”、 target=”_self”等等语法都是无效的，
/结束引用。。

也就是说这个语法是只符合过渡性的文档类型声明的。不符合严格文档类型声明的。国外的大牛Mark Pilgrim在 2002年写的《Dive Into Accessibility-30 days to a more accessible web site》一书中专门说到这个问题–《Not opening new windows》.
他在这篇文章中提到：几乎所有的浏览者会用浏览器中的“后退或者叫发挥上一页”按钮。

如果你用”target=_blank”语法。将会使这个按钮无用武之地。
最重要的一个观点是*/The point is that the choice of whether a link will open in a new window should be the end user’s choice, not the web designer’s choice.是否用新窗口打开应该交给用户自己选择。而不是由网站设计师主观判断代为选择”

不友好。如果你用了新开窗口这个语法。将会造成“盲人、视弱、认知障碍患者”这一类的用户无法浏览。比如盲人用“Window Eyes”时无法识别（Window Eyes为国外一款知名的读屏软件，说实话我们对这类特殊群体用户几乎是忽略的。这也可能是新开窗口泛滥的最大原因。）

文章最后带的延伸阅读中有一条W3C Validator mailing list的回复“Re: Opening a link in a new window...”中提到标签中target属性是不建议使用的。

潜在的风险
前面三七同学也提到会通不过w3c校验 ,确实是这样是。该语法将通不过HTML 4.01 Strict, XHTML 1.0 Strict或者任何未来版本的校验。也就是将来你要使用”target”属性。。只能用XHTML 1.0 transitional。

我们怎么办

现在来说。如果你觉得未来还早可以随大流自定义新不新开窗口。如果不。就像国外绝大部分网站那样做。国内已经有网站这么做了，比如豆x网（免被说枪手就不说具体名字了。）。一直想问他们的决策者。为什么大家都从了。。他们就不从呢？
如果回到最初确实是很简单的问题。现在这个语法用滥了。已经形成用户习惯了。要改也不是一天两天的事情。只是随着大家对无障碍浏览的越来越重视以及新标准的普及还有等网站决策者下决心再次改变用户的习惯的时候。还是会越来越少用target属性的。这一天总是要到来的。。。除非我们一直想做有中国特色的网站
by mutou@koubeiUED

“Back to Top”有害页面健康？

波希米亚 — 2008-12-05 15:14:12

http://img.ucdchina.com/upload/snap/2009-08/c274265ce4824919438058114c3d0dac.jpeg

一个关于“Back to Top”的小故事

波希米亚 — 2008-12-09 18:54:43

A Short Story About “Back To Top” Links
Smashing Magazine版权所有
作者：Smashing Magazine
译者：UCD翻译小组，波希米亚
原文地址： http://www.smashingmagazine.com/2008/11/27/short-story-about-top-links/

译者序：这篇文章可以说以一种轻松、有趣的方式，对“Back to Top”有害页面健康？做了一个很好的回答。作者花了很长时间收集一些实实在在的使用案例，更直观的展示了“Back to Top”在网站中的使用，同时也明确表达了自己的观点。用“细节决定成败”开篇，也突出了本文编写的精细。

通常关注小细节可以让设计更杰出。在一个网站的开发过程中，设计者趋于忘记小细节，把精力都集中在主要的设计元素上，比如导航，排版和布局。如果真的完成了，那结果通常是很稳定的、让人印象深刻的，而且高专业的传达了信息。然而，这并不值得骄傲。原因是因为这种设计通常都没有一个值得记忆的点：他们可能看上去很吸引人，但没法提供给用户一个栩栩如生的形象，让用户离开网站后还能想起它。

这样看来，小细节是重要的，因为他们可以帮助设计脱颖而出。你是否曾思考过你的购物车的设计？那标签、时间戳、“向前”和“向后”的链接呢？虽然这些小细节对于网站的导航来说是无关紧要的，但他们却意味着是用户界面更友好、使用更方便甚至有时是更成熟的设计。这也是为什么我们在如下事情上为读者们考虑更多的原因，如：图片说明, 引用区块, 时间戳, 购物车, 翻页,

线, 标签云和 favicons.

在这篇文章里，我们来展示“Back to top”链接的设计——这个帮助用户跳回页面顶部的被遗忘，并且不常用的链接。访问者通过按他/她键盘上的“Home”键也能达到同样效果；但不是每个用户都知道这条捷径，绝大多数人都使用浏览器的滚动条来完成这个目的。作为设计者，我们可以通过在页面上加一个“top”链接来帮助用户。

“Back to Top”链接什么时候有用

不幸的是，这么友好的服务——可以让用户跳到页面顶部——却不常见。大多数设计者都不用它，这也是我们为什么花了5周时间，为这篇文章去收集了至少一打漂亮的案例。

事实上，“Back to top” 链接也不是一直都有用。比如说，他们对于一个很短的网站或文章来说就是不必要的。在这种情况里，没必要让用户回到页面顶部，因为这个页面都在视线范围内；如果一个“top”链接出现在这种页面上，点击后会发现没有产生任何效果，这确实挺气人的。另一个为什么很多设计者不用它的原因是：眼下各式各样的显示器分辨率使“top”链接变得无用或没必要。这就是为什么在很短的页面上使用“Back to top”链接不是个好主意的原因了。

然而，当网页较长时，就给访问者展示了它极好的特性，既省时间，又不用去滑鼠标滚轮儿。

在何处放置“Top”链接？

最显而易见和普遍的做法，就是把“Back to top”链接放在页脚。这里是它应该出现的地方。我们没法给出一个关于“Back to top”链接的通用的设计方案。一些设计者把它放在页脚左侧，另一些把它放在中间，也一些把它放在页脚右侧的。把“top”链接放在内容的左手边，或直接放在内容结尾也都是很常见的做法。

看见这个友好的“top”链接了吧：通常被放在页脚，它的出现一直很适度并且几乎害羞。

“Back to top”也经常被使用在FAQs中，用来帮助在章节和站点地图中划分篇章或段落，以提供给用户一个快速回到页面开始处的方式，因为在那里有主导航。

如何创建“Top”链接？

让链接指向页面的顶部，多数情况都是放一个空锚点紧跟在标签后面：

然而，老一点的浏览器，特别是有“考古价值的”浏览器，在解析这个代码时是有问题的。替代的方法是用一个真正的锚点，明确它的意图，紧跟在标签的后面：

top

更新：另一个方法可以避免冗余的代码，因此首选方法是利用wrapper或header的id属性达到相同目的。比如，如果你用id为”wrapper”的div标签，你可以像下面这样去写代码：

当然，这个链接本身不一定非得是文字；也可以是图片，按钮或其他元素（用图片可能会有一些可用性问题——往下看）。

措辞

不用担心你实际使用的措辞：你只需要保证访问者能够理解这个链接的功能，而不懊恼就行了。比如，使用“Return”大概就不是个好主意，因为看到它很难立即搞清楚它是带用户去首页，回浏览历史的上一页，还是到页面顶部。

用清晰简明的措辞，例如“Go to top,” “Back to top,” “Return to top” 或者 “Jump to top”。有时“Up”也可以无伤大雅的用一下。然而，我们不认为这是一个好主意，或者说根本不是好主意。

问题和劣势

一些可用性专家，甚至可用性研究的宗师——Jakob Nielsen，一致排斥“top”链接，认为它有害页面健康。在他们看来，页内链接应当坚决避免，因为浏览器滚动条足以应付，并且额外的方法也没有必要。然而，他们赞同在那些页面极长或无法避免的情况下，使用“Back to top”可能是有帮助的。

使用“top”链接的一个最主要的问题在于，他们影响浏览器的导航按钮，从而干扰了浏览历史。因为“top”链接就像个锚点，在点击浏览器 “back”按钮时，带用户去的就是眼下正在看的页面底部，而不是上一页。除此之外，可访问性专家主张“Back to top”链接可能会扰乱朗读工具的使用，“top”的概念是模糊的，而且“Back to top”链接也不是网站从始至终都在用的。

“Back to Top”链接对阵“Home”链接

在我们有趣的研究“Back to top”的案例中，我们偶然发现一些解决方法，设计者们用图片形式让用户可以跳回到页面顶部。不过，值得提一下的是，图片可以让用户很清晰的明白这个链接不是带他回首页，而是到页面顶部的。“Home”链接不等于“Back to Top”链接，“Back to Top”链接也不是“Home”链接的意思。如果你决定在你的设计中使用这种链接的话，请确保访问者能够看一眼就明白他们之间的不同。

误解：是“Home”而不是“top”

首页，可爱的首页…

用西班牙语说：回首页

另一个在页脚的“Home”实例

右手边的那个图标是不可点击的：它本应该是回首页，而不是到页面顶部

这个同理：这个插图也是不可点击的

那，这里也是

“Back to Top”链接展示

这里是更多“Back to top”链接的例子。收集他们真花了一些时间。希望这些可以成为带给我们读者灵感的好资源。

一个生动的“Back to top”链接

这个链接成为导航的一部分了。看起来不错，不过可能第一眼感觉挺别扭的。

这个“top”图标会跟随滚动条滚动。

我们不知道为什么一个方向键盘会出现在那：它不可点击，但本应该是能的。

参考资源

用户研究角度看设计（1）“复制链接”的故事

轻侯 — 2008-12-16 21:31:19

《用户研究角度看设计》系列是淘宝的用户研究团队在可用性测试之后的点滴思考。在每次与淘宝用户的直接接触、观察用户的操作之后，作为体验分析师的我们总是会感慨：“为什么有些细节设计看似已经很显眼了，用户就是没有注意到？”、“为什么用户偏偏要那样去理解？”、“用户在那个流程中为什么陷入困惑，甚至不能完成任务了？”，然后，我们会思考这界面背后的原因，分析用户当时具体说了什么，是什么原因导致用户那样理解……这个过程需要非常严谨的思考，因为向设计师反馈的任何一个词语都会导致不同的设计。同时，这个过程也令我们非常享受，如果说设计就是解决问题，在可用性测试之后的分析时间就是分析师的“设计”时光。

我们冀望通过用户研究角度的思考，带给设计师一点点启发，并且将我们在研究中发现的问题，固化在设计模式库中，以便今后不再出现同样的问题。当然，作为体验分析师，我们对交互设计和视觉设计了解得不够精深，还不能像设计师一样把握项目中的种种约束，所以，这个系列的内容可能还比较粗浅，更偏重于“商业-技术-用户”三者中“用户”这个角色的直接想法。

另外，我们的思考来源于淘宝或其他网站各位设计师的设计，所以，有时可能会拿来作为反例，还请各位设计师见谅。我们尽可能拿自己网站的例子作为反面教材，如果在反例中涉及了您的网站，还请多多包涵。

让我们开始第一个故事吧——

有一个网页上典型的细节，它如此细微以至有时设计师在项目的最后时刻才记得挤一个位置给它，但它又如此常见，在不少网站的详情页面不经意就出现了；我们在软件中不常见到它，但在超文本世界里，在互联了朋友的世界里，它却时而闪现——它就是“复制链接”，英文别名是Tell a friend、send to a friend、tip a friend、share、email to a friend或者直接就是URL（如图1）。作为设计师，你曾经注意过它吗？

（图1：youtube ）

它什么时候出现更合适？

当你想将一个网页（或网页中的主体内容)分享给别人的时候，这时它的出现可以节约用户的时间。

通常，它出现在一个网站的内容详情页面，比如视频网站的播放视频页面、博客网站的博客文章页面、照片网站的照片详情页面、购物网站的商品页面等等。就拿博客网站为例，它的出现似乎在说，“也许你的朋友会对这篇文章感兴趣哦，点击我，然后分享给朋友看看吧！”

使用它时注意什么

1.不必在一个页面多次出现

设计师既要在设计过程记着它，但也别太惦念它了。只在需要的时候提供它，即使页面很长，也没有必要像“立刻购买”按钮那样在页面的第一屏和最后一屏出现两次，因为“立刻购买”可以让用户进入到下一个步骤完成购买，而“复制链接”只是一个次要的任务，大部分为对它感兴趣的人使用。

2.相类似的功能具有相同的视觉权重

翻翻看你的网站人物角色（或是网站的点击日志），他们常用什么分享给朋友——是通过IM、Email还是其它，那么请突出最主要的那一个，如果将多个相似的功能平铺在一起，恐怕会违背“别让我思考”的原则。看图2中播放器下面第二排前几个链接：“站外引用”、“发送聊友”、“转发”，三个功能都具有分享的含义，并混杂在9个链接中，我不得不停下来想想，“我要点击哪一个呢？”

（图2：某视频网站）

3.不要让它本身显得太喧嚣

设计它的过程，要记得让用户注意得到，或者是在用户想寻找的时候知道在哪里寻找，这一点很重要。举个例子，假如是一篇blog页面，不要让“复制链接”的文字大小超过blog正文内容，也不要让复制链接区域太明显，以至于干扰了最核心的文章内容。

图3是淘宝社区的一个反例，输入框和按钮多在表单中出现，这个组件总是比普通文字要明显的，它出现在社区内容的底部，可能会干扰用户对后几段文字的阅读。

（图3：淘宝社区）

另外，在使用输入框复制的设计中，是不是可以考虑当用户点击了输入框，用脚本自动全选了整个输入框的内容（例1），而不是让用户从左至右按住左键拖动鼠标，进行全选。

（例1）

它出现在页面的哪个位置？

在可用性测试的准备阶段，我们这么带着这样的问题去观察：“用户对某个东西感兴趣的时候，他知道去哪里找它吗？”和“用户点击了它之后，他清楚在做（复制或分享）什么吗？”，前一个问题意味着它的可寻性（findability）是否足够好，后一个问题意味着这个位置能不能与他想做的事情联系起来。

举个例子，如果用户想把文章分享给朋友看，那么将这个功能放置在文章的附近而不是评论的附近更合适。可能这么说，有些人会想“那当然是文章附近更好了，谁会把它设计到评论附近呢”，但有时在文章下面加入了一个横幅广告之后，它就与评论而不是文章更相近了。

用什么中文词语来描述它？

我个人认为在不同的情景中应该用不同的中文词语，但是界面上不要有其它词语干扰了用户的理解，图4是某博客一篇文章的部分截图，你能立刻说出来，上下两个“分享”有什么区别吗？

（图4：某门户博客）

我想你已经猜出来了，上面的“分享”是名词，下面的“分享”是动词，所以在使用一个既可以是动词也可以是名词的词语时候，要谨慎一些。另外，我建议设计师时刻考虑到“此时此刻”那个时点，想象用户是从搜索引擎过来的，他不清楚你的网站的结构、功能，他一下子来到了你设计的某个页面，他来了、他时间有限、他可不愿意思考太多，你的网站能通过那一刻就让他一目了然吗？

不要使用什么词语

1.“共享”：

共享含有共享编辑的含义，常在wiki中使用。所以使用它可能会产生歧义。

（图5：google文档）

2.某些情况下，缺乏明确含义的词语：

我个人认为“复制链接”属于情境式链接，Peter Morville在《web信息架构》中提到“情境式链接必须非常直接而有意义……如果你点选下去，就知道会看到什么东西。这样高度有代表性的标签，会通过它们的情景而更加清晰：具有说明性的文字、明确的标题，以及网站本身就有的直接明了的用法。”

“复制链接”只是这篇文章中我对这类链接的称谓，而不建议直接采用这个名称，仅仅用4个汉字很难表达出来复制之后要做什么，用户会想“我为什么不能直接复制地址栏或是点击鼠标右键复制呢？”，“我点击它可以为我带来什么？”。在某些情境下，“复制图片链接发送给好友”也许是更直接、清晰。更进一步，如果你通过调查，发现很多用户是通过淘宝旺旺传送图片地址的，那么，更好的表达方式可能是“复制图片地址发给旺旺好友”。

我想，没有最佳答案，文字和你的网站气质以及用户使用场景息息相关，文字亦是设计师的利器之一。

点击它之后，会出现什么？

1.要考虑“复制链接”的内容

当你仔细考虑过用户的使用场景，你应该就很清楚怎么设计复制链接了。像图6一样将内容主题包含在分享信息里对那些通过IM来分享的用户确实不错。

（图6：新浪博客）

2.让分享中的内容满足用户的需要：

如果用户对复制链接有多种需要，那么不妨设计多种复制途径。学习一下flickr的设计（图7、图8），它如何在多种复制链接中，保持了清晰的逻辑关系。（当然，其中默认第一项通过邮件分享可能对美国人更常用，对中国用户就另当别论了）

（图7：flickr网站，用户点击分享之前）

（图8：用户点击分享之后）

3.帮用户想的更多：

分享一个photobucket的例子（图9），当鼠标上移到图片时，就会出现灰色的浮动层（这是改良过的设计，原本是灰色层始终存在），让用户复制。鼠标点击到包含地址的输入框里，系统会自动复制好其中的链接，并在输入框前出现几秒钟的“copied”提示。这种方式既能做到提供反馈，又不会有 alertbox的生硬感。

（图9：photobucket.com ）

总结

设计“复制链接”功能时候，首先思考用户的使用场景以及用户可能会用它做什么，其次一定要让用户理解这个功能可以用来做什么的。最后，优秀的设计还应该给用户一个惊喜。在我收集例子的过程中，photobucket的“复制地址”设计确实给了我不小的惊喜。

你还发现了哪些更好的例子呢，欢迎告诉我！

用户喜欢点什么

千鸟 — 2008-12-13 23:32:48

时想到的元素：

蓝色文字。（浏览器默认）
带下划线文字。（浏览器默认）
视觉权重较高的字符或图形。（比如大小/颜色/造型）
有交互暗示的字符或图形。（比如左右箭头）
表单（包括按钮、单选、复选、下拉等）
图片和照片
icon

单就文字链接而言，如果呈现逻辑没有统一，用户将很难搞清楚哪些可以点。事实上，用户习惯的力量无穷大，设计师可以干扰，但永远都不能改变。

用户体验，有时必须用很理性的思维去做一些并不理性的事情，大概就这么回事。

失败的例子

来自搜狐新闻首页，链接形式没有统一，而且用色有问题，黑色文字貌似说明，但其实也是链接。

来自网易新闻首页，更混乱，搞不清楚到底是黑色还是蓝色有链接？事实上蓝色中只有红框内的部分可点。

成功的例子

来自谷歌资讯首页

来自百度新闻首页

来自Yahoo! News首页

相关话题：链接源地址：http://blog.rexsong.com/?p=739

符合国情的链接新窗口打开

om19 — 2008-08-16 00:19:51

引子

许多可用性专家一直把链接新窗口打开(target='_blank')认为是大忌。在他们看来，新窗口打开的问题在于：

用户将无法控制它在本页打开还是新窗口打开。这是不尊重用户的选择。
新窗口打开使任务栏更加地拥挤。
用户更加期望新页面在当页载入。
新窗口打开是“后退”按钮变得不可用。

实际上，在Neil Turner的文章中提到，以下情况可以打开新窗口：

链接指向一个文档(PDF,Word文档等)
链接指向一个大图片，需要一定时间来下载。
链接指向一个需要打印的页面(这种边缘情况都被扯进来了-_-|)

SmashingMagazine补充其他的情况时

说还有：

当页加载可能打断一个正在进行的进程。
链接是指向一个帮助。

其实，我认为，总结一下他们说的只有两点。也就是以下两点的情况下，可以打开新窗口：

链接指向一个需下载到本地或者打印的文件(通常是非HTML的)。这里就包括了pdf, doc, mp3, 需打印的文稿等等。
当页加载可能打断一个正在进行的进程，或者使之不能完成。例如需要前后对比的帮助；正在填写表单时，用户想看看隐私条款等等。

其他的可用性问题和信息构架

新窗口打开在体验上来说会加长用户认知上的等待时间。同时新窗口打开是一种弹出方式，它：

可能是以新Tab的方式打开。那么这个Tab可能没有被主动激活，将会需要用户主动激活该Tab才能发现刚才点击的页面。

(IE7里，如果用户不勾选“当创建新选项卡时，始终切换到新选项卡”这项，那么使用javascript打开的新Tab将不会被激活。)
可能是以新的浏览器窗口的方式打开。那么如果这个窗口没有能被自动最大化，那么将会需要用户手动最大化。
过多的新窗口将需要用户花费更多的时间维护各窗口。

新窗口打开确实会影响可用性。但这个问题常常并不在于打开新窗口本身。而在于更下一层的信息构架。国外的网站结构相对简单地多，任务流程清晰。所以很少使用到新窗口打开。新窗口打开的使用大部分是使用在出站链接上，避免用户流失。国内网站通常结构相当复杂，没有固定、清晰的任务流程。在非线性的任务流程情况下，需要考量是否使用新窗口打开来弥补信息构架的不足。

新窗口打开弥补了导航的不足

即使如此，打开新窗口的对于导航的好处却没有被人们所广泛发现。我们来看看在IE7中，从首页的促销点击直到进入某一个商品Detail页的过程。

第一步，首页上点击某促销广告(弹出新窗口，出现产品List页面)；第二步，产品List页面上点击某产品(弹出新窗口，出现商品Detail页面)。

所有点击均弹出新窗口。我们回到IE7的Tab上，看看每一步点击後，Tab有什么变化：

大家可以看到，就像面包屑一样，Tab这时候提高了这样的信息：

你从哪来？
你的行径路径如何？
你现在在哪里？

明显地，用户并不是依托类目的路径点击进入该页的。这时，Tab就像一个动态的面包屑，弥补了网站本身靠类目组织的面包屑的不足。

其他的琐碎

另外有两点也不容忽视。

第一点是关于我国的国情。中国人的所在社会环境信息更加拥堵。导致中国人的信息承受能力会比西方互联网用户强。这将使中国的互联网用户：

能容忍单页面下更多的信息量。
同时能容忍更多的页面打开。
良好的信息构架对于中国互联网用户的有效性相对于西方效果更不显著。

除此之外，第二点，对于览器后退按钮的问题，我同时认为：我国互联网用户相对于国外用户来说对于计算机认识水平要求更低。这就造成我国用户更容易理解并想到关闭按钮的点击而不是后退按钮。在实际中，也发现在国内用户比国外用户更不会去点击后退按钮(此为经验，无数据支持)。

最后

交互设计师很多时候其实是在权衡各种各样的因素。从商业诉求到用户目标，从可用性到审美学。

在设计原则上或曰："应该让用户对他们正在交互的界面有控制权。" 亦或曰：“应该提供Good default，减少用户控制。”

看起来，这些是矛盾的。

根据第一条，极端地，我们应该设计一个链接新窗口打开设置的功能，以便能让用户选择控制链接是否在新窗口打开。

根据第二条，我们应该为用户设想好了每一个链接是否在新窗口打开。并默认设置好它。

对于用户来说第一条定理不一定永远是对的。你把所有的界面控制都抛给用户，实际上是在做一个高可定制化的界面。有时不如使用Good default，也许更好。事实上，第一条是送给专家用户的，第二条是送给新手的。

如何平衡他俩的关系，就是我们交互设计师的职责。

最后的最后，一定记住，回到用户中间去。在我做的一些可用性测试和访谈中发现，新手和中间用户在点击新窗口打开的链接时，并未表现出明显的不理解、沮丧或是挫败。

相关话题：链接源地址：http://www.om19.cn/ux/post/31.html

给链接一个添加下划线的理由

摄氏度 — 2008-10-18 13:05:02

互联网上有着无以计数的海量信息，而这些信息依靠着链接维持着之间的关系，从而避免了一个个独立的信息孤岛，互相关联的才能形成互联网。链接在互联网的交互上有着不可替代的重要性。

之前提到过关于链接的几种提示及打开方式，其中有一个关于链接的提示是：文字带有颜色没有下划线。有时候为了页面的美观，很多设计师会特别的去掉链接文字的下划线，而仅仅只是改变链接文字的颜色。的确，这也算是链接的一种提示方式了，至少让链接文字表现出了与普通文字的不同之处。

可是，在这里设计师们忘记了一个人群——色弱或者色盲者，对于他们而言，仅仅是改变链接文字的颜色是远远不够的，很有可能他们无法辨别出文章中的链接文字与普通文字的颜色区别，所以他们就可能差过了文章中的链接，这样的话，文章作者添加链接时的本意也就无法被这部分读者获知。

设计师们不能以页面美观或者色弱色盲人群数量少为借口，真正基于WEB标准设计的网站应该是能满足几乎所有的访问者的，这些访问者应该包括失明、视弱、色盲等残障人士。设计师们完全没有理由抛弃这部分用户。

所以，仅仅是让文章中的链接文字显示为其它颜色是不够的，为这些链接文字加上下划线吧，让他们更易被识别。

当然，这个添加下划线的表现样式，可以只针对内容页，我一向是主张在新闻列表页不使用下划经的，因为新闻列表页的文字几乎全是可链接的文字，下划线在这里的意义已经变得不再明显，甚至影响视觉上的流畅感，即使是在新闻列表页里有部分的说明文字，这部分说明文字也可以添加上链接地址，因为这些说明文字本来就是目标内容的一部分，为何不让目标内容多一分被点击的概率呢？

相关话题：链接源地址：http://www.prower.cn/interaction/689