我們在設計產品的時候，就好比微信，由很多個可滑動的頁面組成，而每個頁面中存在的線框圖也需要一個一個去進行設計。我們都知道 Axure（http://www.axurechina.cc/）是一款原型設計工具，那麼我們要使用Axure如何去實現線框圖的繪製呢？
畫出主要狀態的線框圖
一個頁面，可能包含多個狀態的顯示效果。比如微信APP首頁除了常見的下圖顯示效果，還有點選右上角+的顯示效果，還有刪除所有聊天的顯示效果……
但是，最核心的狀態應該是使用者進入該頁面之後，正常清晰應該看到的所有內容。PM應該以此來畫出該頁面的主要狀態線框圖。
補充次要狀態的線框圖
然後我們畫出次要狀態的線框圖。我們可以放置到主要狀態的線框圖旁邊。
有時候也可以次要狀態的線框圖，放到主要狀態線框圖上面。更加容易理解原型。
優化線框圖的細節
畫完該頁面所有的線框圖之後，我們可以調整一下細節。這樣子會讓我們的原型看起來比較專業。PM可以不追求原型的視覺美，但是得要求原型的邏輯美。
元件的大小比較恰當，看起來是否協調。
元件的位置，是否恰當，是不是對齊。
同樣功能的元件，大小是不是一致。
元件的配色，是不是隻有黑白灰，建議少用彩色。
新增互動
如果你們公司要求只需出靜態圖或者線框圖，那麼畫完上面2步，就足夠了。
如果你們公司除了線框圖之外，還要求PM畫出互動，以此來更加逼真的表現APP原型。那麼我建議你在主要線框圖上面把主要的互動畫出來。
繼續拿上面的例子來講，如果我需要畫出點選右上角+的互動。
那麼我需要把浮出層，生成為動態面板。
然後給+去新增顯示和隱藏動態面板的互動。

按照類似的步驟，畫出左滑聊天，顯示“標記未讀”“刪除”，點選“刪除”按鈕，出現操作列表的互動。
寫上邏輯
最後，我們需要補充主要狀態線框圖，次要狀態線框圖中的全部邏輯。邏輯貌似所有PM都會寫，但是很多PM寫得很一般。原因就是缺乏寫作邏輯的規範。
需要一一考慮每個元件是否有邏輯
不要遺漏元件的視覺、互動、技術、業務邏輯
邏輯相似尤其是相似的元件，建議把邏輯寫到全域性規範裡面
邏輯圖流程圖也是邏輯的表現方式
至於具體寫邏輯的方法，請移步我的其他文字
產品邏輯的5種呈現方法和
Notes-Axure最正統的產品邏輯表達法。
預覽效果
如果我們做完了所有線框圖，以及主要互動。我們生成原型或者預覽原型的時候，可以看到如下效果。點選檢視Axure生成的原型效果，基本上和微信APP很相似。
當你學會了畫頁面的線框圖，整個APP的原型也就顯得容易些。就好比從細節著手，整個頁面的線框圖能夠正確的畫出來 ，那麼一個APP的所有頁面就比較簡單。以上教程就已經全部介紹完了，希望對你有幫助。如果有更多感興趣的內容，可以訪問Axure中文網。
本篇文章來源於：