APP導(dǎo)航設(shè)計(jì)模式

導(dǎo)航主要分為兩大類遍愿,橫向和縱向。橫向的導(dǎo)航有:標(biāo)簽導(dǎo)航耘斩、舵式導(dǎo)航沼填、tab導(dǎo)航、輪播導(dǎo)航括授;縱向的導(dǎo)航有:宮格導(dǎo)航坞笙、下拉導(dǎo)航、列表導(dǎo)航荚虚、隱喻導(dǎo)航薛夜、抽屜導(dǎo)航。這些是導(dǎo)航的基本樣式曲管,如今大部分的導(dǎo)航設(shè)計(jì)都可以從中變種却邓、組合而成。


1院水、標(biāo)簽導(dǎo)航(選項(xiàng)卡導(dǎo)航)

將入口放在頁(yè)面底部,形成標(biāo)簽導(dǎo)航简十,這是現(xiàn)在市面上比較流行的一種導(dǎo)航模式檬某,幾乎所有APP都有應(yīng)用到。優(yōu)點(diǎn)顯而易見(jiàn)螟蝙,讓用戶一進(jìn)入APP就能對(duì)APP的結(jié)構(gòu)有一個(gè)初步的認(rèn)識(shí)恢恼,簡(jiǎn)單易懂。通常這種導(dǎo)航方式底部的標(biāo)簽選項(xiàng)不會(huì)超過(guò)5個(gè)胰默,如果超過(guò)五個(gè)就會(huì)考慮適用舵式導(dǎo)航场斑。

2、舵式導(dǎo)航

與標(biāo)簽導(dǎo)航類似牵署,但是其中一個(gè)導(dǎo)航標(biāo)簽蘊(yùn)含更多的操作選項(xiàng)漏隐,也可以理解為標(biāo)簽中蘊(yùn)含更多二級(jí)導(dǎo)航標(biāo)簽,可以讓導(dǎo)航欄簡(jiǎn)潔高效奴迅,避免擁擠青责,又可以突出常用功能。

其中取具,舵式導(dǎo)航中蘊(yùn)含二級(jí)導(dǎo)航標(biāo)簽的標(biāo)簽可以單獨(dú)成為一種導(dǎo)航——點(diǎn)聚導(dǎo)航脖隶,適用于因?yàn)閮?nèi)容的展示,要求界面有極高的簡(jiǎn)潔性的APP暇检。印象筆記的APP版本就是一個(gè)典型的點(diǎn)聚導(dǎo)航产阱,印象筆記是個(gè)特別的例子,不僅用點(diǎn)聚導(dǎo)航作為一級(jí)導(dǎo)航块仆,還用了抽屜導(dǎo)航作為二級(jí)導(dǎo)航构蹬,應(yīng)該是為了最大程度保持產(chǎn)品的簡(jiǎn)潔性酿矢。

3、tab標(biāo)簽導(dǎo)航

將標(biāo)簽放到界面的上方怎燥,就會(huì)形成tab標(biāo)簽導(dǎo)航瘫筐,這種導(dǎo)航適用于類目較多的APP作為二級(jí)導(dǎo)航梳理頁(yè)面邏輯,布局清晰铐姚。作為一個(gè)二級(jí)導(dǎo)航策肝,頂部標(biāo)簽導(dǎo)航應(yīng)用于多種情境下,可以固定數(shù)量隐绵,展示有限的幾個(gè)標(biāo)簽之众。也可以擴(kuò)大一定的數(shù)量,變成向左滑動(dòng)展現(xiàn)更多標(biāo)簽依许,十分靈活棺禾,但是因?yàn)樵谑謾C(jī)中左右滑動(dòng)不如上下滑動(dòng)方便,因此峭跳,個(gè)人認(rèn)為還是不要展開(kāi)太多標(biāo)簽膘婶。

抽屜導(dǎo)航

