上導(dǎo)航是每個APP必備的功能模塊，看似畫起來很簡單其實里面也有不少門道。

之前的文章已經(jīng)講解了APP常見功能中的頁面模板、下導(dǎo)航、列表頁怎么畫出來，這篇文章講解上導(dǎo)航，請繼續(xù)關(guān)注浪子教你畫APP原型后續(xù)的其他功能模塊。

本文主要從上導(dǎo)航的元素構(gòu)成、常用交互、演變3個角度來給大家講解如何畫上導(dǎo)航的原型。

上導(dǎo)航由哪些元素構(gòu)成

上導(dǎo)航一般包含了頁面標(biāo)題，左按鈕，右按鈕等內(nèi)容。

那么PM使用Axure畫原型需要用到矩形元件和文本元件等。

但是具體需要用到一個元件還是兩個，是有一定技巧的。這里面涉及到節(jié)省元件以及如何撰寫邏輯的時候是否可以定位到指定內(nèi)容的問題。

頁面標(biāo)題

頁面標(biāo)題看似只是文本，位于上導(dǎo)航的中央。PM可以使用文本元件來表示，那么上導(dǎo)航本身的外框怎么表示呢？通常為純色背景或者漸變式背景。再添加個矩形表示？那么android當(dāng)需要把頁面標(biāo)題靠左對齊，怎么方便處理呢？每新建一個頁面就設(shè)置一次xy坐標(biāo)嘛？

不少PM就是按照這樣的思路為頁面標(biāo)題畫了文本元件和矩形元件，然后調(diào)整文本元件的xy坐標(biāo)或者拖動來處理。

事實上我們可以只用矩形一個元件就可以畫好頁面標(biāo)題這個內(nèi)容。

• 頁面標(biāo)題的文字，雙擊矩形輸入，然后設(shè)置為18px，字體使用默認的即可。
• 頁面標(biāo)題的尺寸，一般為375x44px，如果你是基于ios來畫原型的話，具體可參見浪子以前的文章。如果非要自己憑感覺定義尺寸，問題也不是很大。
• 頁面標(biāo)題的位置，設(shè)置矩形的對齊方式為左右居中，上下居中。如果是android請設(shè)置左對齊，然后margin設(shè)置左20px，其他默認為2px不變。
• 頁面標(biāo)題的背景，默認為白色，100%不透明。也可根據(jù)需求調(diào)整為漸變色，比如微信上導(dǎo)航。

左按鈕

左按鈕通常像一個按鈕，可以采用按鈕元件或者矩形元件。由于按鈕元件的交互事件比較少，默認樣式也不太通用。建議舍棄，改用矩形。

而矩形的用法其實和上面的頁面標(biāo)題矩形方法是類似的。

另外隨著iOS人機交互規(guī)范的更新，也可以替換矩形元件為文本元件。

• 左按鈕的文字，設(shè)為12px，上下居中，左右居中。通常為兩個字或者圖標(biāo)表示，偶爾會有三四個字。
• 左按鈕的尺寸，根據(jù)iOS人機交互設(shè)計規(guī)范建議設(shè)為(44,22)。
• 左按鈕的位置，根據(jù)iOS人機交互設(shè)計規(guī)范建議設(shè)為(12,8)。
• 左按鈕的背景，文本元件無需設(shè)置背景色。或者使用矩形元件去掉邊框，修改背景色為白色100%透明度。

右按鈕

方法等同于左按鈕，只有位置是(295,8)，其他保持一樣就行。

上導(dǎo)航常見的交互

上導(dǎo)航通常不會隨著頁面的滾動而滾動，而是固定在最開始的位置。

雖然這個交互很簡單，為了節(jié)省畫原型時間可以不畫，但是還是有必要了解一下畫法。

固定上導(dǎo)航

利用動態(tài)面板的“固定到瀏覽器”功能，我們可以實現(xiàn)上導(dǎo)航固定不隨著頁面滾動的效果。具體步驟如下：

1. 選中頁面標(biāo)題和左右按鈕，右鍵生成動態(tài)面板并命名。
2. 右鍵該動態(tài)面板，然后選擇“固定到瀏覽器”功能。
3. 選中“固定到瀏覽器窗口”，水平固定“左”，垂直固定“上”，選中始終保持頂層。

隱藏上導(dǎo)航

像微信的漂流瓶頁面，進入頁面的時候顯示全屏的內(nèi)容區(qū)，然后點擊屏幕就會顯示上導(dǎo)航。具體步驟如下：

1. 先把固定上導(dǎo)航的效果做好。
2. 點擊上導(dǎo)航動態(tài)面板，在樣式中選擇狀態(tài)為隱藏。
3. 點擊空白區(qū)域，然后設(shè)置頁面鼠標(biāo)單擊時，顯示動態(tài)面板上導(dǎo)航。

如果頁面中有其他交互事件的畫，建議換另外一種實現(xiàn)方式，以保證優(yōu)先顯示上導(dǎo)航的效果。

1. 先把固定上導(dǎo)航的效果做好。
2. 點擊上導(dǎo)航動態(tài)面板，在樣式中選擇狀態(tài)為隱藏。
3. 拖動熱區(qū)元件，拉伸覆蓋整個頁面。
4. 對熱區(qū)設(shè)置鼠標(biāo)點擊時，顯示動態(tài)面板上導(dǎo)航。

上導(dǎo)航和狀態(tài)欄的融合

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

上導(dǎo)航的各種演變

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

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

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

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

總結(jié)

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

相關(guān)閱讀

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

APP下導(dǎo)航如何用Axure畫出來

APP列表頁如何用Axure畫出來

#專欄作家#

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

本文由 @浪子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 PEXELS，基于 CC0 協(xié)議。