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

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

1）底部導(dǎo)航

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

它的缺點是會占用一定高度的空間，如果用戶是小屏幕手機，則視覺體驗不太好。

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

2）頂部導(dǎo)航

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

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

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

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

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

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

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

參考文獻：

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

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

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

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

原文鏈接：

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

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

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

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

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

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

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

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

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

最佳實踐：使用選項卡導(dǎo)航要注意視覺上對已選擇和未選擇的選項進行有效區(qū)分。

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

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

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

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

頁面旋轉(zhuǎn)導(dǎo)航模式有一定的局限性，當頁面超過8個時，要