幾種常見移動(dòng)導(dǎo)航模式詳析

雖說一款應(yīng)用的生死不是由導(dǎo)航?jīng)Q定，但毋庸置疑，導(dǎo)航模式的選擇在產(chǎn)品用戶體驗(yàn)上占有很大的比重。就導(dǎo)航本身來說，沒有優(yōu)劣之分，端看你的應(yīng)用適合哪種。下面是我羅列的一些常見的移動(dòng)導(dǎo)航模式，接下來會(huì)對(duì)其一一舉例說明（注：重要模式會(huì)重點(diǎn)分析，其余簡(jiǎn)略，篇幅略長(zhǎng)，不喜可跳過）

標(biāo)簽式

標(biāo)簽式導(dǎo)航是ios平臺(tái)上公認(rèn)的最經(jīng)典的導(dǎo)航模式，看市場(chǎng)上幾乎有80%的應(yīng)用都在使用就能知道。標(biāo)簽式導(dǎo)航關(guān)注的是平行空間的展示，它的優(yōu)點(diǎn)是適用于多個(gè)內(nèi)容體系，且重要程度相似（平級(jí)關(guān)系），能頻繁在不同頁面間切換，切換成本底，只需一次點(diǎn)擊；缺點(diǎn)是占用一定高度空間，且標(biāo)簽數(shù)量有限，最多5個(gè)標(biāo)簽。

下圖中圖1-淘寶，是標(biāo)簽式導(dǎo)航的標(biāo)準(zhǔn)使用形式，每個(gè)標(biāo)簽作為一個(gè)導(dǎo)航分類放在標(biāo)簽欄中（注意都是名詞）。圖2和圖3可以算是標(biāo)準(zhǔn)形式的變形（還有其他變形形式，后面再講），雖然也是有5個(gè)標(biāo)簽，但處于中間位置的標(biāo)簽不是作為導(dǎo)航使用，而是一個(gè)行為召喚按鈕。行為召喚按鈕主要強(qiáng)調(diào)某項(xiàng)重要功能的快捷使用，該功能需要是應(yīng)用最核心且最常用的功能，優(yōu)先級(jí)很高。比如圖2的instagram,它的目標(biāo)是以一種快速、美妙和有趣的方式將你隨時(shí)抓拍下的圖片分享出來，它關(guān)注的是能隨時(shí)隨地抓拍。因此，作為行為召喚按鈕的“拍照”放在標(biāo)簽欄上就很有必要。

但是，有些應(yīng)用對(duì)于行為召喚按鈕的放置并不合理。如下圖的圖3-簡(jiǎn)書，雖然文章的撰寫是簡(jiǎn)書的核心功能，將其作為標(biāo)簽欄中的一個(gè)按鈕，即能在視覺上凸現(xiàn)出來，又能減少操作負(fù)荷，似乎很棒。但卻忽略了一個(gè)重要的問題，從使用環(huán)境來說，文章或者文檔的撰寫是需要在安靜且能集中注意力的環(huán)境下，但移動(dòng)app天然具有干擾多且注意力不集中的問題。而且在手機(jī)上輸入上百字也是一件痛苦的事。對(duì)于這款產(chǎn)品的手機(jī)用戶來說，可能用戶對(duì)內(nèi)容的消費(fèi)比對(duì)執(zhí)行動(dòng)作更重要。

