移動和PC用戶都習(xí)慣于通過導(dǎo)航菜單探索網(wǎng)站內(nèi)容及特性。所以導(dǎo)航菜單的設(shè)計(jì)，在網(wǎng)站和APP開發(fā)中，都非常重要。下面，塔燈網(wǎng)絡(luò)小編就跟大家聊一聊導(dǎo)航設(shè)計(jì)的一些指導(dǎo)原則。

?

　　APP導(dǎo)航欄設(shè)計(jì)

　　頁，導(dǎo)航的作用，顧名思義就是為用戶導(dǎo)航。畢竟用戶一旦迷路，再炫酷的動效、再有趣的內(nèi)容也都毫無意義。即使我們的網(wǎng)站中有搜索功能，也不能把搜索框當(dāng)成用戶導(dǎo)航的工具。大多設(shè)計(jì)者都明白這一點(diǎn)，并在自己的網(wǎng)站中設(shè)計(jì)了導(dǎo)航菜單。

　　導(dǎo)航菜單是什么？導(dǎo)航菜單就是網(wǎng)站主要內(nèi)容或特征的列表，通常由一組鏈接或icon組成，并在視覺樣式上與網(wǎng)站其他內(nèi)容有顯著差異。

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

　　1、導(dǎo)航菜單要清晰可見

　　大屏中的導(dǎo)航菜單不要太小。如果空間足夠，不要將菜單隱藏。把導(dǎo)航菜單放在用戶熟悉的位置。通常用戶會希望在瀏覽過的網(wǎng)站或app中的類似位置(譬如網(wǎng)站頂部、左側(cè)等)中找到他們想要的UI元素。讓菜單鏈接看起來有互動感。如果菜單選項(xiàng)看起來不可點(diǎn)擊，用戶未必能認(rèn)出它是導(dǎo)航。如果我們的導(dǎo)航設(shè)計(jì)融入太重的圖形、或太過追崇扁平化設(shè)計(jì)風(fēng)格，會使它們看起來更像是裝飾性圖片或標(biāo)題。確保導(dǎo)航菜單擁有足夠的視覺吸引力。很多導(dǎo)航菜單的周圍會留有一點(diǎn)空白區(qū)域以從視覺上突顯它。但當(dāng)網(wǎng)站UI元素比較擁擠時，如果導(dǎo)航菜單視覺比重太弱就會在各色圖形、促銷廣告、標(biāo)題里迷失，不易被用戶識別。

　　2、告訴用戶其當(dāng)前位置

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

　　3、導(dǎo)航菜單要與用戶任務(wù)協(xié)調(diào)一致

　　使用易懂的鏈接標(biāo)簽。清楚用戶要找的是什么，使用相似且相關(guān)的類別標(biāo)簽。要記住導(dǎo)航菜單并不是拿自造詞和行話去忽悠人的。請使用可以準(zhǔn)確描述網(wǎng)站內(nèi)容和特征的術(shù)語。鏈接標(biāo)簽要容易閱讀。減少用戶閱讀菜單具體內(nèi)容的時間，如使用左對齊的垂直菜單、或?qū)㈥P(guān)鍵詞前置。對于大型網(wǎng)站來說，讓用戶通過導(dǎo)航菜單預(yù)覽子級內(nèi)容。對于喜歡挖掘網(wǎng)站各層級內(nèi)容的典型用戶來說，下拉菜單可以讓用戶快速瀏覽、節(jié)省時間。

　　4、導(dǎo)航菜單要易于操作

　　菜單選項(xiàng)要夠大、方便點(diǎn)擊。如果導(dǎo)航菜單的選項(xiàng)過小或者彼此靠得太近，會給移動用戶造成很大的困擾;大屏網(wǎng)站中導(dǎo)航菜單選項(xiàng)如果也設(shè)計(jì)成這樣，那就會很難操作。

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

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

　　5、用新穎有趣的交互方式去驚艷用戶?

　　實(shí)際上……答案是“不”。炫酷的效果并非我們的要目標(biāo)。對于用戶來說，能打動他們的還是網(wǎng)站的精彩內(nèi)容、以及熟悉且操作簡單的導(dǎo)航菜單。當(dāng)然，有的時候一些創(chuàng)新型菜單的確可以提升用戶體驗(yàn)(下拉菜單就是一個例子)。在某些場景下，由于新技術(shù)的獨(dú)特要求，這些原則也未必使用。但大多數(shù)情況下，以上幾個方面都是我們需要考慮的指導(dǎo)原則，因?yàn)樗鼈儠蟠筇岣邔?dǎo)航菜單的易用性。

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請及時與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://caipiao93.cn/3904.html