app怎麼設計導航欄

1. APP常用8種導航形式

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

1、標簽式

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

淘寶，是標簽式導航的標准使用形式，每個標簽作為一個導航分類放在標簽欄中（注意都是名詞）。可以算是標准形式的變形（還有其他變形形式，後面再講），雖然也是有5個標簽，但處於中間位置的標簽不是作為導航使用，而是一個行為召喚按鈕。行為召喚按鈕主要強調某項重要功能的快捷使用，該功能需要是應用最核心且最常用的功能，優先順序很高。比如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個以內，避免用戶操作疲勞。如下圖所示，使用幻燈片設計最好在設計上提供視覺暗示，讓用戶清楚的知道所處的位置以及幻燈片數量，例如添加分頁標識碼，或者隱喻還有下一張圖片等。

2. 移動開發中導航欄和搜索欄在設計中應該注意哪些問題

一、導航欄位置
在iOS上，導航欄是指顯示在應用程序頂部，位於狀態欄下方的容器區域，層級應高於當前頁面內容。在安卓上，Google公司在Material Design中也賦予了它同樣的定義，但是卻給了它另一個名稱，頂部應用欄（ Top App Bar）。
導航欄是用於構架當前屏幕的內容，闡述當前屏幕的狀態，並且起到連接父子級頁面層次結構的作用。很多人疑惑，為什麼標簽欄不能叫做底部導航？因為標簽欄是構架了多個屏幕之間平級頁面的內容切換，和導航的定義沒有任何關聯。
二、導航欄UI設計規范與實際項目的應用
基本的導航欄容器一般承載的信息可能會有：標題；導航按鈕；內容控制項按鈕；其他控制項（比如搜索欄、分頁標簽或分頁控制項等）；千萬別忘了還有分割線。

1、導航欄標題設計規范
2017年以前的移動端規范下的導航欄還是循規蹈矩的，樣式單一。但隨著iPhone X等一系列全面屏手機相繼問世後，移動設備在屏幕高度上有了進一步的擴展，界面設計在一屏內的發揮空間也隨之增加。iOS11發布後，大標題導航欄設計風格興起，隨後被引入平台規范。
於是現在iOS與Material Design在導航欄上也都定義了兩種導航欄標題規范：常規標題與大標題。

常規標題是指在高度為88px（iOS@2x下）的導航容器中，居中放置一個當前頁面的標題。標題字型大小一般為34px-38px（34px為iOS標准規范，但實際項目中可以在盡量在不小於34px標準的情況下根據設計需求確定）。

大標題是將導航欄欄高增加到192px（iOS@2x），保留高度為88px的導航容器來承載內容控制項按鈕，將標題下墜居左。iOS的標准規范定義大標題的字型大小為68px。但由於英文有大小寫區分，在視覺上有一定的層次表現，而中文因為缺少一定的層次結構，並且相同字型大小的中文視覺大小大於英文，所以大多數時候我們在進行大標題設計時，會適當縮小，一般為56px-64px居多。

大標題導航欄的優點毋庸置疑，頁面留白更多，呼吸感更強，大氣現代、更高，因為頁面標題巨大，能夠幫助用戶快速確認當前所處位置；採用統一的大標題，讓頁面布局風格快速統一。但缺點也顯而易見，因為增加了導航欄的高度，導致屏幕利用率降低，一些通過廣告變現或更加註重一屏內內容呈現的應用便中和了常規導航與大標題導航的優缺點，進行了風格改進。

2、導航按鈕及內容控制項按鈕設計規范
iOS規定導航按鈕位置僅能用於放置返回按鈕，可以添加一個層級的麵包屑，幫助用戶有效地明確當前頁面層級；Material Design中，則不僅可以放置返回按鈕，還另有作用，菜單圖標-用於打開導航抽屜 或者 關閉圖標-關閉工具欄。

與iOS的定義有著天壤之別，iOS非常明確地賦予了工具欄的定義，並且將導航欄和工具欄（Toolbars）徹底地分離開，典型案例就是Safari。在內容控制項上iOS與Material Design也大相徑庭，Material Design不去限制你的內容控制項多少，因為它提供了溢出菜單，並可以根據屏寬的變化，自適應釋出和收納溢出菜單中的控制項。