另外，還有一種常見的標(biāo)簽式導(dǎo)航的變種，即傳統(tǒng)的標(biāo)簽式+點(diǎn)聚式。這里先專門講一下點(diǎn)聚式，最為我們所熟知的點(diǎn)聚式就是曾經(jīng)經(jīng)典的path結(jié)構(gòu)，即抽屜導(dǎo)航+點(diǎn)聚式，如下圖所示—改版前圖示，它的目的是將用戶最頻繁使用的多個(gè)核心功能點(diǎn)匯聚在主界面中顯示，方便用戶隨時(shí)呼出使用。只是，如今單獨(dú)使用點(diǎn)聚式的應(yīng)用越來越少，就連path也對(duì)這種傳統(tǒng)的點(diǎn)聚式進(jìn)行了調(diào)整，變成了依附于標(biāo)簽的點(diǎn)聚式結(jié)構(gòu)，如下圖中的path改版后。還有下圖中的樣式1和樣式2，也是這種形式的不同展現(xiàn)。他們的共同點(diǎn)是，使用同一個(gè)導(dǎo)航入口，進(jìn)行多個(gè)同級(jí)功能的不同操作，大部分都是2-5個(gè)不同的操作選項(xiàng)，當(dāng)然也會(huì)有更多，比如下圖中的新浪微博，點(diǎn)擊“加號(hào)”入口，出現(xiàn)了更多的功能選項(xiàng),且這些功能的優(yōu)先級(jí)相若。

其實(shí)，在Android 5.0中，這種點(diǎn)聚式更常用的表現(xiàn)形式是懸浮響應(yīng)按鈕，它代表的是這個(gè)app中最主要的操作。只是就目前來講使用場(chǎng)景有限，實(shí)際應(yīng)用并不理想。

抽屜式

抽屜式導(dǎo)航的目的是帶給用戶更為沉浸的體驗(yàn)。它的特點(diǎn)是，“閱讀”為王，點(diǎn)擊切換少，專注于主體信息本身。從表現(xiàn)形態(tài)來看，抽屜導(dǎo)航很符合產(chǎn)品的二八法則，即產(chǎn)品中只有20%的功能常用，所以要突顯，剩下的80%不常用，因此隱藏。它不像標(biāo)簽導(dǎo)航一樣強(qiáng)調(diào)平級(jí)關(guān)系的切換，而是突出重要且核心的功能。抽屜導(dǎo)航的另一些優(yōu)點(diǎn)是，側(cè)邊導(dǎo)航收納的導(dǎo)航標(biāo)簽可以是5個(gè)以上，節(jié)省屏幕空間。缺點(diǎn)是無法快速完成導(dǎo)航切換，操作成本高。

關(guān)于抽屜導(dǎo)航，在Android和ios平臺(tái)的使用也有區(qū)別。抽屜導(dǎo)航在Android平臺(tái)上比ios更常使用。由于在ios上，抽屜導(dǎo)航?jīng)]有專門的設(shè)計(jì)規(guī)范，所以使用上較為隨意，表現(xiàn)形式也不受拘泥。

如果以抽屜導(dǎo)航和主頁在空間位置為評(píng)判依據(jù)，其在風(fēng)格上主要有3種表現(xiàn)：

第一種是浮層，即導(dǎo)航抽屜處于主頁上層，通過滑動(dòng)或點(diǎn)擊的手勢(shì)打開抽屜，抽屜部分遮擋或覆蓋原來頁面的內(nèi)容，如下圖中圖4，這種風(fēng)格多數(shù)會(huì)在Android上出現(xiàn)。

第二種是疊加式，即導(dǎo)航抽屜位于主頁的底部，打開抽屜，原來的主頁會(huì)向屏幕右側(cè)滑動(dòng)，顯出主頁下方的導(dǎo)航抽屜，如下圖中圖5，這種風(fēng)格在ios上很普遍。第三種是嵌入層，即導(dǎo)航抽屜和主頁處于同一層，通過輕滑、平移或點(diǎn)擊打開抽屜，把原先的頁面內(nèi)容部分推出屏幕外，如下圖中圖6（注意導(dǎo)航和主頁銜接處無陰影）。

而第三種風(fēng)格經(jīng)常會(huì)有如下圖圖7的變形，就是說在打開側(cè)邊抽屜的時(shí)候，嵌入式抽屜不僅把上一級(jí)頁面向右推開，還采用3D效果將其推到后面。了解不同風(fēng)格可在設(shè)計(jì)時(shí)斟酌使用。

選項(xiàng)卡式

