神殿級(jí)App開(kāi)發(fā)導(dǎo)航欄架構(gòu)設(shè)計(jì)必看攻略

一款小小的手機(jī)APP應(yīng)用，卻包羅萬(wàn)象，融合這復(fù)雜的信息內(nèi)容或功能邏輯。要讓用戶在使用中獲得的體驗(yàn)，迅速掌握應(yīng)用的框架結(jié)構(gòu)，其導(dǎo)航的設(shè)計(jì)是一個(gè)重要的環(huán)節(jié)。由于移動(dòng)設(shè)備特別是智能手機(jī)的屏幕尺寸有限，設(shè)計(jì)者們通常會(huì)將屏幕空間盡量留給主體內(nèi)容，優(yōu)秀的APP開(kāi)發(fā)導(dǎo)航設(shè)計(jì)會(huì)讓用戶輕松到達(dá)目的地而又不會(huì)干擾和困惑用戶。下面我們先來(lái)看3種具有代表性的導(dǎo)航模式。

經(jīng)典導(dǎo)航：tabbar

蘋(píng)果大力推薦應(yīng)用開(kāi)發(fā)者優(yōu)先采用這種方式，tabbar 基本就是導(dǎo)航的標(biāo)準(zhǔn)設(shè)計(jì)。Tabbar 的優(yōu)點(diǎn)很明顯，用戶完成切換的成本很低，只需要一次點(diǎn)擊操作，而放在屏幕底部對(duì)主體內(nèi)容的視覺(jué)沖擊可以說(shuō)是最小的，這樣用戶就不會(huì)在瀏覽主體內(nèi)容時(shí)受到過(guò)多的干擾。至于缺點(diǎn)也同樣明顯，那就是受制于屏幕寬度的限制，通常4到5個(gè)功能項(xiàng)的切換會(huì)比較合適，過(guò)多的話將會(huì)顯著提高用戶的切換成本。

優(yōu)秀的挑戰(zhàn)者：抽屜式導(dǎo)航

Tabbar 并不是好的，它并不適用于過(guò)多的切換項(xiàng)。抽屜式導(dǎo)航通過(guò)縱向排列切換項(xiàng)解決了這一問(wèn)題。不過(guò)這也意味著它不能和主體內(nèi)容同時(shí)出現(xiàn)在屏幕上。

在大部分的設(shè)計(jì)當(dāng)中，通過(guò)點(diǎn)擊屏幕左上角的按鈕喚出切換項(xiàng)，有些也可以通過(guò)向右滑動(dòng)手指來(lái)完成。一個(gè)簡(jiǎn)單的滑動(dòng)動(dòng)畫(huà)，就像拉出一個(gè)抽屜，抽屜式導(dǎo)航這個(gè)名稱(chēng)應(yīng)該就是來(lái)源于此。突破了數(shù)量的限制，更大程度上釋放了主體空間，也因此提高了操作成本。如果主要功能項(xiàng)組織在4 到5 項(xiàng)，tabbar 的設(shè)計(jì)方式會(huì)更好，否則，就應(yīng)該優(yōu)先考慮抽屜式導(dǎo)航了。

為頻繁操作設(shè)計(jì)：滑動(dòng)式的導(dǎo)航

導(dǎo)航并不一定只發(fā)生在功能項(xiàng)之間。例如新聞?lì)悜?yīng)用需要在不同類(lèi)別的新聞之間進(jìn)行切換瀏覽，這種切換的頻率要比功能項(xiàng)切換更高，切換項(xiàng)的數(shù)量也會(huì)比較多，像常見(jiàn)的新聞?lì)悇e就有 7,8 種。網(wǎng)易新聞早期的 iOS 版本中采用了抽屜式導(dǎo)航的方式進(jìn)行新聞?lì)悇e的切換，由于高頻率切換時(shí)需要過(guò)多的操作次數(shù)，因而缺乏操作的連續(xù)性。而滑動(dòng)式導(dǎo)航的用戶體驗(yàn)則便捷了很多，尤其在連續(xù)切換時(shí)其操作方式的連續(xù)性比較強(qiáng)，主體頁(yè)面的過(guò)渡也更加平滑，會(huì)產(chǎn)生更加流暢的體驗(yàn)。當(dāng)然也會(huì)有一些缺陷，比如一次滑動(dòng)只能切換到相鄰的類(lèi)別，要想直接切換到對(duì)應(yīng)類(lèi)別可以點(diǎn)擊上方的類(lèi)別列表，不過(guò)由于類(lèi)別過(guò)多，有時(shí)候可能需要滑動(dòng)一下類(lèi)別列表才能完成操作。不過(guò)總體而言，當(dāng)需要在具有相似屬性類(lèi)別之間進(jìn)行較頻繁切換時(shí)，這種設(shè)計(jì)方式很值得參考。