而iOS則規定我們，要給內容控制項按鈕足夠多的空間，必要的時候，隱藏導航欄標題也未嘗不可。真實的項目中我們經常為了快速落地，會存在一稿適配雙平台的情況。這時候我們應該遵從哪一個平台的規范呢？答案是：許多大廠的做法已經向我們驗證，規范不分家。

在iOS諸多的應用中溢出菜單早已普及，盡管這是Material Design提出的設計理念。雖然國內遵從Material Design進行Android應用設計的情況相對較少，但它提供的設計理念與方案卻並不局限在安卓平台。

3、分割線設計規范
分割線只是一種體現形式，我想要表達的是，別忘記區分導航欄與內容界面的視覺層級關系。Matetial Design提醒我們，頂部應用欄可以與內容位於同一高度，但滾動時，請增加導航欄的視覺高度，讓內容在其後方滾動。而iOS則默認採用了背景模糊的方式區分了導航欄與內容區域的層級關系。

4、其他控制項
關於其他控制項，iOS只在規范中提及到了分頁控制項。蘋果設計師考慮到部分場景在當前頁面中還存在信息層級結構劃分，此時建議可以在導航欄中使用分段控制項。
國內的應用程序早已將導航欄容器的作用發揮到極致，基於導航欄層級始終高於內容區域的特性，我們通常可以將分段控制項、分頁標簽、搜索欄等等用戶可能隨時使用的工具放在導航欄中。

導航欄用於構架當前屏幕的內容，闡述當前屏幕的狀態，並且起到連接父子級頁面層次結構的作用，在一個頁面發揮著重要作用，設計好導航欄不僅僅是視覺上的工作，表現的方式、承載的按鈕與組件、滾屏時的組合操作還能給用戶帶來極大的體驗增益。因此掌握好導航欄的設計技巧對一名設計師來說尤為重要！

搜索框

在視覺上以下兩點比較需要注意：

1、放大鏡圖標

使用圖標。我不想對其會增加找到搜索欄的速度進行強調。越簡單越好。越少的細節能夠保證用戶能快速地掃視它。雖然，只有一個圖標本身而沒有一個可輸入的容器或按鈕實際上會使搜索變得更加困難。人們通常會意識到，一個放大鏡圖標顯示的是一個搜索工具，即使它沒有標簽。但是糟糕的是，只有一個圖標則會使搜索更加困難。

2、一個真實的搜索按鈕

並非每個人都是學會在網上沖浪的千禧一代，這意味著，並不是每個人都知曉在他們輸入查詢之後需要按下Enter鍵。在搜索輸入旁邊添加一個實際的按鈕將幫助用戶確認他們的下一步行動，進而減少用戶所需的認知負荷。

輸入特色：

確保可輸入的長度不會太短。諾曼集團的相關研究表明，一個能輸入27個字元的輸入框，可以滿足90%的用戶需求。

添加佔位符可以幫助過濾用戶查詢行為

3. 產品筆記一：使用axure8.1製作手機app底部導航欄效果

使用工具：Axure pr 8.1版本。
製作效果如下圖：選中任意tab切換到對應界面，以及選中狀態的改變。

作為一名初學者，元件的組合選中以及拖動，動態面板的使用，中間還是有幾個細節需要注意的，筆者初學自己研究了好久，網路並沒有用，也許是關鍵詞不合適，總找不到合適的答案。好，廢話不多說，下面開始操作步驟。

1.1、創建導航欄母版，axure界面左側底部母版欄，點擊加號創建一個母版並命名。
1.2、雙擊母版，進入母版編輯頁面。在這里進行那些拖動等操作啦。

2.1、我們觀察到導航欄總共5個tab組成，每個tab里有兩個元素一張圖片，一個文本標簽。但是為了可以方便的設置寬高調整距離均分屏幕並且組合拖動設置點擊狀態等，我們將圖片和文本放到一個矩形框里。

2.2、拖動一個矩形到界面上，拖動一張圖片原件，一個文本標簽元件。如下圖，調整大小樣式等。

2.3、要想整體拖動這三個元件，那麼就要將這三個元件組合在一起。按住command鍵（我用的mac），選中矩形，圖片，文本標簽 右鍵-->點擊組合，即可將是哪個元件組合在一起。

