「回到頂部」按鈕的設計指南

01-31

原作者：Hoa Loranger／原文章：Back-to-Top Button Design Guidelines／發布時間：08-27-2017 ／翻譯：小球娘

幾句話概述：本文是關於用來幫助用戶在長頁面中回到頂部的按鈕的9條設計指南。基於用戶需求的不同，有些網站可能適用別的技術方式。

隨著響應式設計的流行，無論在移動端還是桌面系統里，縱向單一布局（single-column）搭配加長頁面的設計隨之激增。隨著這種設計形式而來的是「回到頂部」按鈕，它可以便捷的讓用戶回到頁面頂部位置。

當用戶處在長頁面底部位置的時候，他們往往需要回到頂部以便於：

從導航菜單選擇新的任務和目標
使用過濾和排序功能
在搜索區域中輸入或修改關鍵詞

各類操作系統和瀏覽器已經提供了多種做這些事的途徑：如在鍵盤上按下Home鍵，在蘋果safari瀏覽器的狀態條里輸入字元，使用快捷方式等。

但是，這些剛提到的功能對於技術類用戶（例如正在閱讀這篇文章的讀者）來說可能並不新鮮，但大多數用戶並不知道。這些輔助技術對於一般的網路用戶來說隱藏的太深並太少用到，他們一般只是用手指或滑鼠進行簡單的滾動頁面操作。當頁面非常長的時候（例如「無限載入」頁面）想通過滾動回到之前的位置非常麻煩，這時候「回到頂部」按鈕就適時登場了。

關於「回到頂部」按鈕的9條設計指南

下面是一些可以幫助你在設計中決定何時使用和如何得出有效的「回到頂部」按鈕的指南。

在長度為4屏以上的頁面上使用"回到頂部"按鈕。對於相對短的頁面來說，使用"回到頂部"按鈕是過猶不及 - 人們不需要很費力就能回到之前的位置。當可以簡單的使用拖動條或手指輕易回到頂部時，就根本不需要添加按鈕來讓界面更擁擠。
應當把「回到頂部」按鈕一直放在頁面的右邊靠下的位置，這是人們期待看見這類按鈕的地方。這個位置不會遮擋主要內容，但仍然能被注意到。當這類按鈕出現在頁面其他地方時，往往都被忽視了。
給「回到頂部」按鈕加上文字標籤。「回到頂部」這幾個字最能說明問題。如果只使用一個圖標（例如一個向上指的箭頭）是可能表意模糊的，並且基於圖形設計問題還可能造成曲解意思。

http://MedlinePlus.gov：這個箭頭圖標單看的時候表意模糊。如果加上文字標籤就會幫助克服這類問題。

Overstock.com: 這個「回到頂部」的文字標籤跟箭頭圖標搭配使用，可以清楚的闡釋這個按鈕的用途。

4- 使用唯一一個粘著模式的「回到頂部」按鈕，不要在頁面不同位置加入多個功能相同的鏈接。（這種模塊曾經以「錨點」鏈接的形式在頁面設計中流行）在使用性測試中，我們觀察到人們會忽略這些重複的鏈接，因為它們出現太多次並太可預測。

USA.gov: 這些重複的「回到頂部」鏈接增加了視覺雜亂度，反而導致它們被忽視。

5- 使用小尺寸按鈕以防止遮蓋其它重要頁面元素。但是，對於觸屏設備來說，需要保證按鈕足夠大以便人們可以點擊到。

6- 讓按鈕視覺上從頁面中突出出來，不能混在一起。當「回到頂部」按鈕跟背景內容過於混淆的時候，用戶往往注意不到它的存在而無法使用它。

7- 考慮讓「回到頂部」按鈕延遲出現，在用戶滾動了幾個頁面並表現出想往回滾動的傾向（例如，上移拖動條，上提頁面）時再予以顯示。由此，按鈕可以在最被需要的時候顯示出來，而不會在其它時間遮擋住重要的頁面內容。

Overstock.com: 「回到頂部」按鈕只在頁面被向上滾動的時候顯示出來。（並且像我們推薦的一樣，顯示在頁面右下方）

8- 讓按鈕位置固定。按鈕一旦顯示，就應當呆在原處。移動的頁面元素會造成極大的干擾，因為人眼會自動被屏幕上任何會移動的東西吸引。

9- 讓用戶控制滾動。永遠不要讓頁面自動滾動，例如有新內容在頁面頂部出現的時候（不要讓頁面自動追過去顯示），這時候應該顯示提醒消息並讓用戶自己決定是否需要滾動頁面查看新內容。

替代「回到頂部」按鈕的其它方式

還有很多別的方法讓人們去到他們需要訪問的地方，因為回到頂部實際是一種操作周期的完成，如果你能預測用戶需求並把內容提供給他們，這樣更加理想。以下是一些方法：

頁面底部的導航可以滿足那些想回到頂部導航搜索別的內容的人。這個方法最適用於當用戶已經滾動到網站長頁面最最底部的時候。

Etsy.com: 跟使用「回到頂部」按鈕相比，這個網站提供在頁腳附近的導航系統來支持用戶流程體驗。

粘著菜單是比「回到頂部」按鈕更加優雅的解決方案。如果滾動頁面的主要目的是去使用導航來訪問網站的不同區域，那麼在人們需要時提供相應的可訪問部分的鏈接就可避免滾動回到頂部的操作。

類似的，如果回到頂部的主要目的是訪問一般放置在頁面頂部的部分和功能的話（例如過濾器，排列，搜索，下一頁等），那麼在人們向上滾動頁面時顯示這些模塊就成為了適時剛好的輔助功能。

Nordstorm.com:這個網站把相應功能設計粘著在頁面側邊的位置，由此減免大多數購買流程中需要回到頂部的操作。

社交網站上的Home按鈕往往把人們直接帶回個人頁面的頂部，因為這類頁面往往都內容過長，非常需要一個快捷方法回到頂部。大多數人在社交網站上都非常習慣於點擊Home按鈕回到個人頁面的最頂部。

然而也許Home按鈕在社交網站上十分好用，但不要在其他類型的網站上依賴它。在其他一般網站上，人們期待Home按鈕將他們帶到網站首頁，並非當前頁面的頂部。

Twitter.com: Home按鈕的作用是回到頂部。

結論

有很多好的解決辦法可以帶人們回到頁面頂部。在你決定加進「回到頂部」鏈接之前，考慮一下你的網站使用情境，然後再決定哪種方式才是對你的用戶最有益的。

-------------小球娘的話------------------------------------------------

終於等到一個公共假期，勞動節。國內過的是共產國際勞動節，所以不是一回事。。。嗯，還想起了6-1兒童節，那個也是共產國際兒童節，所以美帝國主義也沒有。

昨晚請一個好朋友吃飯，她剛決定回國了，導致我直到現在心情都比較down，感覺能聊天的人越來越少了。找個人好的，你看得上的，看得上你的，有共同話題的，有趣有內容的朋友多難啊！！！好不容易找到了也很容易就短暫相聚後各奔東西了。

紐約這個地方，只留青春不留人。