axure商城

基礎教程:移動APP導航設計分類詳解

在移動端,導航是APP最重要的區別。根據不同的內容,選擇不同的導航方式。

按照使用頻率的排序,有以下幾類!

1 Tab導航

Tab 導航分上下兩種。是最常用的導航形式。

很多iOS應用,采用這種導航。比如:istegrame(安卓和IOS都是Tab,舉例用安卓),微博,微信,iOS很多原生應用也采用這種方式,比如撥號,時鐘,APP store,一般的瀏覽器等。

在iOS上,Tab點擊切換,不能滑動切換。因為iOS系統把頁面滑動留給了單條item的滑動操作,或者頁面返回。但是有些導航本身可以滑動,比如新聞類客戶端的導航。

在android,Tab可以點擊切換,也可以滑動切換,有些導航本身可以滑動。在頁面頂部的Tab,有可以活動的樣式,就是有部分Tab隱藏在頁面外面,滑動后出現。比如豌豆莢的界面。

關于數目,頁面底部的Tab一般位置固定,最多五個。再多就不好操作了。Tab本身可以滑動的界面,Tab數量可以多一些。

優勢:所有的入口都可以看見,容易尋找。

劣勢:總會占據屏幕下方的一條欄目,在瀏覽信息的時候,會阻擋內容。Tab的數目有限,5個已經是極限。

適用的場景:導航條目不多,使用頻率相差不太大的應用.

2抽屜導航(漢堡導航)Navigation Drawer

這種導航在社交的應用中最常見,比如Facebook,path,之前的Google+,購物類的應用入亞馬遜,知乎客戶端等,在iOS和Android平臺上都比較常見。現在漢堡菜單里,

抽屜導航在其二級頁面可隱藏也可以不隱藏,一直出現。

適用的場景:

1 分支類目超過3個,這種導航多少都能裝的下

2 某一類目的層級較深, 比如Facebook的news feed ,

3 用戶使用時,某一類要頻繁訪問,使用頻率明顯超過其他

優勢:可以容納多個分支類目,隱藏多余的類目,使當前頁面簡潔

劣勢:?? 1 有部分類目,當前頁面不可見,需要用戶尋找,增加了認知成本。

2 類目之間的切換成本較高。

 

3九宮格導航

最典型的就是美圖類應用,如美圖秀秀,百度魔拍,在二級目錄用九宮格,如旅游類應用,如攜程,去哪兒,支付寶等。這種導航模式現在用越來越少了,在首頁只有導航而沒有實際的內容,和以內容為主的趨勢相悖。

適用的場景:1?這種導航適用于幾個功能沒有交叉的應用,

2 功能較多,較分散。

優勢:類目清晰,容納很多類目無壓力。

劣勢: ??首屏沒有內容,只有入口。

 

 

4 list模式

首頁是一條條的item,item有單文字的,也有圖文結合的。比如說:一般的設置頁面。

適用的場景:1 以很多內容為主的應用,比如設置。

2 以一條條內容為主的,通常和其他導航一起使用,比如知乎日報,新聞APP。

優勢:內容突出

劣勢: ? 不適合層級較深的應用

5 復合導航

現在,應用大多有復雜的多項功能,導航也適應這種情況,復合使用。

典型的就是新版QQ的導航,底部Tab和抽屜導航共用,抽屜部分放置不常用的個人各項信息,主體的應用采用底部Tab導航模式。

支付包的客戶端,大框架采用底部Tab的模式,Tab支付寶項,采用九宮格式的模塊設計,放置了很多功能模塊,入口非常清晰。

和支付寶類似的,還有一些旅游類應用,去哪兒,攜程等。

三種導航共存,比如美團的客戶端,底部Tab做大框架導航,團購的類目中,有九宮格式的入口,也有list模式展示比較詳細的信息。

 

最后,每一種導航都有自己使用的范圍,看了很多應用的設計,沒必要只局限于一種導航模式。根據每一種應用要呈現和表達的內容選擇。在每一個模塊選用合適的呈現方式。

來源:ui中國

給TA買糖
共{{data.count}}人
人已贊賞
產品經理

每個成功的產品背后都有一名出色的測試

2014-9-23 11:25:32

產品經理

教程:移動應用引導頁設計指南

2014-10-14 0:19:34

axure商城
0 條回復 A文章作者 M管理員
    暫無討論,說說你的看法吧
?
個人中心
購物車
優惠劵
今日簽到
有新私信 私信列表
搜索
俄罗斯videoxxxoo