Fri, 26 Oct 2007 04:37:00 GMT

Hyperlinks enable people to jump instantly from page to page, or site to site. Such power can create anxiety.

��链接可以��讉K��者从一个页面蟩转至另外一个页面，或从一个站点蟩转至另外一个站炏V��但是，�q�种频繁的蟩转可能��Z��产生焦虑�?/span>

To help users browse with confidence, links should be absolutely clear and explicit.

��Z��方便用户更好的浏览页面，��链接必��ȝ��对的��z�明了�?/span>

Principles
法则

1. Text hyperlinks should be clearly distinguishable from normal text.
��链接文字必��M��普通的内容文字相区�?/span>

2. Any mouseover behaviour should have a highlighting effect.
鼠标�U�d��到超链接上时必须要显�C�突出效�?/span>

3.Hyperlink content should be as short as possible, yet long enough to identify either:
��链接的具体内容必须要言��意赅�Q�短而精�Q�：

· Where you'll go [跌��{地址]

· What you'll get [希望获取什么内�?/span>]

· What you want to happen [希望产生什么效�?/span>]

4. Hyperlinks with different targets should be clearly distinguishable.
指向不同目标的超链接必须要清晰可�?/span>

5. Hyperlinks should give an indication of any unanticipated consequences, e.g.:
对点击超链接后会出现的特�D�情况加以解释，如：

· Links to files [链接至一个文�?/span>]

· Links that open or close windows [点击链接后会打开或关闭窗�?/span>]

What do you make a link?
考虑一下制作这个超链接的目的是什�?/span>

Hyperlink content example: Amapproved.com
��链接内容�D例：Amapproved.com

A site for locating approved Aston Martins, and it's good on the whole. This is the search results screen. Guess how you get from search results to see the details on a particular vehicle? The only link is the vehicle model (in the Vehicle summary column).