2.4、點擊組合元件右鍵-->轉換為動態面板。雙擊它，會彈出下面的彈窗，輸入動態面板名稱。添加狀態：選中以及未選中兩個狀態。你可以先添加選中，然後雙擊選中狀態進入編輯選中狀態頁面，添加選中時的圖片，文字以及文字顏色等。然後回到動態面板點擊加號旁邊的復制可以復制選中的狀態，並命名為未選中，雙擊未選中去修改里邊的圖片以及文字顏色等即可。這樣間距之類的就不用去重復設置了。

2.5、其他四個tab只要復制第一個創建編輯好的動態面板去修改里邊的狀態的圖片和文字就好了，就不用重復創建了。

2.6、拖動到底部導航欄矩形內部調整好間距均分屏幕。

3.1、給每個tab點擊時要進入對應的頁面，那麼我們在下圖中添加5個對應的頁面。

3.2、選中第一個tab，在左側首頁屬性，點擊滑鼠單擊時。如下圖：

點擊鏈接，打開鏈接，當前窗口，點擊首頁，確定。

3.4、至此底部導航欄母版製作完畢。然後最後一步，將母版應用在各個頁面上。點擊右側底部導航欄，右鍵-->選擇將母版添加到頁面中。選擇全部全部頁面即可。

點擊首頁Tab，選中首頁時，其他tab的狀態需要變成未選中。這個是如何改變呢？通過頁面載入時，設置各個tab的狀態
4.1、比如點擊找車頁面，右側屬性，點擊頁面載入時。如下圖：

4.2、雙擊頁面載入時，彈窗，選擇設置面板狀態，找車選擇選中狀態，其他選擇未選中狀態。其他tab相同設置。如下圖：

至此，所有步驟完成。

發布預覽一下就可以了。

4. 怎樣設置導航欄

一般是：設置——全部設置——導航欄，當然可能不同的手機型號，設置方法不同。僅供參考。而涉及導航欄的具體步驟如下面的表格會寫得很具體。

在屏幕上找到如圖所示紅色方框標記的「設置」選項，點擊進如設置界面。
點擊選擇下圖所示紅色方框標記的「導航欄」選項。
我們可以看到下圖所示目前「導航欄可隱藏」選項是關閉的。
點擊打開紅色方框標記的「導航欄可隱藏」選項後，我們可以看到如圖下方紅色標記的位置多了一個向下的「箭頭」，這個「箭頭」就是可以隱藏導航欄的選項。點擊這個「箭頭後」導航欄便會消失。
如下圖所示，點擊「箭頭」後，導航欄已經在屏幕界面中消失了。如果再想導航欄出現，只需要拇指從屏幕最下方往上滑動一小段距離即可。
導航欄幾個按鍵的位置還是可以調換的，如下圖所示我們選中的導航欄按鍵分布已經和前面圖片上顯示的不一樣了。

5. uniapp中自定義頭部導航欄設置和使用注意事項

uniapp中自定義頭部導航欄設置，去掉官方默認導航

<viewclass="status_bar">
    <!-- 這里是狀態欄 -->
</view>

/* 自定義狀態欄 */

.status_bar{

height:var(--status-bar-height);

width:100%;

}

6. Android 將App的內容延伸到狀態欄/導航欄

來自我的CSDN博客： http://blog.csdn.net/dahaohan/article/details/52175190

看過Android的桌面應用都是介樣的：

如何讓自己的應用也達到這般效果呢？這里就介紹幾種常用的方法以及它們之間的區別。

首先展示下此次demo的布局和初始狀態：

初始效果圖如下：

使用這個方式首先要理解幾個概念，窗口層級以及窗口background/窗口透明：
Google在API-19 以及API-21新增對狀態欄/導航欄窗口透明和顏色的控制：

對應的在主題內即可控制：

這里首先要明了這里狀態欄和導航欄窗口是系統級窗口而Activity對應的時應用窗口，它們屬於不同的窗口層級；
然後狀態欄/導航欄系統級窗口是在App應用窗口之上，故而Activity應用窗口雖然有整個屏幕的大小，但是可顯示內容的區域得除去其上疊加的不透明的窗口區域。詳細的窗口計算繪制可參考大神老羅的博文：
Android窗口管理服務WindowManagerService計算Activity窗口大小的過程分析

