淺析不同導航的區分

編輯導語:產品的導航設計目的是突出產品的核心功能,扁平化使用者的任務路徑,讓使用者能順利地在產品中暢行。而不同的導航設計有不同的效果,本文作者總結了九種導航型別,一起來看一下吧。

淺析不同導航的區分

產品的導航設計目的是為了突出產品的核心功能,扁平化使用者的任務路徑。讓使用者能夠順利地在產品中暢行,讓使用者知道自己在產品中所在的位置,和怎麼前往目的頁面或功能。那我們來了解一下不同導航的區分。

一、底部標籤(Tab)導航

當產品的體驗流是以幾個功能模組貫穿,使用者在使用時需要在幾個標籤入口之間來回切換時,這就是底部標籤導航。底部標籤導航裡面的標籤一般是不會超過五個,因為超過五個標籤之後,就沒有核心功能的體現。

將貫穿產品整個體驗流的模組平鋪在Tab Bar位置,在保證了切換效率的同時也保證了使用者在使用過程時的任務路徑扁平化。

淺析不同導航的區分

二、頂部標籤(Tab)導航

頂部Tab最早是谷歌提出來並使用的,主要是為了區分與iOS的一種導航模式。與底部標籤導航不同,由於在頂部,手指一般很難觸及,所以頂部標籤導航功能展現更細化,標籤也就更多,通常是透過左右滑動來切換標籤。

在實際專案中,頂部與底部基本都是配合使用。

淺析不同導航的區分

三、舵式導航

舵式導航是將多個核心功能匯聚在一個標籤內,方便使用者點選撥出使用。所以舵式導航一般會搭載其他導航樣式出現(如標籤式導航)。

與標籤導航類似的是,它們都是點聚式導航與標籤導航的結合體。簡單來說就是一個導航標籤裡面包含很多個操作選項,也可以說是導航標籤裡面包含很多個二級導航標籤。

淺析不同導航的區分

四、宮格式導航

宮格式導航是最被廣泛用於各平臺系統的中心頁面,一般用在二級頁作為內容列表,以圖形化形式呈現在頁面上,又或者是作為一系列的工具入口聚合。也被稱為跳板式、圖示卡片式、磁貼式。

淺析不同導航的區分

五、陳列館式導航

陳列館式導航是屬於宮格導航的一種表式,用來呈現實時內容,像新聞、圖片、商品資訊等。還可以採用網格式佈局(直播或者是ins型別)、輪盤佈局(格瓦拉電影型別)或者是幻燈片模式展示。最適合呈現的是如經常更新、需要直觀的視覺效果、彼此獨立的內容。

淺析不同導航的區分

六、抽屜式導航

抽屜式導航又被稱為:擴充套件選單、側邊導航、漢堡導航;是用來放置一些對使用者來說不會經常用到或者是產品不核心的功能,例如設定、關於、個人資訊這類不需要頻繁切換內容的功能。

一般是應用在資訊流的產品設計裡面,使用者的任務路徑比較單一,頁面基本只用於產品的核心內容展示。其他不怎麼使用或是不核心的功能就會隱藏於介面的後方,這樣避免頁面產生臃腫感,使用者也不會過多的功能模組的呈現搶奪眼球。

淺析不同導航的區分

七、下拉導航/選單導航

與抽屜式導航的概念相同,都是為了突出頁面的核心內容或功能。與抽屜導航不同的是,下拉導航一般位於產品的頂部,透過點選功能標籤撥出導航選單。

下拉啟動導航通常用來篩選不同類別的資訊,或者是點選後快速啟動某個常用的功能模組,這樣也避免了頻繁的頁面跳轉。

下拉導航還有一種變式,就是下拉的選單中展示兩級或者是多級,這一種是在電商產品中非常多見的,因為品類和篩選條件很多。

淺析不同導航的區分

八、列表導航

列表導航是作為資訊組織的框架,也是產品在設計中必不可少的一個資訊承載模式。

比較適合用來顯示較長或者是擁有次級文字內容的標題,每一行都可以融入非常多的資訊。

它與宮格導航一樣,經常用在二級頁面,不會預設展示任何實質性的內容,所以一般在首頁不會使用它。

淺析不同導航的區分

九、輪播(旋轉木馬)導航

當產品的應用資訊不多且足夠扁平的時候,就可以使用輪播導航。常見於頁面結構簡單的APP中。

淺析不同導航的區分

本文由 @陳立奇 原創釋出於人人都是產品經理,未經許可,禁止轉載。

題圖來自Unsplash,基於 CC0 協議。

頂部