POST TIME:2018-12-03 17:36
導航設計千變萬化,但是能夠同時兼顧到可用性、易用性還能夠帶來足夠舒適體驗的導航模式,就不是那么多了。可靠的導航設計需要幫手用戶達成目標,找到內容,提升頁面的轉化率。設計分歧理的導航對于用戶體驗是災難性的,最直接的影響,是用戶不再能足夠快捷便利的找到想要的頁面和內容,間接地影響了網站的轉化率和用戶的留存率。
而易用性良好的UI界面很大程度上是從設計優良的導航開始的。導航是用戶從A點走向B點的重要指引,設計師在設計過程中不但要確保這個路標足夠清晰,并且要讓導航的過程足夠順滑、流暢。在整個設計流程中,導航設計應該占據有必然的優先級,因為它不但僅在整個網頁的信息架構中占據著近乎骨架的作用,并且在整個體驗設計中也飾演著重要的角色。在原型設計階段,導航的設計應該就已經打磨清晰,而且集中了所需的設計素材,確保開發伊始便能搞定導航。
在諸多導航設計傍邊,有一些優秀的設計模式已經經過反復的設計驗證,今天的文中就挑選出其中最突出的 5 種,供你參考。
1、帶有流暢動效的下拉導航菜單下代菜單是UI設計中最常見的設計元素,作為一種擴展性良好的控件,它在被觸發之后擴展顯示更多的選項,呈現更多的內容。下拉菜單有許多種差別的衍生樣式,在導航設計中也很常見。許多傳統的導航傍邊,導航元素的下拉菜單是需要點擊觸發的,而現在更多的設計師會選擇光標懸浮在導航元素上的時候觸發,這樣對于用戶會更加省心省力。
為了確保導航的整潔清晰,如今網頁的主要導航類目通常不會太多,控制在4~ 6 個選項,而下拉菜單則用來承載二級導航元素,這樣就節省了空間,也讓信息層級更加清晰。
這種設計模式對于用戶而言并不陌生,瀏覽起來也頗為便利,對于多層級、大量選項的導航需求而言,它正好可以應對。值得注意的是,光標懸浮觸發下拉菜單的時候,展現的動效要足夠的微妙,降低用戶打開的突兀感,這樣會讓體驗更加優秀。
2、漢堡菜單+側邊欄漢堡菜單加上彈出式的側邊欄在iOS和 Android 平臺上都是極為常見的導航設計模式。雖然有數據表白,漢堡菜單和默認隱藏的側邊欄導航在打開率上并不如常見的顯性導航,但是它在體驗上有獨特的優勢,讓整個界面更加簡約、整潔,干擾性更小。用戶點擊漢堡菜單,側邊欄導航從側面滑出顯示,用戶可選擇他們想要點擊的選項。
漢堡菜單和側邊欄的搭配特別適用于響應式的網頁設計,例如Android 平臺的 Gmail 官方應用,,YouTube 和 Facebook,均是沿用了這樣的設計。
隱藏式的側邊欄導航,在很大程度上讓用戶更加專注于主要的界面內容,讓界面更加整潔。雖然打開率不如顯性導航,但是在很多情況下,這種隱藏性的設計更符合實際需求。
3、懸浮固定網頁導航菜單懸浮固定的導航菜單在越來越多的網頁設計中出現,當用戶在滾動頁面向下瀏覽的時候,懸浮固定導航在頁面頂部懸浮不動,隨著用戶瀏覽,它們一直都可見,用戶無需滾動到頂部就可以點擊導航跳轉。
目前,懸浮固定導航菜單已經成為常見的導航設計手法,電商、產品類的網站,多會選擇這樣的導航設計,便于用戶快速跳轉。這種導航設計的優勢在于快速、便捷,用戶對于在網站差別的頁面間跳轉的需求比較大,那么這樣的設計能夠省去很多麻煩。按照 Akamai 和 Gomez.com 的調研,79%的線上購物的用戶,在遭遇糟糕的瀏覽和導航體驗之后,會一去不復返,由此可見,便捷的導航是多么重要。
4、深度定制的超大導航菜單此處我們所說的深度定制的超大導航菜單,更接近選項卡的設計,它們大多分為 2 個層級,差別的選項被組織到差別的選項卡傍邊,選項卡中所承載的導航選項比擬于下拉菜單更大,設計也更加視覺化,更易于點擊拔取。有的選項傍邊甚至會包羅文本和說明,便于用戶進行選擇。
這種超大導航菜單傍邊的子選項的尺寸足夠大,視覺化設計也足夠突出,可見性極強,用戶很難選錯。
上一篇:如何用數據來區分精準關鍵詞
下一篇:SEO如何分析一個網站