導航設計在產品的結構層中隸屬于信息架構的范圍,是框架層的主要表現形式之一。好的導航設計,不僅能反映出交互設計師對信息架構的把握層次,同時也能讓用戶對產品有著清晰的認識。目前移動產品的設計日趨于完善,導航設計也有以下幾個較為具體的分類,今天就著實例和大家分享一下。
標簽導航
標簽導航是目前最為流行,也最被用戶所熟悉的導航模式。像我們日常使用的微信、知乎等等都是這樣的設計。
標簽導航的優點在于:
入口扁平化,能夠在各種功能之間輕松跳轉
存在的不足就是:
導航控件占了頁面較大的面積,標簽的個數控制在5個以內。
知乎的標簽欄具有上滑消失,下拉出現的優秀交互細節,值得稱道。
如果標簽的數目大于5個,該怎么辦?
滑動標簽導航
滑動標簽導航將其余標簽藏在手機右側的不可見部分,用戶通過滑動來查看其它標簽。
使用這種導航的時候需要注意
提示用戶可以滑動,我們可以漏出一個標簽的一半,提示用戶可以滑動。
還有一種標簽導航的變體是iOS的基本控件——分段式導航
分段式導航多用于二級導航,一般有2-3模塊,尺寸較小,能夠輕松地融入界面,不占空間。
這里說的標簽導航都是適用于一些功能重要程度相近,使用頻率相近。即1:1:1:1:1模式
舵式導航
如果在幾個功能相近的模塊中,某個功能的重要程度要稍高一些,我們就需要在設計上突出這一功能。即1:1:1.5:1:1模式。我們稱這種導航為舵式導航
抽屜式導航
簡約至上-交互設計四策略 中講到一個使設計更簡約的方法就是“藏”
藏起來不太重要的功能,專注于核心的功能,能夠大大減少主界面導航控件數量。
作為一款打車軟件,考慮用戶的使用場景,用戶最主要需求就是叫車。抽屜式的導航可以把最大化的界面交給打車,用戶有著足夠大的空間去完成打車的交互,而不用擔心其他元素的干擾。我稱這種模式為1:10:1:1:1。
九宮格導航
我們有的時候會見到一些產品會將所有功能羅列出來,一個一個按照九宮格的樣式擺好,整個產品結構一覽無余。
我個人是不推薦這種導航模式的,尤為使用在app中作為主導航。這樣顯得app沒有縱深感,更主要的是,在用戶進入的一瞬間沒有呈現有關產品的任何一絲實際內容,需要用戶做出選擇后才會顯示相關事務。
組合導航
合適的導航才是好的導航,我們需要分析產品的功能結構與用戶使用的具體環境,分析得出結論。
現在產品結構功能復雜,需要多個合適的導航相結合,常見的有:
抽屜式+標簽導航
抽屜式+滑動標簽
抽屜式+分段標簽
標簽導航+分段標簽
標簽+分段/滑動標簽+抽屜式
等等
創意導航
這種導航我個人比較喜歡,應該是material design中的一個控件,切換方便,不影響頁面閱讀。
很難找到機會去夸獎國營公司的產品,但這個轉盤的設計真的有情懷,非常喜歡。
可惜缺點也很明顯,可直接去點,不需要轉。內容展示不直觀。
有好的創意導航設計請留言,歡迎交流 :)