中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

從0到1搭建新頁面時，面對許多功能和信息，我們該怎樣幫助用戶找到目標(biāo)功能和內(nèi)容？有多少導(dǎo)航方式可以選擇？今天帶大家了解導(dǎo)航系統(tǒng)的設(shè)計，讓用戶使用我們的產(chǎn)品不迷路。

一、導(dǎo)航

導(dǎo)航的英文navigation源于15-17世紀(jì)的地理大發(fā)現(xiàn)時代，詞源來自拉丁文navis(船)+agare(引導(dǎo)) ，指引導(dǎo)船舶沿一定航線從一點運動到另一點的方法。隨著科學(xué)技術(shù)的發(fā)展，導(dǎo)航的概念也不斷地延伸。

在互聯(lián)網(wǎng)領(lǐng)域，導(dǎo)航設(shè)計是一種專門用于呈現(xiàn)信息空間的界面設(shè)計形式，是產(chǎn)品信息架構(gòu)的外在呈現(xiàn)，它讓用戶能夠在信息架構(gòu)中自由穿行。簡單來說，導(dǎo)航設(shè)計的價值就是在各信息間“鋪路搭橋”、做好“指示牌”，讓用戶知道這里有什么、怎么走、在哪里。

▲ 信息&信息架構(gòu)&導(dǎo)航設(shè)計的關(guān)系

二、導(dǎo)航系統(tǒng)

1. 導(dǎo)航系統(tǒng)的定義

導(dǎo)航系統(tǒng)，是以幫助用戶查找目標(biāo)功能和內(nèi)容為目的的界面元素的集合。這些元素包含導(dǎo)航的跳轉(zhuǎn)路徑、導(dǎo)航組件、導(dǎo)航上的信息等，單個導(dǎo)航組件是無法成為系統(tǒng)的。

舉個例子：當(dāng)界面上的導(dǎo)航組件單獨拿出來時，我們無法理解這些組件之間是否存在聯(lián)系。但當(dāng)它們被放到頁面對應(yīng)位置上時，就能看出這是在哪一個頁面，以及頁面中包含哪些子模塊。所以，這些導(dǎo)航組件共同完成了該模塊的導(dǎo)航任務(wù)，組成了一個局部導(dǎo)航系統(tǒng)。

▲ 導(dǎo)航組件&局部導(dǎo)航系統(tǒng)案例

2. 導(dǎo)航系統(tǒng)的分類

一個產(chǎn)品可以具備多個子導(dǎo)航系統(tǒng)，來共同完成引導(dǎo)用戶的任務(wù)，各個導(dǎo)航系統(tǒng)在產(chǎn)品中承擔(dān)不同的作用。下面將結(jié)合《用戶體驗要素》書中的導(dǎo)航系統(tǒng)分類進(jìn)行介紹——

全局導(dǎo)航：全局導(dǎo)航一般而言是在網(wǎng)站的每一頁都會顯示的全域?qū)Ш较到y(tǒng)，覆蓋整個產(chǎn)品的通路，通常以每個頁面頂端的導(dǎo)航欄形式來實現(xiàn)，它不一定包含全局信息，但是一定可以讓用戶無論在哪個層級都可以去到其目標(biāo)的關(guān)鍵節(jié)點。

局部導(dǎo)航：提供用戶在產(chǎn)品的某個模塊中到“附近地點”的路。在一個嚴(yán)謹(jǐn)?shù)慕Y(jié)構(gòu)層次中，局部導(dǎo)航可能只能提供一個?面父級、兄弟級和子級的通路。

▲ 全局導(dǎo)航&局部導(dǎo)航案例

輔助導(dǎo)航：跨越網(wǎng)站的各個層級，使用戶可以在不同層級的頁面間跳轉(zhuǎn)。提供了全局導(dǎo)航或局部導(dǎo)航不能快速到達(dá)的相關(guān)內(nèi)容的快捷途徑。這種導(dǎo)航非常方便“中途折返”型的用戶。

▲ 輔助導(dǎo)航案例

內(nèi)聯(lián)導(dǎo)航：嵌入自身內(nèi)容中的導(dǎo)航。有些關(guān)系不適合放在全站和局部導(dǎo)航結(jié)構(gòu)分類中，這時就需要建立指向特定網(wǎng)頁、文件或?qū)ο蟮那榫笆綄?dǎo)航鏈接。合理地使用情景式導(dǎo)航能夠增加導(dǎo)航的靈活性。

▲ 內(nèi)聯(lián)導(dǎo)航案例

友好導(dǎo)航：所謂友好導(dǎo)航是指它可以為用戶提供一個便利的前進(jìn)途徑，在需要的時候能夠找到入口信息，通常在不需要的時候成隱藏狀態(tài)（或比較不顯眼）。

▲ 友好導(dǎo)航案例

遠(yuǎn)程導(dǎo)航：所謂遠(yuǎn)程導(dǎo)航是指不包含在產(chǎn)品結(jié)構(gòu)中，以獨立的方式存在產(chǎn)品內(nèi)，通常表現(xiàn)為網(wǎng)站地圖、索引表等。

▲ 遠(yuǎn)程導(dǎo)航案例

三、導(dǎo)航系統(tǒng)設(shè)計

作為設(shè)計師，我們可以從導(dǎo)航的架構(gòu)、框架、組件、信息這幾個維度進(jìn)行設(shè)計。為了便于大家理解，下面我們把「導(dǎo)航系統(tǒng)設(shè)計」類比為「鋪路」——

• 導(dǎo)航架構(gòu)：確定路通往的方向，讓信息間的關(guān)系符合用戶認(rèn)知、頁面跳轉(zhuǎn)路徑長短合理。
• 導(dǎo)航框架：確定路具體修在什么位置，在界面尋找合適的位置放置導(dǎo)航。
• 導(dǎo)航組件：修馬路還是修人行道？挑選合適的、符合用戶習(xí)慣的組件來承載導(dǎo)航功能。
• 導(dǎo)航信息：裝好路標(biāo)和指示牌，友好地告訴用戶他在哪里，可以去哪里，怎么走。

▲導(dǎo)航系統(tǒng)設(shè)計內(nèi)容拆解

1. 導(dǎo)航架構(gòu)

以ios設(shè)計規(guī)范為例，導(dǎo)航架構(gòu)可分為層級式導(dǎo)航、扁平式導(dǎo)航、內(nèi)容驅(qū)動或體驗驅(qū)動導(dǎo)航。

層級式導(dǎo)航架構(gòu)：在到達(dá)目標(biāo)界面前，每個界面僅做一個選擇。如果要去另一個目標(biāo)界面，必須回溯自己的腳步，或者從頭開始做不同的選擇，呈現(xiàn)了產(chǎn)品信息的包含關(guān)系及信息的深度。

▲ 層級式導(dǎo)航架構(gòu)案例

扁平式導(dǎo)航架構(gòu)：允許用戶在同一層級的多個內(nèi)容類別之間進(jìn)行切換，它主要呈現(xiàn)的是產(chǎn)品信息的廣度。

▲ 扁平式導(dǎo)航架構(gòu)案例

內(nèi)容驅(qū)動或體驗驅(qū)動導(dǎo)航架構(gòu)：在內(nèi)容中自由移動，或者內(nèi)容本身可以定義導(dǎo)航。游戲、書籍和其他沉浸式應(yīng)用程序通常使用這種導(dǎo)航形式。

▲內(nèi)容/體驗驅(qū)動導(dǎo)航架構(gòu)案例

在實際的產(chǎn)品設(shè)計中，很少有整個產(chǎn)品僅包含一種類型的導(dǎo)航結(jié)構(gòu)的情況，一般會將前三種類型的導(dǎo)航結(jié)構(gòu)進(jìn)行合理的混合，讓用戶無論如何操作，都能自由地在信息架構(gòu)中穿行。同時，在設(shè)計時還需要注意導(dǎo)航系統(tǒng)的深度及廣度，避免過深和過廣。

2. 導(dǎo)航框架

導(dǎo)航的框架和產(chǎn)品性質(zhì)及用戶使用場景息息相關(guān)，對于不同的產(chǎn)品類型，導(dǎo)航框架也會有所不同，同一產(chǎn)品下的不同模塊，也會有不同的導(dǎo)航布局。

▲常見的導(dǎo)航框架

內(nèi)容類&社交類產(chǎn)品：產(chǎn)品內(nèi)部包含大量不同類型主題的內(nèi)容，各內(nèi)容在層級上無主次之分，鼓勵用戶探索和社交。這類型產(chǎn)品常使用標(biāo)簽式導(dǎo)航，將導(dǎo)航布局于?面的頂部和底部，有時會布局有金剛區(qū)。

▲內(nèi)容&社交類產(chǎn)品導(dǎo)航框架案例

工具類產(chǎn)品：核心功能固化，導(dǎo)航架構(gòu)扁平，用戶目標(biāo)明確，只需要用戶快速找到目標(biāo)功能，常使用列表導(dǎo)航及宮格導(dǎo)航，直接把核心功能按照優(yōu)先級鋪在首?上。

▲工具類產(chǎn)品導(dǎo)航框架案例

游戲類產(chǎn)品：導(dǎo)航本身就是玩法的一部分，要給用戶便捷的入口同時，不能遮擋游戲主界面，因此導(dǎo)航很多時候會環(huán)繞游戲主界面的四周，甚至導(dǎo)航本身成為了場景的一部分。

▲游戲類產(chǎn)品導(dǎo)航框架案例

閱讀類&（長）視頻類產(chǎn)品：需要把注意力全身心投入內(nèi)容中的場景下，導(dǎo)航有時會成為一種干擾。例如閱讀中和視頻觀看中的場景。此時導(dǎo)航一般會隱藏起來，需要點擊屏幕才能呼出。

▲閱讀&長視頻類產(chǎn)品導(dǎo)航框架案例

3. 導(dǎo)航組件

確認(rèn)好導(dǎo)航的布局后，該能用哪些組件來搭建呢？下面為大家介紹幾種常見的導(dǎo)航組件。

▲PC端和APP端常見的導(dǎo)航組件

（1）菜單

簡介：為頁面和功能提供導(dǎo)航的菜單列表。

位置：一般位于網(wǎng)頁頂部導(dǎo)航或網(wǎng)頁左側(cè)。

使用場景：頂部導(dǎo)航一般屬于全局導(dǎo)航，提供網(wǎng)站一級頁面及關(guān)鍵的二級頁面鏈接；側(cè)邊菜單一般是局部導(dǎo)航。

▲菜單導(dǎo)航案例

（2）標(biāo)簽式導(dǎo)航

簡介：標(biāo)簽式導(dǎo)航相當(dāng)于是APP中的菜單控件，是大部分的APP都會使用的導(dǎo)航之一。

位置：全局導(dǎo)航位于頁面底部，針對單頁面的局部導(dǎo)航位于頁面頂部、針對單個模塊的局部導(dǎo)航位于該模塊頂部。

使用場景：當(dāng)產(chǎn)品內(nèi)包含的內(nèi)容/功能類型較多且在層級上比較扁平，無明顯上下級關(guān)系，同時用戶需要在這些類別中快速切換時使用。

▲標(biāo)簽式導(dǎo)航案例

（3）標(biāo)簽式導(dǎo)航的延伸——側(cè)面標(biāo)簽導(dǎo)航

簡介：放置在側(cè)面的標(biāo)簽導(dǎo)航

使用場景：多運用在篩選、分類頁，作為局部導(dǎo)航使用

優(yōu)點：拓展性強(qiáng)，能容納多個標(biāo)簽

缺點：占用面積大，標(biāo)簽多時閱讀困難

▲ 側(cè)面標(biāo)簽導(dǎo)航案例

（4）舵式導(dǎo)航

簡介：樣式上突出中間的功能，像一個舵

使用場景：需要突出或聚合重要且頻繁操作的入口時使用該樣式

優(yōu)點：相較于傳統(tǒng)標(biāo)簽式導(dǎo)航，容納了更多功能，重點更突出

缺點：多一步操作，新手有一定學(xué)習(xí)成本

▲ 舵式導(dǎo)航案例

（5）篩選器

簡介：聚合大量標(biāo)簽信息

使用場景：用戶需要通過選擇多個維度的大量標(biāo)簽來篩選目標(biāo)內(nèi)容/功能時

優(yōu)點：能夠容納大量標(biāo)簽

缺點：標(biāo)簽多、熱區(qū)小，用戶尋找和點選對應(yīng)標(biāo)簽有一定難度

▲篩選器案例

（6）頁頭

簡介：?頭是用來放置?面的名稱的，目的是告訴用戶現(xiàn)在所在的?面是哪，與整個網(wǎng)?是什么關(guān)系，上面也可以放置面包屑導(dǎo)航。

位置：一般位于頂部菜單的下方，內(nèi)容區(qū)域的上方。

使用場景：一般適用于PC端，需要明確告知用戶處于網(wǎng)站的哪個?面時使用。

▲頁頭案例

（7）導(dǎo)航欄

簡介：是用來幫助用戶定位、導(dǎo)航、操作的基礎(chǔ)組件; 告知用戶當(dāng)前所在位置，連通?面跳轉(zhuǎn)路徑，同時還承載了針對當(dāng)前?面全局性的操作。

位置：?面頂部

使用場景：APP全局適用

▲導(dǎo)航欄案例

注意事項：

1、不可放置過多操作按鈕。應(yīng)保證每個按鈕有足夠大的點擊熱區(qū)、文字按鈕不重疊；

2、不可放置面包屑導(dǎo)航，如果擔(dān)心用戶迷失，建議讓導(dǎo)航架構(gòu)更加扁平。可考慮使用標(biāo)簽式導(dǎo)航；

3、使用標(biāo)準(zhǔn)的返回控件。

（8）面包屑

簡介：顯示網(wǎng)站的層級結(jié)構(gòu)，告知用戶當(dāng)前所在位置。由于APP端的操作空間有限，且產(chǎn)品的信息結(jié)構(gòu)不會有PC復(fù)雜，一般情況下APP不會使用面包屑控件。

位置：一般位于?頭中。

使用場景：在層級較深，且用戶需要從最后一個層級回到前面的層級時使用。

▲面包屑案例

注意事項：

1、面包屑的第一項應(yīng)該鏈接首頁；

2、當(dāng)前頁一定是面包屑的最后一項；

3、面包屑的每一項都可以放鏈接，除了最后一項（當(dāng)前頁），因為用戶已經(jīng)身處當(dāng)前頁；

4、實際使用時，一級頁面可以考慮隱藏面包屑導(dǎo)航。

（9）漢堡（抽屜）導(dǎo)航

簡介: 將菜單隱藏在當(dāng)前?面內(nèi)，點擊入口即可像抽屜一樣拉出菜單。

位置: 入口位于左上方，從左側(cè)拉出抽屜；或入口在右上方，從右側(cè)拉出抽屜。

使用場景：

1、收納用戶不常用的、或不屬于當(dāng)前?面所在的層級的常用功能，作為輔助導(dǎo)航使用；

2、需要用戶專注于內(nèi)容，需要更多展示空間時使用；

3、不適合頻繁需要切換導(dǎo)航的應(yīng)用。

▲漢堡（抽屜）導(dǎo)航案例

（10）下拉菜單

簡介：點擊或移入觸點，會出現(xiàn)一個下拉菜單。可在列表中進(jìn)行選擇，并執(zhí)行相應(yīng)的命令。

使用場景：當(dāng)?面上的【操作】命令過多時，用此組件可以收納【操作】元素。

▲下拉菜單案例

注意事項：盡管下拉菜單可以節(jié)省空間，但功能被收納起來，用戶尋找不方便，需要一定學(xué)習(xí)成本。

（11）分頁

使用場景：PC端列表，內(nèi)容過長時采用分頁的形式分割，每次只加載一個頁面。

▲分頁案例

在APP的操作習(xí)慣中，常常不使用傳統(tǒng)的分頁導(dǎo)航，而是采用其他方法來瀏覽數(shù)據(jù)，比較常見的是內(nèi)容流的形式，用戶上滑會不斷加載地更多內(nèi)容，如果實在要尋找很早之前的內(nèi)容，可通過篩選器來篩選。

舉個例子：在閱讀類APP中，不可避免會有翻?的用戶需求，但是，精確點擊?數(shù)的操作對于APP來說太容易誤觸，因此閱讀類APP中的分?器使用了slider的形式，滑動過程中會提示?數(shù)，避免錯誤點擊。

▲ slider形式分頁案例

（12）步驟條

使用場景:

1、在任務(wù)步驟比較離散，完成任務(wù)需要比較?的等待時間的時候，用來顯示任務(wù)進(jìn)度，例如：查詢轉(zhuǎn)賬進(jìn)度。

2、當(dāng)任務(wù)步驟復(fù)雜或者存在先后關(guān)系時，將其分解成一系列步驟，引導(dǎo)用戶完成。例如:用戶注冊新賬號。

▲步驟條案例

注意事項：

1、任務(wù)流程本身并不復(fù)雜的時候，盡量不要使用，避免弄巧成拙，畫蛇添足；

2、每一步驟都需定義清楚，明確用戶當(dāng)前所在的進(jìn)度節(jié)點，清晰展現(xiàn)此刻具體步驟及狀態(tài)；

3、及時對狀態(tài)進(jìn)行追蹤&反饋，避免用戶不知道自己操作是否生效，混淆認(rèn)知；

4、如果任務(wù)是連續(xù)和短暫的，應(yīng)該使用進(jìn)度條來顯示，例如：打開?面。

（13）固釘

使用場景：當(dāng)內(nèi)容區(qū)域比較長，需要滾動頁面時，這部分內(nèi)容對應(yīng)的操作或者導(dǎo)航需要在滾動范圍內(nèi)始終展現(xiàn)。

位置：常用于側(cè)邊菜單和按鈕組合。

▲固釘案例

（14）懸浮球（觸點）導(dǎo)航

因為APP的界面比較小，基本上不會使用固釘組件，個別APP的界面，由于重點功能沒有合適的位置放置，會使用“懸浮球”組件讓其懸浮在頁面底部，也稱為“觸點導(dǎo)航”，但一般不會像固釘一樣直接在頁面上陳列多個功能。

▲懸浮球?qū)Ш桨咐?/p>

（15）鏈接

在文章、視頻、圖片中，可以根據(jù)內(nèi)容，適當(dāng)放入相關(guān)的鏈接，讓用戶可以隨時點擊查看。比如在文本內(nèi)容中插入文字鏈接，或在圖片中附上商品標(biāo)簽等。

▲鏈接案例

（16）宮格式導(dǎo)航

簡介：宮格式導(dǎo)航的最主要特點是利用網(wǎng)格布局將主要入口全部集中在頁面之上，各項之間等同重要，常見形式有icon+文字、圖片+文字的瓷片。

使用場景：一般適用于功能模版之間相互獨立，沒有明顯的優(yōu)先級之分，且用戶不需要在不同的功能模版之間進(jìn)行頻繁跳轉(zhuǎn)的情況。

▲宮格式導(dǎo)航案例

注意事項：

1、宮格式導(dǎo)航拓展性強(qiáng)且可以在空間有限時聚合大量入口，但需要注意限制選項的數(shù)量，過多的選項會導(dǎo)致選擇困難，從而影響用戶體驗。

2、返回路徑較局限，用戶如果要選擇另一個選項，必須返回原頁面。返回路徑較長時，容易產(chǎn)生不良情緒。

（17）列表式導(dǎo)航

簡介：在列表中陳列產(chǎn)品中的核心功能

使用場景：常?于工具類產(chǎn)品、設(shè)置?、APP中的我的?這種需要高效陳列功能、工具的場景。

（* PC由于展示空間較大，很少單純的列表導(dǎo)航，一般會在左側(cè)使用側(cè)邊菜單，右側(cè)直接展示導(dǎo)航內(nèi)的內(nèi)容。）

▲列表式導(dǎo)航案例

注意事項：

1、列表式導(dǎo)航符合用戶F型頁面瀏覽習(xí)慣，傳遞信息效率很高，但同時它縱向占用面積大，所以在設(shè)計時需要注意所占的屏幕空間，以及每屏能顯示多少條選項。

（18）索引表

簡介：一個陳列了產(chǎn)品中，或產(chǎn)品某個模塊中所有內(nèi)容類別的?面。

使用場景：當(dāng)產(chǎn)品中含有大量的內(nèi)容類型、主題和分類時，可以使用索引表。

▲索引表導(dǎo)航案例

（19）網(wǎng)站地圖

簡介：展示網(wǎng)站中的所有關(guān)鍵?面，方便用戶快速前往。

使用場景：一般是用在一些產(chǎn)品結(jié)構(gòu)復(fù)雜的網(wǎng)站中，很少應(yīng)用在APP中。

▲網(wǎng)站地圖案例

4. 導(dǎo)航的信息設(shè)計

導(dǎo)航上的信息包含哪些呢？以vivo官網(wǎng)首頁為例，該頁面的導(dǎo)航中包含了特殊提示、圖形、文案、狀態(tài)等。

▲導(dǎo)航中的信息內(nèi)容案例

導(dǎo)航信息設(shè)計的要點：

1、準(zhǔn)確傳達(dá)產(chǎn)品的信息層級。比如一級菜單上有展開按鈕，二級菜單前無icon，視覺上體現(xiàn)出父子級的關(guān)系。

▲導(dǎo)航信息層級案例

2、保證閱讀舒適性，讓用戶能快速識別關(guān)鍵信息。

3、注意信息的一致性和差異性。同一個功能的名稱和圖標(biāo)應(yīng)保持一致，不同功能則應(yīng)保證差異避免產(chǎn)生歧義。

4、遵循目標(biāo)用戶的認(rèn)知和習(xí)慣。如vivo應(yīng)用商店針對內(nèi)銷和外銷使用了完全不同的信息表達(dá)方式，迎合不同類型用戶的使用習(xí)慣。

▲符合不同用戶習(xí)慣的導(dǎo)航案例

四、結(jié)語

優(yōu)秀的導(dǎo)航系統(tǒng)設(shè)計，能夠合理完美地傳達(dá)產(chǎn)品的功能，快速引導(dǎo)用戶使用，而又不會干擾和困擾用戶的選擇。在實際的設(shè)計中，根據(jù)產(chǎn)品的功能特性搭建不同的導(dǎo)航系統(tǒng)。同時，產(chǎn)品的迭代發(fā)展和變化，也會導(dǎo)致導(dǎo)航的設(shè)計產(chǎn)生變化，需要依據(jù)用戶屬性和使用場景進(jìn)行靈活調(diào)整。