一個(gè)小小的手機(jī)應(yīng)用，包羅萬象，集成了這種復(fù)雜的信息內(nèi)容或功能邏輯。導(dǎo)航設(shè)計(jì)是用戶獲得最佳體驗(yàn)、快速掌握應(yīng)用框架的重要環(huán)節(jié)。手機(jī)應(yīng)用的導(dǎo)航類似于現(xiàn)實(shí)世界中路標(biāo)或地圖的功能。它是應(yīng)用軟件的虛擬框架，具有指示和識(shí)別用戶的功能。比如像路標(biāo)一樣，導(dǎo)航可以定位用戶當(dāng)前使用的位置，為用戶突出當(dāng)前視圖的重要功能，通知用戶去哪里，在不同的視圖和區(qū)域快速切換信息，記錄用于防止用戶迷路的操作軌跡。那么導(dǎo)航應(yīng)該怎么設(shè)計(jì)呢？
APP導(dǎo)航設(shè)計(jì)主要包括以下三個(gè)步驟:
1.框架整理:信息架構(gòu)或任務(wù)分析
2.框架級(jí)別:平面vs樹
3.導(dǎo)航表單:控件表單和放置位置
首先，為什么需要組織框架？
跟蓋樓一樣。在建造宏偉的建筑之前，需要提前規(guī)劃好每個(gè)小房間，以保證建筑結(jié)構(gòu)的正確規(guī)劃和布置。但是在App設(shè)計(jì)的初期，需要建立一個(gè)App藍(lán)圖，保證設(shè)計(jì)師能夠控制功能產(chǎn)品的層次，以及軟件導(dǎo)航設(shè)計(jì)過程中需要考慮的上下文。
第二，組織框架的方法
在建立藍(lán)圖的過程中，需要根據(jù)App本身的特點(diǎn)選擇合適的方法。目前App應(yīng)用可以分為兩類，即內(nèi)容瀏覽應(yīng)用和功能運(yùn)營應(yīng)用。對(duì)于內(nèi)容瀏覽應(yīng)用，需要通過信息架構(gòu)的方法對(duì)信息數(shù)據(jù)進(jìn)行整合和分類。對(duì)于功能運(yùn)營應(yīng)用，需要通過任務(wù)分析將功能分解組織成閉環(huán)網(wǎng)絡(luò)運(yùn)營模式。
三.信息架構(gòu)的定義和使用
信息架構(gòu)是一種組織和分類信息的方法，它提高了信息的可用性和可搜索性，使用戶能夠更高效、更有序地識(shí)別信息。
這種方法起源于圖書館的圖書分類。通過對(duì)相似的書籍進(jìn)行分類和編號(hào)，圖書館員可以快速方便地從成千上萬的書籍中找到自己需要的書籍。隨著計(jì)算機(jī)科學(xué)技術(shù)的發(fā)展，信息量日益增加。這種方法也廣泛應(yīng)用于虛擬數(shù)據(jù)和信息的管理，如數(shù)據(jù)庫、內(nèi)容管理系統(tǒng)CMS和網(wǎng)站設(shè)計(jì)。構(gòu)建大規(guī)模的數(shù)據(jù)和信息是復(fù)雜的，專業(yè)的信息分析師需要從多個(gè)維度對(duì)這類信息進(jìn)行分析和整理。但是在手機(jī)產(chǎn)品的實(shí)際設(shè)計(jì)中，信息量相對(duì)簡單。對(duì)于這類信息，目前有三種分析方法:信息結(jié)構(gòu)、邏輯樹、卡片分類。信息結(jié)構(gòu)主要是從人們在物理世界中已經(jīng)獲得普遍認(rèn)同的信息的基本結(jié)構(gòu)來排列信息，比如以26個(gè)字母的順序排列的歌曲的標(biāo)題信息；邏輯樹是根據(jù)人們心智模型中普遍認(rèn)可的邏輯結(jié)構(gòu)，按照樹邏輯對(duì)信息進(jìn)行整理，如類別信息、從屬信息等；卡片分類是根據(jù)用戶習(xí)慣，通過卡片分類和統(tǒng)計(jì)對(duì)一些不確定的信息進(jìn)行分類，在電子商務(wù)物品類別和網(wǎng)站地圖的設(shè)計(jì)中得到了廣泛的應(yīng)用。
四.任務(wù)分析的定義和用法
任務(wù)分析是指將用戶為了實(shí)現(xiàn)某個(gè)目標(biāo)執(zhí)行的一系列動(dòng)作或者是進(jìn)行的認(rèn)知過程進(jìn)行分析的一種行為。通過任務(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)行的操作。任務(wù)分析的首要任務(wù)需要明白用戶的目標(biāo)，然后將用戶實(shí)現(xiàn)目標(biāo)進(jìn)行的操作進(jìn)行拆解，此時(shí)每一個(gè)操作都可視作為一個(gè)原始任務(wù)。 再原始任務(wù)的基礎(chǔ)上，根據(jù)需要深入的程度將任務(wù)再進(jìn)行更加細(xì)致的拆解。在產(chǎn)品設(shè)計(jì)中，拆解的終點(diǎn)一般視為可以單獨(dú)進(jìn)行設(shè)計(jì)以及分析的子單元。再分析了App的框架結(jié)構(gòu)后，產(chǎn)品功能的邏輯層次也就基本確定。建議可以利用一些框架繪制軟件將分析整理的框架記錄下來，形成一張大的藍(lán)圖。在后期的導(dǎo)航設(shè)計(jì)中，許多功能的安排以及排布可以直接從圖中所示的位置關(guān)系進(jìn)行設(shè)計(jì)。在導(dǎo)航的設(shè)計(jì)中，經(jīng)常遇見的功能層級(jí)主要是兩種：一種是扁平層級(jí)，即所屬功能在框架藍(lán)圖中屬于同一層級(jí)的并列關(guān)系，這種主要出現(xiàn)在信息架構(gòu)較為扁平化，同級(jí)別任務(wù)功能較多的視圖中，如Dashboard和列表設(shè)計(jì)；另外一種則是樹狀層級(jí)，即信息架構(gòu)較為層次化或者任務(wù)之間有從屬關(guān)系，需要用戶逐層深入的視圖中，如iOS中的單進(jìn)單出式層級(jí)導(dǎo)航。任務(wù)分析是指分析用戶為了實(shí)現(xiàn)某一目標(biāo)而進(jìn)行的一系列動(dòng)作或認(rèn)知過程的行為。通過任務(wù)分析，設(shè)計(jì)人員可以清楚地了解當(dāng)前APP要實(shí)現(xiàn)的功能層次順序和系統(tǒng)中信息傳遞的狀態(tài)，從而掌握產(chǎn)品的結(jié)構(gòu)和用戶在設(shè)計(jì)中需要執(zhí)行的當(dāng)前操作。任務(wù)分析的首要任務(wù)需要了解用戶的目標(biāo)，然后拆解用戶為實(shí)現(xiàn)目標(biāo)而執(zhí)行的操作。此時(shí)，每個(gè)操作都可以被視為一個(gè)原始任務(wù)。在原任務(wù)的基礎(chǔ)上，根據(jù)需要的深度將任務(wù)分解得更詳細(xì)。在產(chǎn)品設(shè)計(jì)中，拆卸的終點(diǎn)一般被認(rèn)為是一個(gè)可以獨(dú)立設(shè)計(jì)和分析的子單元。分析了App的框架后，基本確定了產(chǎn)品功能的邏輯層次。建議可以用一些框架繪圖軟件記錄分析的框架，形成大藍(lán)圖。在后期的導(dǎo)航設(shè)計(jì)中，可以直接從圖中所示的位置關(guān)系來設(shè)計(jì)很多功能的排列和安排。在導(dǎo)航的設(shè)計(jì)中，主要有兩種功能層次:一種是扁平化層次，即功能在框架藍(lán)圖中屬于同一層次，主要出現(xiàn)在信息架構(gòu)扁平化、任務(wù)和功能多在同一層次的視圖中，如Dashboard和list設(shè)計(jì)；另一種是樹形層次結(jié)構(gòu)，即信息架構(gòu)是分層的或者任務(wù)之間存在隸屬關(guān)系，需要用戶逐層深入查看，比如iOS中的單入單出分層導(dǎo)航。
五 .平面設(shè)計(jì)
在手機(jī)操作系統(tǒng)中，圖標(biāo)和消息數(shù)量通常是一起使用的，這樣用戶就可以在第一頁選擇他們想要使用的軟件功能。遵循這樣的思路，在App的設(shè)計(jì)中，應(yīng)用的第一頁會(huì)顯示扁平化的信息級(jí)別供用戶選擇，可以讓用戶快速定位自己關(guān)心的功能點(diǎn)。這種導(dǎo)航設(shè)計(jì)的優(yōu)點(diǎn)是App的功能結(jié)構(gòu)比較扁平，用戶可以快速了解全局架構(gòu)。同時(shí)，由于功能選擇過于集中在主頁上，單個(gè)功能的層次應(yīng)該不會(huì)太復(fù)雜，需要提供一個(gè)快速返回主頁的設(shè)置，讓用戶重新做出選擇。列表設(shè)計(jì)適用于內(nèi)容瀏覽應(yīng)用的平面信息層次設(shè)計(jì)，將同一層次的類別信息聚合成一個(gè)垂直列表。在操作系統(tǒng)中，這種導(dǎo)航設(shè)計(jì)主要用于通訊錄、歌單、店鋪應(yīng)用等按項(xiàng)目名稱排列的平面區(qū)域。同樣，在App的設(shè)計(jì)中，類別信息較多的電子商務(wù)應(yīng)用、單個(gè)項(xiàng)目名稱聚合的應(yīng)用、訂閱信息的新聞應(yīng)用的導(dǎo)航模式都屬于典型的扁平化信息層級(jí)，所以列表導(dǎo)航的設(shè)計(jì)也非常適用。而且根據(jù)各自的特點(diǎn)，有一些細(xì)微的差別。比如淘寶的分類導(dǎo)航，分類是根據(jù)設(shè)計(jì)中用戶使用熱度從上到下排版；Eataly菜譜導(dǎo)航，由于大量的名稱聚合，提供了右側(cè)字母索引的便捷選擇；BBC的新聞導(dǎo)航類似于類別信息和條目信息的綜合導(dǎo)航。因此，在列表導(dǎo)航的設(shè)計(jì)中，除了根據(jù)用戶的注意力從上到下進(jìn)行排列外，還可以在瀏覽時(shí)方便地將類別列折疊展開或懸停在頁面頂部。
六 .樹狀層次結(jié)構(gòu)的設(shè)計(jì)
樹狀層次結(jié)構(gòu)的設(shè)計(jì)廣泛應(yīng)用于移動(dòng)設(shè)備的設(shè)計(jì)中。與傳統(tǒng)PC時(shí)代廣泛使用的“面包屑”網(wǎng)格設(shè)計(jì)不同，樹狀分層結(jié)構(gòu)只允許用戶從唯一入口進(jìn)入，從唯一出口返回原地。這種設(shè)計(jì)模式非常適合功能層次復(fù)雜或垂直信息架構(gòu)的應(yīng)用，用戶可以在一個(gè)分支上清晰地向前和向后移動(dòng)，而不用擔(dān)心失去自己在App中的當(dāng)前位置。App設(shè)計(jì)中有兩種樹級(jí)導(dǎo)航形式。一個(gè)是iOS中的導(dǎo)航欄設(shè)計(jì)。用戶從列表導(dǎo)航中選擇一項(xiàng)進(jìn)入下一級(jí)，并通過導(dǎo)航欄左上角的“后退”按鈕返回上一級(jí)。整個(gè)導(dǎo)航給用戶一種在大樹上沿垂直方向攀爬的感覺。另一個(gè)設(shè)計(jì)是Windows Phone7上的Metro UI設(shè)計(jì)。如圖所示，層次結(jié)構(gòu)的從屬內(nèi)容顯示在與平鋪相同的維度上，而導(dǎo)航是以左右方式逐步進(jìn)行的。這種導(dǎo)航設(shè)計(jì)允許用戶在一步一步深化的同時(shí)查看整體設(shè)計(jì)。通過前面兩步的分析設(shè)計(jì)，App的導(dǎo)航結(jié)構(gòu)基本可以完成。但是因?yàn)槭謾C(jī)平臺(tái)多，用戶的使用習(xí)慣也不同。因此，在產(chǎn)品的具體設(shè)計(jì)中，為了給產(chǎn)品提供最佳的用戶體驗(yàn)，還需要把握平臺(tái)特性，選擇合適的控件形式，根據(jù)用戶手持設(shè)備的操作系統(tǒng)，設(shè)計(jì)最容易讓用戶導(dǎo)航的位置。比如樹級(jí)導(dǎo)航條設(shè)計(jì)，iOS的導(dǎo)航條控件安排在屏幕頂部，因?yàn)槭褂糜|摸屏的時(shí)候，頂部區(qū)域是信息呈現(xiàn)率最全的區(qū)域，這個(gè)區(qū)域的信息在手指操作的時(shí)候不容易被手的移動(dòng)軌跡遮擋。通過這個(gè)導(dǎo)航欄，用戶可以實(shí)時(shí)定位自己的當(dāng)前位置和可以返回的上層界面。
整個(gè)導(dǎo)航欄控件由三個(gè)子控件組成:后退按鈕、頁面標(biāo)簽和可選管理區(qū)域。“后退”按鈕一般放置在左上角區(qū)域，允許用戶瀏覽樹級(jí)信息，并通過該按鈕逐層返回上一級(jí)。按鈕本身的設(shè)計(jì)返回按鈕只對(duì)應(yīng)唯一的錄入信息，不允許放置多級(jí)返回按鈕。頁面標(biāo)簽應(yīng)顯示當(dāng)前視圖信息的高度匯總，并可顯示視圖標(biāo)題、序列號(hào)位置等?？蛇x管理塊可以在屏幕上放置一些重要操作，實(shí)現(xiàn)對(duì)屏幕內(nèi)容的管理(如添加、編輯、翻頁、刪除、播放、詳細(xì)內(nèi)容等)。).只能放置一個(gè)管理按鈕。對(duì)于Android的樹級(jí)導(dǎo)航來說，更依賴于底層的硬件實(shí)體導(dǎo)航控件。主流安卓硬件導(dǎo)航提供了返回、菜單按鈕、手機(jī)桌面、搜索四個(gè)功能。后退按鈕允許用戶返回到上一個(gè)功能操作。菜單按鈕可以在當(dāng)前視圖中顯示相關(guān)操作，最多六個(gè)，但與iOS中“可選管理區(qū)”的設(shè)置模式略有不同。這個(gè)區(qū)域一般是全局函數(shù)操作，所以不一定和每個(gè)視圖緊密相關(guān)。手機(jī)桌面，點(diǎn)擊后用戶會(huì)很快返回安卓手機(jī)桌面，這是全球?qū)Ш降囊环N體現(xiàn)。搜索按鈕，如果執(zhí)行的應(yīng)用中有搜索設(shè)置，會(huì)打開軟件的相關(guān)搜索部分；如果沒有搜索，將調(diào)用系統(tǒng)的默認(rèn)搜索引擎
2021-04-09 09:20:12分類：APP開發(fā)
閱讀()
