APP設(shè)計(jì)模式之——導(dǎo)航設(shè)計(jì)
編輯導(dǎo)語(yǔ):清晰的導(dǎo)航設(shè)計(jì)可以幫助用戶快速獲取所需信息,讓用戶的注意力實(shí)現(xiàn)有效聚焦。不過(guò),導(dǎo)航設(shè)計(jì)需要針對(duì)不同的場(chǎng)景和目的來(lái)進(jìn)行規(guī)劃。本篇文章里,作者對(duì)APP設(shè)計(jì)模式之一——導(dǎo)航設(shè)計(jì)進(jìn)行了詳細(xì)的總結(jié)和分析,一起來(lái)看一下。
一、一級(jí)導(dǎo)航/主導(dǎo)航
1. 標(biāo)簽式導(dǎo)航
標(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)不太好。
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中,如Wave Analytics、滴滴打車:
3)頂部、底部雙Tab導(dǎo)航
標(biāo)簽式導(dǎo)航除了設(shè)在頂部和底部,另外有些內(nèi)容比較多的產(chǎn)品會(huì)采用頂部、底部混合使用標(biāo)簽式導(dǎo)航,如簡(jiǎn)書、網(wǎng)易云閱讀:
2. 抽屜式導(dǎo)航
抽屜導(dǎo)航指的是一些功能菜單按鈕隱藏在當(dāng)前頁(yè)面后,點(diǎn)擊入口或側(cè)滑即可像拉抽屜一樣拉出菜單。
這種導(dǎo)航設(shè)計(jì)比較適合于那么不需要頻繁切換的次要功能,例如對(duì)設(shè)置、關(guān)于、會(huì)員、皮膚設(shè)置等功能的隱藏。下圖分別是Wave Analytics、Gadgets News、My Rolls和Perisfind:
抽屜式導(dǎo)航的優(yōu)點(diǎn)在于節(jié)省頁(yè)面展示空間,使主頁(yè)面更加簡(jiǎn)潔美觀,讓用戶將更多的注意力聚焦到當(dāng)前頁(yè)面。
缺點(diǎn)在于次功能入口比較隱蔽,用戶不容易發(fā)現(xiàn);使用次功能需要二次點(diǎn)擊,增加用戶使用成本。
3. 桌面式導(dǎo)航
桌面式導(dǎo)航類似于操作系統(tǒng)或啟動(dòng)控制面板,其特色是主頁(yè)由多個(gè)按鈕組成。均衡布局時(shí),按鈕通常大小一致,以3*3、2*3、2*2和1*2等形式排布于桌面。點(diǎn)擊按鈕時(shí),跳轉(zhuǎn)至其他內(nèi)部子系統(tǒng)/子模塊。
如圖,Strides和Finance采用了基于圓形按鈕的均衡布局:
而360和日語(yǔ)五十音圖則采用了基于圓角矩形按鈕的均衡布局:
注:當(dāng)圓角矩形弧度越來(lái)越小,甚至消失不見(jiàn)成為正方形的時(shí)候,往往用方形格子隔開(kāi)各個(gè)按鈕,使得視覺(jué)效果最好,這種模式見(jiàn)于下一節(jié)的“宮格式導(dǎo)航”中。
市面上還存在著一些極少數(shù)應(yīng)用,它們內(nèi)部生態(tài)繁雜,提供(自己的或者來(lái)自第三方服務(wù))眼花繚亂、不勝枚舉的服務(wù)項(xiàng)目,有些服務(wù)項(xiàng)目單獨(dú)拎出來(lái),做成一款應(yīng)用,都可以匹敵一家小型互聯(lián)網(wǎng)公司,甚至是中型互聯(lián)網(wǎng)公司。
但是出于業(yè)務(wù)整合、平臺(tái)搭建、體系構(gòu)建、服務(wù)扁平化,它們會(huì)被塞到一個(gè)“殼子”里,形成“超級(jí)服務(wù)平臺(tái)類”APP,比如阿里系的支付寶和千牛工作臺(tái):
支付寶首頁(yè)的服務(wù)項(xiàng)目,可以在“全部”頁(yè)面中進(jìn)行個(gè)性化配置;千牛工作臺(tái)首頁(yè)的三方服務(wù),可以在“設(shè)置”頁(yè)面中進(jìn)行個(gè)性化配置。兩個(gè)APP都支持用戶根據(jù)自己實(shí)際需求和使用頻度,優(yōu)化服務(wù)項(xiàng)目的顯示順序,進(jìn)行入口優(yōu)化。
這種“超級(jí)服務(wù)平臺(tái)類”APP,目前我僅在阿里系的產(chǎn)品中看到過(guò),其特點(diǎn)是:
- 高頻/超高頻使用,用戶粘性極高,應(yīng)用處于市場(chǎng)壟斷地位,幾乎無(wú)可替代產(chǎn)品(生態(tài)龐大帶來(lái)的優(yōu)勢(shì));
- 應(yīng)用服務(wù)種類多且扁平化(使得并列式的桌面布局模式成為必選項(xiàng));
- 可以當(dāng)做企業(yè)移動(dòng)后臺(tái)來(lái)使用(支付寶的服務(wù)包括衣食住行,可認(rèn)為是企業(yè)個(gè)人),我稱之為“行走的ERP”;
- 商業(yè)氛圍濃厚。
最佳實(shí)踐:菜單無(wú)主次之分,每個(gè)菜單所占空間大小一致。菜單有主次之分,主要的占空間較大,其余的占空間較小。在使用桌面式導(dǎo)航布局時(shí),要充分考慮到給客戶提供個(gè)性化和定制化功能。
4. 宮格式導(dǎo)航
宮格導(dǎo)航是將主要入口全部聚合在主頁(yè)面中(因其布局比較像傳統(tǒng)PC桌面上的圖標(biāo)排列,又被稱為“桌面式導(dǎo)航”),每個(gè)宮格相互獨(dú)立,它們的信息間也沒(méi)有任何交集,無(wú)法跳轉(zhuǎn)互通。
因?yàn)檫@種特質(zhì),宮格式導(dǎo)航被廣泛應(yīng)用于各平臺(tái)系統(tǒng)的中心頁(yè)面。這樣的組織方式無(wú)法讓用戶在第一時(shí)間看到內(nèi)容,選擇壓力較大,因此現(xiàn)在采用這種導(dǎo)航的APP已經(jīng)越來(lái)越少,往往用在二級(jí)頁(yè)作為內(nèi)容列表的一種圖形化形式呈現(xiàn),或是作為一系列工具入口的聚合。下圖應(yīng)用分別是釘釘和epocrates:
作為二級(jí)導(dǎo)航的宮格式導(dǎo)航:
5. 舵式導(dǎo)航
在有些情況下,簡(jiǎn)單的底部tab式導(dǎo)航難以滿足更多的操作功能,這個(gè)時(shí)候我們就需要一些擴(kuò)展形式來(lái)滿足需求 ,新浪微博、lofter、閑魚底部采用的就是舵式導(dǎo)航,舵式導(dǎo)航(之前看到別人這么叫所以我也就這么稱呼吧)。
跟標(biāo)簽式導(dǎo)航相比,區(qū)別在于舵式導(dǎo)航把類似生產(chǎn)內(nèi)容的主功能按鈕放在中間,標(biāo)簽更加突出醒目,同時(shí)該主功能標(biāo)簽做了功能擴(kuò)展,也因此給設(shè)計(jì)增加了一些個(gè)性化的亮點(diǎn)。如新浪微博和育學(xué)園:
6. 隱喻式導(dǎo)航
這種模式的特點(diǎn)是用一個(gè)頁(yè)面來(lái)體現(xiàn)整個(gè)應(yīng)用程序。常用于游戲app,如Air Supremacy和2020:My country。
此外,在分類物品(如各類筆記、書籍、酒品)應(yīng)用,和其他單一功能應(yīng)用中也能經(jīng)常看到隱喻式Tab。如DAKA、石墨文檔、拼圖醬和Moment:
最佳實(shí)踐:使用隱喻式要慎重,一個(gè)執(zhí)行起來(lái)不明確的隱喻,反而會(huì)起到反作用。
二、二級(jí)導(dǎo)航
二級(jí)導(dǎo)航用于在頁(yè)面及模塊中進(jìn)行導(dǎo)航,因此這種應(yīng)用通常來(lái)講至少有3層信息結(jié)構(gòu),最常見(jiàn)的就是國(guó)內(nèi)絕大多數(shù)APP都有的“我的”功能菜單。
1. 列表式導(dǎo)航
列表式導(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è)帶有菜單字樣的按鈕作為返回按鈕。
2. 選項(xiàng)卡式
底部選項(xiàng)卡現(xiàn)在幾乎成了IOS和Android兩大系統(tǒng)(黑莓和webOS也比較廣泛,但因?yàn)橐呀?jīng)不是主流系統(tǒng),因此暫不討論)陣營(yíng)中,絕大多數(shù)應(yīng)用的標(biāo)配。
也有非常多的應(yīng)用,將Tab標(biāo)簽設(shè)置再了導(dǎo)航欄下,即頂部導(dǎo)航,有點(diǎn)類似于傳統(tǒng)網(wǎng)站導(dǎo)航,如360云盤、扇貝單詞、豆瓣和Facebook等。
最佳實(shí)踐:使用選項(xiàng)卡導(dǎo)航要注意視覺(jué)上對(duì)已選擇和未選擇的選項(xiàng)進(jìn)行有效區(qū)分。
3. 圖庫(kù)式
圖庫(kù)式界面被分割成用于導(dǎo)航的各個(gè)內(nèi)容區(qū)塊。內(nèi)容區(qū)通常載有單獨(dú)的文章、標(biāo)題、照片、產(chǎn)品和其他能夠放置在內(nèi)容區(qū)、網(wǎng)格或幻燈片里展示的內(nèi)容。如TED、BBC NEWS、Bilibili、搜狐視頻等。
有時(shí)候如果內(nèi)容區(qū)是以分組形式布局,分組的內(nèi)容應(yīng)設(shè)計(jì)得容易被用戶瀏覽到,如使用側(cè)Tab形式(也稱抽屜式導(dǎo)航)去管理分組內(nèi)容,讓用戶能夠在Tab中切換,查看不同分組。
最佳實(shí)踐:圖庫(kù)式界面的設(shè)計(jì)模式適用于用戶想要瀏覽的、經(jīng)常更新的內(nèi)容。
4. 頁(yè)面旋轉(zhuǎn)式
頁(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í),要考慮使用列表導(dǎo)航。
最佳實(shí)踐:
- 頁(yè)面旋轉(zhuǎn)導(dǎo)航適用于頁(yè)面數(shù)量較少的情況;
- 使用指示器反應(yīng)頁(yè)面數(shù)量和當(dāng)前頁(yè)面;
- 左右滑動(dòng)手勢(shì)是最常見(jiàn)的旋轉(zhuǎn)導(dǎo)航手勢(shì)。
5. 圖片旋轉(zhuǎn)式
圖片旋轉(zhuǎn)式的常見(jiàn)形態(tài),是類似于2D旋轉(zhuǎn)木馬形式,圖片可以左右滑動(dòng),且沿任意方向一直滑動(dòng)可重新回到初始圖片處。
三、其他類型
儀表盤式
儀表盤匯總展示了一些關(guān)鍵指標(biāo)。進(jìn)入每一種度量方式后,都可以了解更多額外信息。這種主導(dǎo)航模式常用于金融應(yīng)用程序、分析工具、銷售和營(yíng)銷應(yīng)用程序,如友盟統(tǒng)計(jì):
最佳實(shí)踐:儀表盤只需要載入被研究確認(rèn)過(guò)的關(guān)鍵數(shù)據(jù)即可,不需要過(guò)多內(nèi)容。
作者:銀發(fā)的芝加哥
原文鏈接:https://zhuanlan.zhihu.com/p/27382083
本文由@銀發(fā)的芝加哥 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來(lái)自 Unsplash,基于 CC0 協(xié)議
真好?。。。?/p>