雖說一款應用的生死不是由導航決定,但毋庸置疑,導航模式的選擇在產品使用者體驗上佔有很大的比重。就導航本身來說,沒有優劣之分,端看你的應用適合哪種。下面是我羅列的一些常見的移動導航模式,接下來會對其一一舉例說明(注:重要模式會重點分析,其餘簡略,篇幅略長,不喜可跳過)
1、標籤式
標籤式導航是ios平臺上公認的最經典的導航模式,看市場上幾乎有80%的應用都在使用就能知道。標籤式導航關注的是平行空間的展示,它的優點是適用於多個內容體系,且重要程度相似(平級關係),能頻繁在不同頁面間切換,切換成本底,只需一次點選;缺點是佔用一定高度空間,且標籤數量有限,最多5個標籤。
下圖中圖1-淘寶,是標籤式導航的標準使用形式,每個標籤作為一個導航分類放在標籤欄中(注意都是名詞)。圖2和圖3可以算是標準形式的變形(還有其他變形形式,後面再講),雖然也是有5個標籤,但處於中間位置的標籤不是作為導航使用,而是一個行為召喚按鈕。行為召喚按鈕主要強調某項重要功能的快捷使用,該功能需要是應用最核心且最常用的功能,優先順序很高。比如圖2的instagram,它的目標是以一種快速、美妙和有趣的方式將你隨時抓拍下的圖片分享出來,它關注的是能隨時隨地抓拍。因此,作為行為召喚按鈕的“拍照”放在標籤欄上就很有必要。
但是,有些應用對於行為召喚按鈕的放置並不合理。如下圖的圖3-簡書,雖然文章的撰寫是簡書的核心功能,將其作為標籤欄中的一個按鈕,即能在視覺上凸現出來,又能減少操作負荷,似乎很棒。但卻忽略了一個重要的問題,從使用環境來說,文章或者文件的撰寫是需要在安靜且能集中注意力的環境下,但移動app天然具有干擾多且注意力不集中的問題。而且在手機上輸入上百字也是一件痛苦的事。對於這款產品的手機使用者來說,可能使用者對內容的消費比對執行動作更重要。
另外,還有一種常見的標籤式導航的變種,即傳統的標籤式+點聚式。這裡先專門講一下點聚式,最為我們所熟知的點聚式就是曾經經典的path結構,即抽屜導航+點聚式,如下圖所示—改版前圖示,它的目的是將使用者最頻繁使用的多個核心功能點匯聚在主介面中顯示,方便使用者隨時撥出使用。只是,如今單獨使用點聚式的應用越來越少,就連path也對這種傳統的點聚式進行了調整,變成了依附於標籤的點聚式結構,如下圖中的path改版後。還有下圖中的樣式1和樣式2,也是這種形式的不同展現。他們的共同點是,使用同一個導航入口,進行多個同級功能的不同操作,大部分都是2-5個不同的操作選項,當然也會有更多,比如下圖中的新浪微博,點選“加號”入口,出現了更多的功能選項,且這些功能的優先順序相若。
其實,在Android 5.0中,這種點聚式更常用的表現形式是懸浮響應按鈕,它代表的是這個app中最主要的操作。只是就目前來講使用場景有限,實際應用並不理想。
二、抽屜式
抽屜式導航的目的是帶給使用者更為沉浸的體驗。它的特點是,“閱讀”為王,點選切換少,專注於主體資訊本身。從表現形態來看,抽屜導航很符合產品的二八法則,即產品中只有20%的功能常用,所以要突顯,剩下的80%不常用,因此隱藏。它不像標籤導航一樣強調平級關係的切換,而是突出重要且核心的功能。抽屜導航的另一些優點是,側邊導航收納的導航標籤可以是5個以上,節省螢幕空間。缺點是無法快速完成導航切換,操作成本高。
關於抽屜導航,在Android和ios平臺的使用也有區別,可以看我的另一篇文章《關於Android和IOS互動上那些事》,此處就不做贅述。抽屜導航在Android平臺上比ios更常使用。由於在ios上,抽屜導航沒有專門的設計規範,所以使用上較為隨意,表現形式也不受拘泥。
如果以抽屜導航和主頁在空間位置為評判依據,其在風格上主要有3種表現,第一種是浮層,即導航抽屜處於主頁上層,通過滑動或點選的手勢開啟抽屜,抽屜部分遮擋或覆蓋原來頁面的內容,如下圖中圖4,這種風格多數會在Android上出現。第二種是疊加式,即導航抽屜位於主頁的底部,開啟抽屜,原來的主頁會向螢幕右側滑動,顯出主頁下方的導航抽屜,如下圖中圖5,這種風格在ios上很普遍。第三種是嵌入層,即導航抽屜和主頁處於同一層,通過輕滑、平移或點選開啟抽屜,把原先的頁面內容部分推出螢幕外,如下圖中圖6(注意導航和主頁銜接處無陰影)。而第三種風格經常會有如下圖圖7的變形,就是說在開啟側邊抽屜的時候,嵌入式抽屜不僅把上一級頁面向右推開,還採用3D效果將其推到後面。瞭解不同風格可在設計時斟酌使用。
三、選項卡式
對於選項卡導航,不同平臺有不同的設計規則,關於Android平臺我就不多說了,請移步至《關於Android和IOS互動上那些事》有詳細說明。今天主要說說ios上選項卡的表現,選項卡的本質即是,實現容器內不同檢視或內容的切換。雖然對於選項卡本身,ios沒有專門的規範約束,但這並不妨礙廣大設計者們自由發揮。目前市場上主要有3種形式的選項卡:分段選項卡、固定選項卡和滑動選項卡。
分段選項卡:是由兩個或兩個以上寬度相同的分段組成,正常情況下不超過4個,視覺上會有一個很明顯的描邊按鈕。分段選項卡經常會作為二級導航,對主導航內容再次分類,可以在頂部導航欄的下方,也可以直接放在導航欄上,如下圖所示。標籤之間互相關聯,只能點選切換,操作效率較低。
另外,就是固定選項卡和滑動選項卡,兩者都可以直接點選或左右滑動切換選項,且一級和二級導航都能使用。區別就是滑動選項卡可以有更多選項,且能直接通過手指滑動導航找分類,適用於相關類別多的應用,如下圖的電子商務網站。
四、下拉選單式
現如今,下拉選單式導航並不常用。下拉選單和導航抽屜一樣,是以突出內容為主的導航模式,一般位於產品頂部,通過點選撥出導航選單。由於導航選單位於螢幕頂部,不適合結合手勢,操作負荷大,因此不適合需要頻繁切換功能,且能在一定程度上節省螢幕空間。一般情況下,下拉選單很容易被滑動選項卡取代,且滑動選項卡可以結合手勢操作,使用效率更高,這也是現在下拉選單很少被使用的原因,除非你的下拉選單選項中有很明顯的優先順序區分。比如下圖所示,圖8的新浪微博首頁作為預設選中項,顯示和使用者相關的所有微博,常態下使用者只需要一直瀏覽下去即可,很少需要主動點選切換,除非想要篩選某些特定的微博內容,此處的內容優先順序很容易區分。同理,圖9也是如此,使用者關注更多且更感興趣的是以專案為維度的內容分組,因此用下拉選單來表現。另外,多數選單是以點選後彈框的形式出現,也有一些是從底部滑出一個新的頁面調出選單,如下圖中的圖10。
五、宮格式
宮格式導航,是一種類似於手機桌面各個應用入口的導航方式。每個入口往往是比較獨立的資訊內容,使用者進入一個入口後,只處理與此入口相關的內容,如果要跳轉至其他入口,必須要先回到入口總介面。這種導航經常用於工具類app中,它的優點是功能擴充性強,可增加多個入口。缺點是單頁承載資訊能力弱,層級深,不適合頻繁任務切換。如下圖的美顏相機就是標準的宮格式結構,每個功能類似於獨立的app,且作為一級導航使用,這種表現形式現在越來越少。而剩下的其他三張圖示,屬於宮格式的一種變形,我稱之為資料入口,這種只作為各種大資料入口的導航模式現在更多作為二級導航使用,特別是平臺類產品。
六、列表式
列表式導航也是一種十分常見的導航模式,純粹的列表導航很少見,一般都是搭配著別的導航模式一起使用,大多作為二級導航。列表中可以放置圖片、標題或者詳情文字等來展示資訊,列表本身是一個傳達資訊效率很高的載體,因此使用列表的時候要注意,每個列表所佔的螢幕空間,以及每屏能顯示多少條列表等。如下圖所示的圖1-1採用了列表的分組模式,圖2-2中列表中的每項資訊可能都會影響使用者的點選轉化,所以如這種形式的列表,細節資訊很重要。圖1-3和圖1-4為二級列表,點選列表右側的小符號,可以展開或者隱藏資訊,這方便使用者查詢資訊並快速定位,多數情況下,點選右側小符號可能會出現快捷編輯模式或者部分詳情資訊,便於使用者直接編輯或者瀏覽。而點選整個列表,通常會進入新一級的詳情頁面。因此,設計師在設計的時候要注意。
七、圖示式
圖示式是一種更加視覺化的導航,它能根據頁面內容的變化及時更新圖片,適合以圖片為主的內容,像新聞、美食、旅行、視訊圖片等經常使用,常作為二級導航。由於圖片可能需要經常更新,因此需要配置固定的欄目或標題,防止不斷更新的圖片讓使用者找不到入口。這種形式的導航常常會採用網格佈局,如下圖所示,每行基本上會有1-3個圖示單位,不同的網格佈局決定了每屏容納的圖示個數,因此使用者瀏覽效率及點選轉化率也會有所不同。
八、幻燈片式
幻燈片的導航方式,適用於圖片或整塊內容的並列展示,使用者通過手指左右滑動來切換當前內容。正常情況下,幻燈片的數量不宜太多,最好控制在7-8個以內,避免使用者操作疲勞。如下圖所示,使用幻燈片設計最好在設計上提供視覺暗示,讓使用者清楚的知道所處的位置以及幻燈片數量,例如新增分頁標識碼,或者隱喻還有下一張圖片等。