每個APP原型都是由一個個頁面組成，那么每個頁面的線框圖該如何通過Axure的畫出來呢？我希望通過這篇文章，讓剛入門的PM可以不走彎路，規范高效的畫出每個頁面的線框圖。

畫出主要狀態的線框圖

一個頁面，可能包含多個狀態的顯示效果。比如微信APP首頁除了常見的下圖顯示效果，還有點擊右上角+的顯示效果，還有刪除所有聊天的顯示效果……

但是，最核心的狀態應該是用戶進入該頁面之后，正常清晰應該看到的所有內容。PM應該以此來畫出該頁面的主要狀態線框圖。

補充次要狀態的線框圖

然后我們畫出次要狀態的線框圖。我們可以放置到主要狀態的線框圖旁邊。

有時候也可以次要狀態的線框圖，放到主要狀態線框圖上面。更加容易理解原型。

優化線框圖的細節

畫完該頁面所有的線框圖之后，我們可以調整一下細節。這樣子會讓我們的原型看起來比較專業。PM可以不追求原型的視覺美，但是得要求原型的邏輯美。

• 元件的大小比較恰當，看起來是否協調。
• 元件的位置，是否恰當，是不是對齊。
• 同樣功能的元件，大小是不是一致。
• 元件的配色，是不是只有黑白灰，建議少用彩色。

添加交互

如果你們公司要求只需出靜態圖或者線框圖，那么畫完上面2步，就足夠了。

如果你們公司除了線框圖之外，還要求PM畫出交互，以此來更加逼真的表現APP原型。那么我建議你在主要線框圖上面把主要的交互畫出來。

繼續拿上面的例子來講，如果我需要畫出點擊右上角+的交互。

那么我需要把浮出層，生成為動態面板。

然后給+去添加顯示和隱藏動態面板的交互。

按照類似的步驟，畫出左滑聊天，顯示“標記未讀”“刪除”，點擊“刪除”按鈕，出現操作列表的交互。

寫上邏輯

最后，我們需要補充主要狀態線框圖，次要狀態線框圖中的全部邏輯。邏輯貌似所有PM都會寫，但是很多PM寫得很一般。原因就是缺乏寫作邏輯的規范。

• 需要一一考慮每個元件是否有邏輯
• 不要遺漏元件的視覺、交互、技術、業務邏輯
• 邏輯相似尤其是相似的元件，建議把邏輯寫到全局規范里面
• 邏輯圖流程圖也是邏輯的表現方式

至于具體寫邏輯的方法，請移步我的其他文字產品邏輯的5種呈現方法和Notes-Axure最正統的產品邏輯表達法。

預覽效果

如果我們做完了所有線框圖，以及主要交互。我們生成原型或者預覽原型的時候，可以看到如下效果。點擊查看Axure生成的原型效果，基本上和微信APP很相似。

總結

當你學會了畫頁面的線框圖，整個APP的原型也就可以大概的畫出來。然后輔以如何正確的畫出功能流程圖和如何正確地畫出頁面流程圖。就可以交付給程序員進行正式開發。

#專欄作家#

浪子，業務型PM，浪子PRD系列51prd.com，公眾號langzisay。

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

題圖來自 Pexels，基于 CC0 協議