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