返回頂部按鈕設計指南

摘要：返回頂部按鈕可以幫助用戶導航到長頁面的頂部。

關鍵詞：可用性，交互設計

當用戶到達一個非常長頁面的底部時，通常需要回到頂部以便：

• 查看導航菜單並選擇新目的地
• 訪問篩選和排序功能
• 在搜索框中輸入並搜索

操作系統和瀏覽器已經提供瞭多種方法來返回頂部：按鍵盤上的Home鍵、在iOS 點擊 Safari 中的狀態欄、使用快捷命令等等。

但是這些技術對於一般用戶來說太隱蔽瞭，他們通常隻會用手指或鼠標向上滾動。

當頁面太長的時候，返回頂部按鈕就很必要瞭。

返回頂部按鈕可用性設計指南

1、超過4個屏幕的頁面，就需要增加返回頂部按鈕。

2、返回頂部按鈕可以放在頁面右下方。按鈕放在其他地方

3、按鈕需要添加文本標簽返回頂部，隻放一個圖標是不夠的。

b4f45e9cdb9d5041f762d425afecf73d

4、每個頁面隻放一個返回頂部按鈕，重復的鏈接和按鈕隻會讓用戶忽略它們。

360a2c472c3aed01aad2f42919a554b8

5、網頁上的按鈕可以較小，如果是移動設備則需要設置的足夠大。

6、使按鈕在頁面上突出。當返回頂部按鈕不夠突出，用戶就不太可能註意到和使用它。

7、當用戶想要向上滾動時才出現“返回頂部按鈕”。因此，該按鈕僅在最有可能需要時出現，而不會在其餘時間覆蓋屏幕的重要部分。

8、按鈕應該靜止。一旦出現，不要讓它移動。移動元素會引起很大的幹擾，因為用戶眼睛會自動被屏幕上的任何移動所吸引。

9、讓用戶 控制 頁面滾動。永遠不要讓頁面自動滾動，例如當頁面頂部出現新內容時。

返回頂部的替代方案

頁面底部的導航可以滿足那些想要返回頂部導航或搜索其他內容的人。當用戶傾向於滾動到長頁面最底部時，這種方法最有效。

8f9b278784524f5c4d55c18f45f40028

http://Etsy.com：該網站不使用 Back to Top ，而是在頁腳內和附近提供鏈接以支持用戶使用。

粘性菜單有時是比返回頂部按鈕更優雅的解決方案。如果滾動的主要目的是導航到網站的不同主題或部分，則在人們需要時提供正確的菜單選項就無需返回。

http://Nordstrom.com：該網站將菜單保持在頁面的一側，從而避免瞭需要 返回頂部 。

社交網站上的主頁按鈕通常會將人們帶到主頁的頂部。

http://Twitter.com： 主頁 按鈕兼作 返回頂部按鈕。

完