�q�个案例�?/span>Aston Martins [阿斯��?#183;马丁] 汽�R的网站。可以这栯��Q�它的整体外观设计堪�U�经典。这是一个搜索结果显�C�页面。那么现在，你想象一下，该如何通过搜烦�l�果的方式来查阅有关车辆的详�l�介�l�。这里仅有的��链接就是关�?#8220;Vehicle summary column [车辆基本列表]”中的“vehicle model[车辆模型]”�?/span>

The first, and biggest problem, is that you can't distinguish the hyperlinks, breaking Principle 1. You don't know where to click to get more information: you have to guess.

首先所面��的最大问题就是，你不能区分那个是��链接。这�q�反了法�?/span>1�Q�即�Q�你不知道该点击那里来获取更多的信息�Q�因此，你必��d��考虑�q�个问题

Click to enlarge [点击攑֤�]

The second problem is: The links look the same although they point to completely different targets (each one is a different used Aston Martin). This breaks Principle 4. Because all the links on this page have the same content (the vehicle model), it's even less obvious that they might be the link.

�W�二个问题是�Q�尽��这些链接指向完全不同的目标�Q�每个不同的链接都��用了名称“Aston Martin”�Q�，但它们看上去几乎一��P��q�就�q�反了上�q�的法则4�Q�再加上所有的链接都包含了相同的内�?/span>�Q?/span>vehicle model [车辆�c�d��]�Q�，�q�就使得��链接更加不明显�?/span>

If I click on "Aston Martin DB7 GT", I would expect to get general information about the Aston Martin DB7 GT car. This breaks Principle 3, because the link is not accurately describing what I'll get if I click it.

如果我点�?#8220;Aston Martin DB7 GT”�q�个链接�Q�希望获取关�?#8220;Aston Martin DB7 GT”型汽车的大体信息。但是，我发现最�l�获取的信息和链接的描述存在出入。那么，�q�就�q�反了法�?/span>3�?/span>

What should they do?
�|�站该如何改�q�？

The "thing you get" is the information about a particular car. The thing that represents the particular car is the entire table row. There is no other unique identifier for the car (mileage, price etc. aren't necessarily unique). Therefore, the whole row should be the clickable hyperlink. (It would also be helpful if the row changed colour/tone on mouseover).

“thing you get [你所获取的资�?/span>]”应该是与一辆汽车相关的信息�Q�这些代表特定�R型的信息应该占据整个表格列；同时�Q�因��里没有包含具体�R型信息（如：英里数、�h格等�Q�的��认对象�Q�所以，表格的整列必��M��为可点击的超链接对象。（如果鼠标�U�至��链接上能够产生变色效果的话�Q�将更有助于辨认�Q��?/span>

Expressing size in hyperlinks
描述��链接对象的��寸大小

It's quite common to find computers putting out this kind of information to set user's expectations when linking to a file:
当链接到一个文件时�Q�我们通常会发现超链接上包含一�D�关于文件大��尺寸的描述�Q�这有助于用户决定自��q��意愿�Q�即�Q�是否点击该文�g链接�Q��?/span>

如：PDF (46,764 bytes)

Thinking about the user's goals, what they need is to know roughly how long the download will take: will it be a few seconds, or minutes? That's generally as accurate as it needs to be.

好好思考一下用��L��目标是什么，通常情况下，他们需要知道下载需要花��d��长时��_��是几�U�钟�Q�还是几分钟�Q�因此，我们应该对其作出��可能精准的描述�?/span>

What should it be?
应该怎样描述上述的文件尺寸呢�Q?/span>

There's no benefit at all in showing more than two significant figures in file sizes. Above should be 47KB. Also, only ever use kilobytes or megabytes for file sizes online. (Good, useful file sizes to 2 significant figures run: 4.7KB, 47KB, 470KB, 4.7MB etc.)

�Ҏ��件尺寸的描述最好不要超�q�两位有效数字。上�q�文件尺寸应该写�?/span>47KB。因此，�|�络上应��可能地使用千字节（kb�Q�或兆字节（mb�Q�对文�g�q�行描述。（我们推荐�?/span>2位数字描�q�法如下�Q?/span>4.7KB, 47KB, 470KB, 4.7MB�{�等�Q?/span>

Formatting hyperlinks
对超链接定义格式

If we have to differentiate text hyperlinks from other text, should this be done with colour or formatting such as underlining/emboldening?

如果我们需要在一个文本中区分不同的文字链接，我们应该对超链接的部分��用不同于普通文本的颜色�Q�或者对��链的文字加上下划线�Q�或者加�_��?/span>

The de facto convention has been that hyperlinks are rendered in blue with underlines, that they turn red when clicked, and that visited links are purple.

默认的超链接动作对应的颜色变化是�Q��v初，��链接是蓝色的，�q�带有下划线�Q�当点击�Ӟ��它会变成�U�色�Q�访问过的超链接��会以��色显�C��?/span>

The most readable way to render most text is black on a white background, and making text hyperlinks blue (#00f) works very well on white. It is clearly distinguishable from regular black text, while still providing enough visual contrast to be readable.

最常用的增加超链接可读性的�Ҏ��是：整体��面为黑字白底，文字��链接�ؓ蓝色�Q?/span>#00f�Q�。这样做可以使得颜色的视觉对比度明显�Q�从而便于区分超链接内容和文本内容，增加可读性�?/span>

Blue hyperlink in greyscale: with and without underline.

��链接的颜色可以有灰色替代蓝�Ԍ��带不带有下划�U�均可�?/span>

It's appropriate to ask if differentiating by colour alone will work for people who are colourblind. The image above is a screen capture of this page, totally desaturated. It shows that, even without colour, there is sufficient tonal difference between black and blue to make the hyperlink clear. The underlined version is a little bit clearer, but showing underline on hover would serve a similar purpose.

同时你还要考虑到如果仅仅依靠颜色的变化来区分超链接状态的话，那么色盲们可以接受吗�Q�最好是询问一下他们是否能辨别�q�些颜色。上面的囄��是页面截图，从上面的囄��中你可以看到�Q�即使不使用��链接的颜色变化效果�Q�仅使用黑色和蓝色也能够很清楚的辨认��链接。给��链接加上下划线��更有助于用戯��L认超链接�Q�或者是当鼠标经�q�超链接时出��C��划线�Q�这样也能达到同��L��效果�?/span>

Should hypelinks be underlined?
��链接是否需要带有下划线�Q?/span>

Underlining works okay for occasional inline links.

对于不经�怋�用的内置��链接可以加上下划线�?/span>

It makes the link stand out a little more than colour alone.

通过对超链接使用下划�U�（与仅对超链接�q�行颜色变化�Q�更能�v到突��链接的作用�?/span>

In this example, the underlining works well to distinguish article titles from the sub-title.

在这个案例中�Q�下划线可以清楚地区分主标题和二�U�标题�?/span>

I think underlining becomes unhelpful when there are numerous inline links in paragraphs, in lists of links, and when there are lots of sets of links on a page.

如果�D�落中、链接列表中或页面中的超链接�q�多�Q�那对这些链接��用下划线��v不到��M��H�出作用�?/span>

Here are a couple of examples of collections of hyperlinks, showing the original (underlined) and the same with underlines removed.

下面两组��链接效果的�Ҏ��。左边的��链接包含下划线�Q�右边则不包含下划线�Q�具体如下：

Notice how it's quicker and easier to read the non-underlined blocks of text.

��h��意：如果像上面这��L��链接列表�Q�那么不使用下划�U�将更有助于快速、简便地阅读�?/span>

In this second example, I have also adjusted the line spacing to make the related words clearer.

在第二个案例中，我还调整了单词之间的间距以��其看上去更加清晰�?/span>

Consistency
一致�?/span>

It is important that hyperlink formats behave consistently across pages.

�q�有一点很重要�Q�就是所有页面的��链接格式最好保持一致�?/span>

Obviously, where some text links are on different backgrounds, such as in navigation bars, they may need to use special colours or treatments.

很显�Ӟ��当超链接位于不同的背景时�Q�如�Q�位于导航条内，那么我们��对其��用特别的颜色和效果�?/span>

The above snippets are taken from the Guardian Online homepage

上面的片断来自于Guardian Online的首��c�?/span>

While most links look similar (#036, mainly not underlined, there are several very different styles applied on the hover, when the mouse pointer moves over the active link.

上面的超链接格式看上��d��本相同（字体颜色#036�Q�超链接基本上不带下划线�Q�当鼠标�l�过��链接时产生的效果各不相同）�?/span>

The psychological effect is disconcerting: you are left doubting whether all links will do similar things (i.e. go to another page on this site), or whether you might be taken unexpectedly somewhere else. I think that this schizophrenic behaviour weakens the brand experience, as well as diminishing usability.

从心里学角度�Ԍ��q�样的效果处理会让�h感到不安�Q�同�Ӟ��你会�Ҏ��留有疑虑�Q�是否所用的链接全是�q�样�Q�包括其它页面）�Q�是否会链接��C��个出乎意料的地方。我认�ؓ�Q�这�U�让人感到精��分裂的效果处理�Ҏ��削��q��户对该网站品牌的映像�Q�同�Ӟ��|�站的可用性也��大打折扣�?/span>

There is no good reason to treat all the hyperlinks differently. The third example also breaks the second principle, because its colour change makes it weaker, less noticeable, which is not 'highlighting'.

我们不可以对所有的��链接都使用不同的效果。上面的�W�三个案例违反了�W�二个法则；因�ؓ不同的颜色变化�ɭ��变得毫无重点，�Ҏ��起不到突出的作用

Conclusion
�l�论

On balance, it seems that the predominant convention in the industry is to keep #00f or #00c (slightly darker) blue for links, and to make links red and (optionally) underlined on hover.

总而言之，最��L��点的��链接颜色效果变化是�Q��?/span> #00f �?/span> #00c�Q�颜色较前者稍微暗点）�Q�作��链接的字体颜�Ԍ��当鼠标经�q�时�Q��用红色或者加上一条下滑线来突昑֮��?/span>

I think that this provides the best balance of functionality when applied consistently to inline hyperlinks and grouped hyperlinks.

我认为：�Ҏ��有的内置��链接和��组��链接��用相同的效果变化能够在其功能性保持最好的�q��?/span>

胡昆�?/a> 2007-10-26 12:37 发表评论

九色porny自拍视频在线播放,国产成人av一区二区,2021国产精品视频