如何走得更遠(yuǎn)?

手機(jī)APP應(yīng)用的導(dǎo)航和現(xiàn)實(shí)世界中的路標(biāo)地圖的作用很類(lèi)似。它是應(yīng)用軟件的虛擬框架，對(duì)用戶具有指示標(biāo)識(shí)以及識(shí)別的功能。如同路標(biāo)，導(dǎo)航能在使用中，定位用戶當(dāng)前在哪兒，為用戶突出當(dāng)前視圖重要的功能，在不同的視圖和區(qū)域迅速地切換信息，記錄使用的操作軌跡防止用戶迷失等。那么在具體實(shí)踐中導(dǎo)航如何設(shè)計(jì)才能讓我們走得更遠(yuǎn)呢?

APP導(dǎo)航設(shè)計(jì)的步驟主要為以下三步：

1. APP框架整理：信息架構(gòu)or任務(wù)分析

2. 框架層級(jí)判斷： 扁 平vs 樹(shù)狀

3. 導(dǎo)航具體表現(xiàn)形式：控 件形式and擺放位置

Step1: APP框架整理： 信息架構(gòu)or任務(wù)分析

App設(shè)計(jì)的最初階段，需要先建立一個(gè)App藍(lán)圖，來(lái)確保在之后軟件導(dǎo)航的設(shè)計(jì)過(guò)程中，設(shè)計(jì)人員能對(duì)功能產(chǎn)品所屬層級(jí)以及需要兼顧的前后關(guān)系進(jìn)行宏觀的掌控。然后通過(guò)任務(wù)分析，能讓設(shè)計(jì)師清晰地了解到當(dāng)前APP將要實(shí)現(xiàn)的功能層級(jí)順序以及信息在系統(tǒng)中傳遞的狀態(tài)，使其在設(shè)計(jì)中能全局地把握住產(chǎn)品的結(jié)構(gòu)以及用戶當(dāng)前所需要進(jìn)行的操作。

Step2 ： 功能層級(jí)判斷： 扁平 VS 樹(shù)狀

再分析了App的框架結(jié)構(gòu)后，產(chǎn)品功能的邏輯層次也就基本確定?？梢岳靡恍┛蚣芾L制軟件將分析整理的框架記錄下來(lái)，形成一張大的藍(lán)圖。在后期的導(dǎo)航設(shè)計(jì)中，許多功能的安排以及排布可以直接從圖中所示的位置關(guān)系進(jìn)行設(shè)計(jì)。

在導(dǎo)航的設(shè)計(jì)中，經(jīng)常遇見(jiàn)的功能層級(jí)主要是兩種：一種是扁平層級(jí)，即所屬功能在框架藍(lán)圖中屬于同一層級(jí)的并列關(guān)系，這種主要出現(xiàn)在信息架構(gòu)較為扁平化，同級(jí)別任務(wù)功能較多的視圖;另外一種則是樹(shù)狀層級(jí)，即信息架構(gòu)較為層次化或者任務(wù)之間有從屬關(guān)系，需要用戶逐層深入的視圖中，如iOS中的單進(jìn)單出式層級(jí)導(dǎo)航。

Step3: 導(dǎo)航具體表現(xiàn)形式：控件形式and擺放位置

通過(guò)前面兩個(gè)步驟的分析與設(shè)計(jì)，App的導(dǎo)航結(jié)構(gòu)可以算是基本完成。但因?yàn)楝F(xiàn)在手機(jī)平臺(tái)眾多，用戶使用習(xí)慣各不相同。所以在產(chǎn)品的具體設(shè)計(jì)中，為了給產(chǎn)品提供的用戶體驗(yàn)，還需要把握平臺(tái)特性，選擇合適的控件形式，并且根據(jù)用戶手持設(shè)備的操作系統(tǒng)，為用戶設(shè)計(jì)導(dǎo)航最易操作的位置。

名稱(chēng)欄目：神殿級(jí)App開(kāi)發(fā)導(dǎo)航欄架構(gòu)設(shè)計(jì)必看攻略
標(biāo)題鏈接：http://www.muchs.cn/news43/189843.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專(zhuān)注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司；服務(wù)項(xiàng)目有App開(kāi)發(fā)等

廣告

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