下面來使用主題控制導航欄/狀態欄透明，同時看看上述兩種設置透明的方式效果有何不同：

初始桌面和啟動Activity效果圖：

可以看到雖然導航欄/狀態欄透明了，當時應用窗口顯示的內容依然只是除去了兩個系統窗口之外的區域，並沒有衍生到導航欄/狀態欄之下。

效果如下：

可以看到已經將應用的內容布局延伸到導航欄/狀態欄下方了，來看看關於android:windowTranslucentStatus
android:windowTranslucentNavigation的官方說明看看來理解其與設置color transparent的區別：

根據FLAG的說明，可以看出設置該標志位等同於View申請設置：

PS：從效果圖看，雖然布局延伸到狀態欄導航欄區域，但是相應的內容「hello world」文字也被狀態欄/導航欄遮住了。在布局根視圖設置fitsSystemWindows為true可以使得，系統自動為視圖添加一個狀態欄/導航欄高度的padding：

效果如下：

查看SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION 和 SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN的說明，可以發現其實還有兩個非常接近的FLAG：

根據官方的說明提示，SYSTEM_UI_FLAG_FULLSCREEN / SYSTEM_UI_FLAG_HIDE_NAVIGATION主要用於動態切換隱藏/顯示系統導航欄/狀態欄；例如書籍閱讀應用/視頻播放應用等。而像游戲類的全屏應用則推薦使用window flag。

上述的透明導航欄/狀態欄等API基本是需要API-19或是API-21才能使用的，這里還有一種API-1的方案能夠實現布局內容全屏：

實際上只需要設置FLAG_LAYOUT_NO_LIMITS就足夠了；這FLAG是看Android原生的Launcher / Keyguard源碼，看到有用到如此設置，其窗口設置具體原理我也沒有弄清..... 有大神了解可以指點下。

PS：這個套路下，使用fitsSystemWindows="true"是無效的，智能自己控制號布局位置。

7. APP設計中狀態欄導航欄這些需要自己去畫嗎

第一步：PS文檔的建立。

據到今天為止，iphone手機常用的有iphone4、iphone5、iphone6和iphone6 plus系列。

25學堂跟大家講解的APP設計流程的界面尺寸是iphone6 的尺寸 【全部的APP設計尺寸】

尺寸大小：750*1334

iphone6 目前是我做設計稿的設計尺寸，IPhone6的尺寸，向下可以適配4，5，向上可以適配6 plus；我記得IP6推出後，我問我的設計總監(從業12年)應該用什麼尺寸設計，他是就用IP6的尺寸吧，好適配，切出來就是@2x了，上下都能照顧到。如下圖：

APP畫布的建立

第二步：APP首頁的繪制和構建

一個完整的APP界麵包括狀態欄、導航欄、內容視圖和標簽欄。

文檔建立之初就設置好參考線是個很好的工作習慣，我希望更多的設計師可以養成更完美的工作習慣。

上下的參考線很容易設置，因為是根據IPhone自身系統設置的，左右的參考線我習慣設置為24px，也就是顯示內容距離邊框的距離。通過對國內國外各種APP的對比，覺得24px更適合一些，不寬不窄，這個完全是設計師個人的設計習慣，所以不要當成什麼規范，確切的說，整個屏幕你都可以隨便做，但是我們這里說的是正常頁面。

APP首頁設計稿

上圖當中的首頁視圖區域是設計師自由發揮的區域。這里25學堂繪制了一個banner區域、主題導航區域和其他區域三個部分。

在第一屏幕有限空間裡面 25學堂的老譚同學建議大家放置3到3.5個重要的欄目即可。

操作系統的規范課外閱讀：在ios系統當中總共包含7個欄：點擊查看詳細的解讀

ios UI控制項

（1）狀態欄如何來繪制：

一般新手設計師要去繪制它，其實不用了。為了教大家快速上手設計APP界面。

直接可以挪用設計大神們已經設計好的狀態欄。比如從APP設計模板當中去獲取。

