App導(dǎo)航的設(shè)計對于突出產(chǎn)品核心功能,扁平化指導(dǎo)用戶操作有著極為重要的作用。常見的導(dǎo)航設(shè)計類型有:標簽式導(dǎo)航(底部Tab)、點聚式導(dǎo)航、選項卡式導(dǎo)航(頂部Tab)、宮格式導(dǎo)航、列表式導(dǎo)航、幻燈片式導(dǎo)航、抽屜式導(dǎo)航、側(cè)邊欄導(dǎo)航、下拉菜單導(dǎo)航、瀑布式導(dǎo)航及陳列式導(dǎo)航11種。下面以幾款A(yù)PP來分析各種導(dǎo)航類型的優(yōu)劣。
京東金融APP:
一.底部標簽導(dǎo)航+頂部滑動選項卡+內(nèi)容列表式導(dǎo)航
評價:這種混合導(dǎo)航的方式,既對核心功能作了明確分類,又通過3個分類選項卡實現(xiàn)了主要功能的切換,配合內(nèi)容列表式呈現(xiàn),入口可見性較高,整體用戶體驗較好。
底部標簽導(dǎo)航:分為首頁、資訊、服務(wù)應(yīng)用、我4類,清晰將其核心功能分類,這種導(dǎo)航設(shè)計將同級重要的功能放置在最核心地方,方便用戶頻繁切換,操作不容易迷失。對于核心功能突出且功能繁多的APP而言,這種設(shè)計十分合理便捷。缺點是,圖標+文字的標簽導(dǎo)航會占據(jù)較大的空間,頁面可視范圍會縮減,而且標簽最多只能放置5個。
頂部滑動選項卡導(dǎo)航:將整個app功能分為3大版塊,理財、白條、支付,左右滑動即可快速切換內(nèi)容。因為只有3個標簽所以可見性較好,操作方便。后面將對多標簽選項卡進行分析。
內(nèi)容采用列表式導(dǎo)航:這種類型導(dǎo)航清晰可見、排列規(guī)整、辨識度極高,既可以展示較多功能入口,本身也可顯示較長的1、2級標題內(nèi)容,右側(cè)還可配合展示次級內(nèi)容,對用戶做出一些指向性說明。缺點是,這種類型導(dǎo)航靈活性不高,只能通過簡單排序方式展現(xiàn)或配合色塊來區(qū)分重要性,如果排列較多,容易產(chǎn)生視覺疲勞。
二.1級宮格式導(dǎo)航+2級:下拉菜單式導(dǎo)航/滑動選項卡導(dǎo)航/陳列式導(dǎo)航/瀑布流式導(dǎo)航
評價:服務(wù)中將常用功能入口作了分類展示,且以宮格導(dǎo)航方式呈現(xiàn),分類清晰,易于尋找。但因功能較多,又形成了多層級的頁面跳轉(zhuǎn)。2級導(dǎo)航使用了多樣的導(dǎo)航方式,以適應(yīng)不同內(nèi)容的呈現(xiàn),整體層級感較強,但入口太多,層級頁面嵌套也較多,功能選項設(shè)置繁多,操作起來稍感繁瑣。
宮格式導(dǎo)航:擴展性較好,可以展示較多的功能入口,甚至可以通過左右滑動來展示更多功能。缺點是入口間無法跳轉(zhuǎn),不能直接展示入口內(nèi)容,如入口太多會產(chǎn)生眼花繚亂的感覺。
下拉菜單式導(dǎo)航:不占空間,容易嵌套在其它導(dǎo)航中使用。缺點是可見性較差,操作步驟較多。這種導(dǎo)航方式常常被滑動式選項卡所代替,但在其它位置被占用時,就只能使用下拉菜單了。
上圖1-瀑布式導(dǎo)航:這種導(dǎo)航也可以看作是一種布局方式,常用來展示圖片,下拉自動加載,有較好的瀏覽體驗,且能營造一種氛圍感,給人一種沉浸感。排版方式可規(guī)整也可隨意布置營造錯落感。但不適合層級復(fù)雜的結(jié)構(gòu),且內(nèi)容較多時容易產(chǎn)生疲勞感。
上圖2-陳列式導(dǎo)航:也可以作為一種布局方式,對同類進行聚合,直接排列展示,作為入口吸引用戶點擊。缺點是有數(shù)量限制,不宜太多。
上圖3-2級標簽導(dǎo)航+頂部滑動選項卡導(dǎo)航:京東APP中有很多2級頁面疊加采用了底部標簽導(dǎo)航,因為采用的是Web的開發(fā)方式,切換流暢度不比原生方式流暢,需要等待網(wǎng)絡(luò)加載。在結(jié)構(gòu)上通過分類形成了明晰的功能區(qū)別,但也會造成層級關(guān)系復(fù)雜,頁面跳轉(zhuǎn)繁瑣。此處頂部滑動選項卡極具代表性,這種導(dǎo)航方式占據(jù)空間小,類別數(shù)量不受限制,左右滑動的操作非常方便。但致命的缺點在于,數(shù)量太多,越往后的選項因為可見性差,點擊量會很低?;旌系撞康?級標簽導(dǎo)航,造成整個頁面結(jié)構(gòu)復(fù)雜、內(nèi)容繁亂。建議是將“購物車、我的”全部集合到1級“我的-訂單管理”里。從用戶角度來說更為便捷,符合操作心理。
天氣:幻燈片式導(dǎo)航 ? ? ?
QQ:抽屜式導(dǎo)航 ? ? ?
大眾點評:側(cè)邊欄式導(dǎo)航
上圖1-幻燈片式導(dǎo)航:適用于圖片或整塊內(nèi)容的并列展示,左右滑動切換內(nèi)容。單頁面內(nèi)容簡潔、整體性強,瀏覽流暢,方向感好。但不適合展示太多內(nèi)容,一般數(shù)量不宜過大,最好在7、8個以內(nèi),否則會產(chǎn)生操作疲勞。
上圖2-抽屜式導(dǎo)航:節(jié)省頁面空間,讓用戶注意力集中到內(nèi)容上,可擴展性好,導(dǎo)航數(shù)量不限。缺點是隱藏欄可見性差,滲透率低,不適合頻繁切換的應(yīng)用。因為QQ軟件的特殊性,導(dǎo)航較少,且以固定在左上角,用戶相對容易找到喚起。
上圖3-側(cè)邊欄式導(dǎo)航:因大眾點評產(chǎn)品類別多樣化、細分種類繁多,這種側(cè)邊欄導(dǎo)航,容易呈現(xiàn)整個結(jié)構(gòu)。相對于抽屜式隱藏的特性,直接顯示出來,便于用戶發(fā)現(xiàn)尋找,擴展性好。但會擠占較大空間,無法顯示次級內(nèi)容。大眾點評二級菜單采用圖標+小標題的展現(xiàn)方式,增強了趣味性,更直觀。這種導(dǎo)航類型適用于分層結(jié)構(gòu)復(fù)雜,且分類重要的產(chǎn)品。
綜上10種常用導(dǎo)航方式,在實際設(shè)計使用中,應(yīng)該根據(jù)產(chǎn)品的特性來混合使用,單一導(dǎo)航肯定無法滿足豐富多變的產(chǎn)品需求。但也不能因為追求展示形式的多樣化,造成導(dǎo)航搭配混亂的感覺。適合自己產(chǎn)品的才是最好的。
全站高品質(zhì)素材免費下載!