對(duì)于選項(xiàng)卡導(dǎo)航，不同平臺(tái)有不同的設(shè)計(jì)規(guī)則。今天主要說說ios上選項(xiàng)卡的表現(xiàn)，選項(xiàng)卡的本質(zhì)即是，實(shí)現(xiàn)容器內(nèi)不同視圖或內(nèi)容的切換。雖然對(duì)于選項(xiàng)卡本身，ios沒有專門的規(guī)范約束，但這并不妨礙廣大設(shè)計(jì)者們自由發(fā)揮。目前市場(chǎng)上主要有3種形式的選項(xiàng)卡：分段選項(xiàng)卡、固定選項(xiàng)卡和滑動(dòng)選項(xiàng)卡。

分段選項(xiàng)卡：是由兩個(gè)或兩個(gè)以上寬度相同的分段組成，正常情況下不超過4個(gè)，視覺上會(huì)有一個(gè)很明顯的描邊按鈕。分段選項(xiàng)卡經(jīng)常會(huì)作為二級(jí)導(dǎo)航，對(duì)主導(dǎo)航內(nèi)容再次分類，可以在頂部導(dǎo)航欄的下方，也可以直接放在導(dǎo)航欄上，如下圖所示。標(biāo)簽之間互相關(guān)聯(lián)，只能點(diǎn)擊切換，操作效率較低。

另外，就是固定選項(xiàng)卡和滑動(dòng)選項(xiàng)卡，兩者都可以直接點(diǎn)擊或左右滑動(dòng)切換選項(xiàng)，且一級(jí)和二級(jí)導(dǎo)航都能使用。區(qū)別就是滑動(dòng)選項(xiàng)卡可以有更多選項(xiàng)，且能直接通過手指滑動(dòng)導(dǎo)航找分類，適用于相關(guān)類別多的應(yīng)用，如下圖的電子商務(wù)網(wǎng)站。

下拉菜單式

現(xiàn)如今，下拉菜單式導(dǎo)航并不常用。下拉菜單和導(dǎo)航抽屜一樣，是以突出內(nèi)容為主的導(dǎo)航模式；一般位于產(chǎn)品頂部，通過點(diǎn)擊呼出導(dǎo)航菜單。

由于導(dǎo)航菜單位于屏幕頂部，不適合結(jié)合手勢(shì)，操作負(fù)荷大，因此不適合需要頻繁切換功能，且能在一定程度上節(jié)省屏幕空間。一般情況下，下拉菜單很容易被滑動(dòng)選項(xiàng)卡取代，且滑動(dòng)選項(xiàng)卡可以結(jié)合手勢(shì)操作，使用效率更高，這也是現(xiàn)在下拉菜單很少被使用的原因，除非你的下拉菜單選項(xiàng)中有很明顯的優(yōu)先級(jí)區(qū)分。

比如下圖所示，圖8的新浪微博首頁作為默認(rèn)選中項(xiàng)，顯示和用戶相關(guān)的所有微博，常態(tài)下用戶只需要一直瀏覽下去即可，很少需要主動(dòng)點(diǎn)擊切換，除非想要篩選某些特定的微博內(nèi)容，此處的內(nèi)容優(yōu)先級(jí)很容易區(qū)分。同理，圖9也是如此，用戶關(guān)注更多且更感興趣的是以項(xiàng)目為維度的內(nèi)容分組，因此用下拉菜單來表現(xiàn)。另外，多數(shù)菜單是以點(diǎn)擊后彈框的形式出現(xiàn)，也有一些是從底部滑出一個(gè)新的頁面調(diào)出菜單，如下圖中的圖10。

宮格式

宮格式導(dǎo)航，是一種類似于手機(jī)桌面各個(gè)應(yīng)用入口的導(dǎo)航方式。每個(gè)入口往往是比較獨(dú)立的信息內(nèi)容，用戶進(jìn)入一個(gè)入口后，只處理與此入口相關(guān)的內(nèi)容，如果要跳轉(zhuǎn)至其他入口，必須要先回到入口總界面。

