1、APP設計之四：導航設計2016UI設計（從基礎到精深）一、導航？What is the Tabbed navigation？也叫tab式導航，導航一般位于頁面底部，通常包含5個是比較合適的數量。這種導航是非常常見的，如果你的應用需要用戶頻繁的在不同分頁切換，可以采用這種導航。它的缺點是會占用一定高度的空間。如版的APP界面設計圖。大多數app都會選擇選項卡式導航，也叫導航，方便用戶在不同分頁里頻繁切換。原生android系統是不會使用這類導航形式的，因為沿襲了PC端網頁導航模式，所以用戶很容易上手。曾經嘗試在android使用非式導航，這也是一種向大多數用戶妥協的結果。總之來說，只有跟緊用戶

2、的使用和大眾的審美主流，才能推動應用產品不斷更新換代，更加適合用戶。PAGE 02導航 一、導航？What is the Tabbed navigation？導航PAGE 02一、導航？What is the Tabbed navigation？這種導航形式最常見，主要有上欄導航和下導航兩種形式。資訊類網易、購物類淘寶、即時通訊類等在全局導航上都是采用這種方式。PAGE 02一、導航？What is the Tabbed navigation？優點：1. 清楚當前所在的位置2. 輕松在各間頻繁跳轉且不會迷失方向3. 直接展現最重要的內容信息缺點：1. 功能過多時，該模式顯得笨重不實用2. 會占

3、用一定高度的顯示面積3. 不利于大屏幕進行單手切換操作PAGE 02一、導航？What is the Tabbed navigation？1. 底部tab導航：如果此時你觀察一下自己中常用的APP你就會發現、淘寶、美團、京東等全部都是底部tab式導航。這是符合拇指熱區操作的一種導航模式，那么拇指熱區呢？車上，一手拉扶手，當你走在、單手持握并操作;站在另一只手操作等等這些場景時，你最常用的操作就是右手單手持握并操作，因此，對于來說，為觸摸進行交互設計，主要針對的就是拇指。但在操作中，拇指的可控范圍有限，缺乏靈活度。尤其是在如今的大屏上，拇指的可控范圍還不到整個屏幕的三分之一主要集中在屏幕底部、與

4、拇指相對的另外一邊。當用右手持握的時候（左撇子畢竟是少數，熱區如下圖所示）還是要為主流用戶設計，拇指的PAGE 02一、導航？What is the Tabbed navigation？PAGE 02一、導航？What is the Tabbed navigation？要注意的是，下部欄的導航最多放置個，多于5個用戶難以記憶而且容易迷失；如果同時放置了上下兩個導航，如網易，則下部導航的層級要高于上部導航，即上部導航是作為二級導航，這個順序不能顛倒，此時上部導航的數量不受限制。上部除了點擊切換外還可通過手勢滑動切換，下部只能通過點擊切換。導航方式能夠讓用戶一眼就看出產品的功能，同時能夠方便的在幾

5、個之間快速切換。有些產品會針對中間的進行一些功能的變換，如的，喜馬拉雅則是作為底部的中間按鈕就是用來發布界面的快捷鍵。PAGE 02一、導航？What is the Tabbed navigation？隨著屏幕越來越大，內容顯示變多了，但是單手操作變難了。這也就是為什么，和導航條一般都在界面的下邊緣，而將導航放置在屏幕底部即拇指熱區，這樣的方式為單手持握時拇指操作帶來了更大的舒適性。將導航放置在屏幕底部也不僅僅關乎到拇指操作的舒適性，還關系到另一個問題：如果放在上面，用手指操作時，會擋住閱讀的視線。如果控件在底部，不管手怎么移動，至少不會擋住主要內容，從而給予清晰的視角。呈遞內容的屏幕在上方，

6、控制按鍵在下方。把一個需要按壓的home鍵放在底部比Android將三個觸摸式物理按鍵放在底部高明多了，這些接近屏幕邊緣的物理按鍵擠在一起，手指非常不便于操作。（甚至直接將3個物理按鍵放在了屏幕里），尤其是在玩的時候總會誤觸發這3個物理按鍵，造成無意退出，非常不爽。如果再將導航也放置在底部，只能對舒適性說拜拜了PAGE 02一、導航？What is the Tabbed navigation？PAGE 02一、導航？（下圖為Android和iOS圖）What is the Tabbed navigation？2. 頂部tab導航： Android的（虛擬）物理按鍵已經放在底部了，為了不產生堆疊

