網(wǎng)頁(yè)設(shè)計(jì)制作之改進(jìn)超級(jí)鏈接效果

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

超鏈接可以使訪問(wèn)者從一個(gè)頁(yè)面跳轉(zhuǎn)至另外一個(gè)頁(yè)面，或從一個(gè)站點(diǎn)跳轉(zhuǎn)至另外一個(gè)站點(diǎn)。但是，這種頻繁的跳轉(zhuǎn)可能使人們產(chǎn)生焦慮。

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

為了方便用戶更好的瀏覽頁(yè)面，超鏈接必須絕對(duì)的簡(jiǎn)潔明了。

Principles
法則

1. Text hyperlinks should be clearly distinguishable from normal text.
超鏈接文字必須與普通的內(nèi)容文字相區(qū)別

2. Any mouseover behaviour should have a highlighting effect.
鼠標(biāo)移動(dòng)到超鏈接上時(shí)必須要顯示突出效果

3.Hyperlink content should be as short as possible, yet long enough to identify either:
超鏈接的具體內(nèi)容必須要言簡(jiǎn)意賅（短而精）：

<!--[if !supportLists]-->· <!--[endif]-->Where you’ll go [跳轉(zhuǎn)地址]

<!--[if !supportLists]-->· <!--[endif]-->What you’ll get [希望獲取什么內(nèi)容]

<!--[if !supportLists]-->· <!--[endif]-->What you want to happen [希望產(chǎn)生什么效果]

4. Hyperlinks with different targets should be clearly distinguishable.
指向不同目標(biāo)的超鏈接必須要清晰可辨

5. Hyperlinks should give an indication of any unanticipated consequences, e.g.:
對(duì)點(diǎn)擊超鏈接后會(huì)出現(xiàn)的特殊情況加以解釋，如：

<!--[if !supportLists]-->· <!--[endif]-->Links to files [鏈接至一個(gè)文件]

<!--[if !supportLists]-->· <!--[endif]-->Links that open or close windows [點(diǎn)擊鏈接后會(huì)打開(kāi)或關(guān)閉窗口]

What do you make a link?
考慮一下制作這個(gè)超鏈接的目的是什么

Hyperlink content example: Amapproved.com
超鏈接內(nèi)容舉例：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).

這個(gè)案例是Aston Martins [阿斯頓·馬丁] 汽車的網(wǎng)站�？梢赃@樣說(shuō)，它的整體外觀設(shè)計(jì)堪稱經(jīng)典。這是一個(gè)搜索結(jié)果顯示頁(yè)面。那么現(xiàn)在，你想象一下，該如何通過(guò)搜索結(jié)果的方式來(lái)查閱有關(guān)車輛的詳細(xì)介紹。這里僅有的超鏈接就是關(guān)于“Vehicle summary column [車輛基本列表]”中的“vehicle model[車輛模型]”。

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.

首先所面臨的最大問(wèn)題就是，你不能區(qū)分那個(gè)是超鏈接。這違反了法則1，即：你不知道該點(diǎn)擊那里來(lái)獲取更多的信息，因此，你必須先考慮這個(gè)問(wèn)題

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.

第二個(gè)問(wèn)題是：盡管這些鏈接指向完全不同的目標(biāo)（每個(gè)不同的鏈接都使用了名稱“Aston Martin”），但它們看上去幾乎一樣，這就違反了上述的法則4；再加上所有的鏈接都包含了相同的內(nèi)容（vehicle model [車輛類型]），這就使得超鏈接更加不明顯。

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.

如果我點(diǎn)擊“Aston Martin DB7 GT”這個(gè)鏈接，希望獲取關(guān)于“Aston Martin DB7 GT”型汽車的大體信息。但是，我發(fā)現(xiàn)最終獲取的信息和鏈接的描述存在出入。那么，這就違反了法則3。

What should they do?
網(wǎng)站該如何改進(jìn)？

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 [你所獲取的資料]”應(yīng)該是與一輛汽車相關(guān)的信息，這些代表特定車型的信息應(yīng)該占據(jù)整個(gè)表格列；同時(shí)，因?yàn)檫@里沒(méi)有包含具體車型信息（如：英里數(shù)、價(jià)格等）的確認(rèn)對(duì)象，所以，表格的整列必須作為可點(diǎn)擊的超鏈接對(duì)象。（如果鼠標(biāo)移至超鏈接上能夠產(chǎn)生變色效果的話，將更有助于辨認(rèn)）。

Expressing size in hyperlinks
描述超鏈接對(duì)象的尺寸大小

It’s quite common to find computers putting out this kind of information to set user’s expectations when linking to a file:
當(dāng)鏈接到一個(gè)文件時(shí)，我們通常會(huì)發(fā)現(xiàn)超鏈接上包含一段關(guān)于文件大小尺寸的描述，這有助于用戶決定自己的意愿（即：是否點(diǎn)擊該文件鏈接）。

如：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.

好好思考一下用戶的目標(biāo)是什么，通常情況下，他們需要知道下載需要花去多長(zhǎng)時(shí)間：是幾秒鐘，還是幾分鐘？因此，我們應(yīng)該對(duì)其作出盡可能精準(zhǔn)的描述。

What should it be?
應(yīng)該怎樣描述上述的文件尺寸呢？

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.)

