2022-08-14 分類: App開發(fā)
一款小小的手機APP應(yīng)用,卻包羅萬象,融合這復雜的信息內(nèi)容或功能邏輯。要讓用戶在使用中獲得的體驗,迅速掌握應(yīng)用的框架結(jié)構(gòu),其導航的設(shè)計是一個重要的環(huán)節(jié)。由于移動設(shè)備特別是智能手機的屏幕尺寸有限,設(shè)計者們通常會將屏幕空間盡量留給主體內(nèi)容,優(yōu)秀的APP開發(fā)導航設(shè)計會讓用戶輕松到達目的地而又不會干擾和困惑用戶。下面我們先來看3種具有代表性的導航模式。
經(jīng)典導航:tabbar
蘋果大力推薦應(yīng)用開發(fā)者優(yōu)先采用這種方式,tabbar 基本就是導航的標準設(shè)計。Tabbar 的優(yōu)點很明顯,用戶完成切換的成本很低,只需要一次點擊操作,而放在屏幕底部對主體內(nèi)容的視覺沖擊可以說是最小的,這樣用戶就不會在瀏覽主體內(nèi)容時受到過多的干擾。至于缺點也同樣明顯,那就是受制于屏幕寬度的限制,通常4到5個功能項的切換會比較合適,過多的話將會顯著提高用戶的切換成本。
優(yōu)秀的挑戰(zhàn)者:抽屜式導航
Tabbar 并不是好的,它并不適用于過多的切換項。抽屜式導航通過縱向排列切換項解決了這一問題。不過這也意味著它不能和主體內(nèi)容同時出現(xiàn)在屏幕上。
在大部分的設(shè)計當中,通過點擊屏幕左上角的按鈕喚出切換項,有些也可以通過向右滑動手指來完成。一個簡單的滑動動畫,就像拉出一個抽屜,抽屜式導航這個名稱應(yīng)該就是來源于此。突破了數(shù)量的限制,更大程度上釋放了主體空間,也因此提高了操作成本。如果主要功能項組織在4 到5 項,tabbar 的設(shè)計方式會更好,否則,就應(yīng)該優(yōu)先考慮抽屜式導航了。
為頻繁操作設(shè)計:滑動式的導航
導航并不一定只發(fā)生在功能項之間。例如新聞類應(yīng)用需要在不同類別的新聞之間進行切換瀏覽,這種切換的頻率要比功能項切換更高,切換項的數(shù)量也會比較多,像常見的新聞類別就有 7,8 種。網(wǎng)易新聞早期的 iOS 版本中采用了抽屜式導航的方式進行新聞類別的切換,由于高頻率切換時需要過多的操作次數(shù),因而缺乏操作的連續(xù)性。而滑動式導航的用戶體驗則便捷了很多,尤其在連續(xù)切換時其操作方式的連續(xù)性比較強,主體頁面的過渡也更加平滑,會產(chǎn)生更加流暢的體驗。當然也會有一些缺陷,比如一次滑動只能切換到相鄰的類別,要想直接切換到對應(yīng)類別可以點擊上方的類別列表,不過由于類別過多,有時候可能需要滑動一下類別列表才能完成操作。不過總體而言,當需要在具有相似屬性類別之間進行較頻繁切換時,這種設(shè)計方式很值得參考。
如何走得更遠?
手機APP應(yīng)用的導航和現(xiàn)實世界中的路標地圖的作用很類似。它是應(yīng)用軟件的虛擬框架,對用戶具有指示標識以及識別的功能。如同路標,導航能在使用中,定位用戶當前在哪兒,為用戶突出當前視圖重要的功能,在不同的視圖和區(qū)域迅速地切換信息,記錄使用的操作軌跡防止用戶迷失等。那么在具體實踐中導航如何設(shè)計才能讓我們走得更遠呢?
APP導航設(shè)計的步驟主要為以下三步:
1. APP框架整理:信息架構(gòu)or任務(wù)分析
2. 框架層級判斷: 扁 平vs 樹狀
3. 導航具體表現(xiàn)形式:控 件形式and擺放位置
Step1: APP框架整理: 信息架構(gòu)or任務(wù)分析
App設(shè)計的最初階段,需要先建立一個App藍圖,來確保在之后軟件導航的設(shè)計過程中,設(shè)計人員能對功能產(chǎn)品所屬層級以及需要兼顧的前后關(guān)系進行宏觀的掌控。然后通過任務(wù)分析,能讓設(shè)計師清晰地了解到當前APP將要實現(xiàn)的功能層級順序以及信息在系統(tǒng)中傳遞的狀態(tài),使其在設(shè)計中能全局地把握住產(chǎn)品的結(jié)構(gòu)以及用戶當前所需要進行的操作。
Step2 : 功能層級判斷: 扁平 VS 樹狀
再分析了App的框架結(jié)構(gòu)后,產(chǎn)品功能的邏輯層次也就基本確定。可以利用一些框架繪制軟件將分析整理的框架記錄下來,形成一張大的藍圖。在后期的導航設(shè)計中,許多功能的安排以及排布可以直接從圖中所示的位置關(guān)系進行設(shè)計。
在導航的設(shè)計中,經(jīng)常遇見的功能層級主要是兩種:一種是扁平層級,即所屬功能在框架藍圖中屬于同一層級的并列關(guān)系,這種主要出現(xiàn)在信息架構(gòu)較為扁平化,同級別任務(wù)功能較多的視圖;另外一種則是樹狀層級,即信息架構(gòu)較為層次化或者任務(wù)之間有從屬關(guān)系,需要用戶逐層深入的視圖中,如iOS中的單進單出式層級導航。
Step3: 導航具體表現(xiàn)形式:控件形式and擺放位置
通過前面兩個步驟的分析與設(shè)計,App的導航結(jié)構(gòu)可以算是基本完成。但因為現(xiàn)在手機平臺眾多,用戶使用習慣各不相同。所以在產(chǎn)品的具體設(shè)計中,為了給產(chǎn)品提供的用戶體驗,還需要把握平臺特性,選擇合適的控件形式,并且根據(jù)用戶手持設(shè)備的操作系統(tǒng),為用戶設(shè)計導航最易操作的位置。
名稱欄目:神殿級App開發(fā)導航欄架構(gòu)設(shè)計必看攻略
標題鏈接:http://m.newbst.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)
猜你還喜歡下面的內(nèi)容