7、，很多 Android應用運用了頂部tab式導航，這是一種妥協下的行為。PAGE 02一、導航？What is the Tabbed navigation？而如今，在妥協物理按鍵和拇指操作舒適中，Android版拋棄了頂部導航的方式，和IOS保持了一致PAGE 02一、導航？What is the Tabbed navigation？當然頂部導航也不是那么一無是處，音樂和酷我音樂現在用的就是頂部Tab式導航，為了更好的瀏覽基本信息（歌手、歌曲名）、以及支持快捷操作（/暫停）器需要固定在底部,那么頂部tab導航不失為一個好選擇（如下圖）PAGE 02一、導航？What is the Tabbed

8、 navigation？還有騰訊聞這種和網易新類APP，由于內容、分類較多，運 用頂部和底部雙tab導航，而切換頻率最高的tab放 在頂部，這是為什么呢？因為在每個tab都是沉浸式閱讀，最常用的操作是在一個tab中不斷滑閱讀內容，將常用的tab放在頂部，加入手勢切換的操作，反倒能帶來更好地閱讀體驗。PAGE 02一、導航？What is the Tabbed navigation？3. 底部tab式導航的擴展形式：在有些情況下，簡單的底部tab式導航難以滿足的操作功能，這個時候就需要一些擴展形式來滿足需求。如和空間、都做了這種擴展，也因此給設計增加了一些個性化的亮點（如圖）PAGE 02一、導

9、航？What is the Tabbed navigation？在這些APP中，為了讓用戶更簡單的貢獻內容，突出了按鈕的設計，讓平淡的欄多了幾分趣味。導航總結：實際上，底部Tab模式導航在iOS和Android上一直是最安全的一種導航模式，他不怎么出彩，但是絕對不會犯錯。在大屏幕時代，底部 Tab模式的導航更能適應，也更好設計。適用于：分類數目不多，可以控制在5個以內，且用戶需要在間頻繁切換來執行多個任務需要注意：結構太過復雜而且不穩定的應用不適合式導航PAGE 02一、導航？What is the Tabbed navigation？小結：在兩種情況下可以選擇tab式導航1. 某項功能必須固

10、定在底部，那么其他tab只能固定在頂部，但為了方便操作，頂部tab導航最好支持手勢操作，即滑動即可切換。當然，點擊切換是最好的方式，2. 該APP是沉浸式體驗，如體驗，可以將tab放在頂部。、小說等，為了帶給用戶更好的閱讀PAGE 02一、宮格導航？What is the Scratchable latex navigation？即跳板式導航，這種導航模式非常常見，但是卻不常用。常見是因為，無論你用的是 Android還是iOS，每天一打開，宮格式導航就會蹦跶出來。PAGE 02宮格式導航一、宮格導航？What is the Scratchable latex navigation？宮格式導航

11、PAGE 02一、宮格導航？What is the Scratchable latex navigation？幾乎每一個APP都是一個宮格，這些宮格在中心頁面，用戶只能在中心頁面進入其中一個宮格，如果想要進入另一個宮格，必須要先回到中心頁面，再進入另一個宮格。每個宮格相互獨立，它們的信息間也沒有任何交集，無法跳轉互通。因為這種特質，宮格式導航被廣泛應用于各系統的中心頁面，這就是為什么說他常見。但是為什么不常用呢，大家可以翻一下里的APP，看看哪個APP的主導航用了宮格式導航？你可能只能找到一個最常用的，尤其是愛自拍的親們-美圖秀秀。PAGE 02一、宮格導航？What is the Scrat

12、chable latex navigation？PAGE 02一、宮格導航？What is the Scratchable latex navigation？經常使用美圖秀秀的人都會有一個共同的煩惱，例如拍了一張 需要美圖一下，那么心里認為的步驟是：進入美圖秀秀-打開一張-先祛斑祛痘、放大眼睛、瘦個臉-最后加上特效（自然/甜美可人/，系）-保存。但是美圖秀秀給的實際步驟卻是這樣的:進入美圖秀秀-打開一張-進入人像美容-祛斑祛痘、放大眼睛、瘦個臉-保存-再進入美化圖片-加個特效-再次保存。這樣做的結果是流程復雜，而且還多存了一張沒用的，還要到里進行刪除。這就是宮格式導航的缺陷，信息互斥，無法相互

13、通達，只能給用戶帶來了的操作步驟。PAGE 02一、宮格導航？What is the Scratchable latex navigation？優點：1、清晰展現各2、容易記住各位置，方便快速找到缺點：1、無法在多間靈活跳轉，不適合多任務操作2、容易形成更深的路徑3、不能直接展現4、不能顯示太多內容次級內容PAGE 02一、舵式導航？What is the The rudder type navigation？舵式導航是卡式導航的一種變體。中間的作為重要且操作頻繁的，一般都用圖形或者顏色凸顯出來。它的樣式很像輪船上用來指揮的船舵，兩側是其他操作按鈕。當頁面有處于同一層級的幾大部分內容，同時又需

