解密APP導航設計的類型與標準

2 評論 5829 瀏覽 51 收藏 11 分鐘

導航設計是產品設計中非常重要的一部分,在APP中導航設計更是直接影響用戶對設計的體驗感受,所以導航菜單設計需要考慮周全,發揮導航的價值為構筑“怦然心動”的產品打下基礎。

所謂導航指的是:引導用戶訪問欄目、菜單、分類等布局結構形式的總稱。

導航主要是引導用戶并告知用戶怎么找到自己想要的信息或完成用戶自己想要完成的任務。

導航設計的合理性直接關系著用戶是否能夠找到信息和完成操作任務。APP導航承載著用戶獲取所需內容的快速途徑。它看似簡單,卻是產品設計中最需要考量的一部分。APP導航設計直接影響用戶對設計的體驗感受,所以導航菜單設計需要考慮周全,發揮導航的價值為構筑“怦然心動”的產品打下基礎。

01 導航設計中功能信息的層級劃分

隨著APP用戶的不斷增加,而設計市場上更多的重視量的積累,因而導航設計的形式較為單一,導航的操作體驗感比較差,不能滿足現代多元化社會的需求。手機界面更能信息的層級劃分,以及同級界面、上級和下降界面的切換跳轉的動態方式比較少,不能表現出更加真實的使用層次感和空間感。

手機APP導航設計的結構模式具體如下幾種方式:

1.?標簽導航

標簽類導航位于頁面底部,通常包含5個標簽是比較合適的數量。這種導航是非常常見的,如果你的應用需要用戶頻繁的在不同分頁切換,可以采用這種導航。它的缺點是會占用一定高度的空間。如微信最新版的APP界面設計圖。

2. 舵式導航

目前流行一種標簽導航的變體,個人把它稱為“舵式導航”,因為它的樣式很像輪船上用來指揮的船舵,兩側是其他操作按鈕。當頁面有處于同一層級的幾大部分內容,同時又需要一個非常重要且頻繁操作的入口,就可以采用這種APP導航模式。如下圖葡萄社APP。

3. 抽屜式架構

抽屜式就是把功能按照一定的分類放在特定的位置,像抽屜一樣可以收起打開,自由伸縮。這樣的架構不僅節省空間,更讓用戶一眼便知界面的整體布局功能及其子功能。

這種導航的優點是節省頁面展示空間,讓用戶將更多的注意力聚焦到當前頁面。比較適合于不那么需要頻繁切換內容的應用,例如對設置、關于等內容的隱藏。UC瀏覽器就是采用抽屜式架構,視覺上清晰明了,操作上也非常簡單易懂。

4. 宮格導航(九宮格)

這種宮格導航是將主要入口全部聚合在頁面,讓用戶做出選擇。這樣的組織方式無法讓用戶在第一時間看到內容,選擇壓力較大,采用這種導航的應用已經越來越少,往往用在二級頁。

5. 輪播導航

當你的應用信息足夠扁平,可以嘗試輪播導航,如果應用得當,能夠給人耳目一新的體驗。這種導航能夠最大程度的保證應用的頁面簡潔性,操作也是最方便的。但是缺點是不能夠快速的定位對應的分頁內容。

6. 列表式導航

列表式APP導航是我們在APP設計種必不可少的一個信息承載模式。當然作為一個APP的導航也是非常方便的。

不過目前來看,列表導航通常用于二級頁,由于它與宮格導航一樣,不會默認展示任何實質內容,所以通常app不會在首頁使用它。

這種導航結構清晰,易于理解,冷靜高效,能夠幫助用戶快速的定位去到對應的頁面。列表項目可以通過間距、標題等進行分組。

7. tab結構導航

這是一種扁平化的交互架構。選中的標簽處于界面的 顯著位置,并展現整個內容,未選中的則只顯示標簽, 不顯示內容。這種界面結構把同一級別的功能用標簽 的方式來顯示,根據需求來展現相應功能,把不需要 的頁面隱藏,但又保留其功能入口,既簡單好用,又 節省了屏幕的使用空間。

