“返回頂部”這一按鈕的出現，完全是基于用戶體驗改良而出現的。當用戶想要返回頁面頂部時，他們通常出于以下目的：
1.回到導航欄并尋找下一個瀏覽的目標
2.更改內容的排序方式或尋找篩選按鈕等（常見于電商網站，淘寶等）
3.使用網頁中的搜索功能
然而當頁面很長時，利用鼠標滾動返回頂部的體驗會變得非常差。盡管操作系統與瀏覽器提供了各種各樣的返回頂部的方式：比如按下鍵盤home鍵等等，但是普及程度并不高，在調查中發現，大多數用戶依舊選擇使用滑動與滾輪等方式來達到放回頁面頂部的目的。鑒于此現象，“返回頂部”這一快捷的方式便自然的出現了。
在本文中，新銳建站將會講解什么樣的頁面應當具備“返回頂部”按鈕，以及該按鈕設計的9大準則。
1.要使用“返回頂部”，在頁面長度上應當超過4屏。當頁面長度不夠時，“返回頂部”按鈕將會變得畫蛇添足—用戶要返回頁面頂部通過滾輪等方式便可輕松實現。
2.“返回頂部”的位置一定要位于頁面右下角。這是一種約定俗成的準則，當用戶需要這個功能時，他們的第一反應就是去右下角尋找。當“返回頂部”沒有放置在這個位置時，通常用戶會忽略該按鈕，并認為當前頁面不具備這個功能。
3.為“返回頂部”按鈕加上書面解釋—返回頂部。僅僅一個向上的箭頭圖形通常不足以傳達足夠準確的含義，甚至可能出現不必要的誤解，盡可能加上書面解釋，降低用戶的認知壓力。
簡單的兩個例子對比，明顯可以看出附有文本解釋的按鈕效果會更好。
4.一個頁面應當只有一個“返回頂部”按鈕，而不是在多個分節上并存多個。實際用戶測試表明，當頁面中含有多個“返回頂部”按鈕時，用戶通常會忽視該按鈕，反而不如單個的按鈕有效。
多個同樣的“返回頂部”按鈕會增加視覺上的混亂性，反而稀釋了其本身的存在感。
5.“返回頂部”的按鈕的大小需要根據具體環境來進行調整。在pc端的瀏覽中，保證該按鈕小一些從而不會遮蓋到頁面上的重要元素或引起用戶分心；然而在移動端等觸屏操作設備的瀏覽體驗中，需要讓該按鈕適當放大，以便讓用戶可以方便的點擊并不會引起其他誤操作。
6.“返回頂部”按鈕在視覺上應當具備一定的差異性：盡管放置在正確的位置上時，“返回頂部”按鈕通常很容易被發現，但是也要確保該按鈕與頁面背景有一定的視覺差異性，較容易的被辨識，就不會增加用戶的認知壓力。
7.延遲顯示“返回頂部”按鈕：當用戶進行一定程度的下拉滾動操作時，再讓按鈕出現。出現的方式可以考慮一定程度的動效處理，讓用戶自然的注意到該按鈕的出現，效果會更好。
8.“返回頂部”按鈕固定：一旦按鈕出現，則后續無論用戶進行任何操作，該按鈕的位置都應當保持懸浮在同一位置，比如距離底部一定的px，移動的“返回頂部”按鈕會引起不必要的注意力分散。
9.讓用戶控制是否返回頁面頂部：有些網頁或app中，當頂部出現新內容時，用戶進行下拉操作時會直接返回頂部瀏覽，永遠不要出現這種情況。相反的，通過一定的提示告知用戶有新內容的出現，讓用戶自主決定是否返回頂部進行新內容的查看。
“返回頂部”按鈕的一些替代品
事實上，在特定的情境中，相比“返回頂部”按鈕，一些其他的功能替代品可以做到更好。
1.底部導航與搜索框
考慮到用戶通常返回頂部來使用搜索功能與尋找導航欄，在頁面底部直接使用底部導航欄與附加搜索框無疑是一個貼心的設計。這種設計在用戶嘗試直接將長頁面拉到底的情況中，非常有效。但是該種設計同樣有其局限性，比如在今日頭條等網站的設計中，頁面沒有底部這一說法，每次接近底部的滾動操作都會再展現一批內容。
2.懸浮菜單
如果用戶回到頂部的目的是使用一些常用特性，如：篩選，排序等等時，使用懸浮菜單進行輔助也是一個貼心的設計。由于這些功能可以進行一定程度的簡化從而縮小占用頁面空間，因此讓其跟隨頁面滾動可以極大地節省用戶的操作，從根本上滿足用戶需求。
3.社交媒體專用：刷新等功能。在社交媒體上，通常用戶選擇返回頂部是為了進行上拉刷新，實現查看最新消息的需求，即我們通常說的刷微博刷朋友圈中的“刷”字。此時“返回頂部”僅僅是用戶需求環節中的一小部分，我們大可直接使用“刷新”“有新消息，點擊查看”等功能來代替該按鈕，并且這些按鈕的出現時機可以與“返回頂部”的設計完全相反，只有當用戶進行上拉操作時才會出現。
NGA的手機app并沒有“返回頂部”按鈕，取代它的是刷新的功能。并且只有當用戶進行上拉操作時該按鈕才會浮現，考慮到了用戶想要返回頂部的真正意圖。
小結
從用戶角度出發，是否具有良好的用戶體驗已經成為評判一個網站是否優質的重要標準。“返回頂部”按鈕的設計也應當從用戶角度出發，除了考慮到設計上的原則之外，還要了解用戶返回頂部的真正意圖，透過需求看本質，盡可能的從根本上直接滿足用戶需求。
新銳建站擁有專業化的設計團隊，在頁面美觀的同時，在每一個細節上考慮用戶需求，構建擁有良好用戶體驗的網站。
