這5種成熟的導航設計模式,可以為使用者體驗加分

2022-09-21 21:27:17 字數 1755 閱讀 8394

導航設計千變萬化,但是能夠同時兼顧到可用性、易用性還能夠帶來足夠舒適體驗的導航模式,就不是那麼多了。可靠的導航設計需要幫助使用者達成目標,找到內容,提公升頁面的轉化率。設計不合理的導航對於使用者體驗是災難性的,最直接的影響,是使用者不再能足夠快捷方便的找到想要的頁面和內容,間接地影響了**的轉化率和使用者的留存率。

而易用性良好的ui介面很大程度上是從設計優良的導航開始的。導航是使用者從a點走向b點的重要指引,設計師在設計過程中不僅要確保這個路標足夠清晰,而且要讓導航的過程足夠順滑、流暢。在整個設計流程中,導航設計應該佔據有一定的優先順序,因為它不僅僅在整個網頁的信droiveqvpo息架構中佔據著近乎骨架的作用,而且在整個體驗設計中也扮演著重要的角色。在原型設計階段,導航的設計應該就已經打磨清晰,並且集中了所需的設計素材,確保開發伊始便能搞定導航。

在諸多導航設計當中,有一些優秀的設計模式已經經過反覆的設計驗證,今天的文中就挑選出其中最突出的 5 種,供你參考。

1、帶有流暢動效droiveqvpo的下拉導航選單

下代選單是ui設計中最常見droiveqvpo的設計元素,作為一種擴充套件性良好的控制項,它在被觸發之後擴充套件顯示更多的選項,呈現更多的內容。下拉列表有許多種不同的衍生樣式,在導航設計中也很常見。許多傳統的導航當中,導航元素的下拉列表是需要點選觸發的,而現在更多的設計師會選擇游標懸浮在導航元素上的時候觸發,這樣對於使用者會更加省心省力。

為了確保導航的整潔清晰,如今網頁的主要導航類目通常不會太多,控制在4~ 6 個選項,而下拉列表則用來承載二級導航元素,這樣就節省了空間,也讓資訊層級更加清晰。

這種設計模式對於使用者而言並不陌生,瀏覽起來也頗為方便,對於多層級、大量選項的導航需求而言,它正好可以應對。值得注意的是,游標懸浮觸發下拉列表的時候,展現的動效要足夠的微妙,降低使用者開啟的突兀感,這樣會讓體驗更加優秀。

2、漢堡選單+側邊欄

漢堡選單加上彈出式的側邊欄在ios和 android

平台上都是極為常見的導航設計模式。雖然有資料表明,漢堡選單和預設隱藏的側邊欄導航在開啟率上並不如常見的顯性導航,但是它在體驗上有獨特的優勢,讓整個介面更加簡約、整潔,干擾性更小。使用者點選漢堡選單,側邊欄導航從側面滑出顯示,使用者可選擇他們想要點選的選項。

漢堡選單和側邊欄的搭配特別適用於響應式的網頁設計,例如android 平台的 gmail 官方應用,youtube 和 facebook,均是沿用了這樣的設計。

隱藏式的側邊欄導航,在很大程度上讓使用者更加專注於主要的介面內容,讓介面更加整潔。雖然開啟率不如顯性導航,但是在很多情況下,這種隱藏性的設計更符合實際需求。

3、懸浮固定網頁導航選單

懸浮固定的導航選單在越來越多的網頁設計**現,當使用者在滾動頁面向下瀏覽的時候,懸浮固定導航在頁面頂部懸浮不動,隨著使用者瀏覽,它們一直都可見,使用者無需滾動到頂部就可以點選導航跳轉。

目前,懸浮固定導航選單已經成為常見的導航設計手法,電商、產品類的**,多會選擇這樣的導航設計,便於使用者快速跳轉。這種導航設計的優勢在於快速、便捷,使用者對於在**不同的頁面間跳轉的需求比較大,那麼這樣的設計能夠省去很多麻煩。根據

akamai 和 gomez.com

的調研,79%的線上購物的使用者,在遭遇糟糕的瀏覽和導航體驗之後,會一去不復返,由此可見,便捷的導航是多麼重要。

4、深度定製的超大導航選單

此處我們所說的深度定製的超大導航選單,更接近選項卡的設計,它們大多分為 2 個層級,不同的選項被組織到不同的選項卡當中,選項卡中所承載的導航選項相比於下拉列表更大,設計也更加視覺化,更易於點選選取。有的選項當中甚至會包含文字和說明,便於使用者進行選擇。

這種超大導航選單當中的子選項的尺寸足夠大,視覺化設計也足夠突出,可見性極強,使用者很難選錯。

開發中經常使用的5種設計模式

提到設計模式,很多人都會覺得老生常談,有些人覺得設計模式很有必要,有些人覺得設計模式沒那麼重要,那麼我們在工作中是否應該重視設計模式呢?我們是否應該將設計模式大量應用到我們的生產過程中呢?如果你從未聽說過設計模式,我敢打賭你一定不是乙個合格程式設計師。這就好比乙個人說他自己是數學家,但是他連勾股定理...

Java的23種設計模式 5 介面卡模式

將乙個類的介面轉換成客戶希望的另外乙個介面,adapter模式使得原本由於介面不相容而不能一起工作的那些類可以在一起工作。實際生活中就像是資料線乙個有安卓,有蘋果,可以在資料線上加上介面卡。目標介面 target 客戶所期待的介面。目標可以是具體的或抽象的類,也可以是介面。需要適配的類 adapte...

設計模式之單例模式的5種實現方式

1 餓漢式 執行緒安全,呼叫效率高,但是不能延時載入 public class user 其他地方通過此方法獲取單例物件 public static user getinstance 2.懶漢式 執行緒安全,呼叫效率不高,但是能延時載入 public class singletondemo2 方法同...