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

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

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

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

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

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

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

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

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

如何走得更遠?

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

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

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

2. 框架層級判斷： 扁 平vs 樹狀

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

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

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

Step2 ： 功能層級判斷： 扁平 VS 樹狀

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

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

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

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

名稱欄目：神殿級App開發(fā)導(dǎo)航欄架構(gòu)設(shè)計必看攻略
標(biāo)題鏈接：http://www.bm7419.com/news43/189843.html

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

廣告

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