APP上導航如何用Axure畫出來?
上導航是每個APP必備的功能模組，看似畫起來很簡單其實裡面也有不少門道。
之前的文章已經講解了APP常見功能中的頁面模板、下導航、列表頁怎麼畫出來，這篇文章講解上導航，請繼續關注浪子教你畫APP原型後續的其他功能模組。
本文主要從上導航的元素構成、常用互動、演變3個角度來給大家講解如何畫上導航的原型。
上導航由哪些元素構成
上導航一般包含了頁面標題，左按鈕，右按鈕等內容。
那麼PM使用Axure畫原型需要用到矩形元件和文字元件等。
但是具體需要用到一個元件還是兩個，是有一定技巧的。這裡面涉及到節省元件以及如何撰寫邏輯的時候是否可以定位到指定內容的問題。
頁面標題
頁面標題看似只是文字，位於上導航的中央。PM可以使用文字元件來表示，那麼上導航本身的外框怎麼表示呢？通常為純色背景或者漸變式背景。再新增個矩形表示？那麼android當需要把頁面標題靠左對齊，怎麼方便處理呢？每新建一個頁面就設定一次xy座標嘛？
不少PM就是按照這樣的思路為頁面標題畫了文字元件和矩形元件，然後調整文字元件的xy座標或者拖動來處理。
事實上我們可以只用矩形一個元件就可以畫好頁面標題這個內容。
- 頁面標題的文字，雙擊矩形輸入，然後設定為18px，字型使用預設的即可。
- 頁面標題的尺寸，一般為375x44px，如果你是基於ios來畫原型的話，具體可參見浪子以前的文章。如果非要自己憑感覺定義尺寸，問題也不是很大。
- 頁面標題的位置，設定矩形的對齊方式為左右居中，上下居中。如果是android請設定左對齊，然後margin設定左20px，其他預設為2px不變。
- 頁面標題的背景，預設為白色，100%不透明。也可根據需求調整為漸變色，比如微信上導航。
左按鈕
左按鈕通常像一個按鈕，可以採用按鈕元件或者矩形元件。由於按鈕元件的互動事件比較少，預設樣式也不太通用。建議捨棄，改用矩形。
而矩形的用法其實和上面的頁面標題矩形方法是類似的。
另外隨著iOS人機互動規範的更新，也可以替換矩形元件為文字元件。
- 左按鈕的文字，設為12px，上下居中，左右居中。通常為兩個字或者圖示表示，偶爾會有三四個字。
- 左按鈕的尺寸，根據iOS人機互動設計規範建議設為(44,22)。
- 左按鈕的位置，根據iOS人機互動設計規範建議設為(12,8)。
- 左按鈕的背景，文字元件無需設定背景色。或者使用矩形元件去掉邊框，修改背景色為白色100%透明度。
右按鈕
方法等同於左按鈕，只有位置是(295,8)，其他保持一樣就行。
上導航常見的互動
上導航通常不會隨著頁面的滾動而滾動，而是固定在最開始的位置。
雖然這個互動很簡單，為了節省畫原型時間可以不畫，但是還是有必要了解一下畫法。
固定上導航
利用動態面板的“固定到瀏覽器”功能，我們可以實現上導航固定不隨著頁面滾動的效果。具體步驟如下：
- 選中頁面標題和左右按鈕，右鍵生成動態面板並命名。
- 右鍵該動態面板，然後選擇“固定到瀏覽器”功能。
- 選中“固定到瀏覽器視窗”，水平固定“左”，垂直固定“上”，選中始終保持頂層。
隱藏上導航
像微信的漂流瓶頁面，進入頁面的時候顯示全屏的內容區，然後點選螢幕就會顯示上導航。具體步驟如下：
- 先把固定上導航的效果做好。
- 點選上導航動態面板，在樣式中選擇狀態為隱藏。
- 點選空白區域，然後設定頁面滑鼠單擊時，顯示動態面板上導航。
如果頁面中有其他互動事件的畫，建議換另外一種實現方式，以保證優先顯示上導航的效果。
- 先把固定上導航的效果做好。
- 點選上導航動態面板，在樣式中選擇狀態為隱藏。
- 拖動熱區元件，拉伸覆蓋整個頁面。
- 對熱區設定滑鼠點選時，顯示動態面板上導航。
上導航和狀態列的融合
為了視覺效果，上導航和狀態列往往共用一套背景。如果你想在原型中實現這樣的效果，那麼請把狀態列，頁面標題，左右按鈕全選然後再去生成動態面板。請注意此時我們需要將狀態列的背景色設定為和上導航的一樣。
上導航的各種演變
左右按鈕常見的樣式演變，樣式從矩形變成文字，也就是沒有邊框。以及文字按鈕直接用圖示來替換，形象生動。
當然畫原型的時候可以還用按鈕表示，如有餘力可以找合適的圖示來表示。
左右按鈕的數量演變，左按鈕通常為一個且為“返回”，右按鈕隨著需求可能是1個或者2個甚至3個。
頁面標題的演變，從ios的居中顯示到Android的靠左顯示，從顯示頁面標題到直接把功能操作放置到上導航。
總結
大部分時候我們只需要用到最基礎的上導航樣式和畫法，但是也需要了解它的互動以及演變情況。方便在各種場景下合理的去畫出相應的上導航功能。。