總結(jié)宮格導(dǎo)航設(shè)計(jì)

總結(jié)宮格導(dǎo)航設(shè)計(jì)第1篇總結(jié)宮格導(dǎo)航設(shè)計(jì)第1篇標(biāo)簽式導(dǎo)航又叫Tab式導(dǎo)航，是目前移動(dòng)端市場(chǎng)上最為廣泛的導(dǎo)航設(shè)計(jì)。標(biāo)簽導(dǎo)航通常分為底部，頂部，頂、底混合使用這三種模式。

1）底部導(dǎo)航

采用文字加圖標(biāo)的方式展現(xiàn)。一般有3~5個(gè)標(biāo)簽，適合在相關(guān)的幾類信息中間頻繁地切換使用。這類信息優(yōu)先級(jí)較高、用戶使用頻繁，彼此之間相互獨(dú)立，通過(guò)標(biāo)簽式導(dǎo)航的引導(dǎo)，用戶可以迅速地實(shí)現(xiàn)頁(yè)面之間的切換且不會(huì)迷失方向，簡(jiǎn)單而高效。

它的缺點(diǎn)是會(huì)占用一定高度的空間，如果用戶是小屏幕手機(jī)，則視覺(jué)體驗(yàn)不太好。

下圖應(yīng)用分別為微信、Facebook：

2）頂部導(dǎo)航

當(dāng)內(nèi)容分類比較多，用戶對(duì)不同內(nèi)容的打開(kāi)率相差不是很大，需要快速切換/調(diào)出的時(shí)候，經(jīng)常會(huì)采用頂部導(dǎo)航設(shè)計(jì)模式，常見(jiàn)于工具類APP中，如WaveAnalytics、滴滴打車(chē)：

3）頂部、底部雙Tab導(dǎo)航

標(biāo)簽式導(dǎo)航除了設(shè)在頂部和底部，另外有些內(nèi)容比較多的產(chǎn)品會(huì)采用頂部、底部混合使用標(biāo)簽式導(dǎo)航，如簡(jiǎn)書(shū)、網(wǎng)易云閱讀：

總結(jié)宮格導(dǎo)航設(shè)計(jì)第2篇沒(méi)查到明確的命名方法，暫時(shí)稱為全局導(dǎo)航。這種導(dǎo)航可以把大量?jī)?nèi)容進(jìn)行分類，并且讓用戶迅速了解平臺(tái)商品的架構(gòu)，多用于教育、電商等種類豐富的平臺(tái)。

現(xiàn)有倆種使用方式：固定的一級(jí)導(dǎo)航+對(duì)應(yīng)的二級(jí)導(dǎo)航；固定的一級(jí)導(dǎo)航+二級(jí)導(dǎo)航+商品列表。前者的更注重分類，幫助用戶快速找到內(nèi)容；在二級(jí)導(dǎo)航內(nèi)可以承載文字、圖片、文字＋圖片等不同的形式。后者則是通過(guò)固定的一級(jí)導(dǎo)航幫助用戶在不同分類之間快速切換。

7、分段式控件導(dǎo)航

分段式控件小巧靈活，可以很好地融合進(jìn)導(dǎo)航欄中而不占用過(guò)多空間。是IOS系統(tǒng)的常用控件，由于數(shù)量比較少，不適合做一級(jí)導(dǎo)航，常用于二級(jí)導(dǎo)航。

參考文獻(xiàn)：

術(shù)與道：移動(dòng)應(yīng)用UI設(shè)計(jì)必修課余振華著

移動(dòng)應(yīng)用UI設(shè)計(jì)模式TheresaNeil著

總結(jié)宮格導(dǎo)航設(shè)計(jì)第3篇儀表盤(pán)匯總展示了一些關(guān)鍵指標(biāo)。進(jìn)入每一種度量方式后，都可以了解更多額外信息。這種主導(dǎo)航模式常用于金融應(yīng)用程序、分析工具、銷售和營(yíng)銷應(yīng)用程序，如友盟統(tǒng)計(jì)：

最佳實(shí)踐：儀表盤(pán)只需要載入被研究確認(rèn)過(guò)的關(guān)鍵數(shù)據(jù)即可，不需要過(guò)多內(nèi)容。

原文鏈接：

題圖來(lái)自Unsplash，基于CC0協(xié)議

