A Short Story About “Back To Top” Links
Smashing Magazine版權(quán)所有
作者：Smashing Magazine
譯者：UCD翻譯小組，波希米亞
原文地址： http://www.smashingmagazine.com/2008/11/27/short-story-about-top-links/
譯者序：這篇文章可以說(shuō)以一種輕松、有趣的方式，對(duì)“Back to Top”有害頁(yè)面健康？做了一個(gè)很好的回答。作者花了很長(zhǎng)時(shí)間收集一些實(shí)實(shí)在在的使用案例，更直觀的展示了“Back to Top”在網(wǎng)站中的使用，同時(shí)也明確表達(dá)了自己的觀點(diǎn)。用“細(xì)節(jié)決定成敗”開(kāi)篇，也突出了本文編寫(xiě)的精細(xì)。
通常關(guān)注小細(xì)節(jié)可以讓設(shè)計(jì)更杰出。在一個(gè)網(wǎng)站的開(kāi)發(fā)過(guò)程中，設(shè)計(jì)者趨于忘記小細(xì)節(jié)，把精力都集中在主要的設(shè)計(jì)元素上，比如導(dǎo)航，排版和布局。如果真的完成了，那結(jié)果通常是很穩(wěn)定的、讓人印象深刻的，而且高專業(yè)的傳達(dá)了信息。然而，這并不值得驕傲。原因是因?yàn)檫@種設(shè)計(jì)通常都沒(méi)有一個(gè)值得記憶的點(diǎn)：他們可能看上去很吸引人，但沒(méi)法提供給用戶一個(gè)栩栩如生的形象，讓用戶離開(kāi)網(wǎng)站后還能想起它。
這樣看來(lái)，小細(xì)節(jié)是重要的，因?yàn)樗麄兛梢詭椭O(shè)計(jì)脫穎而出。你是否曾思考過(guò)你的購(gòu)物車的設(shè)計(jì)？那標(biāo)簽、時(shí)間戳、“向前”和“向后”的鏈接呢？雖然這些小細(xì)節(jié)對(duì)于網(wǎng)站的導(dǎo)航來(lái)說(shuō)是無(wú)關(guān)緊要的，但他們卻意味著是用戶界面更友好、使用更方便甚至有時(shí)是更成熟的設(shè)計(jì)。這也是為什么我們?cè)谌缦率虑樯蠟樽x者們考慮更多的原因，如：圖片說(shuō)明, 引用區(qū)塊, 時(shí)間戳, 購(gòu)物車, 翻頁(yè), <hr> 線, 標(biāo)簽云 和 favicons.
在這篇文章里，我們來(lái)展示“Back to top”鏈接的設(shè)計(jì)——這個(gè)幫助用戶跳回頁(yè)面頂部的被遺忘，并且不常用的鏈接。訪問(wèn)者通過(guò)按他/她鍵盤(pán)上的“Home”鍵也能達(dá)到同樣效果；但不是每個(gè)用戶都知道這條捷徑，絕大多數(shù)人都使用瀏覽器的滾動(dòng)條來(lái)完成這個(gè)目的。作為設(shè)計(jì)者，我們可以通過(guò)在頁(yè)面上加一個(gè)“top”鏈接來(lái)幫助用戶。
“Back to Top”鏈接什么時(shí)候有用
不幸的是，這么友好的服務(wù)——可以讓用戶跳到頁(yè)面頂部——卻不常見(jiàn)。大多數(shù)設(shè)計(jì)者都不用它，這也是我們?yōu)槭裁椿?周時(shí)間，為這篇文章去收集了至少一打漂亮的案例。
事實(shí)上，“Back to top” 鏈接也不是一直都有用。比如說(shuō)，他們對(duì)于一個(gè)很短的網(wǎng)站或文章來(lái)說(shuō)就是不必要的。在這種情況里，沒(méi)必要讓用戶回到頁(yè)面頂部，因?yàn)檫@個(gè)頁(yè)面都在視線范圍內(nèi)；如果一個(gè)“top”鏈接出現(xiàn)在這種頁(yè)面上，點(diǎn)擊后會(huì)發(fā)現(xiàn)沒(méi)有產(chǎn)生任何效果，這確實(shí)挺氣人的。另一個(gè)為什么很多設(shè)計(jì)者不用它的原因是：眼下各式各樣的顯示器分辨率使“top”鏈接變得無(wú)用或沒(méi)必要。這就是為什么在很短的頁(yè)面上使用“Back to top”鏈接不是個(gè)好主意的原因了。
然而，當(dāng)網(wǎng)頁(yè)較長(zhǎng)時(shí)，就給訪問(wèn)者展示了它極好的特性，既省時(shí)間，又不用去滑鼠標(biāo)滾輪兒。
在何處放置“Top”鏈接？
最顯而易見(jiàn)和普遍的做法，就是把“Back to top”鏈接放在頁(yè)腳。這里是它應(yīng)該出現(xiàn)的地方。我們沒(méi)法給出一個(gè)關(guān)于“Back to top”鏈接的通用的設(shè)計(jì)方案。一些設(shè)計(jì)者把它放在頁(yè)腳左側(cè)，另一些把它放在中間，也一些把它放在頁(yè)腳右側(cè)的。把“top”鏈接放在內(nèi)容的左手邊，或直接放在內(nèi)容結(jié)尾也都是很常見(jiàn)的做法。
看見(jiàn)這個(gè)友好的“top”鏈接了吧：通常被放在頁(yè)腳，它的出現(xiàn)一直很適度并且?guī)缀鹾π摺?/EM>
“Back to top”也經(jīng)常被使用在FAQs中，用來(lái)幫助在章節(jié)和站點(diǎn)地圖中劃分篇章或段落，以提供給用戶一個(gè)快速回到頁(yè)面開(kāi)始處的方式，因?yàn)樵谀抢镉兄鲗?dǎo)航。
如何創(chuàng)建“Top”鏈接？
讓鏈接指向頁(yè)面的頂部，多數(shù)情況都是放一個(gè)空錨點(diǎn)緊跟在<footer>標(biāo)簽后面：
<div id="footer">
<!-- footer goes here -->
<a href="#">top</a>
</div>
然而，老一點(diǎn)的瀏覽器，特別是有“考古價(jià)值的”瀏覽器，在解析這個(gè)代碼時(shí)是有問(wèn)題的。替代的方法是用一個(gè)真正的錨點(diǎn)，明確它的意圖，緊跟在<body>標(biāo)簽的后面：
<body>
<a name="top"></a>
<!-- content goes here -->
<a href="#top">top</a>
</body>
更新：另一個(gè)方法可以避免冗余的代碼，因此首選方法是利用wrapper或header的id屬性達(dá)到相同目的。比如，如果你用id為”wrapper”的div標(biāo)簽，你可以像下面這樣去寫(xiě)代碼：
<body>
<div id="wrapper">
<!-- content goes here -->
<a href="#wrapper">back to top</a>
</div>
</body>
當(dāng)然，這個(gè)鏈接本身不一定非得是文字；也可以是圖片，按鈕或其他元素（用圖片可能會(huì)有一些可用性問(wèn)題——往下看）。
措辭
不用擔(dān)心你實(shí)際使用的措辭：你只需要保證訪問(wèn)者能夠理解這個(gè)鏈接的功能，而不懊惱就行了。比如，使用“Return”大概就不是個(gè)好主意，因?yàn)榭吹剿茈y立即搞清楚它是帶用戶去首頁(yè)，回瀏覽歷史的上一頁(yè)，還是到頁(yè)面頂部。
用清晰簡(jiǎn)明的措辭，例如“Go to top,” “Back to top,” “Return to top” 或者 “Jump to top”。有時(shí)“Up”也可以無(wú)傷大雅的用一下。然而，我們不認(rèn)為這是一個(gè)好主意，或者說(shuō)根本不是好主意。
問(wèn)題和劣勢(shì)
一些可用性專家，甚至可用性研究的宗師——Jakob Nielsen，一致排斥“top”鏈接，認(rèn)為它有害頁(yè)面健康。在他們看來(lái)，頁(yè)內(nèi)鏈接應(yīng)當(dāng)堅(jiān)決避免，因?yàn)闉g覽器滾動(dòng)條足以應(yīng)付，并且額外的方法也沒(méi)有必要。然而，他們贊同在那些頁(yè)面極長(zhǎng)或無(wú)法避免的情況下，使用“Back to top”可能是有幫助的。
使用“top”鏈接的一個(gè)最主要的問(wèn)題在于，他們影響瀏覽器的導(dǎo)航按鈕，從而干擾了瀏覽歷史。因?yàn)椤皌op”鏈接就像個(gè)錨點(diǎn)，在點(diǎn)擊瀏覽器 “back”按鈕時(shí)，帶用戶去的就是眼下正在看的頁(yè)面底部，而不是上一頁(yè)。除此之外，可訪問(wèn)性專家主張“Back to top”鏈接可能會(huì)擾亂朗讀工具的使用，“top”的概念是模糊的，而且“Back to top”鏈接也不是網(wǎng)站從始至終都在用的。
