發表日期:2018-05 文章編輯:小燈 瀏覽次數:1617
移動和PC用戶都習慣于通過導航菜單探索網站內容及特性。所以導航菜單的設計,在網站和APP開發中,都非常重要。下面,塔燈網絡小編就跟大家聊一聊導航設計的一些指導原則。
?
APP導航欄設計
頁,導航的作用,顧名思義就是為用戶導航。畢竟用戶一旦迷路,再炫酷的動效、再有趣的內容也都毫無意義。即使我們的網站中有搜索功能,也不能把搜索框當成用戶導航的工具。大多設計者都明白這一點,并在自己的網站中設計了導航菜單。
導航菜單是什么?導航菜單就是網站主要內容或特征的列表,通常由一組鏈接或icon組成,并在視覺樣式上與網站其他內容有顯著差異。
導航菜單的重要性已經不言而喻,我們平時遇到的每一個網站或軟件中都有它的存在;但并不是所有的導航菜單都設計得準確無誤。我們也常發現用戶因導航設計不當而感到困惑、難以操作,或者連導航在哪兒都不知道。下面的設計原則,可以避免導航菜單出錯。
1、導航菜單要清晰可見
大屏中的導航菜單不要太小。如果空間足夠,不要將菜單隱藏。把導航菜單放在用戶熟悉的位置。通常用戶會希望在瀏覽過的網站或app中的類似位置(譬如網站頂部、左側等)中找到他們想要的UI元素。讓菜單鏈接看起來有互動感。如果菜單選項看起來不可點擊,用戶未必能認出它是導航。如果我們的導航設計融入太重的圖形、或太過追崇扁平化設計風格,會使它們看起來更像是裝飾性圖片或標題。確保導航菜單擁有足夠的視覺吸引力。很多導航菜單的周圍會留有一點空白區域以從視覺上突顯它。但當網站UI元素比較擁擠時,如果導航菜單視覺比重太弱就會在各色圖形、促銷廣告、標題里迷失,不易被用戶識別。
2、告訴用戶其當前位置
告訴用戶當前所處什么位置。用戶成功導航的一個基本的標準是他自己能發現:“我在哪兒?”通常被選中的菜單選項在視覺上與其他選項是有差異的,這可以幫助用戶明確自己的當前所在位置(或者通過面包屑導航定位)。如果沒有讓用戶明確所在位置、導致他們迷路,那么就犯了網站設計基本的錯誤。諷刺的是用戶不總是通過頁到達目的頁,所以導航菜單對于用戶來說意義重大。
3、導航菜單要與用戶任務協調一致
使用易懂的鏈接標簽。清楚用戶要找的是什么,使用相似且相關的類別標簽。要記住導航菜單并不是拿自造詞和行話去忽悠人的。請使用可以準確描述網站內容和特征的術語。鏈接標簽要容易閱讀。減少用戶閱讀菜單具體內容的時間,如使用左對齊的垂直菜單、或將關鍵詞前置。對于大型網站來說,讓用戶通過導航菜單預覽子級內容。對于喜歡挖掘網站各層級內容的典型用戶來說,下拉菜單可以讓用戶快速瀏覽、節省時間。
4、導航菜單要易于操作
菜單選項要夠大、方便點擊。如果導航菜單的選項過小或者彼此靠得太近,會給移動用戶造成很大的困擾;大屏網站中導航菜單選項如果也設計成這樣,那就會很難操作。
確保下拉菜單不會太大或太小。鼠標懸停觸發的下拉菜單呈現時間太過短暫會給用戶帶來挫敗感,因為用戶還沒來得及點擊菜單里的某個鏈接的時候,下拉菜單就消失了。另外,太長的垂直導航菜單也不利于底部選項的點擊,除非滾動屏幕。后,鼠標懸停觸發的下拉菜單不能太寬,否則會讓用戶誤以為是新頁面、并且好奇為什么自己還沒點擊就出現了新的“頁面”?
當頁面內容很長時,可以考慮懸浮吸頂(或固底)菜單。已瀏覽到頁面底部的用戶要想回到屏需要一次又一次地回滾鼠標(移動端則是不斷向上劃動屏幕);如果導航可以懸浮吸頂,用戶就可以很方便地進行其他菜單選項的切換。這很適合小屏幕場景。
5、用新穎有趣的交互方式去驚艷用戶?
實際上……答案是“不”。炫酷的效果并非我們的要目標。對于用戶來說,能打動他們的還是網站的精彩內容、以及熟悉且操作簡單的導航菜單。當然,有的時候一些創新型菜單的確可以提升用戶體驗(下拉菜單就是一個例子)。在某些場景下,由于新技術的獨特要求,這些原則也未必使用。但大多數情況下,以上幾個方面都是我們需要考慮的指導原則,因為它們會大大提高導航菜單的易用性。
日期:2018-10 瀏覽次數:7525
日期:2018-12 瀏覽次數:4598
日期:2018-07 瀏覽次數:5115
日期:2018-12 瀏覽次數:4402
日期:2018-09 瀏覽次數:5756
日期:2018-12 瀏覽次數:10181
日期:2018-11 瀏覽次數:5091
日期:2018-07 瀏覽次數:4845
日期:2018-05 瀏覽次數:5098
日期:2018-12 瀏覽次數:4562
日期:2018-10 瀏覽次數:5377
日期:2018-12 瀏覽次數:6438
日期:2018-11 瀏覽次數:4705
日期:2018-08 瀏覽次數:4850
日期:2018-11 瀏覽次數:12938
日期:2018-09 瀏覽次數:5858
日期:2018-12 瀏覽次數:5084
日期:2018-10 瀏覽次數:4423
日期:2018-11 瀏覽次數:4769
日期:2018-12 瀏覽次數:6299
日期:2018-06 瀏覽次數:4249
日期:2018-08 瀏覽次數:5697
日期:2018-10 瀏覽次數:4681
日期:2018-12 瀏覽次數:4792
日期:2018-07 瀏覽次數:4614
日期:2018-12 瀏覽次數:4783
日期:2018-06 瀏覽次數:4623
日期:2018-11 瀏覽次數:4603
日期:2018-12 瀏覽次數:4526
日期:2018-12 瀏覽次數:5507
Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.