總結(jié)宮格導(dǎo)航設(shè)計(jì)第4篇二級(jí)導(dǎo)航用于在頁(yè)面及模塊中進(jìn)行導(dǎo)航，因此這種應(yīng)用通常來(lái)講至少有3層信息結(jié)構(gòu)，最常見(jiàn)的就是國(guó)內(nèi)絕大多數(shù)APP都有的“我的”功能菜單。

列表式導(dǎo)航作為信息組織框架，是我們?cè)诋a(chǎn)品設(shè)計(jì)中必不可少的一個(gè)信息承載模式。

列表導(dǎo)航與宮格導(dǎo)航類似，常用于二級(jí)頁(yè)面，不會(huì)默認(rèn)展示任何實(shí)質(zhì)內(nèi)容，所以通常app不會(huì)在首頁(yè)使用它。這種導(dǎo)航結(jié)構(gòu)清晰，易于用戶理解，能夠幫助用戶快速的定位去到對(duì)應(yīng)的頁(yè)面。下圖應(yīng)用分別是微信和Strides：

列表菜單導(dǎo)航的每個(gè)列表均指向相應(yīng)的功能/內(nèi)容選項(xiàng)，它有許多衍生形態(tài)，包括個(gè)性化菜單列表、分組菜單列表和增強(qiáng)型菜單列表。增強(qiáng)型菜單列表是指在簡(jiǎn)單列表的基礎(chǔ)上，帶有額外的搜索、瀏覽及過(guò)濾功能。

下圖應(yīng)用分別是：QQ、有道云筆記、Retrica和Strides：

最佳實(shí)踐：列表菜單導(dǎo)航適合長(zhǎng)標(biāo)題或者有副標(biāo)題說(shuō)明，使用類表菜單導(dǎo)航應(yīng)該提供一個(gè)從子頁(yè)面返回類表頁(yè)面的方式，通常在標(biāo)題欄添加一個(gè)帶有菜單字樣的按鈕作為返回按鈕。

底部選項(xiàng)卡現(xiàn)在幾乎成了IOS和Android兩大系統(tǒng)（黑莓和webOS也比較廣泛，但因?yàn)橐呀?jīng)不是主流系統(tǒng)，因此暫不討論）陣營(yíng)中，絕大多數(shù)應(yīng)用的標(biāo)配。如Facebook、Twitter、微信和新浪微博：

也有非常多的應(yīng)用，將Tab標(biāo)簽設(shè)置再了導(dǎo)航欄下，即頂部導(dǎo)航，有點(diǎn)類似于傳統(tǒng)網(wǎng)站導(dǎo)航，如360云盤(pán)、扇貝單詞、豆瓣和Facebook等。

最佳實(shí)踐：使用選項(xiàng)卡導(dǎo)航要注意視覺(jué)上對(duì)已選擇和未選擇的選項(xiàng)進(jìn)行有效區(qū)分。

圖庫(kù)式界面被分割成用于導(dǎo)航的各個(gè)內(nèi)容區(qū)塊。內(nèi)容區(qū)通常載有單獨(dú)的文章、標(biāo)題、照片、產(chǎn)品和其他能夠放置在內(nèi)容區(qū)、網(wǎng)格或幻燈片里展示的內(nèi)容。如TED、BB_EWS、Bilibili、搜狐視頻等。

有時(shí)候如果內(nèi)容區(qū)是以分組形式布局，分組的內(nèi)容應(yīng)設(shè)計(jì)得容易被用戶瀏覽到，如使用側(cè)Tab形式（也稱抽屜式導(dǎo)航）去管理分組內(nèi)容，讓用戶能夠在Tab中切換，查看不同分組，下圖應(yīng)用分別是MyRolls和Perisfind：

最佳實(shí)踐：圖庫(kù)式界面的設(shè)計(jì)模式適用于用戶想要瀏覽的、經(jīng)常更新的內(nèi)容。

頁(yè)面旋轉(zhuǎn)常見(jiàn)模式是使用左右滑動(dòng)手勢(shì)在頁(yè)面間快速切換，用戶滑動(dòng)時(shí)將顯示下一個(gè)頁(yè)面。頁(yè)面指示器（IOS系統(tǒng)下面的小點(diǎn)）顯示一共有多少頁(yè)可供切換。下圖應(yīng)用分別是tapas和ConnectID：

頁(yè)面旋轉(zhuǎn)導(dǎo)航模式有一定的局限性，當(dāng)頁(yè)面超過(guò)8個(gè)時(shí)，要