在本文中，Chris Bank將與您探討導(dǎo)航設(shè)計(jì)模式的重要意義，并以當(dāng)下最熱門的幾個(gè)移動(dòng)應(yīng)用為例詳細(xì)進(jìn)行講解——在UXPin的免費(fèi)電子書《移動(dòng)UI設(shè)計(jì)模式2014》中還提供了更多有關(guān)導(dǎo)航模式設(shè)計(jì)的示例，以及多達(dá)45種其他移動(dòng)應(yīng)用設(shè)計(jì)模式的詳解。
用戶在使用應(yīng)用時(shí)，需要隨時(shí)清楚了解下一步應(yīng)當(dāng)前往哪一頁面以及如何前往該頁面。如果用戶無法輕松在應(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)和組織情況之后，就可以開始考慮導(dǎo)航設(shè)計(jì)了。在此時(shí)，你需要考慮下面的幾個(gè)事項(xiàng)：
1. 可達(dá)性
移動(dòng)應(yīng)用的導(dǎo)航功能可以說是所有界面最重要的組成部分，因此一定要保證其可達(dá)性，并把最關(guān)鍵的要素盡量突出，同時(shí)不要影響到內(nèi)容本身。
2. 是否有意義
確保菜單、操作欄、彈窗、按鈕、箭頭、鏈接等導(dǎo)航要素簡(jiǎn)單明了，讓用戶一看就知道是什么意思以及操作結(jié)果是什么。不要弄的太過花哨，用戶沒有耐心去“猜”。
3. 易于理解
如果你想設(shè)計(jì)比較高級(jí)的導(dǎo)航功能(例如鏈接圖片、允許滑動(dòng)或其他手勢(shì)導(dǎo)航，或者訪問隱藏菜單)，請(qǐng)務(wù)必在設(shè)計(jì)過程中保證前后一致，以便用戶熟悉你所使用的模式，同時(shí)還應(yīng)加入一些額外的信息(例如小箭頭、文字或改變顏色或高亮等)來吸引用戶注意力，并以微妙的方式對(duì)用戶進(jìn)行引導(dǎo)。不要給用戶呈上“看得見摸不著的導(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ì)說明(對(duì)這些設(shè)計(jì)模式的更深入探討請(qǐng)見我們的電子書《移動(dòng)UI設(shè)計(jì)模式2014》)的幾個(gè)設(shè)計(jì)模式的概覽：
1. 說明與引導(dǎo)標(biāo)記
2. 溢出菜單
3. 滑塊
4. 基于內(nèi)容的導(dǎo)航
5. 變換式控件
6. “跟隨式”固定導(dǎo)航
7. 垂直導(dǎo)航
8. 彈窗
9. 滑出頁面、側(cè)邊欄和抽屜
10. 無所不至的鏈接
11. 高級(jí)滾動(dòng)條
12. 滑動(dòng)視圖
1. 說明與引導(dǎo)標(biāo)記
Secret
問題
用戶希望了解如何使用應(yīng)用的各項(xiàng)功能。
解決方案
設(shè)計(jì)一套說明或教程來演示各項(xiàng)功能如何使用。現(xiàn)在很多應(yīng)用都使用這種方式在用戶首次啟動(dòng)時(shí)提供演示。這種方式可以分為兩大基本方法。Secret和YouTube等應(yīng)用采用了覆蓋圖指南的方法，并使用“引導(dǎo)標(biāo)記”突出顯示UI中的關(guān)鍵部分來說明其作用。
另外，Carousel和Duolingo等應(yīng)用則會(huì)在用戶首次啟動(dòng)時(shí)以幻燈片的形式引導(dǎo)用戶走完全部體驗(yàn)過程，從而有效地說明應(yīng)用能夠幫助用戶實(shí)現(xiàn)哪些功能。這一引導(dǎo)過程同時(shí)也是收集重要信息(方便后期簡(jiǎn)單注冊(cè)乃至更深入的需求)的絕佳時(shí)機(jī)，類似于設(shè)置向?qū)А＿@一模式對(duì)于無法第一時(shí)間直觀了解功能的應(yīng)用來說至關(guān)重要，因?yàn)橛脩魧?duì)你的應(yīng)用了解越深刻，就越有可能繼續(xù)用下去。
2. 溢出菜單
Whatsapp、Gmail
問題
用戶希望能夠快速使用附加選項(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)(這些都是用戶需要能夠快速使用，但如果放在顯眼位置會(huì)比較礙事的附加功能)就采用了這種模式。在RelateIQ中，用戶可以按住主菜單項(xiàng)來查看子菜單，從而實(shí)現(xiàn)快速導(dǎo)航到不同視圖。
3. 滑塊
Uber
問題
用戶希望能夠在不同選項(xiàng)之間無縫切換。
解決方案
使用滑動(dòng)手指的方式實(shí)現(xiàn)選項(xiàng)切換的顯眼、輕松過渡。例如，Uber可讓用戶在各側(cè)間拖動(dòng)滑塊無縫切換四種出行服務(wù)方式。在這一UI設(shè)計(jì)模式中，其甚至可以放大縮小地圖，從而給用戶模擬出周邊車輛的密度水平，讓你能夠自動(dòng)看到各種可行的方案。
4. 基于內(nèi)容的導(dǎo)航
Tinder
問題
用戶希望能夠輕松、直觀探索特定內(nèi)容的細(xì)節(jié)。
解決方案
實(shí)現(xiàn)概覽和細(xì)節(jié)界面的無縫過渡。Tinder和9Gag均實(shí)現(xiàn)了這方面的無縫響應(yīng)。在Tinder中，其UI設(shè)計(jì)模式可讓用戶在兩種用戶資料界面無縫過渡，用戶只需單擊各視圖的主照片即可。不僅如此，如果用戶在用戶資料的詳細(xì)視圖界面下滑動(dòng)各個(gè)照片，然后單擊某個(gè)照片返回基本視圖，其還會(huì)保留顯示你所單擊選中的照片。這樣即可實(shí)現(xiàn)極為流暢、直觀的用戶體驗(yàn)和流程。
5. 變換式控件
問題
用戶希望能夠執(zhí)行各種不同的操作，但屏幕空間有限，無法顯示全部所需控件。
解決方案
使用其他功能替換按鈕和屏幕控件。根據(jù)用戶當(dāng)前操作情況的不同，UI設(shè)計(jì)可以使用針對(duì)性的元素替換先前的元素。例如，用“執(zhí)行”替換“撤銷”或“添加”替換“刪除”。如果用戶先后執(zhí)行的操作存在一定的關(guān)聯(lián)，那么這種方法絕對(duì)有效。
Pinterest和Spotify會(huì)把“+”變成“x”按鈕，這樣用戶就能知道自己可以取消添加別針或關(guān)注相簿。這一UI設(shè)計(jì)模式可大量節(jié)約空間，讓撤銷操作快速簡(jiǎn)潔，整體上堪稱值得玩味的解決方案。
6. “跟隨式”固定導(dǎo)航
Dropbox
問題
用戶希望能夠在應(yīng)用內(nèi)隨時(shí)訪問菜單。
解決方案
滾動(dòng)頁面時(shí)保持頂部、側(cè)邊或底部導(dǎo)航欄不變。在某些情況下，頁面部分子節(jié)的標(biāo)題也可在滾動(dòng)時(shí)保持固定，或附著到已有的固定導(dǎo)航欄上。以地址簿為例，其中按字母順序分隔的每個(gè)分節(jié)(“a”、“b”“c”等)可以在滾動(dòng)過分節(jié)標(biāo)題時(shí)保持在頂部導(dǎo)航欄下方。相冊(cè)和文件夾類應(yīng)用多采用這種設(shè)計(jì)模式。在其他方面，當(dāng)用戶朝著某一方向滾動(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
問題
用戶希望能夠在應(yīng)用的不同部分之間進(jìn)行導(dǎo)航，但屏幕空間有限，無法顯示全部信息。
解決方案
將重要的UI部分以列表的形式進(jìn)行呈現(xiàn)，讓用戶可以滾動(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等音樂播放器，Yahoo!、Digest等新聞閱讀器以及之外的各種應(yīng)用都以不同方式采用了垂直導(dǎo)航的模式。
8. 彈窗
TED、Dropbox
問題
用戶希望在查看相關(guān)信息的同時(shí)保持當(dāng)前在UI中所處的位置。
解決方案
以彈窗的形式顯示重要通知和其他信息。這一UI模式的優(yōu)勢(shì)在于能夠以簡(jiǎn)潔明了的形式查看其他信息或執(zhí)行特定操作，同時(shí)無需用戶退出當(dāng)前活動(dòng)。正式的TED應(yīng)用會(huì)以彈窗的形式放置播放控件，同時(shí)背景會(huì)以半透明形式顯示，這樣一方面可以讓用戶知道自己能夠?qū)Σシ牌鲌?zhí)行相關(guān)操作，同時(shí)，又不會(huì)干擾用戶瀏覽當(dāng)前內(nèi)容。
Dropbox和Kindle也將控件放到了彈窗里。彈窗式UI模式對(duì)于這類應(yīng)用的操作非常重要，因?yàn)槠渲饕獔?zhí)行對(duì)象是數(shù)據(jù)，因此這一模式就可以讓用戶清楚看到控件的操作目標(biāo)。在保證內(nèi)容可見的情況下，用戶可以對(duì)篩選選項(xiàng)進(jìn)行調(diào)整或改變字體大小，同時(shí)不需要在不同視圖間來回切換——所有操作都可以在當(dāng)前界面完成。彈窗和模擬窗口也可用于顯示重要通知或需要用戶特別注意的提示，要隱去彈窗需要用戶點(diǎn)擊或滑動(dòng)。以Secret和Swarm為例，這兩個(gè)應(yīng)用均使用彈窗來說明用戶繼續(xù)操作的預(yù)期結(jié)果。
9. 滑出頁面、側(cè)邊欄和抽屜
LinkedIn、Gogobot
問題
用戶希望能夠在應(yīng)用內(nèi)的各個(gè)不同部分間進(jìn)行導(dǎo)航，同時(shí)導(dǎo)航期間不用在每個(gè)部分耽誤時(shí)間。
解決方案
為應(yīng)用設(shè)計(jì)一個(gè)二級(jí)部分——例如導(dǎo)航、聊天、設(shè)置、用戶資料等，該二級(jí)部分可在不需要時(shí)以可折疊面板的形式隱藏到主要部分之后。在需要訪問時(shí)，可移動(dòng)到主要部分一旁或滑動(dòng)覆蓋主要部分。由于滑動(dòng)頁面是和應(yīng)用主要內(nèi)容相脫離的單獨(dú)內(nèi)容層，因此具體如何對(duì)抽屜內(nèi)的內(nèi)容(圖標(biāo)、文字乃至簡(jiǎn)單控件)進(jìn)行布局可以靈活掌握，只要能夠保證重要功能的快速訪問即可。
通常情況下，抽屜可以隱藏到“漢堡式層疊菜單”下方，或者隱藏在一個(gè)簡(jiǎn)單箭頭(表明箭頭內(nèi)包含額外內(nèi)容)后方。
10. 無所不至的鏈接
Yelp
問題
用戶希望獲得前后一致的內(nèi)容導(dǎo)航體驗(yàn)，同時(shí)不會(huì)受到多余內(nèi)容的干擾。
解決方案
給應(yīng)用內(nèi)的大部分甚至全部內(nèi)容加上鏈接，讓用戶能夠自由探索尋找自己所需的信息，而不會(huì)陷入死循環(huán)或被繁冗的超鏈接文本、多余的按鈕、廣告宣傳等網(wǎng)站上常見的無聊內(nèi)容所干擾。如果用戶希望與應(yīng)用中的某一部分內(nèi)容進(jìn)行交互，他們一般會(huì)點(diǎn)擊該內(nèi)容，打開新視圖獲得詳細(xì)體驗(yàn)。舉例來說，在Yelp中，用戶面臨著多種選擇——他們可以點(diǎn)擊底部的按鈕，也可以點(diǎn)擊內(nèi)容本身(例如地圖或評(píng)論)進(jìn)行瀏覽。而Flipboard則在用戶瀏覽數(shù)字雜志時(shí)提供了眼花繚亂的導(dǎo)航方式，例如滑動(dòng)、點(diǎn)擊、手抓退出、撤銷、返回等等等等，相比Yelp要復(fù)雜得多。
10. 高級(jí)滾動(dòng)條
Carousel、Dropbox
問題
用戶希望能夠看到自己當(dāng)前在整體內(nèi)容中所處的位置，并能夠快速跳躍到較長的列表或圖集的某個(gè)特定位置。
解決方案
除了使用滑動(dòng)手勢(shì)進(jìn)行滾動(dòng)外，很多移動(dòng)清單或圖集類應(yīng)用還提供長時(shí)間顯示或滑動(dòng)時(shí)短暫顯示的滾動(dòng)條。在很多情況下，滾動(dòng)條還會(huì)配套滾動(dòng)索引(按日期、字母、分類、位置等排序)。對(duì)于索引式滾動(dòng)，其滾動(dòng)提示條通常是長時(shí)間顯示的，也就是說用戶不執(zhí)行滾動(dòng)操作時(shí)也顯示。通過觸摸或拖動(dòng)滾動(dòng)提示條能夠以顯眼的方式彈出當(dāng)前所處部分提示。但是，滾動(dòng)條和索引兩者也可以結(jié)合采用，并且僅在滾動(dòng)時(shí)顯示以節(jié)省屏幕空間、減少對(duì)用戶的干擾。對(duì)于滾動(dòng)和索引的功能比較關(guān)鍵的應(yīng)用，滾動(dòng)條一般會(huì)以顯眼方式長時(shí)間顯示。
例如Carousel，其不僅有顯眼的滾動(dòng)條，在底部還提供了一個(gè)強(qiáng)力滾動(dòng)條，以便用戶輕松滾過上百萬張照片。隨著用戶創(chuàng)造內(nèi)容、訂閱、組群、列表等的日漸增多，我們?cè)谖磥韺⒖吹礁嗄軌蜃層脩粢运阉骱蜐L動(dòng)條之外的方式尋找所需的創(chuàng)造性UI設(shè)計(jì)模式。
11. 滑動(dòng)視圖
Yahoo! 、Digest、Flipboard
問題
用戶希望能夠在不返回索引的情況下從某項(xiàng)內(nèi)容快速導(dǎo)航到另一內(nèi)容。
解決方案
讓用戶能夠以滑動(dòng)內(nèi)容的方式在不同項(xiàng)目間切換。這一模式很類似于瀏覽相簿的感覺，現(xiàn)在有越來越多的應(yīng)用開始采用這一模式，比如Yahoo!、Digest和Flipboard等。這一模式有助于維持用戶的浸入式體驗(yàn)，另外，其還可用于架構(gòu)用途，例如把應(yīng)用中的不同部分分類到各個(gè)“標(biāo)簽”，讓用戶能夠通過滑動(dòng)進(jìn)行查看。在采用這一模式時(shí)，還可以考慮一下如何以最佳方式讓界面表現(xiàn)出其具有滑動(dòng)功能。
讓用戶放手導(dǎo)航
關(guān)注用戶預(yù)期的導(dǎo)航目標(biāo)、他們是否會(huì)觀察導(dǎo)航元素、他們導(dǎo)航到應(yīng)用某一區(qū)域的頻率、用戶的來源和使用應(yīng)用的目的(也就是用戶流)等等。反復(fù)對(duì)導(dǎo)航元素進(jìn)行整理、排序、改變大小和微調(diào)，直到獲得超越預(yù)期的結(jié)果。當(dāng)然還需要深思用戶在嘗試進(jìn)入應(yīng)用的某個(gè)部分時(shí)實(shí)際會(huì)采取哪種方式，切勿遺漏關(guān)鍵要素。