8. 組合類結構導航

當用戶需要聚焦內容,同時又需要一些快捷入口能夠連接到某些頁面時,就可以采用組合導航。組合導航上方用宮格的形式展現快捷入口,與標簽導航不同的是,這些宮格入口之間不需要是平級的關系,也不必包含整個層級的內容,你可以將它理解為一種圖形化的文字鏈。這種導航比較靈活,能適應架構的快速調整。

02 現有導航設計趨勢

用戶的認知是交互行為的基礎,輕松獲得良好的界面認知是成功完成人機對話的必要條件。

優秀的導航模式可以將界面信息簡單、直接傳遞給用戶, 盡量符合用戶認知習慣,能讓用戶無需思考、直接快速進入操作模式,體驗便捷性及舒適感,享受操作過程,當然不同的平臺之間也存在著不同的導航模式。

在手機 APP(移動應用程序)的導航模式設計中,必須考慮智能手機屏幕尺寸有限的特殊性。通過有效的功能性整合,把功能按需求的程度、使用的習慣進行分類排序編輯。并利用多種認知模式進行創新設計,例如:隱喻式導航設計、可視化導航設計等全新的認知設計形式如下圖。

同時要更加重視以用戶為中心的原則進行視覺再優化設計, 提高用戶認知效率,降低同一APP由于設備的轉換所造成的認知摩擦,達到用戶良好體驗的目的。

03 APP導航設計應該符合哪些標準?

雖然每個導航模式有常見的用法,但并沒有絕對的限定,要具體情況具體分析。比如頂部標簽導航可以作為一級導航,但與抽屜導航結合的話,可能就會變成二級導航。

就目前的情況來看,很少有APP能夠只用一種導航模式,至少需要兩種。絕大多數的APP都在混合使用多種導航模式。很多APP甚至可能使用多大七八種導航模式,有的一個界面就可能用三到四種導航模式。

導航模式混合使用并不可怕,關鍵是要在設計上做好文章,確保用戶能夠獲得良好的用戶體驗。

導航的具體設計方式多種多樣,有只有文字的,有文字圖標結合的,有圖片文字結合的,有圖片文字圖標結合的、有只有圖標的……具體的形式不在這里多談。用什么樣的形式取決于內容需要什么樣的展現形式。

文中的導航模式只是一種參考,這些模式其實還有各種各樣的變形。只要能夠引導用戶清晰明確地找到信息或完成任務的導航都是優秀的導航,并不一定非得使用某種導航。

1. 創建情節型的導航設計

在創建導航模式時候,可以創建一個情節。用戶將會用你的設計快速、高效的完成某項任務、達成一個目標。例如:當你想要整理桌面時候點擊此項導航,將會方便自己個性化的創建。

2. 讓用戶可以想象交互導航的行程

在導航設計的過程中由于各個導航的設計存在一定的相似性,所以導致用戶在使用過程中容易出現誤操作的現象,設計師可以利用這種現象設計出不確定的導航設計模式,豐富APP導航使用的生動、形象的特點。

3. 在導航設計行程的可視化設計

在APP創建的過程中可能會用到多種導航設計,我們可以將每種導航設計中的大多數數據轉換成圖形的形式表現出來,同時在同一個APP中將不同的導航設計通過可視化的設計串聯成一個整體,從而讓APP設計更加的整體、增強人機體驗感。

總結

無處不在的互聯網空間,使一系列智能設備深入人們的生活,而手機憑借體積小、便于攜帶的優勢成為最受人們青睞的移動設備。但尺寸上的優勢也成為使用中的局限,因而對手機界面進行的功能性擴展研究,增加其使用的空間感和層次性,保證操作的簡單、易學,應該是交互設計的重要課題。

 

本文由 @DS.Geng 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 塞班。。。

    來自北京 回復
  2. 考古?

    來自四川 回復