2013年8月1日 星期四

[教學]快速回到頂端(Go Top)按鈕__符合使用者體驗的友善設計

[教學]快速回到頂端(Go Top)按鈕__符合使用者體驗的友善設計

Wayne Fu 0 A+

(Pic from: shimivn.blogspot.com)
「回到上方」的按鈕是很常見的網頁設計,且 code 不難寫。那麼特地撰寫本文的目的為何呢?其實主要是拜讀了 +Bin Ye 的「改善 Google Blogger 返回頂部按鈕的使用體驗」覺得很有道理,因此雖然未使用這個按鈕(已經有「置頂導覽列選單」了),不過這個友善的使用者體驗設計,值得把他做出來,讓有需要的站長自取,因為本站的作品基本上也是朝使用者體驗的方向在前進。



一、符合使用者體驗的設計要點

以下所提的各種效果,可先請參考這個 DEMO 網頁對照:



1. 按鈕的位置

「回到頂端」按鈕很常見的位置放在頁面的右下角,不過根據 Bin Ye 原文及留言,使用者視線的焦點大致落在螢幕中央的水平線(也就是 1/2 處),而滑鼠指標大致會落在螢幕中央約 2/3 的區域。

經觀察自己實際操作滑鼠的模式,的確不自覺會將鼠標落在畫面中央水平線稍微下面一點之處,那麼「回到頂端」按鈕如果放在螢幕 1/2 ~ 2/3 這個高度區間,可減少滑鼠移動的距離,對於使用者而言將是最方便的操作。


2. 透明度

這個按鈕可能會遮住一些文字,因此有必要加入透明度的設計,當滑鼠經過按鈕時再取消透明。


3. 出現時機

畫面尚未捲動時沒必要回到頂端,因此用 jqeury 監測捲動事件,當畫面開始捲動後才出現按鈕。


4. 滑動效果

直接跳到頂端稍嫌粗魯,用 jquery 內建的動畫效果,可以達到簡單的滑動效果。



二、安裝程式碼

在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

1. 以 Blogger 的操作為例,到後台「範本」→「編輯 HTML」,如果範本裡已經安裝過 jqeury 的話(需至少 1.7 以上的版本),就不必執行這個步驟(可搜尋看看有沒有 "jquery" 的字串);如果沒安裝過 jquery,請搜尋 </head> 這個字串,找到後在此字串的前一行,插入以下程式碼:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>

2. 接著請搜尋 </body> 這個字串,找到後在此字串的前一行,插入以下程式碼:



3. 如果覺得預設效果就很好了,那麼請直接存檔即可;想要修改參數的話,請依以上程式碼行號參考以下說明:

G:想使用自訂圖案,請置換藍字圖片網址。

H:紅字 "1/2" 代表按鈕無論螢幕在任何情況、解析度下,都會出現在約 1/2 的高度,建議填入 1/2 ~ 2/3 之間的數值。

I:按鈕距離螢幕右邊界的 px 值

J:按鈕的透明度可填入 0 ~ 1 的數字,0 代表完全透明,1 代表不透明。

K:可自訂捲動的速度,綠字 500 代表以 0.5 秒的速度捲到頂端,若填入 1000 代表 1 秒。

E:title 裡面的中文字串可改為自訂的提醒文字




三、小結

如果對 js 熟悉的話,本文的程式碼還可以有非常多的應用,例如自行修改加入其他按鈕,可快速跳轉到留言區、自訂錨點的功能,或加入幾個常用的社交分享按鈕等等。由於 WFU BLOG 尚未考慮使用這些功能,因此要請自行研究了。


更多 Go Top 按鈕語法:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP