@網(wǎng)秦UEC?：在本文中，Chris Bank將與您探討導(dǎo)航設(shè)計(jì)模式的重要意義，并以當(dāng)下最熱門(mén)的幾個(gè)移動(dòng)應(yīng)用為例詳細(xì)進(jìn)行講解——在UXPin的免費(fèi)電子書(shū)《移動(dòng)UI設(shè)計(jì)模式2014》中還提供了更多有關(guān)導(dǎo)航模式設(shè)計(jì)的示例，以及多達(dá)45種其他移動(dòng)應(yīng)用設(shè)計(jì)模式的詳解。

導(dǎo)航中的倚天劍和屠龍刀，孰勝孰贏？決賽戳：《交互設(shè)計(jì)實(shí)戰(zhàn)！Tab導(dǎo)航與側(cè)邊抽屜導(dǎo)航的巔峰對(duì)決》

用戶(hù)在使用應(yīng)用時(shí)，需要隨時(shí)清楚了解下一步應(yīng)當(dāng)前往哪一頁(yè)面以及如何前往該頁(yè)面。如果用戶(hù)無(wú)法輕松在應(yīng)用中進(jìn)行導(dǎo)航，則將很快對(duì)你的應(yīng)用失去興趣。因此，能否為移動(dòng)應(yīng)用設(shè)計(jì)出有效的導(dǎo)航功能至關(guān)重要。在投入菜單、操作欄、彈窗、按鈕、箭頭、鏈接等內(nèi)容的設(shè)計(jì)之前，你需要牢記幾個(gè)基本的注意事項(xiàng)。

導(dǎo)航設(shè)計(jì)的4大注意事項(xiàng)

在弄清自己移動(dòng)應(yīng)用的架構(gòu)和組織情況之后，就可以開(kāi)始考慮導(dǎo)航設(shè)計(jì)了。在此時(shí)，你需要考慮下面的幾個(gè)事項(xiàng)：

1. 可達(dá)性

移動(dòng)應(yīng)用的導(dǎo)航功能可以說(shuō)是所有界面最重要的組成部分，因此一定要保證其可達(dá)性，并把最關(guān)鍵的要素盡量突出，同時(shí)不要影響到內(nèi)容本身。

2. 是否有意義

確保菜單、操作欄、彈窗、按鈕、箭頭、鏈接等導(dǎo)航要素簡(jiǎn)單明了，讓用戶(hù)一看就知道是什么意思以及操作結(jié)果是什么。不要弄的太過(guò)花哨，用戶(hù)沒(méi)有耐心去“猜”。

3. 易于理解

如果你想設(shè)計(jì)比較高級(jí)的導(dǎo)航功能（例如鏈接圖片、允許滑動(dòng)或其他手勢(shì)導(dǎo)航，或者訪(fǎng)問(wèn)隱藏菜單），請(qǐng)務(wù)必在設(shè)計(jì)過(guò)程中保證前后一致，以便用戶(hù)熟悉你所使用的模式，同時(shí)還應(yīng)加入一些額外的信息（例如小箭頭、文字或改變顏色或高亮等）來(lái)吸引用戶(hù)注意力，并以微妙的方式對(duì)用戶(hù)進(jìn)行引導(dǎo)。不要給用戶(hù)呈上“看得見(jiàn)摸不著的導(dǎo)航功能”。

4. 通用性

你的導(dǎo)航功能應(yīng)當(dāng)以一定的形式顯示于移動(dòng)應(yīng)用的各個(gè)界面。各個(gè)導(dǎo)航模式不一定要完全相同，但其基本結(jié)構(gòu)應(yīng)當(dāng)在應(yīng)用內(nèi)保持一致，可以根據(jù)背景進(jìn)行小幅度的調(diào)整。

導(dǎo)航模式概述

在記住上述設(shè)計(jì)目標(biāo)后，下面是本文要詳細(xì)說(shuō)明（對(duì)這些設(shè)計(jì)模式的更深入探討請(qǐng)見(jiàn)我們的電子書(shū)《移動(dòng)UI設(shè)計(jì)模式2014》）的幾個(gè)設(shè)計(jì)模式的概覽：

1.?說(shuō)明與引導(dǎo)標(biāo)記

2.?溢出菜單

3.?滑塊

4.?基于內(nèi)容的導(dǎo)航

5.?變換式控件

6.?“跟隨式”固定導(dǎo)航

7. 垂直導(dǎo)航

8.?彈窗

9.?滑出頁(yè)面、側(cè)邊欄和抽屜

10.?無(wú)所不至的鏈接

11.?高級(jí)滾動(dòng)條

12.?滑動(dòng)視圖

1. 說(shuō)明與引導(dǎo)標(biāo)記

Secret

問(wèn)題

用戶(hù)希望了解如何使用應(yīng)用的各項(xiàng)功能。

解決方案

設(shè)計(jì)一套說(shuō)明或教程來(lái)演示各項(xiàng)功能如何使用。現(xiàn)在很多應(yīng)用都使用這種方式在用戶(hù)首次啟動(dòng)時(shí)提供演示。這種方式可以分為兩大基本方法。Secret和YouTube等應(yīng)用采用了覆蓋圖指南的方法，并使用“引導(dǎo)標(biāo)記”突出顯示UI中的關(guān)鍵部分來(lái)說(shuō)明其作用。

另外，Carousel和Duolingo等應(yīng)用則會(huì)在用戶(hù)首次啟動(dòng)時(shí)以幻燈片的形式引導(dǎo)用戶(hù)走完全部體驗(yàn)過(guò)程，從而有效地說(shuō)明應(yīng)用能夠幫助用戶(hù)實(shí)現(xiàn)哪些功能。這一引導(dǎo)過(guò)程同時(shí)也是收集重要信息（方便后期簡(jiǎn)單注冊(cè)乃至更深入的需求）的絕佳時(shí)機(jī)，類(lèi)似于設(shè)置向?qū)А＿@一模式對(duì)于無(wú)法第一時(shí)間直觀了解功能的應(yīng)用來(lái)說(shuō)至關(guān)重要，因?yàn)橛脩?hù)對(duì)你的應(yīng)用了解越深刻，就越有可能繼續(xù)用下去。

2. 溢出菜單

Whatsapp、Gmail

問(wèn)題

用戶(hù)希望能夠快速使用附加選項(xiàng)或操作。

解決方案

將附加選項(xiàng)和按鈕隱藏在溢出菜單中，這樣它們就不會(huì)干擾主界面。溢出菜單在安卓系統(tǒng)中有著廣泛的應(yīng)用，其主要用于將不常用但與當(dāng)前內(nèi)容有相關(guān)度的選項(xiàng)和菜單項(xiàng)隱藏到操作欄中。Whatsapp和Gmail等應(yīng)用對(duì)刷新和狀態(tài)設(shè)置等菜單項(xiàng)（這些都是用戶(hù)需要能夠快速使用，但如果放在顯眼位置會(huì)比較礙事的附加功能）就采用了這種模式。在RelateIQ中，用戶(hù)可以按住主菜單項(xiàng)來(lái)查看子菜單，從而實(shí)現(xiàn)快速導(dǎo)航到不同視圖。

3.?滑塊

Uber

問(wèn)題

用戶(hù)希望能夠在不同選項(xiàng)之間無(wú)縫切換。

解決方案

使用滑動(dòng)手指的方式實(shí)現(xiàn)選項(xiàng)切換的顯眼、輕松過(guò)渡。例如，Uber可讓用戶(hù)在各側(cè)間拖動(dòng)滑塊無(wú)縫切換四種出行服務(wù)方式。在這一UI設(shè)計(jì)模式中，其甚至可以放大縮小地圖，從而給用戶(hù)模擬出周邊車(chē)輛的密度水平，讓你能夠自動(dòng)看到各種可行的方案。

4. 基于內(nèi)容的導(dǎo)航

Tinder

問(wèn)題

用戶(hù)希望能夠輕松、直觀探索特定內(nèi)容的細(xì)節(jié)。

解決方案

實(shí)現(xiàn)概覽和細(xì)節(jié)界面的無(wú)縫過(guò)渡。Tinder和9Gag均實(shí)現(xiàn)了這方面的無(wú)縫響應(yīng)。在Tinder中，其UI設(shè)計(jì)模式可讓用戶(hù)在兩種用戶(hù)資料界面無(wú)縫過(guò)渡，用戶(hù)只需單擊各視圖的主照片即可。不僅如此，如果用戶(hù)在用戶(hù)資料的詳細(xì)視圖界面下滑動(dòng)各個(gè)照片，然后單擊某個(gè)照片返回基本視圖，其還會(huì)保留顯示你所單擊選中的照片。這樣即可實(shí)現(xiàn)極為流暢、直觀的用戶(hù)體驗(yàn)和流程。

