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

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

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

常見的頁面模板

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

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

頁面模板的作用

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

而不是每畫一個APP頁面，就重新從狀態欄，上導航，內容區，下導航/工具欄一個一個畫一遍。這樣極大的浪費時間。

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

頁面模板的由來

如果我們去拆分頁面的內容結構，其實是這樣的三個層次。只是往往我們看到的是第一層，不會深入去了解它的內核。

如果具備立體思維來拆分，我們可以得出大部分時候頁面包含上導航，內容區。小部分時候包含工具欄/下導航。

選擇哪種頁面模板

根據上面的三種常見頁面模板，以及頁面的內容結構。聰明的PM應該就會自己制作適合自己APP的頁面模板。

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

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

第3種頁面模板

由上導航(含左右按鈕)，內容區組成。

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

如果想在iOS手機上演示app原型，那么不能有狀態欄。

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

第2種頁面模板

在第3種頁面模板的基礎上多了頂部的狀態欄。

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

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

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

第1種頁面模板

在第2種模板的基礎上多了手機邊框。

手機邊框除了忽悠外行人裝逼，沒有實際用途。

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

頁面模板該怎么畫

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

確定頁面模板的位置

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

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

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

定義頁面模板的尺寸

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

這樣狀態欄、上導航、內容區的寬度就確定了，只需確認高度。

按照iOS人機交互規范來說，狀態欄的高度為40px，上導航的高度為88px，那么內容區的高度則為1334-40-88=1206。另外上導航左右按鈕的高度是22px，寬度至少是22px。

對應的原型尺寸分別是，狀態欄375x20px，上導航375x44px，內容區375x603px。

確定頁面模板的字體顏色

狀態欄用矩形畫，無邊框，填充黑色。

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

內容區用矩形畫，灰色邊框，不填充顏色。

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

然后字體建議選擇默認的，以保證整個app原型的視覺統一。

頁面模板該怎么使用

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

新建母版

命名為頁面模板，然后把剛剛的內容畫到里面。

命名每個元件

對每個元件進行命名，結果如下。

設置拖放模式

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

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

優化細節

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

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

當不需要填寫文字的時候，就不顯示左按鈕右按鈕，兼顧了部分頁面不一定都有左右按鈕的場景。當我們需要填寫文字內容的時候，雙擊對應的區域即可編輯?；ゲ坏⒄`。

總結

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

相關閱讀

如何在手機上完美體驗Axure生成的APP原型

Axure如何生成適配手機屏幕的APP原型

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

APP下導航如何通過Axure畫出來

#專欄作家#

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

本文由 @浪子 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 unsplash，基于 CC0 協議