網(wǎng)站導(dǎo)航設(shè)計的幾個要點

2015-11-25    分類: 網(wǎng)站導(dǎo)航

導(dǎo)航菜單的重要性已經(jīng)不言而喻,我們平時遇到的每一個網(wǎng)站或軟件中都有它的存在;但并不是所有的導(dǎo)航菜單都設(shè)計得準(zhǔn)確無誤。我們也常發(fā)現(xiàn)用戶因?qū)Ш皆O(shè)計不當(dāng)而感到困惑、難以操作,或者連導(dǎo)航在哪兒都不知道。下面是網(wǎng)站導(dǎo)航設(shè)計的幾個要點.

1. 導(dǎo)航設(shè)計要大氣

大屏中的導(dǎo)航菜單不要太小.如果空間足夠,不要將菜單隱藏。

2. 導(dǎo)航操作要簡單方便

通常用戶會希望在瀏覽過的網(wǎng)站或app中的類似位置(譬如網(wǎng)站頂部、左側(cè)等)中找到他們想要的UI元素。

3. 要有互動感

如果菜單選項看起來不可點擊,用戶未必能認(rèn)出它是導(dǎo)航。如果我們的導(dǎo)航設(shè)計融入太重的圖形、或太過追崇扁平化設(shè)計風(fēng)格,會使它們看起來更像是裝飾性圖片或標(biāo)題。

4. 有視覺沖擊力

很多導(dǎo)航菜單的周圍會留有一點空白區(qū)域以從視覺上突顯它。但當(dāng)網(wǎng)站UI元素比較擁擠時,如果導(dǎo)航菜單視覺比重太弱就會在各色圖形、促銷廣告、標(biāo)題里迷失,不易被用戶識別。

5. 導(dǎo)航菜單與背景要對比鮮明

即便是熟悉以上規(guī)則的設(shè)計師設(shè)計出來的導(dǎo)航菜單也有可能會被用戶忽視,因為他們很難客觀地評價自己的作品——尤其是碰上比較主觀的設(shè)計標(biāo)準(zhǔn)時,比如哪個UI元素應(yīng)該擁有更明顯的視覺效果。如果你知道你的導(dǎo)航菜單在哪兒,自然能一看看到它,因為這是你設(shè)計的。因此,讓用戶參與驗證十分必要。

6. 位置導(dǎo)航

用戶成功導(dǎo)航的一個最基本的標(biāo)準(zhǔn)是他自己能發(fā)現(xiàn):“我在哪兒?” 通常被選中的菜單選項在視覺上與其他選項是有差異的,這可以幫助用戶明確自己的當(dāng)前所在位置(或者通過面包屑導(dǎo)航定位)。如果沒有讓用戶明確所在位置、導(dǎo)致他們迷路,那么就犯了網(wǎng)站設(shè)計最基本的錯誤。諷刺的是用戶不總是通過首頁到達目的頁,所以導(dǎo)航菜單對于用戶來說意義重大。

7. 鏈接標(biāo)簽要清晰

清楚用戶要找的是什么,使用相似且相關(guān)的類別標(biāo)簽。要記住導(dǎo)航菜單并不是拿自造詞和行話去忽悠人的。請使用可以準(zhǔn)確描述網(wǎng)站內(nèi)容和特征的術(shù)語。

8. 鏈接標(biāo)簽要易讀

減少用戶閱讀菜單具體內(nèi)容的時間,如使用左對齊的垂直菜單、或?qū)㈥P(guān)鍵詞前置。

9. 對于二級菜單要易于查找

對于大型網(wǎng)站來說,讓用戶通過導(dǎo)航菜單預(yù)覽子級內(nèi)容。對于喜歡挖掘網(wǎng)站各層級內(nèi)容的典型用戶來說,下拉菜單可以讓用戶快速瀏覽、節(jié)省時間。

10. 為內(nèi)容提供本地導(dǎo)航

如果用戶喜歡對一些同類商品頻繁對比、或在某個場景里完成多個任務(wù),可以將這些臨近頁面做成本地導(dǎo)航菜單,這樣用戶就不需要在復(fù)雜的路徑里“上躥下跳”了。

11. 傳達網(wǎng)站意圖

利用視覺的傳達力。圖像、顏色等元素可以幫助用戶理解菜單選項,但也要確保這些圖形起的是積極作用(至少不能讓操作變得更難)。

12. 菜單選項要夠大、方便點擊

如果導(dǎo)航菜單的選項過小或者彼此靠得太近,會給移動用戶造成很大的困擾;大屏網(wǎng)站中導(dǎo)航菜單選項如果也設(shè)計成這樣,那就會很難操作。

13. 確保下拉菜單不會太大或太小

鼠標(biāo)懸停觸發(fā)的下拉菜單呈現(xiàn)時間太過短暫會給用戶帶來挫敗感,因為用戶還沒來得及點擊菜單里的某個鏈接的時候,下拉菜單就消失了。另外,太長的垂直導(dǎo)航菜單也不利于底部選項的點擊,除非滾動屏幕。最后,鼠標(biāo)懸停觸發(fā)的下拉菜單不能太寬,否則會讓用戶誤以為是新頁面、并且好奇為什么自己還沒點擊就出現(xiàn)了新的“頁面”?

14.懸浮吸頂(或固底)菜單的使用

當(dāng)頁面內(nèi)容很長時,可以考慮懸浮吸頂(或固底)菜單。已瀏覽到頁面底部的用戶要想回到首屏需要一次又一次地回滾鼠標(biāo)(移動端則是不斷向上劃動屏幕);如果導(dǎo)航可以懸浮吸頂,用戶就可以很方便地進行其他菜單選項的切換。這很適合小屏幕場景。

15.縮短導(dǎo)航菜單最常用操作的物理距離

下拉菜單內(nèi)容比較多時,將用戶最常點擊的鏈接放到離鼠標(biāo)懸停的選項最近的地方可以減少鼠標(biāo)移動的距離(移動端也類似)。最近一些app中流行的餅狀菜單則將所有菜單選項成圓(有的是半圓)狀圍繞在菜單周圍,這樣每一個選項鏈接的物理點擊距離都是最短的。

網(wǎng)站題目:網(wǎng)站導(dǎo)航設(shè)計的幾個要點
URL標(biāo)題:http://www.muchs.cn/news9/33659.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項目有網(wǎng)站設(shè)計、網(wǎng)站導(dǎo)航

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quá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è)