這種導(dǎo)航經(jīng)常用于工具類app中，它的優(yōu)點(diǎn)是功能拓展性強(qiáng)，可增加多個(gè)入口。缺點(diǎn)是單頁承載信息能力弱，層級(jí)深，不適合頻繁任務(wù)切換。如下圖的美顏相機(jī)就是標(biāo)準(zhǔn)的宮格式結(jié)構(gòu)，每個(gè)功能類似于獨(dú)立的app,且作為一級(jí)導(dǎo)航使用，這種表現(xiàn)形式現(xiàn)在越來越少。而剩下的其他三張圖示，屬于宮格式的一種變形，我稱之為數(shù)據(jù)入口，這種只作為各種大數(shù)據(jù)入口的導(dǎo)航模式現(xiàn)在更多作為二級(jí)導(dǎo)航使用，特別是平臺(tái)類產(chǎn)品。

列表式

列表式導(dǎo)航也是一種十分常見的導(dǎo)航模式，純粹的列表導(dǎo)航很少見，一般都是搭配著別的導(dǎo)航模式一起使用，大多作為二級(jí)導(dǎo)航。

列表中可以放置圖片、標(biāo)題或者詳情文字等來展示信息，列表本身是一個(gè)傳達(dá)信息效率很高的載體，因此使用列表的時(shí)候要注意，每個(gè)列表所占的屏幕空間，以及每屏能顯示多少條列表等。

如下圖所示的圖1-1采用了列表的分組模式，圖2-2中列表中的每項(xiàng)信息可能都會(huì)影響用戶的點(diǎn)擊轉(zhuǎn)化，所以如這種形式的列表，細(xì)節(jié)信息很重要。

圖1-3和圖1-4為二級(jí)列表，點(diǎn)擊列表右側(cè)的小符號(hào)，可以展開或者隱藏信息，這方便用戶查找信息并快速定位，多數(shù)情況下，點(diǎn)擊右側(cè)小符號(hào)可能會(huì)出現(xiàn)快捷編輯模式或者部分詳情信息，便于用戶直接編輯或者瀏覽。而點(diǎn)擊整個(gè)列表，通常會(huì)進(jìn)入新一級(jí)的詳情頁面。因此，設(shè)計(jì)師在設(shè)計(jì)的時(shí)候要注意。

圖示式

圖示式是一種更加可視化的導(dǎo)航，它能根據(jù)頁面內(nèi)容的變化及時(shí)更新圖片，適合以圖片為主的內(nèi)容，像新聞、美食、旅行、視頻圖片等經(jīng)常使用，常作為二級(jí)導(dǎo)航。

由于圖片可能需要經(jīng)常更新，因此需要配置固定的欄目或標(biāo)題，防止不斷更新的圖片讓用戶找不到入口。這種形式的導(dǎo)航常常會(huì)采用網(wǎng)格布局，如下圖所示，每行基本上會(huì)有1-3個(gè)圖示單位，不同的網(wǎng)格布局決定了每屏容納的圖示個(gè)數(shù)，因此用戶瀏覽效率及點(diǎn)擊轉(zhuǎn)化率也會(huì)有所不同。

幻燈片式

幻燈片的導(dǎo)航方式，適用于圖片或整塊內(nèi)容的并列展示，用戶通過手指左右滑動(dòng)來切換當(dāng)前內(nèi)容。正常情況下，幻燈片的數(shù)量不宜太多，最好控制在7-8個(gè)以內(nèi)，避免用戶操作疲勞。如下圖所示，使用幻燈片設(shè)計(jì)最好在設(shè)計(jì)上提供視覺暗示，讓用戶清楚的知道所處的位置以及幻燈片數(shù)量，例如添加分頁標(biāo)識(shí)碼，或者隱喻還有下一張圖片等。

新聞名稱：幾種常見移動(dòng)導(dǎo)航模式詳析
文章URL：http://www.muchs.cn/news0/167900.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、微信小程序、用戶體驗(yàn)、全網(wǎng)營(yíng)銷推廣、自適應(yīng)網(wǎng)站、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)