摘要:導航設計千變萬化,但是能夠同時兼顧到可用性、易用性還能夠帶來足夠舒適體驗的導航模式,就不是那么多了。可靠的導航設計需要幫助用戶達成目標,找到內容,提升頁面的轉化率。設計不合理的導航對于用戶體驗是災難性的,最直接的影響,是用戶不再能足夠快捷方便的找到想要的頁面和內容,間接地影響了網站的轉化率和用戶的留存率。
導航設計千變萬化,但是能夠同時兼顧到可用性、易用性還能夠帶來足夠舒適體驗的導航模式,就不是那么多了。可靠的導航設計需要幫助用戶達成目標,找到內容,提升頁面的轉化率。設計不合理的導航對于用戶體驗是災難性的,最直接的影響,是用戶不再能足夠快捷方便的找到想要的頁面和內容,間接地影響了網站的轉化率和用戶的留存率。
而易用性良好的UI界面很大程度上是從設計優良的導航開始的。導航是用戶從A點走向B點的重要指引,設計師在設計過程中不僅要確保這個路標足夠清晰,而且要讓導航的過程足夠順滑、流暢。在整個設計流程中,導航設計應該占據有一定的優先級,因為它不僅僅在整個網頁的信息架構中占據著近乎骨架的作用,而且在整個體驗設計中也扮演著重要的角色。在原型設計階段,導航的設計應該就已經打磨清晰,并且集中了所需的設計素材,確保開發伊始便能搞定導航。
在諸多導航設計當中,有一些優秀的設計模式已經經過反復的設計驗證,今天的文中就挑選出其中最突出的 5 種,供你參考。
下代菜單是UI設計中最常見的設計元素,作為一種擴展性良好的控件,它在被觸發之后擴展顯示更多的選項,呈現更多的內容。下拉菜單有許多種不同的衍生樣式,在導航設計中也很常見。許多傳統的導航當中,導航元素的下拉菜單是需要點擊觸發的,而現在更多的設計師會選擇光標懸浮在導航元素上的時候觸發,這樣對于用戶會更加省心省力。
為了確保導航的整潔清晰,如今網頁的主要導航類目通常不會太多,控制在4~ 6 個選項,而下拉菜單則用來承載二級導航元素,這樣就節省了空間,也讓信息層級更加清晰。
這種設計模式對于用戶而言并不陌生,瀏覽起來也頗為方便,對于多層級、大量選項的導航需求而言,它正好可以應對。值得注意的是,光標懸浮觸發下拉菜單的時候,展現的動效要足夠的微妙,降低用戶打開的突兀感,這樣會讓體驗更加優秀。
漢堡菜單加上彈出式的側邊欄在iOS和 Android 平臺上都是極為常見的導航設計模式。雖然有數據表明,漢堡菜單和默認隱藏的側邊欄導航在打開率上并不如常見的顯性導航,但是它在體驗上有獨特的優勢,讓整個界面更加簡約、整潔,干擾性更小。用戶點擊漢堡菜單,側邊欄導航從側面滑出顯示,用戶可選擇他們想要點擊的選項。
漢堡菜單和側邊欄的搭配特別適用于響應式的網頁設計,例如Android 平臺的 Gmail 官方應用,YouTube 和 Facebook,均是沿用了這樣的設計。
隱藏式的側邊欄導航,在很大程度上讓用戶更加專注于主要的界面內容,讓界面更加整潔。雖然打開率不如顯性導航,但是在很多情況下,這種隱藏性的設計更符合實際需求。
懸浮固定的導航菜單在越來越多的網頁設計中出現,當用戶在滾動頁面向下瀏覽的時候,懸浮固定導航在頁面頂部懸浮不動,隨著用戶瀏覽,它們一直都可見,用戶無需滾動到頂部就可以點擊導航跳轉。
目前,懸浮固定導航菜單已經成為常見的導航設計手法,電商、產品類的網站,多會選擇這樣的導航設計,便于用戶快速跳轉。這種導航設計的優勢在于快速、便捷,用戶對于在網站不同的頁面間跳轉的需求比較大,那么這樣的設計能夠省去很多麻煩。根據 Akamai 和 Gomez.com 的調研,79%的線上購物的用戶,在遭遇糟糕的瀏覽和導航體驗之后,會一去不復返,由此可見,便捷的導航是多么重要。
此處我們所說的深度定制的超大導航菜單,更接近選項卡的設計,它們大多分為 2 個層級,不同的選項被組織到不同的選項卡當中,選項卡中所承載的導航選項相比于下拉菜單更大,設計也更加視覺化,更易于點擊選取。有的選項當中甚至會包含文本和說明,便于用戶進行選擇。
這種超大導航菜單當中的子選項的尺寸足夠大,視覺化設計也足夠突出,可見性極強,用戶很難選錯。
超大導航菜單所能容納的導航條目相對更多、更加視覺化,和開頭所說的下拉菜單導航類似,光標懸浮在標簽頁上的時候,自動顯示下面的選項。根據 NNGroup 的研究,這類導航當中,導航菜單越大,越受歡迎。
這種導航菜單適合對可訪問性要求高的網頁,對于有視力障礙和進階用戶都更為友好。另外一方面,這種導航還為設計師提供了更多發揮的空間。
響應式的設計就不必贅述,但是卡片柵格式的導航無疑是從移動端開始流行的導航模式。在這里,導航選項被設計成為小卡片,置于導航欄的柵格當中,當屏幕尺寸發生改變的時候,導航中的小卡片會隨著自適應的柵格而重新排列,以匹配整個布局。這種設計不僅高度可視化,而且可以根據主題風格,進行深度的定制。
這種導航當中,各個選項不僅便于光標點擊,而且在移動端上,更加適合手指點擊,可以說是跨平臺響應式設計的。許多網站目前都采用了這樣的導航設計,比如 Pinterest 和著名的音樂服務 Spotify。
以上 【這5種成熟的導航設計模式,可以為用戶體驗加分】的內容由欣創網絡( http://www.huidifs.cn)收集整理,本文網址 : http://www.huidifs.cn/news/ddwaj5ab5.html ,轉載請注明出處,如有侵權,聯系刪除!
更多有關漢中網站建設,漢中網站設計、漢中網站制作、漢中做網站公司、微信公眾平臺開發、電商平臺建設 等互聯網應用服務都可以聯系我們。網站建設熱線: 0916-2233667/手機:18700660007(朱先生)
我們堅持以優秀的創意設計、專業的軟件編程技術、出其不意的電子商務戰略,鼎力為國內外知名企業提供全方位網站設計、網站優化服務。
我們一直都專研此道,從視覺出發,顏色、版式、材質、載體每一個都寄托了它的靈魂,我們精于此道:品牌策劃、平面設計。
我們一如既往地根據用戶的需求、市場環境、企業狀況等進行綜合分析并提供真實可靠的WEB解決方案,有效提升企業形象及品牌知名度。
我們將致力于品牌視覺設計與商業模式傳播結合,長期及時地在線售后服務和免費升級更新,為企業提供一站式服務。