APP導(dǎo)航與信息布局界面設(shè)計(jì)模式

因?yàn)樽罱佑|到APP設(shè)計(jì)類(lèi)似的工作，所以我來(lái)梳理一下如今市面上流行的APP導(dǎo)航設(shè)計(jì)模式以及信息布局設(shè)計(jì)模式。因?yàn)檫€沒(méi)有深刻體會(huì)到每一種設(shè)計(jì)的優(yōu)缺點(diǎn)以及適用場(chǎng)景，所以這里主要的任務(wù)是梳理APP的布局設(shè)計(jì)有哪些。

下圖為本文的結(jié)構(gòu)圖：

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

標(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)，讓用戶(hù)一進(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)航。

舵式導(dǎo)航

與標(biāo)簽導(dǎo)航類(lèi)似，但是其中一個(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)潔性。

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

將標(biāo)簽放到界面的上方，就會(huì)形成tab標(biāo)簽導(dǎo)航，這種導(dǎo)航適用于類(lèi)目較多的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ì)用戶(hù)而言不太常用或者對(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)航的菜單與界面的連貫性比抽屜式要好，容易讓用戶(hù)感知當(dāng)前位置。但由于是位于屏幕上方，相對(duì)隱蔽而且不能結(jié)合手勢(shì)操作，所以該菜單形式也不適合于頻繁的切換功能使用?？紤]到導(dǎo)航菜單的可用面積較小，所以一般采用列表的形式展示菜單內(nèi)容。下拉導(dǎo)航還有一種變式，就是下來(lái)菜單中展示兩級(jí)甚至多級(jí)，一般在電商產(chǎn)品中比較常見(jiàn)，因?yàn)槠奉?lèi)和篩選條件眾多。

宮格導(dǎo)航

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

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

將宮格的卡片變大，宮格與宮格時(shí)間不留空白。

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

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

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

列表導(dǎo)航

通過(guò)列表指示類(lèi)目，在右側(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)清晰，易于理解，冷靜高效，能夠幫助用戶(hù)快速的定位去到對(duì)應(yīng)的頁(yè)面。

同樣可以對(duì)列表進(jìn)行分類(lèi)產(chǎn)生變式，這樣邏輯會(huì)更清晰，不知道如何確定分類(lèi)名稱(chēng)。把分類(lèi)名稱(chēng)去掉也是可以的。只是用間距將每一組列表隔開(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)航 人們組織事物(如日記、書(shū)籍等)，并對(duì)其進(jìn)行分類(lèi)的應(yīng)用中也能看到。

總結(jié)起來(lái)，導(dǎo)航主要分為兩大類(lèi)，橫向和縱向。橫向的導(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ì)都可以從中變種、組合而成。

信息布局設(shè)計(jì)

列表布局

內(nèi)容從上往下排列，一個(gè)單元內(nèi)容占據(jù)一行，以列表的形式展示具體內(nèi)容，并且能夠根據(jù)數(shù)據(jù)的長(zhǎng)度自適應(yīng)顯示，理論上可以無(wú)限延伸，適合具體內(nèi)容的展示。

List View是可以滾動(dòng)的列表布局方式，最常見(jiàn)的應(yīng)該屬于android的列表布局，這也是最快速的app布局方式。因?yàn)闊o(wú)論ios開(kāi)發(fā)和android 都有現(xiàn)成的列表布局插件和模板。代表的就是分類(lèi)信息的展示形式，還有產(chǎn)品列表、對(duì)話(huà)列表等等。簡(jiǎn)潔高效就是它的優(yōu)點(diǎn)。

宮格布局

也可以稱(chēng)為網(wǎng)格布局，九宮格是一種特殊的宮格布局，只要是網(wǎng)格狀布局的都可以稱(chēng)為宮格布局，這種布局的優(yōu)點(diǎn)是入口展示清晰，查找方便，適合展示入口較多且模塊之間相對(duì)獨(dú)立的APP。理論上也是可以延伸的，但是因?yàn)橹饕米髂K入口，過(guò)多會(huì)讓用戶(hù)選擇困難，也會(huì)讓頁(yè)面顯得冗贅，且標(biāo)題也不宜過(guò)長(zhǎng)。宮格之間最好能有留白，讓用戶(hù)視覺(jué)負(fù)擔(dān)少一點(diǎn)。

圖表布局

用圖表的方式顯示信息，主要用在一些商務(wù)型APP上，讓數(shù)據(jù)可視化。

卡片布局

卡片布局也是一種常見(jiàn)的布局，每個(gè)卡片信息承載量大，轉(zhuǎn)化率高;每張卡片的操作互相獨(dú)立，互不干擾。適合以圖片、視頻為主單一內(nèi)容瀏覽型的展示，現(xiàn)在也是信息展示的主流方式。

標(biāo)簽布局

標(biāo)簽是一個(gè)子類(lèi)，主要用作填寫(xiě)信息信息的標(biāo)注、還有搜索的時(shí)候熱門(mén)關(guān)鍵詞的布局。

瀑布流布局

瀑布流圖片展現(xiàn)具有吸引力;瀑布流里的加載模式能獲得更多的內(nèi)容，容易沉浸其中;瀑布流錯(cuò)落有致的設(shè)計(jì)巧妙利用視覺(jué)層級(jí)，同時(shí)視線(xiàn)任意流動(dòng)緩解視覺(jué)疲勞。適用于實(shí)時(shí)內(nèi)容頻繁更新的情況。

手風(fēng)琴布局

兩級(jí)結(jié)構(gòu)可承載較多信息，同時(shí)保持界面簡(jiǎn)潔;減少界面跳轉(zhuǎn)，提高操作效率高;對(duì)分類(lèi)有整體的了解，入口清晰。適用于兩級(jí)結(jié)構(gòu)的內(nèi)容，并且二級(jí)結(jié)構(gòu)可以隱藏。但如果內(nèi)容過(guò)多的時(shí)候，列表之間的跳轉(zhuǎn)會(huì)比較麻煩。

多面板布局

多面板可以說(shuō)是手風(fēng)琴布局的改良，具有手風(fēng)琴布局的優(yōu)點(diǎn)，同時(shí)克服了手風(fēng)琴布局跳轉(zhuǎn)麻煩的缺點(diǎn)，適合分類(lèi)多并且內(nèi)容需要同時(shí)展示。

旋轉(zhuǎn)木馬式布局

一個(gè)單元占據(jù)一個(gè)頁(yè)面位置，重點(diǎn)展示一個(gè)內(nèi)容，通過(guò)左右滑動(dòng)查看更多。單頁(yè)面內(nèi)容整體性強(qiáng)，聚焦度高;線(xiàn)性的瀏覽方式有順暢感、方向感。適合數(shù)量少，聚焦度高，視覺(jué)沖擊力強(qiáng)的圖片展示。

總結(jié)

以上便是市面上主要的APP頁(yè)面信息的布局模式。如有不妥，還望指正。

最后，APP采用的設(shè)計(jì)沒(méi)有最好的，只有最適合的，根據(jù)自己產(chǎn)品的信息結(jié)構(gòu)選擇最適合的布局方式，就是最好的設(shè)計(jì)。

文章標(biāo)題：APP導(dǎo)航與信息布局界面設(shè)計(jì)模式
轉(zhuǎn)載源于：http://www.muchs.cn/news2/166602.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站內(nèi)鏈、企業(yè)網(wǎng)站制作、小程序開(kāi)發(fā)、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)