移動導(dǎo)航——交互基礎(chǔ)
小編推薦:本文是很基礎(chǔ)的導(dǎo)航講解,適合新手和缺乏總結(jié)思維的小盆友~入門級簡單易懂,印象深刻哦~
在移動端,導(dǎo)航是APP最重要的區(qū)別。根據(jù)不同的內(nèi)容,選擇不同的導(dǎo)航方式。
按照使用頻率的排序,有以下幾類!
1 Tab導(dǎo)航
Tab 導(dǎo)航分上下兩種。是最常用的導(dǎo)航形式。
很多iOS應(yīng)用,采用這種導(dǎo)航。比如:istegrame(安卓和IOS都是Tab,舉例用安卓),微博,微信,iOS很多原生應(yīng)用也采用這種方式,比如撥號,時鐘,APP store,一般的瀏覽器等。
在iOS上,Tab點擊切換,不能滑動切換。因為iOS系統(tǒng)把頁面滑動留給了單條item的滑動操作,或者頁面返回。但是有些導(dǎo)航本身可以滑動,比如新聞類客戶端的導(dǎo)航。
在android,Tab可以點擊切換,也可以滑動切換,有些導(dǎo)航本身可以滑動。在頁面頂部的Tab,有可以活動的樣式,就是有部分Tab隱藏在頁面外面,滑動后出現(xiàn)。比如豌豆莢的界面。
關(guān)于數(shù)目,頁面底部的Tab一般位置固定,最多五個。再多就不好操作了。Tab本身可以滑動的界面,Tab數(shù)量可以多一些。
優(yōu)勢:所有的入口都可以看見,容易尋找。
劣勢:總會占據(jù)屏幕下方的一條欄目,在瀏覽信息的時候,會阻擋內(nèi)容。Tab的數(shù)目有限,5個已經(jīng)是極限。
適用的場景:導(dǎo)航條目不多,使用頻率相差不太大的應(yīng)用.
2抽屜導(dǎo)航(漢堡導(dǎo)航)Navigation Drawer
這種導(dǎo)航在社交的應(yīng)用中最常見,比如Facebook,path,之前的Google+,購物類的應(yīng)用入亞馬遜,知乎客戶端等,在iOS和Android平臺上都比較常見?,F(xiàn)在漢堡菜單里,
抽屜導(dǎo)航在其二級頁面可隱藏也可以不隱藏,一直出現(xiàn)。
適用的場景:
1 分支類目超過3個,這種導(dǎo)航多少都能裝的下
2 某一類目的層級較深, 比如Facebook的news feed ,
3 用戶使用時,某一類要頻繁訪問,使用頻率明顯超過其他
優(yōu)勢:可以容納多個分支類目,隱藏多余的類目,使當(dāng)前頁面簡潔
劣勢:?? 1 有部分類目,當(dāng)前頁面不可見,需要用戶尋找,增加了認(rèn)知成本。
2 類目之間的切換成本較高。
3九宮格導(dǎo)航
最典型的就是美圖類應(yīng)用,如美圖秀秀,百度魔拍,在二級目錄用九宮格,如旅游類應(yīng)用,如攜程,去哪兒,支付寶等。這種導(dǎo)航模式現(xiàn)在用越來越少了,在首頁只有導(dǎo)航而沒有實際的內(nèi)容,和以內(nèi)容為主的趨勢相悖。
適用的場景:1?這種導(dǎo)航適用于幾個功能沒有交叉的應(yīng)用,
2 功能較多,較分散。
優(yōu)勢:類目清晰,容納很多類目無壓力。
劣勢: ??首屏沒有內(nèi)容,只有入口。
4 list模式
首頁是一條條的item,item有單文字的,也有圖文結(jié)合的。比如說:一般的設(shè)置頁面。
適用的場景:1 以很多內(nèi)容為主的應(yīng)用,比如設(shè)置。
2 以一條條內(nèi)容為主的,通常和其他導(dǎo)航一起使用,比如知乎日報,新聞APP。
優(yōu)勢:內(nèi)容突出
劣勢: ? 不適合層級較深的應(yīng)用
5 復(fù)合導(dǎo)航
現(xiàn)在,應(yīng)用大多有復(fù)雜的多項功能,導(dǎo)航也適應(yīng)這種情況,復(fù)合使用。
典型的就是新版QQ的導(dǎo)航,底部Tab和抽屜導(dǎo)航共用,抽屜部分放置不常用的個人各項信息,主體的應(yīng)用采用底部Tab導(dǎo)航模式。
支付包的客戶端,大框架采用底部Tab的模式,Tab支付寶項,采用九宮格式的模塊設(shè)計,放置了很多功能模塊,入口非常清晰。
和支付寶類似的,還有一些旅游類應(yīng)用,去哪兒,攜程等。
三種導(dǎo)航共存,比如美團(tuán)的客戶端,底部Tab做大框架導(dǎo)航,團(tuán)購的類目中,有九宮格式的入口,也有l(wèi)ist模式展示比較詳細(xì)的信息。
最后,每一種導(dǎo)航都有自己使用的范圍,看了很多應(yīng)用的設(shè)計,沒必要只局限于一種導(dǎo)航模式。根據(jù)每一種應(yīng)用要呈現(xiàn)和表達(dá)的內(nèi)容選擇。在每一個模塊選用合適的呈現(xiàn)方式。
來源:ui中國
可以參考一下這個PPT。里面有更全面的導(dǎo)航
http://wenku.baidu.com/view/fd8d2a31ad02de80d5d8402c.html