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

2024-01-08    分類: 網(wǎng)站建設(shè)

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

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

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

分享文章:網(wǎng)頁的人性化設(shè)計
URL分享:http://www.muchs.cn/news41/312541.html

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

廣告

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

網(wǎng)站建設(shè)網(wǎng)站維護(hù)公司