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

頁面模板是畫APP原型的必備元素，使用它的PM不少，但是真正了解的不多，用它提升效率的更少。

所謂的頁面模板，是指APP原型中每個頁面的相同部分，某種程度上可以理解為開發(fā)APP時(shí)候前端技術(shù)使用的viewcontroller模塊。

希望大家讀完這篇文章，能夠清楚頁面模板的由來，以及如何高效使用。

常見的頁面模板

我們在用Axure畫APP頁面的時(shí)候，往往會套一個網(wǎng)上下載回來的頁面模板，常見的有以下三種樣式。還有其他少見的模板我就不贅述了。

另外上圖是自制的低保真版本，網(wǎng)上有提供高保真版本。建議使用前者，不要混淆PM和UI的工作。

頁面模板的作用

畫APP原型的過程中，每畫一個APP頁面就需要用到一次頁面模板。

而不是每畫一個APP頁面，就重新從狀態(tài)欄，上導(dǎo)航，內(nèi)容區(qū)，下導(dǎo)航/工具欄一個一個畫一遍。這樣極大的浪費(fèi)時(shí)間。

所以我提煉出頁面模板這個概念，并方便的運(yùn)用到每個APP頁面，以此來減少畫原型時(shí)間。

頁面模板的由來

如果我們?nèi)ゲ鸱猪撁娴膬?nèi)容結(jié)構(gòu)，其實(shí)是這樣的三個層次。只是往往我們看到的是第一層，不會深入去了解它的內(nèi)核。

如果具備立體思維來拆分，我們可以得出大部分時(shí)候頁面包含上導(dǎo)航，內(nèi)容區(qū)。小部分時(shí)候包含工具欄/下導(dǎo)航。

選擇哪種頁面模板

根據(jù)上面的三種常見頁面模板，以及頁面的內(nèi)容結(jié)構(gòu)。聰明的PM應(yīng)該就會自己制作適合自己APP的頁面模板。

我個人最推薦的是第3種頁面模板，其次是第2種。第1種非常不推薦。

不過畫法是相似的，如果你會畫第3種頁面模板，那么第2種，第1種畫起來也很快。

第3種頁面模板

由上導(dǎo)航(含左右按鈕)，內(nèi)容區(qū)組成。

大部分App里面大部分頁面都包含這些元素。

如果想在iOS手機(jī)上演示app原型，那么不能有狀態(tài)欄。

具體的查看方法詳見我的文章 《如何在手機(jī)上完美體驗(yàn)Axure生成的APP原型》。

第2種頁面模板

在第3種頁面模板的基礎(chǔ)上多了頂部的狀態(tài)欄。

狀態(tài)欄在每個app頁面中都是一樣的，可以不畫。

如果想在電腦瀏覽器中模擬查看原型在手機(jī)上的效果，需要保留狀態(tài)欄。

具體的查看方法詳見我的文章《 Axure如何生成適配手機(jī)屏幕的APP原型》。

第1種頁面模板

在第2種模板的基礎(chǔ)上多了手機(jī)邊框。

手機(jī)邊框除了忽悠外行人裝逼，沒有實(shí)際用途。

其次有手機(jī)邊框那肯定不能演示app原型，不管是手機(jī)上還是電腦上。

頁面模板該怎么畫

以畫第2種頁面模板作為案例，講解具體步驟。

確定頁面模板的位置

如果你的APP原型只需要在瀏覽器中查看，那么僅需固定頁面模板在每個頁面中的位置，比如(10,10)。

如果你的APP原型想在手機(jī)上并體現(xiàn)交互，那么請固定頁面模板的位置為(0,0)并且不能有手機(jī)邊框。

如果你的APP原型想在瀏覽器中預(yù)覽APP原型交互，那么請固定頁面模板的位置為(0,0)并且不能有手機(jī)邊框。

定義頁面模板的尺寸

頁面模板的尺寸來源于APP原型尺寸，而APP原型的尺寸要么選擇375×667，要么選擇你手機(jī)屏幕的邏輯分辨率，注意有別于手機(jī)屏幕本身的物理分辨率。詳見我的文章《為什么375×667是移動端原型的最佳分辨率》。

這樣狀態(tài)欄、上導(dǎo)航、內(nèi)容區(qū)的寬度就確定了，只需確認(rèn)高度。

按照iOS人機(jī)交互規(guī)范來說，狀態(tài)欄的高度為40px，上導(dǎo)航的高度為88px，那么內(nèi)容區(qū)的高度則為1334-40-88=1206。另外上導(dǎo)航左右按鈕的高度是22px，寬度至少是22px。

對應(yīng)的原型尺寸分別是，狀態(tài)欄375x20px，上導(dǎo)航375x44px，內(nèi)容區(qū)375x603px。

確定頁面模板的字體顏色

狀態(tài)欄用矩形畫，無邊框，填充黑色。

上導(dǎo)航用矩形畫，灰色邊框，不填充顏色，文字18px。

內(nèi)容區(qū)用矩形畫，灰色邊框，不填充顏色。

上導(dǎo)航按鈕用文本畫，不加邊框，不填充顏色，文字14px。

然后字體建議選擇默認(rèn)的，以保證整個app原型的視覺統(tǒng)一。

頁面模板該怎么使用

頁面模板是為了方便我們在畫APP原型的時(shí)候，快速去復(fù)制到每一個新頁面。所以我們應(yīng)該用Axure中的母版功能來使用頁面模板。

新建母版

命名為頁面模板，然后把剛剛的內(nèi)容畫到里面。

命名每個元件

對每個元件進(jìn)行命名，結(jié)果如下。

設(shè)置拖放模式

請右鍵該母版，然后設(shè)置拖放模式為“脫離母版”。然后我們每新建一個頁面，拖一個母版進(jìn)來。

或者我們設(shè)置拖放模式為“固定位置”，然后每新建一個頁面拖一個母版進(jìn)來，然后右鍵脫離模板即可。

優(yōu)化細(xì)節(jié)

做到以上這幾步，頁面模板就可以給你的畫原型工作減輕很多工作量了。

但是我們還可以再優(yōu)化一下，把上圖中的所有文字“頁面名稱”“左按鈕”“有按鈕”“內(nèi)容區(qū)”都刪除，變成下圖。

當(dāng)不需要填寫文字的時(shí)候，就不顯示左按鈕右按鈕，兼顧了部分頁面不一定都有左右按鈕的場景。當(dāng)我們需要填寫文字內(nèi)容的時(shí)候，雙擊對應(yīng)的區(qū)域即可編輯?；ゲ坏⒄`。

總結(jié)

頁面模板并不是特別復(fù)雜，但是很少有人刻意講解過它的來龍去脈以及如何高效的使用它，希望我的這篇文章可以讓你們對頁面模板有個很深的了解以及提升了你們畫原型中不必要的時(shí)間浪費(fèi)。

相關(guān)閱讀

如何在手機(jī)上完美體驗(yàn)Axure生成的APP原型

Axure如何生成適配手機(jī)屏幕的APP原型

為什么375×667是移動端原型的最佳分辨率

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

#專欄作家#

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

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

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