抽屜導(dǎo)航是將菜單隱藏在當(dāng)前頁(yè)面后,點(diǎn)擊導(dǎo)航入口即可像拉抽屜一樣拉出菜單蛀醉。抽屜導(dǎo)航一般用來(lái)放置對(duì)用戶而言不太常用或者對(duì)于產(chǎn)品而言不太核心的功能悬襟,優(yōu)點(diǎn)是可以節(jié)省頁(yè)面空間,比較適合于不那么需要頻繁切換內(nèi)容的應(yīng)用拯刁,例如對(duì)設(shè)置脊岳、關(guān)于、個(gè)人信息等內(nèi)容的隱藏垛玻。

下拉導(dǎo)航

一般位于產(chǎn)品頂部割捅,通過(guò)點(diǎn)擊呼出導(dǎo)航菜單。導(dǎo)航菜單以浮窗形式位于界面上層帚桩,可通過(guò)點(diǎn)擊導(dǎo)航菜單以外的區(qū)域使其收起亿驾。下拉導(dǎo)航的菜單與界面的連貫性比抽屜式要好,容易讓用戶感知當(dāng)前位置朗儒。但由于是位于屏幕上方颊乘,相對(duì)隱蔽而且不能結(jié)合手勢(shì)操作,所以該菜單形式也不適合于頻繁的切換功能使用醉锄》η模考慮到導(dǎo)航菜單的可用面積較小,所以一般采用列表的形式展示菜單內(nèi)容恳不。下拉導(dǎo)航還有一種變式檩小,就是下來(lái)菜單中展示兩級(jí)甚至多級(jí),一般在電商產(chǎn)品中比較常見(jiàn)烟勋,因?yàn)槠奉惡秃Y選條件眾多规求。

宮格導(dǎo)航

主要入口全部聚合在頁(yè)面筐付,讓用戶做出選擇。這樣的組織方式雖然無(wú)法讓用戶第一時(shí)間看到內(nèi)容或執(zhí)行操作阻肿,用戶的選擇壓力也比較大瓦戚。但卻能夠讓用戶整體上了解APP提供的服務(wù),從而選擇自己所需要的那個(gè)服務(wù)丛塌。這種導(dǎo)航于一些提供的服務(wù)較多或者類目較多的APP较解,例如支付寶、優(yōu)酷等赴邻。

由于受到卡片式設(shè)計(jì)的影響印衔,宮格導(dǎo)航也出現(xiàn)了不少的變式,主要有以下幾種:

將宮格的卡片變大姥敛,宮格與宮格時(shí)間不留空白奸焙。

增加縱向滾動(dòng)功能,就可以增加卡片數(shù)量的展現(xiàn)彤敛,可以說(shuō)是無(wú)限的与帆。如下圖:

對(duì)宮格進(jìn)行分類

每個(gè)分類也可以繼續(xù)展開(kāi),滑動(dòng)出更多臊泌,甚至跟訂閱相結(jié)合

列表導(dǎo)航

通過(guò)列表指示類目鲤桥,在右側(cè)顯示箭頭表示有二級(jí)內(nèi)容,列表導(dǎo)航通常用于二級(jí)頁(yè)渠概,由于它與宮格導(dǎo)航一樣,不會(huì)默認(rèn)展示任何實(shí)質(zhì)內(nèi)容嫂拴,所以通常app不會(huì)在首頁(yè)使用它播揪。這種導(dǎo)航結(jié)構(gòu)清晰,易于理解筒狠,冷靜高效猪狈,能夠幫助用戶快速的定位去到對(duì)應(yīng)的頁(yè)面。

同樣可以對(duì)列表進(jìn)行分類產(chǎn)生變式辩恼,這樣邏輯會(huì)更清晰雇庙,不知道如何確定分類名稱。把分類名稱去掉也是可以的灶伊。只是用間距將每一組列表隔開(kāi)也能起到梳理邏輯的作用疆前。

輪播導(dǎo)航

