上導航是每個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. 選中“固定到瀏覽器窗口”，水平固定“左”，垂直固定“上”，選中始終保持頂層。

隱藏上導航

像微信的漂流瓶頁面，進入頁面的時候顯示全屏的內容區，然后點擊屏幕就會顯示上導航。具體步驟如下：

1. 先把固定上導航的效果做好。
2. 點擊上導航動態面板，在樣式中選擇狀態為隱藏。
3. 點擊空白區域，然后設置頁面鼠標單擊時，顯示動態面板上導航。

如果頁面中有其他交互事件的畫，建議換另外一種實現方式，以保證優先顯示上導航的效果。

1. 先把固定上導航的效果做好。
2. 點擊上導航動態面板，在樣式中選擇狀態為隱藏。
3. 拖動熱區元件，拉伸覆蓋整個頁面。
4. 對熱區設置鼠標點擊時，顯示動態面板上導航。

上導航和狀態欄的融合

為了視覺效果，上導航和狀態欄往往共用一套背景。如果你想在原型中實現這樣的效果，那么請把狀態欄，頁面標題，左右按鈕全選然后再去生成動態面板。請注意此時我們需要將狀態欄的背景色設置為和上導航的一樣。

上導航的各種演變

左右按鈕常見的樣式演變，樣式從矩形變成文本，也就是沒有邊框。以及文字按鈕直接用圖標來替換，形象生動。

當然畫原型的時候可以還用按鈕表示，如有余力可以找合適的圖標來表示。

左右按鈕的數量演變，左按鈕通常為一個且為“返回”，右按鈕隨著需求可能是1個或者2個甚至3個。

頁面標題的演變，從ios的居中顯示到Android的靠左顯示，從顯示頁面標題到直接把功能操作放置到上導航。

總結

大部分時候我們只需要用到最基礎的上導航樣式和畫法，但是也需要了解它的交互以及演變情況。方便在各種場景下合理的去畫出相應的上導航功能。。

相關閱讀

定義頁面模板是畫APP原型的必備工作

APP下導航如何用Axure畫出來

APP列表頁如何用Axure畫出來

#專欄作家#

浪子，業務型PM，浪子PRD系列51prd.com，公眾號langzisay，個人微信nuanai88。

本文由 @浪子 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 PEXELS，基于 CC0 協議。