8. 抖音底部導航欄怎麼設置

抖音底部導航欄設置辦法：抖音的位置設置，點擊進入到抖音的設置選項，在位置設置中關閉當前手機自定義的位置信息，或者是直接選擇手動輸入的方式來確定位置。

在手機上打開抖音APP軟體，進入主頁，然後點擊界面底部的「+」圖標。點擊「+」圖標後會出現拍攝界面，我們點擊該界面底部的紅色按鈕來錄制一段視頻。錄制到視頻後會出現「√」和「X」選項。

GPRS設置：

1.進入主菜單後，選擇：手機設定→連接→互聯網設定→互聯網模式→添加模式，以添加新的連接方式。

2.之後系統將會提示選擇使用哪個數據帳戶，如果機身上已經預設有的話，直接選擇數據帳戶就可以了；如果機身沒有預設或者是不確定是否正確的話，則需要新建一個數據帳戶。

在新建帳戶時，帳戶名稱可以隨意填寫、帳戶類型則選擇GPRS數據、接著在「APN」欄中填上「cmwap」就可以了，用戶名及密碼這兩項不需要去管他。

9. 移動APP的常見的幾種導航形式

當確定了APP的設計需求和產品的整體結構之後，要著手開始規劃和製作APP的原型及UI界面。一款APP的好與不好，很大部分取決於APP界面布局的合理性。這個時候就要想以最優的設計結構將APP的內容展現給用戶，那麼，如何將信息以最優的形式展現出來呢？這就涉及到了APP的導航應用方式，可以說一個優秀的導航設計對一款App的核心體驗起到了決定性的作用！

知道了導航的重要性，在考慮導航設計時，需要注意以下事項：

1.可達性：

移動應用的導航功能可以說是所有界面最重要的組成部分，因此一定要保證其可達性，並把最關鍵的要素盡量突出，同時不要影響到內容本身。

2.目的性：

確保導航中的每個按鈕要素簡單明了，有明確的引導用戶點擊的目的性。讓用戶一看就知道是什麼意思以及操作結果是什。不要弄的太過花哨，這樣反而會讓迷惑用戶，起到反作用。

3.易於理解：

如果想設計比較高級的導航功能（例如鏈接圖片、允許滑動或其他手勢導航，或者訪問隱藏菜單），請務必在設計過程中保證前後一致，以便用戶熟悉你所使用的模式，同時還應加入一些額外的信息（例如小箭頭、文字或改變顏色或高亮等）來吸引用戶注意力，並以微妙的方式對用戶進行引導。不要給用戶呈上「看得見摸不著的導航功能」。

4.通用性

導航功能應當以一定的形式顯示於移動應用的各個界面。各個導航模式不一定要完全相同，但其基本結構應當在應用內保持一致，可以根據背景進行小幅度的調整。

明確上述幾點注意事項後，將APP的信息結構分層，把主要、最核心、最根本的功能放在第一層級，次要內容放在第二層級甚至更深。然後根據層級關系、結構關系確定導航的形式。

結合產品的深度和廣度來共同探討一下目前APP界面常見的幾種導航形式，並分析其優缺點，從而進一步判斷每一種導航形式更適合應用於哪種類型的APP！

標簽式導航，也就是常說的Tab式導航。是目前應用最廣泛、最常見的導航形式。

標簽式導航可分為 頂部標簽式導航、底部標簽式、舵式導航（底部擴展式導航）。

頂部標簽式導航

頂部標簽式導航顧名思義，存在於頁面的頂部。頂部標簽導航多應用於Android平台，因其平台特性，底部含有虛擬的物理按鍵，如華為手機存在手機屏幕內的物理按鍵。

很多App為了適配安卓平台，採用了頂部標簽式導航，目的是為了不與底部虛擬按鈕組合在一起產生的信息堆疊和誤操作，這也是一種妥協行為。但不斷升級的Android平台app現如今也和ios盡量保持一致。

不過也有很多ios平台根據產品結構應用此類型的導航。

上圖是蝦米音樂app首頁導航模式，採用了頂部標簽式導航。這樣設計是為了 更多展示標簽下的內容，還有一點是支持快捷操作 。方便展示/點擊下方快捷區域的內容和按鈕（當前曲目、歌手、播放/暫停和下一曲）。