5.?變換式控件

Pinterest

問(wèn)題?

用戶(hù)希望能夠執(zhí)行各種不同的操作，但屏幕空間有限，無(wú)法顯示全部所需控件。

解決方案

使用其他功能替換按鈕和屏幕控件。根據(jù)用戶(hù)當(dāng)前操作情況的不同，UI設(shè)計(jì)可以使用針對(duì)性的元素替換先前的元素。例如，用“執(zhí)行”替換“撤銷(xiāo)”或“添加”替換“刪除”。如果用戶(hù)先后執(zhí)行的操作存在一定的關(guān)聯(lián)，那么這種方法絕對(duì)有效。

Pinterest和Spotify會(huì)把“+”變成“x”按鈕，這樣用戶(hù)就能知道自己可以取消添加別針或關(guān)注相簿。這一UI設(shè)計(jì)模式可大量節(jié)約空間，讓撤銷(xiāo)操作快速簡(jiǎn)潔，整體上堪稱(chēng)值得玩味的解決方案。

6. “跟隨式”固定導(dǎo)航

Dropbox

問(wèn)題

用戶(hù)希望能夠在應(yīng)用內(nèi)隨時(shí)訪(fǎng)問(wèn)菜單。

解決方案

滾動(dòng)頁(yè)面時(shí)保持頂部、側(cè)邊或底部導(dǎo)航欄不變。在某些情況下，頁(yè)面部分子節(jié)的標(biāo)題也可在滾動(dòng)時(shí)保持固定，或附著到已有的固定導(dǎo)航欄上。以地址簿為例，其中按字母順序分隔的每個(gè)分節(jié)（“a”、“b”“c”等）可以在滾動(dòng)過(guò)分節(jié)標(biāo)題時(shí)保持在頂部導(dǎo)航欄下方。相冊(cè)和文件夾類(lèi)應(yīng)用多采用這種設(shè)計(jì)模式。在其他方面，當(dāng)用戶(hù)朝著某一方向滾動(dòng)時(shí)，可以讓菜單消失，而朝另一方向滾動(dòng)時(shí)則會(huì)固定顯示。在這方面Pinterest是一個(gè)很好的例子，其菜單會(huì)在向上滾動(dòng)時(shí)從底部消失，向下滾動(dòng)時(shí)重新出現(xiàn)。這一點(diǎn)與用操作欄（Android機(jī)廣為采用的模式）存儲(chǔ)常用app功能的模式完全不同。

7. 垂直導(dǎo)航

Facebook、Spotify

問(wèn)題

用戶(hù)希望能夠在應(yīng)用的不同部分之間進(jìn)行導(dǎo)航，但屏幕空間有限，無(wú)法顯示全部信息。

解決方案

將重要的UI部分以列表的形式進(jìn)行呈現(xiàn)，讓用戶(hù)可以滾動(dòng)查看自己要執(zhí)行的操作或內(nèi)容。在這一方面，滾動(dòng)是一個(gè)比較標(biāo)準(zhǔn)的移動(dòng)應(yīng)用手勢(shì)，所以應(yīng)用采用這一模式進(jìn)行導(dǎo)航布局是比較合理的。這一模式還可讓UI的標(biāo)題和腳標(biāo)能夠?qū)崿F(xiàn)更多“通用”導(dǎo)航，例如操作欄等。Spotify等音樂(lè)播放器，Yahoo！、Digest等新聞閱讀器以及之外的各種應(yīng)用都以不同方式采用了垂直導(dǎo)航的模式。

8. 彈窗

TED、Dropbox

問(wèn)題

用戶(hù)希望在查看相關(guān)信息的同時(shí)保持當(dāng)前在UI中所處的位置。

解決方案

以彈窗的形式顯示重要通知和其他信息。這一UI模式的優(yōu)勢(shì)在于能夠以簡(jiǎn)潔明了的形式查看其他信息或執(zhí)行特定操作，同時(shí)無(wú)需用戶(hù)退出當(dāng)前活動(dòng)。正式的TED應(yīng)用會(huì)以彈窗的形式放置播放控件，同時(shí)背景會(huì)以半透明形式顯示，這樣一方面可以讓用戶(hù)知道自己能夠?qū)Σシ牌鲌?zhí)行相關(guān)操作，同時(shí)，又不會(huì)干擾用戶(hù)瀏覽當(dāng)前內(nèi)容。

Dropbox和Kindle也將控件放到了彈窗里。彈窗式UI模式對(duì)于這類(lèi)應(yīng)用的操作非常重要，因?yàn)槠渲饕獔?zhí)行對(duì)象是數(shù)據(jù)，因此這一模式就可以讓用戶(hù)清楚看到控件的操作目標(biāo)。在保證內(nèi)容可見(jiàn)的情況下，用戶(hù)可以對(duì)篩選選項(xiàng)進(jìn)行調(diào)整或改變字體大小，同時(shí)不需要在不同視圖間來(lái)回切換——所有操作都可以在當(dāng)前界面完成。彈窗和模擬窗口也可用于顯示重要通知或需要用戶(hù)特別注意的提示，要隱去彈窗需要用戶(hù)點(diǎn)擊或滑動(dòng)。以Secret和Swarm為例，這兩個(gè)應(yīng)用均使用彈窗來(lái)說(shuō)明用戶(hù)繼續(xù)操作的預(yù)期結(jié)果。

9. 滑出頁(yè)面、側(cè)邊欄和抽屜

LinkedIn、Gogobot

問(wèn)題

用戶(hù)希望能夠在應(yīng)用內(nèi)的各個(gè)不同部分間進(jìn)行導(dǎo)航，同時(shí)導(dǎo)航期間不用在每個(gè)部分耽誤時(shí)間。

解決方案

為應(yīng)用設(shè)計(jì)一個(gè)二級(jí)部分——例如導(dǎo)航、聊天、設(shè)置、用戶(hù)資料等，該二級(jí)部分可在不需要時(shí)以可折疊面板的形式隱藏到主要部分之后。在需要訪(fǎng)問(wèn)時(shí)，可移動(dòng)到主要部分一旁或滑動(dòng)覆蓋主要部分。由于滑動(dòng)頁(yè)面是和應(yīng)用主要內(nèi)容相脫離的單獨(dú)內(nèi)容層，因此具體如何對(duì)抽屜內(nèi)的內(nèi)容（圖標(biāo)、文字乃至簡(jiǎn)單控件）進(jìn)行布局可以靈活掌握，只要能夠保證重要功能的快速訪(fǎng)問(wèn)即可。

通常情況下，抽屜可以隱藏到“漢堡式層疊菜單”下方，或者隱藏在一個(gè)簡(jiǎn)單箭頭（表明箭頭內(nèi)包含額外內(nèi)容）后方。

10. 無(wú)所不至的鏈接

Yelp

問(wèn)題

用戶(hù)希望獲得前后一致的內(nèi)容導(dǎo)航體驗(yàn)，同時(shí)不會(huì)受到多余內(nèi)容的干擾。

解決方案

給應(yīng)用內(nèi)的大部分甚至全部?jī)?nèi)容加上鏈接，讓用戶(hù)能夠自由探索尋找自己所需的信息，而不會(huì)陷入死循環(huán)或被繁冗的超鏈接文本、多余的按鈕、廣告宣傳等網(wǎng)站上常見(jiàn)的無(wú)聊內(nèi)容所干擾。如果用戶(hù)希望與應(yīng)用中的某一部分內(nèi)容進(jìn)行交互，他們一般會(huì)點(diǎn)擊該內(nèi)容，打開(kāi)新視圖獲得詳細(xì)體驗(yàn)。舉例來(lái)說(shuō)，在Yelp中，用戶(hù)面臨著多種選擇——他們可以點(diǎn)擊底部的按鈕，也可以點(diǎn)擊內(nèi)容本身（例如地圖或評(píng)論）進(jìn)行瀏覽。而Flipboard則在用戶(hù)瀏覽數(shù)字雜志時(shí)提供了眼花繚亂的導(dǎo)航方式，例如滑動(dòng)、點(diǎn)擊、手抓退出、撤銷(xiāo)、返回等等等等，相比Yelp要復(fù)雜得多。

10. 高級(jí)滾動(dòng)條

Carousel、Dropbox

問(wèn)題

用戶(hù)希望能夠看到自己當(dāng)前在整體內(nèi)容中所處的位置，并能夠快速跳躍到較長(zhǎng)的列表或圖集的某個(gè)特定位置。

解決方案

