網(wǎng)頁的人性化設計

返回頂部（Back to Top）的跳轉鏈接是網(wǎng)頁設計中不可或缺的一個小細節(jié)。它的目的是幫助訪問者快速回到頁面頂部，免除了不斷拖動滾動條或者不停轉動鼠標滾輪的麻煩，提高了瀏覽網(wǎng)頁的效率。那么請允許我們先來思考一個弱弱的問題：為什么要返回到頂部，而不是頁面的底部？囧！很簡單嘛，文章都是從上往下讀的?。‰y道你要從下往上倒著讀文章嗎？這當然是一個非常重要的原因。但是還有沒有其它原因呢？我想還有另外一個很重要的原因是因為頁面的主要功能區(qū)是在頂部的，導航欄、搜索框等等都在頁面頂部。通過導航按鈕鏈接到別的位置，或者通過搜索關鍵字查找你需要的信息都是在瀏覽完了一張頁面之后首要干的事情。 但是通常我們在返回頂部鏈接上做的工作太少，只是簡單的在頁面底部放置上一個跳轉鏈接就完事了。這樣做的結果是當頁面比較長的時候點擊跳轉鏈接時，瀏覽器會瞬間將你送回到頁面頂部，速度有時候快的讓人反應不過來，不知道跳轉之后所處的位置在哪。 另外一個問題是返回頂部鏈接做的不夠醒目。通常來說，返回頂部鏈接都會位于頁面的右下角，或者是頁面的頁腳上。這個地方本身就不是視覺的焦點處，如果再將跳轉鏈接設計的不夠醒目的話，訪問者很可能在瀏覽了多次頁面之后還沒發(fā)現(xiàn)這個可以給他們提供方便的設計。 再有一個問題是位置不夠合理。假設有一篇博客日志擁有很多的評論，一般來說，訪問者閱讀評論的時候比較少，所以當他們閱讀完日志內容之后如果不去做評論的話會直接尋找另外的信息，這個時候返回頂部的鏈接就應該放置于日志結束之后而不是評論內容之后。當然還有更好的辦法就是將跳轉鏈接隨時停留在視覺區(qū)域內。 那么這樣看來，一個好的返回頂部鏈接的設計應該有下面幾個特點： 一、平滑的從頁面底部滾動至頂部。 二、醒目到足以吸引訪問者去點擊。 三、更具功能性的位置設計 那么如果創(chuàng)建一個跳轉鏈接呢？通常的做法是緊挨著body標簽下方創(chuàng)建一個空標簽，然后再在頁面底部創(chuàng)建一個鏈接，如下代碼所示： 但是這種方法使用了冗余的空標簽，為了避免空標簽的出現(xiàn)，可以直接使用body標簽下的容器的ID來實現(xiàn)跳轉。

之后，為了讓跳轉更加平滑，拷貝此頁面中的內容，將其保存為 smoothscroll.js文件，放到你的設計文檔中合適的位置。一般來說，在你的設計文檔中應該有一個javascript文件夾，將所有javascript文件都放入到這個文件夾中。接下來，在你的設計代碼的和中間加入鏈接 ，表示頁面將會引用這個JavaScript 文件。

本文來源于成都網(wǎng)站建設公司與成都網(wǎng)站設計制作公司-創(chuàng)新互聯(lián)成都公司！

分享文章：網(wǎng)頁的人性化設計
URL分享：http://www.bm7419.com/news41/312541.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供響應式網(wǎng)站、微信公眾號、用戶體驗、品牌網(wǎng)站設計、動態(tài)網(wǎng)站、面包屑導航

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)