底部標簽式導航

底部標簽式導航是最常用的導航形式，一般存在於頁面底端，不超過5個模塊。

如果應用需要用戶 頻繁的在不同分頁切換 ，可以採用這種導航，如上圖微信最新版的APP界面設計圖。這種導航欄符合拇指操作熱區。

舵式導航（底部擴展式導航）

舵式導航是底部導航的一種擴展形式，是一種變體。因為它的樣式很像輪船上用來指揮的船舵，兩側是其他操作按鈕。

當頁面有處於同一層級的幾大部分內容，同時又需要一個非常重要且頻繁操作的入口 ，就可以採用這種APP導航模式。 中間項標簽不緊操作最頻繁，最重要，且需要引人注意，方便尋找 。

左圖為懶人聽書App，右圖為新浪微博手機客戶端。兩款App的主要功能都採用了舵式導航的布局方式，將操作最頻繁的按鈕進行特殊處理，在視覺設計上突出，與導航上的其他按鈕進行區分，引導用戶操作。

頂部導航+底部導航（雙導航模式）

今日頭條和網易新聞這種新聞類APP，由於內容、分類較多，運用頂部和底部雙tab導航，而切換頻率最高的tab放在頂部，這是為什麼呢？因為新聞在每個tab都是沉浸式閱讀，最常用的操作是在一個tab中不斷地下滑閱讀內容，將常用的tab放在頂部，向左或向右滑動切換tab的手勢操作，能帶來更好地閱讀體驗。

在兩種情況下可以選擇頂部tab式導航：某項功能必須固定在底部，那麼其他tab只能固定在頂部，但為了方便操作，頂部tab導航最好支持手勢操作，即滑動即可切換;該APP是沉浸式體驗，如新聞、小說等，為了帶給用戶更好的閱讀體驗，可以將tab放在頂部。

實際上，底部Tab模式導航在iOS和Android上一直是最安全的一種導航模式，他不怎麼出彩，但是絕對不會犯錯。在大屏幕時代，底部Tab模式的導航更能適應，也更好設計。

適用於：

入口分類數目不多，可以控制在5個以內，且用戶需要在入口間頻繁切換來執行多個任務

注意：

結構太過復雜而且不穩定的應用不適合標簽式導航。

抽屜式導航模式一般採用將導航主體隱藏在app側邊的方式，以一個按鈕來呼出導航，在使用完成之後在使用相同的按鈕隱藏起來。一拉一縮，從形象上與抽屜類似，因此稱之為抽屜式導航。

抽屜式導航的核心思路是「隱藏」。隱藏非核心的操作與功能，讓用戶更專注於核心的功能操作上去。 設想你的產品信息層級有非常多的頁面和內容，難以在一屏內顯示全部內容，那麼你一定首先會想到去設計一個底部或頂部的tab導航，但導航太多無疑顯得臃腫，而且使用戶難以點擊，那麼這個時候，抽屜式導航是個不錯的選擇。

抽屜式導航存在幾個缺陷：

1.左上角的導按鈕存在於單手拇指操作熱區難以到達的位置，導致導航按鈕難以觸達；2.降低了用戶對產品一半的參與度；3.可見性低。

有些人認為「現在的APP的發展不僅僅是從前單一的功能，功能隨產品的發展變得越來愈多，抽屜式導航已經不適應大多數的產品，這種導航終將被遺棄」。但是，導航欄的使用方式並不是單純隨著看產品的功能增加而不被使用，而是隨著整個產品的信息結構和功能形式來設計決定的。拋開產品的功能表現而去講產品設計是不合理的。

何種情況下適合使用抽屜式導航：

1.如果應用主要的功能和內容都在一個頁面裡面。只是一些低頻操作內容需要顯示在其他頁面里。為了讓主頁面看上去干凈美觀，可以把這些輔助功能放在抽屜欄里。

2.如果應用有不同的視圖，且他們是平級的，需要用戶同等地對待，抽屜欄將會浪費掉大多數的用戶對於側邊欄中入口的潛在參與度和交互程度。

3.在大屏時代使用抽屜欄，手勢操作顯得尤為重要，從屏幕邊緣喚出抽屜欄是個不錯的選擇。

