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

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

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

常見(jiàn)的頁(yè)面模板

我們?cè)谟肁xure畫(huà)APP頁(yè)面的時(shí)候，往往會(huì)套一個(gè)網(wǎng)上下載回來(lái)的頁(yè)面模板，常見(jiàn)的有以下三種樣式。還有其他少見(jiàn)的模板我就不贅述了。

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

頁(yè)面模板的作用

畫(huà)APP原型的過(guò)程中，每畫(huà)一個(gè)APP頁(yè)面就需要用到一次頁(yè)面模板。

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

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

頁(yè)面模板的由來(lái)

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

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

選擇哪種頁(yè)面模板

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

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

不過(guò)畫(huà)法是相似的，如果你會(huì)畫(huà)第3種頁(yè)面模板，那么第2種，第1種畫(huà)起來(lái)也很快。

第3種頁(yè)面模板

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

大部分App里面大部分頁(yè)面都包含這些元素。

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

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

第2種頁(yè)面模板

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

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

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

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

第1種頁(yè)面模板

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

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

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

頁(yè)面模板該怎么畫(huà)

以畫(huà)第2種頁(yè)面模板作為案例，講解具體步驟。

確定頁(yè)面模板的位置

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

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

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

定義頁(yè)面模板的尺寸

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

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

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

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

確定頁(yè)面模板的字體顏色

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

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

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

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

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

頁(yè)面模板該怎么使用

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

新建母版

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

命名每個(gè)元件

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

設(shè)置拖放模式

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

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

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

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

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

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

總結(jié)

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

相關(guān)閱讀

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

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

為什么375×667是移動(dòng)端原型的最佳分辨率

APP下導(dǎo)航如何通過(guò)Axure畫(huà)出來(lái)

#專(zhuān)欄作家#

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

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

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