除了使用滑動(dòng)手勢(shì)進(jìn)行滾動(dòng)外，很多移動(dòng)清單或圖集類(lèi)應(yīng)用還提供長(zhǎng)時(shí)間顯示或滑動(dòng)時(shí)短暫顯示的滾動(dòng)條。在很多情況下，滾動(dòng)條還會(huì)配套滾動(dòng)索引（按日期、字母、分類(lèi)、位置等排序）。對(duì)于索引式滾動(dòng)，其滾動(dòng)提示條通常是長(zhǎng)時(shí)間顯示的，也就是說(shuō)用戶(hù)不執(zhí)行滾動(dòng)操作時(shí)也顯示。通過(guò)觸摸或拖動(dòng)滾動(dòng)提示條能夠以顯眼的方式彈出當(dāng)前所處部分提示。但是，滾動(dòng)條和索引兩者也可以結(jié)合采用，并且僅在滾動(dòng)時(shí)顯示以節(jié)省屏幕空間、減少對(duì)用戶(hù)的干擾。對(duì)于滾動(dòng)和索引的功能比較關(guān)鍵的應(yīng)用，滾動(dòng)條一般會(huì)以顯眼方式長(zhǎng)時(shí)間顯示。

例如Carousel，其不僅有顯眼的滾動(dòng)條，在底部還提供了一個(gè)強(qiáng)力滾動(dòng)條，以便用戶(hù)輕松滾過(guò)上百萬(wàn)張照片。隨著用戶(hù)創(chuàng)造內(nèi)容、訂閱、組群、列表等的日漸增多，我們?cè)谖磥?lái)將看到更多能夠讓用戶(hù)以搜索和滾動(dòng)條之外的方式尋找所需的創(chuàng)造性UI設(shè)計(jì)模式。

11. 滑動(dòng)視圖

Yahoo! 、Digest、Flipboard

問(wèn)題

用戶(hù)希望能夠在不返回索引的情況下從某項(xiàng)內(nèi)容快速導(dǎo)航到另一內(nèi)容。

解決方案

讓用戶(hù)能夠以滑動(dòng)內(nèi)容的方式在不同項(xiàng)目間切換。這一模式很類(lèi)似于瀏覽相簿的感覺(jué)，現(xiàn)在有越來(lái)越多的應(yīng)用開(kāi)始采用這一模式，比如Yahoo！、Digest和Flipboard等。這一模式有助于維持用戶(hù)的浸入式體驗(yàn)，另外，其還可用于架構(gòu)用途，例如把應(yīng)用中的不同部分分類(lèi)到各個(gè)“標(biāo)簽”，讓用戶(hù)能夠通過(guò)滑動(dòng)進(jìn)行查看。在采用這一模式時(shí)，還可以考慮一下如何以最佳方式讓界面表現(xiàn)出其具有滑動(dòng)功能。

讓用戶(hù)放手導(dǎo)航

關(guān)注用戶(hù)預(yù)期的導(dǎo)航目標(biāo)、他們是否會(huì)觀察導(dǎo)航元素、他們導(dǎo)航到應(yīng)用某一區(qū)域的頻率、用戶(hù)的來(lái)源和使用應(yīng)用的目的（也就是用戶(hù)流）等等。反復(fù)對(duì)導(dǎo)航元素進(jìn)行整理、排序、改變大小和微調(diào)，直到獲得超越預(yù)期的結(jié)果。當(dāng)然還需要深思用戶(hù)在嘗試進(jìn)入應(yīng)用的某個(gè)部分時(shí)實(shí)際會(huì)采取哪種方式，切勿遺漏關(guān)鍵要素。

成為交互設(shè)計(jì)師的必讀好文！

阿里巴巴資深交互設(shè)計(jì)師經(jīng)驗(yàn)！
《推薦！交互設(shè)計(jì)那些事兒（一）》

網(wǎng)易設(shè)計(jì)總監(jiān)親歷分享！
《網(wǎng)易美女設(shè)計(jì)主管！交互設(shè)計(jì)菜鳥(niǎo)如何入門(mén)？》

交互設(shè)計(jì)師自學(xué)指南！
《交互設(shè)計(jì)師修煉指南！教你從零開(kāi)始成為優(yōu)秀交互設(shè)計(jì)師》

原文地址：designmodo
譯文地址：uec.nq.com
譯者：蔣燦
uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線(xiàn)端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量77萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：