注意：

需要用戶有一定參與的信息層級，最好不好放置在抽屜欄

跳板／快速啟動／宮格導航是將主要入口全部聚合在頁面，讓用戶做出選擇。

採用這種導航的應用已經越來越少， 往往用在二級頁作為內容列表的一種圖形化形式呈現，或是作為一系列工具入口的聚合。 如下圖新浪微博，點擊導航欄中間的發布按鈕，彈出二級菜單，這個二級頁面就是採用的宮格式導航，作為發布微博的入口。

這種導航模式非常常見，但是卻不常用。

無論你用的是Android還是iOS，每天一打開手機，宮格式導航就會對你說hello了。

每一個APP都是一個宮格，這些宮格聚集在中心頁面，用戶只能在中心頁面進入其中一個宮格，如果想要進入另一個宮格，必須要先回到中心頁面，再進入另一個宮格。每個宮格相互獨立，它們的信息間也沒有任何交集，無法跳轉互通。因為這種特質，宮格式導航被廣泛應用於各平台系統的中心頁面。

宮格式導航的缺陷 ：

信息互斥，無法相互通達，只能給用戶帶來了更多的操作步驟。無法讓用戶在第一時間看到內容，選擇壓力較大。

何種情況下適用於宮格式導航：

適合入口相互獨立互斥，且不需要交叉使用的信息歸類

注意：

一旦入口需要有所交集，必然導致更多的操作負累，這個時候只能根據產品特性做出權衡，如果不適合，建議果斷拒絕這種方式。

列表式導航結構清晰，易於理解，冷靜高效，能夠幫助用戶快速的定位去到對應的頁面。作為輔助導航來展示二級甚至更深層級的內容

列表式導航分為3類： 標題式列表、內容式列表、嵌入式列表。

標題式列表 :一般只顯示一行文字，有的顯示一行文字加一張圖片等等。

內容式列表： 主要以內容為主，所以在列表中就會體現出部分內容信息，點擊進去就是詳情。

嵌入式列表： 嵌入式其實就是由多個列表層級組合而成的導航。能很好的解決次要功能非常多的問題

所有關於列表導航的例子大部分都是依附於標簽導航之上的。前面我就說過現在以列表形式作為主導航的產品是越來越少，因為確實它不是一個好的主要展示形式。 列表項目可以通過間距、標題等進行分組，形成擴展列表。 列表菜單導航可以將重要的UI部分以列表的形式進行呈現，讓用戶可以滾動查看自己要執行的操作或內容。

而在二次層級上，它們還會 將列表分模塊進行展示 ，如微信中「我的」模塊「新消息通知、隱私、通用」是一組，「幫助與反饋、關於微信」又是一組。雖然你能看到，但是不仔細觀察就不會發現其中的要點。只要善用這個細節，可以更好的加以區分次要功能，並提升用戶體驗度。

懸浮icon導航，是將導航頁面分層，無論你到達APP的哪個頁面，懸浮icon永遠懸浮在上面，你依靠懸浮層隨時可以去想要去的地方。

懸浮式icon會遮擋某些頁面的操作，在設計的時候應該考慮進去，比如無論在那個頁面永遠為懸浮icon留有位置。

標簽式導航： 最常用、最不易出錯，請第一時間考慮它

抽屜式導航： 如果你的信息層級繁多，可以考慮將輔助類內容放在抽屜中

跳板式／宮格式導航： 不建議在APP中作為主導航使用，如果非使用不可，請增加跳轉的關聯性

列表式導航： 作為輔助導航來展示二級甚至更深層級的內容，每個APP必不可少，但請注意數量與分類

懸浮式導航： 更適應大屏的導航模式，不妨試一試，但注意不要讓它遮擋住某些頁面的操作

還是那句話，優秀的app導航設計，能夠合理地完美展示產品的功能，並快速引導用戶使用，增強用戶的識別度。合理的導航設計，會讓用戶輕松達到目的而又不會干擾和困擾用戶的選擇。

感謝大家的耐心閱讀，還有一路陪伴的行業大牛為我指點迷津！如果內容觀點有不對的地方，歡迎批評指正！