對(duì)文件尺寸的描述最好不要超過(guò)兩位有效數(shù)字。上述文件尺寸應(yīng)該寫成47KB。因此，網(wǎng)絡(luò)上應(yīng)盡可能地使用千字節(jié)（kb）或兆字節(jié)（mb）對(duì)文件進(jìn)行描述。（我們推薦的2位數(shù)字描述法如下：4.7KB, 47KB, 470KB, 4.7MB等等）

Formatting hyperlinks
對(duì)超鏈接定義格式

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

如果我們需要在一個(gè)文本中區(qū)分不同的文字鏈接，我們應(yīng)該對(duì)超鏈接的部分使用不同于普通文本的顏色，或者對(duì)超鏈的文字加上下劃線，或者加粗。

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.

默認(rèn)的超鏈接動(dòng)作對(duì)應(yīng)的顏色變化是：起初，超鏈接是藍(lán)色的，并帶有下劃線；當(dāng)點(diǎn)擊時(shí)，它會(huì)變成紅色；訪問(wèn)過(guò)的超鏈接將會(huì)以紫色顯示。

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.

最常用的增加超鏈接可讀性的方法是：整體頁(yè)面為黑字白底，文字超鏈接為藍(lán)色（#00f）。這樣做可以使得顏色的視覺(jué)對(duì)比度明顯，從而便于區(qū)分超鏈接內(nèi)容和文本內(nèi)容，增加可讀性。

Blue hyperlink in greyscale: with and without underline.

超鏈接的顏色可以有灰色替代藍(lán)色，帶不帶有下劃線均可。

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.

同時(shí)你還要考慮到如果僅僅依靠顏色的變化來(lái)區(qū)分超鏈接狀態(tài)的話，那么色盲們可以接受嗎？最好是詢問(wèn)一下他們是否能辨別這些顏色。上面的圖片是頁(yè)面截圖，從上面的圖片中你可以看到，即使不使用超鏈接的顏色變化效果，僅使用黑色和藍(lán)色也能夠很清楚的辨認(rèn)出超鏈接。給超鏈接加上下劃線將更有助于用戶辨認(rèn)超鏈接；或者是當(dāng)鼠標(biāo)經(jīng)過(guò)超鏈接時(shí)出現(xiàn)下劃線，這樣也能達(dá)到同樣的效果。

Should hypelinks be underlined?
超鏈接是否需要帶有下劃線？

Underlining works okay for occasional inline links.

對(duì)于不經(jīng)常使用的內(nèi)置超鏈接可以加上下劃線。

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

通過(guò)對(duì)超鏈接使用下劃線（與僅對(duì)超鏈接進(jìn)行顏色變化）更能起到突出超鏈接的作用。

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

在這個(gè)案例中，下劃線可以清楚地區(qū)分主標(biāo)題和二級(jí)標(biāo)題。

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.

如果段落中、鏈接列表中或頁(yè)面中的超鏈接過(guò)多，那對(duì)這些鏈接使用下劃線將起不到任何突出作用。

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

下面兩組超鏈接效果的對(duì)比。左邊的超鏈接包含下劃線，右邊則不包含下劃線，具體如下：

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

請(qǐng)注意：如果像上面這樣的鏈接列表，那么不使用下劃線將更有助于快速、簡(jiǎn)便地閱讀。

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

在第二個(gè)案例中，我還調(diào)整了單詞之間的間距以使其看上去更加清晰。

Consistency
一致性

It is important that hyperlink formats behave consistently across pages.

還有一點(diǎn)很重要，就是所有頁(yè)面的超鏈接格式最好保持一致。

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

很顯然，當(dāng)超鏈接位于不同的背景時(shí)，如：位于導(dǎo)航條內(nèi)，那么我們將對(duì)其使用特別的顏色和效果。

The above snippets are taken from the Guardian Online homepage

上面的片斷來(lái)自于Guardian Online的首頁(yè)。

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.

上面的超鏈接格式看上去基本相同（字體顏色#036，超鏈接基本上不帶下劃線，當(dāng)鼠標(biāo)經(jīng)過(guò)超鏈接時(shí)產(chǎn)生的效果各不相同）。

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.

從心里學(xué)角度講，這樣的效果處理會(huì)讓人感到不安；同時(shí)，你會(huì)對(duì)此留有疑慮：是否所用的鏈接全是這樣（包括其它頁(yè)面）；是否會(huì)鏈接到一個(gè)出乎意料的地方。我認(rèn)為，這種讓人感到精神分裂的效果處理方法將削弱用戶對(duì)該網(wǎng)站品牌的映像，同時(shí)，網(wǎng)站的可用性也將大打折扣。

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’.

我們不可以對(duì)所有的超鏈接都使用不同的效果。上面的第三個(gè)案例違反了第二個(gè)法則；因?yàn)椴煌�的顏色變化使超變得毫無(wú)重點(diǎn)，根本起不到突出的作用

Conclusion
結(jié)論

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.

總而言之，最具特點(diǎn)的超鏈接顏色效果變化是：使用#00f 或#00c（顏色較前者稍微暗點(diǎn)），作為超鏈接的字體顏色；當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí)，使用紅色或者加上一條下滑線來(lái)突顯它。

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

我認(rèn)為：對(duì)所有的內(nèi)置超鏈接和群組超鏈接使用相同的效果變化能夠在其功能性保持最好的平衡。