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

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

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

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

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

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

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

頁面標(biāo)題

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

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

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

• 頁面標(biāo)題的文字,，雙擊矩形輸入，然后設(shè)置為18px,，字體使用默認(rèn)的即可,。

• 頁面標(biāo)題的尺寸，一般為375x44px,，如果你是基于ios來畫原型的話,，具體可參見浪子以前的文章。如果非要自己憑感覺定義尺寸,，問題也不是很大,。

• 頁面標(biāo)題的位置，設(shè)置矩形的對(duì)齊方式為左右居中,，上下居中,。如果是android請(qǐng)?jiān)O(shè)置左對(duì)齊，然后margin設(shè)置左20px,，其他默認(rèn)為2px不變,。

• 頁面標(biāo)題的背景，默認(rèn)為白色,，100%不透明,。也可根據(jù)需求調(diào)整為漸變色,，比如微信上導(dǎo)航。

左按鈕

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

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

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

• 左按鈕的文字,，設(shè)為12px,，上下居中，左右居中,。通常為兩個(gè)字或者圖標(biāo)表示,，偶爾會(huì)有三四個(gè)字。

• 左按鈕的尺寸,，根據(jù)iOS人機(jī)交互設(shè)計(jì)規(guī)范建議設(shè)為(44,22),。

• 左按鈕的位置，根據(jù)iOS人機(jī)交互設(shè)計(jì)規(guī)范建議設(shè)為(12,8),。

• 左按鈕的背景,，文本元件無需設(shè)置背景色?；蛘呤褂镁匦卧サ暨吙?，修改背景色為白色100%透明度。

右按鈕

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

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

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

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

固定上導(dǎo)航

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

1. 選中頁面標(biāo)題和左右按鈕,，右鍵生成動(dòng)態(tài)面板并命名。

2. 右鍵該動(dòng)態(tài)面板，然后選擇“固定到瀏覽器”功能,。

3. 選中“固定到瀏覽器窗口”,，水平固定“左”，垂直固定“上”,，選中始終保持頂層,。

隱藏上導(dǎo)航

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

1. 先把固定上導(dǎo)航的效果做好。

2. 點(diǎn)擊上導(dǎo)航動(dòng)態(tài)面板,，在樣式中選擇狀態(tài)為隱藏,。

3. 點(diǎn)擊空白區(qū)域,，然后設(shè)置頁面鼠標(biāo)單擊時(shí),，顯示動(dòng)態(tài)面板上導(dǎo)航。

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

1. 先把固定上導(dǎo)航的效果做好,。

2. 點(diǎn)擊上導(dǎo)航動(dòng)態(tài)面板,，在樣式中選擇狀態(tài)為隱藏。

3. 拖動(dòng)熱區(qū)元件,，拉伸覆蓋整個(gè)頁面,。

4. 對(duì)熱區(qū)設(shè)置鼠標(biāo)點(diǎn)擊時(shí)，顯示動(dòng)態(tài)面板上導(dǎo)航,。

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

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

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

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

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

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

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

總結(jié)

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

#專欄作家#

浪子,，業(yè)務(wù)型PM,，浪子PRD系列51prd.com

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