14、要一個非常重要且頻繁操作的，就可以采用這種APP導航模式。當app存在比較多同級別的功能時，需要舵式導航，可以將部分相對不重要或者使用頻率不頻繁的功能隱藏掉，留下重要且使用頻繁的功能icon。PAGE 02舵式導航 一、舵式導航？What is the The rudder type navigation？PAGE 02一、舵式導航？What is the The rudder type navigation？1. 重要且操作頻繁的很顯眼。2. 較大限度的引導用戶進行操作。中間按鈕極其顯眼，按鈕周圍的倆個按鈕點擊率較低。對中間按鈕的設計要求比價高，需要有高度的設計美感，否則顯得不協調。PAGE

15、 02缺點優點一、旋轉木馬式導航？What is the The carousel type navigation？也叫輪播式導航，以及平鋪式導航，當應用程序信息足夠扁平時可以 嘗試輪播導航，如果應用得當，能夠給人耳目一新的體驗，這就是旋 轉木馬式導航，這種導航能夠較大程度保證應用頁面的簡潔性，得到 極為流暢的用戶體驗和直觀的流程，實現概覽和細節界面的無縫過渡。頁面式更換，適用于有少量頁面的導航，可以用來作為展示某些情況，如系列性產品。這種導航方式很容易帶來高大上的視覺體驗，最大程度的保證了頁面的簡潔性和內容的完整性，且一般都會結合滑動切換勢，操作起來也非常方便。PChouse是一個家居雜志的

16、APP，雜志休閑隨意的特質，非常適合平鋪式導航，最大限度的保持了的完整性。PAGE 02旋轉木馬式導航一、旋轉木馬式導航？What is the The carousel type navigation？PAGE 02一、旋轉木馬式導航？What is the The carousel type navigation？但缺點是用戶只能切換的相鄰頁面，很難跳轉到非相鄰的頁面，很容易迷失位置，因此平鋪式導航都會添加幾個小點來指示當 前位置。如墨跡天氣中切換城市的操作就運用了平鋪式導航， 優點是可以在一個頁面完整展示當前城市的情況，快速切換到 其他城市。但如果你設置的城市比較多，就很難快速定位到某

17、個城市，但所幸手勢操作切換方便，且正常情況下，用戶最多 只會設置2-3個頁面，不會造成太大的負擔。最多不要超過8個頁面。淘寶中的也使用了平鋪式導航，雖然有40個之多，但用數字表達出了明確位置的同時，也加入了手勢切換，增加了易用性和趣味性。PAGE 02一、旋轉木馬式導航？What is the The carousel type navigation？PAGE 02一、旋轉木馬式導航？What is the The carousel type navigation？單頁面內容，整體性強。線性的瀏覽方式有順暢感和方向感。不適合展示過多的頁面。不能跳躍性的查看間隔的頁面，只能按順序查看相鄰的頁面。

18、由于各頁面結構相似，容易忽略后面的內容。PAGE 02缺點優點一、旋轉木馬式導航？What is the The carousel type navigation？總結：輪播式導航比較適用于足夠扁平化的內容和隨意瀏覽的閱讀模式需要注意的是：無法跳轉至費相鄰頁面，如果間需要反復跳轉，則不適合這種模式該導航適用于一些小而美的應用，顯示全部的信息，輔助頁面是頁面的擴展或比較次要內容PAGE 02一、陳列式導航？What is the The display type navigation？即陳列館式導航，（特點）陳列式導航是通過直接在界面上顯示各個內容實現導航的。宮格導航活。的是規則或者不規則的網格

19、，陳列館式的布局則更加靈適用范圍：主要用于展示文章，菜譜，和產品等。PAGE 02陳列式導航一、陳列式導航？What is the The display type navigation？PAGE 02一、陳列式導航？What is the The display type navigation？PAGE 02一、陳列式導航？What is the The display type navigation？直觀展現各項內容。方便瀏覽經常更新的內容。1. 不適合展現頂層框架。容易形成界面內容過多，顯得雜亂。設計效果容易呆板。PAGE 02缺點優點一、列表式導航？What is the The Th

20、e list of navigation？列表式APP導航是在APP設計種必不可少的一個模式。當然作為一個APP的導航也是非常方便的，幾乎可以在所有的app中都能看到它的應用。不過目前來看，列表導航通常用于二級頁，由于它與宮格導航一樣，不會默認展示任何實質內容，所以通常app不會在首頁使用它。這種導航結構清晰，易于理解，冷靜高效，能夠幫助用戶快速的定位去到對應的頁面。列表項目可以通過間距、標題等進行分組。PAGE 02列表式導航一、列表式導航？What is the The The list of navigation？列表式APP導航是在APP設計種必不可少的一個信息承載模式。當然作為一個A

