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

標簽式

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

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

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

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

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

抽屜式

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

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

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

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

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

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

選項卡式

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

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

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

下拉菜單式

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

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

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

宮格式

宮格式導航，是一種類似于手機桌面各個應用入口的導航方式。每個入口往往是比較獨立的信息內容，用戶進入一個入口后，只處理與此入口相關的內容，如果要跳轉至其他入口，必須要先回到入口總界面。

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

列表式

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

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

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

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

圖示式

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

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

幻燈片式

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

新聞名稱：幾種常見移動導航模式詳析
文章URL：http://jinyejixie.com/news0/167900.html

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

廣告

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