每一個(gè)頁(yè)面就代表一個(gè)導(dǎo)航入口,這就是輪播導(dǎo)航聘萨,適用于比較簡(jiǎn)單或者結(jié)構(gòu)比較扁平的APP竹椒。輪播導(dǎo)航能夠最大程度的保證應(yīng)用的頁(yè)面簡(jiǎn)潔性,操作也是最方便的米辐,只需要手指左右滑動(dòng)胸完。缺點(diǎn)也很明顯:承載入口的數(shù)量有限书释,超過(guò)10個(gè)可能就多了。這種導(dǎo)航常見(jiàn)于查看圖片赊窥,也經(jīng)常與其他導(dǎo)航模式結(jié)合爆惧,作為banner廣告呈現(xiàn)。

隱喻導(dǎo)航

如果原始導(dǎo)航中的五個(gè)入口锨能,變成游戲界面中的五個(gè)關(guān)卡扯再,只是簡(jiǎn)單地將其按照上下順序列出來(lái)就會(huì)不太適用。游戲?qū)?dǎo)航的要求不僅要可用腹侣,更要和整個(gè)游戲的風(fēng)格等匹配叔收。因此,有了隱喻導(dǎo)航這種模式傲隶,用頁(yè)面模仿應(yīng)用的隱喻對(duì)象饺律。這種導(dǎo)航主要用于游戲,但在幫助導(dǎo)航 人們組織事物(如日記跺株、書籍等)复濒,并對(duì)其進(jìn)行分類的應(yīng)用中也能看到。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末乒省,一起剝皮案震驚了整個(gè)濱河市巧颈,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌袖扛,老刑警劉巖砸泛,帶你破解...
    沈念sama閱讀 211,290評(píng)論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異蛆封,居然都是意外死亡唇礁,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,107評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門惨篱,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)盏筐,“玉大人,你說(shuō)我怎么就攤上這事砸讳∽寥冢” “怎么了?”我有些...
    開(kāi)封第一講書人閱讀 156,872評(píng)論 0 347
  • 文/不壞的土叔 我叫張陵簿寂,是天一觀的道長(zhǎng)漾抬。 經(jīng)常有香客問(wèn)我,道長(zhǎng)陶耍,這世上最難降的妖魔是什么奋蔚? 我笑而不...
    開(kāi)封第一講書人閱讀 56,415評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上泊碑,老公的妹妹穿的比我還像新娘坤按。我一直安慰自己,他們只是感情好馒过,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,453評(píng)論 6 385
  • 文/花漫 我一把揭開(kāi)白布臭脓。 她就那樣靜靜地躺著,像睡著了一般腹忽。 火紅的嫁衣襯著肌膚如雪来累。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書人閱讀 49,784評(píng)論 1 290
  • 那天窘奏,我揣著相機(jī)與錄音嘹锁,去河邊找鬼。 笑死着裹,一個(gè)胖子當(dāng)著我的面吹牛领猾,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播骇扇,決...
    沈念sama閱讀 38,927評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼摔竿,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了少孝?” 一聲冷哼從身側(cè)響起继低,我...
    開(kāi)封第一講書人閱讀 37,691評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎稍走,沒(méi)想到半個(gè)月后袁翁,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,137評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡婿脸,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,472評(píng)論 2 326
  • 正文 我和宋清朗相戀三年梦裂,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片盖淡。...
    茶點(diǎn)故事閱讀 38,622評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖凿歼,靈堂內(nèi)的尸體忽然破棺而出褪迟,到底是詐尸還是另有隱情,我是刑警寧澤答憔,帶...
    沈念sama閱讀 34,289評(píng)論 4 329
  • 正文 年R本政府宣布味赃,位于F島的核電站,受9級(jí)特大地震影響虐拓,放射性物質(zhì)發(fā)生泄漏心俗。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,887評(píng)論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望城榛。 院中可真熱鬧揪利,春花似錦、人聲如沸狠持。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 30,741評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)喘垂。三九已至甜刻,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間正勒,已是汗流浹背得院。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 31,977評(píng)論 1 265
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留章贞,地道東北人祥绞。 一個(gè)月前我還...
    沈念sama閱讀 46,316評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像阱驾,于是被迫代替她去往敵國(guó)和親就谜。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,490評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容