国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

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

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

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

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

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

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

頁(yè)面標(biāo)題

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

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

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

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

左按鈕

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

而矩形的用法其實(shí)和上面的頁(yè)面標(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)。
• 左按鈕的背景，文本元件無(wú)需設(shè)置背景色?；蛘呤褂镁匦卧サ暨吙?，修改背景色為白色100%透明度。

右按鈕

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

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

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

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

固定上導(dǎo)航

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

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

隱藏上導(dǎo)航

像微信的漂流瓶頁(yè)面，進(jìn)入頁(yè)面的時(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è)置頁(yè)面鼠標(biāo)單擊時(shí)，顯示動(dòng)態(tài)面板上導(dǎo)航。

如果頁(yè)面中有其他交互事件的畫，建議換另外一種實(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è)頁(yè)面。
4. 對(duì)熱區(qū)設(shè)置鼠標(biāo)點(diǎn)擊時(shí)，顯示動(dòng)態(tài)面板上導(dǎo)航。

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

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

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

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

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

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

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

總結(jié)

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

相關(guān)閱讀

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

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

APP列表頁(yè)如何用Axure畫出來(lái)

#專欄作家#

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

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

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