21、PP的導航也是非常方便的。不過目前來看，列表導航通常用于二級頁，由于它與宮格導航一樣，不會默認展示任何實質內容，所以通常app不會在首頁使用它。這種導航結構清晰，易于理解，冷靜高效，能夠幫助用戶快速的定位去到對應的頁面。列表項目可以通過間距、標題等進行分組。PAGE 02一、列表式導航？What is the The The list of navigation？PAGE 02一、列表式導航？What is the The The list of navigation？層次清晰。可展示內容較長的標題。可展示標題的次級內容。同級內容過多時，用戶瀏覽容易產生疲勞。排版靈活性不是很高。3. 只能通過

22、排列順序、顏色來區分各重要程度。PAGE 02缺點優點一、點聚式導航？What is the The Gathered at the potype navigation？點聚式導航，其交互方式以path為代表，設計規范android在material design定義了這種導航交互方式。希望原生android系統的它將多個功能聚匯到主界面中顯示，方便用戶呼出使用。由于點聚式占用空間小，所以它常出現在一些主要的流程界面中。一般 會融入一些動態的互動效果，讓導航更具趣味性。在漸漸的演變中，點聚式會搭載其他導航樣式出現（如式）。在設計過程中，按照實際需求，結合內容選擇最為合適的導航形式，切忌跟風或者

23、先從形式入手從而忽略導航菜單自身的特點。PAGE 02點聚式導航一、點聚式導航？What is the The Gathered at the potype navigation？PAGE 02一、點聚式導航？What is the The Gathered at the potype navigation？又叫懸浮icon導航，是將導航頁面分層，無論你到達app的哪個頁面，懸浮icon懸浮在上面，你依靠懸浮層隨時可以去想要去的地方。同時，為了讓懸浮icon不遮擋某個頁面的操作，通常懸浮icon都可以在屏幕邊緣移動。ios系統就運用了這種導航模式-Assistive Touch，Assisti

24、ve Touch是在ios5出現之后搭載的新的輔助功能，知乎上很多人吐槽這個懸浮方塊非常礙事還有很多人說這是因為home鍵質量不佳而且并沒有明確提出有效的解決方案，所以Assistive Touch是曲線，單說懸浮icon在大屏中部瀏覽，你想回幕時代發揮的作用，當你單手持握，拇指在到主屏幕，單手手指卻難以到達屏幕底部，懸浮方塊在這個時候就能為你提供快捷操作。PAGE 02一、點聚式導航？What is the The Gathered at the potype navigation？PAGE 02一、點聚式導航？What is the The Gathered at the potype n

25、avigation？而且你可以在AssistiveTouch里自定義頂層菜單，Assistive Touch從iOS5一直活到iOS9，不是一個雞肋的功能。在Android的Material Design中，同樣提出了懸浮icon的設計概念。PAGE 02一、點聚式導航？What is the The Gathered at the potype navigation？盡管現在很難看到懸浮icon作為導航的設計，但我相信隨著大屏的發展，懸浮式icon一定會越來越廣泛的使用.懸浮式icon是一個非常便捷的操作但需要注意的是:，也適應大屏幕時代。1. 懸浮式icon會遮擋某些頁面的操作，在設計的時

26、候應該考慮進去，比如無論在那個頁面為懸浮icon留有位置。2. 在某些信息層級繁多且復雜的APP，讓用戶決定是否需要調出懸浮式icon，或者讓用戶自定義菜單會更加符合用戶的心理預期。PAGE 02一、點聚式導航？What is the The Gathered at the potype navigation？1. 流暢的動畫使展示方式顯得更加有趣。2. 節省空間，避免了導航占用空間大。3. 具有更強的引導性，避免了抽屜導航引導性。1. 隱藏了框架中的內容。2. 對交互的功能可見性要求高。PAGE 02缺點優點一、瀑布式導航？What is the The waterfall type nav

27、igation？瀑布式，又稱瀑布流式布局，是一種比較流行的頁面布局。這種布局適用于小數據塊，每個模塊內容相近且沒有側重點，而且每個模塊之間的高度不一樣，視覺表現為參差不齊的多欄布局，通常，隨著頁面的向下滾動，這種布局還會不斷加載數據塊并附加到當前頁面。所以，給這種布局起了一個形象的名字，叫瀑布流式布局，目前大量運用在看圖類應用中。設計方案：的屏幕寬度有限，所以一般采用一欄或二欄布局形式。另外，每個模塊中的寬度是有固定值的，根據這個高度極限值拉伸或縮小，由于有的值，超過這個高度就截取中間部分。高度非常高， 一個極限PAGE 02瀑布式導航一、瀑布式導航？What is the The waterfall type navigation？適用場景：多圖：基本上不做為頂級導航，的是多圖內容。PAGE 02一、瀑布式