每個APP原型都是由一個個頁面組成森枪，那么每個頁面的線框圖該如何通過Axure的畫出來呢？我希望通過這篇文章趋艘，讓剛?cè)腴T的PM可以不走彎路疲恢，規(guī)范高效的畫出每個頁面的線框圖。
畫出主要狀態(tài)的線框圖
一個頁面瓷胧，可能包含多個狀態(tài)的顯示效果显拳。比如微信APP首頁除了常見的下圖顯示效果，還有點擊右上角+的顯示效果搓萧，還有刪除所有聊天的顯示效果……
但是杂数，最核心的狀態(tài)應該是用戶進入該頁面之后，正常清晰應該看到的所有內(nèi)容瘸洛。PM應該以此來畫出該頁面的主要狀態(tài)線框圖揍移。
補充次要狀態(tài)的線框圖
然后我們畫出次要狀態(tài)的線框圖。我們可以放置到主要狀態(tài)的線框圖旁邊反肋。
有時候也可以次要狀態(tài)的線框圖那伐，放到主要狀態(tài)線框圖上面。更加容易理解原型石蔗。
優(yōu)化線框圖的細節(jié)
畫完該頁面所有的線框圖之后罕邀，我們可以調(diào)整一下細節(jié)。這樣子會讓我們的原型看起來比較專業(yè)养距。PM可以不追求原型的視覺美诉探，但是得要求原型的邏輯美。
元件的大小比較恰當棍厌，看起來是否協(xié)調(diào)肾胯。
元件的位置，是否恰當耘纱，是不是對齊敬肚。
同樣功能的元件，大小是不是一致束析。
元件的配色帘皿，是不是只有黑白灰，建議少用彩色畸陡。
添加交互
如果你們公司要求只需出靜態(tài)圖或者線框圖鹰溜，那么畫完上面2步，就足夠了丁恭。
如果你們公司除了線框圖之外曹动，還要求PM畫出交互，以此來更加逼真的表現(xiàn)APP原型牲览。那么我建議你在主要線框圖上面把主要的交互畫出來墓陈。
繼續(xù)拿上面的例子來講，如果我需要畫出點擊右上角+的交互第献。
那么我需要把浮出層贡必，生成為動態(tài)面板。
然后給+去添加顯示和隱藏動態(tài)面板的交互庸毫。
按照類似的步驟仔拟，畫出左滑聊天，顯示“標記未讀”“刪除”飒赃，點擊“刪除”按鈕利花，出現(xiàn)操作列表的交互。
寫上邏輯
最后载佳，我們需要補充主要狀態(tài)線框圖炒事，次要狀態(tài)線框圖中的全部邏輯。邏輯貌似所有PM都會寫蔫慧，但是很多PM寫得很一般挠乳。原因就是缺乏寫作邏輯的規(guī)范。
需要一一考慮每個元件是否有邏輯
不要遺漏元件的視覺姑躲、交互睡扬、技術、業(yè)務邏輯
邏輯相似尤其是相似的元件肋联，建議把邏輯寫到全局規(guī)范里面
邏輯圖流程圖也是邏輯的表現(xiàn)方式
至于具體寫邏輯的方法威蕉，請移步我的其他文字產(chǎn)品邏輯的5種呈現(xiàn)方法和Notes-Axure最正統(tǒng)的產(chǎn)品邏輯表達法。
預覽效果
如果我們做完了所有線框圖橄仍，以及主要交互韧涨。我們生成原型或者預覽原型的時候，可以看到如下效果侮繁。點擊查看Axure生成的原型效果虑粥，基本上和微信APP很相似。
總結(jié)
當你學會了畫頁面的線框圖宪哩，整個APP的原型也就可以大概的畫出來娩贷。然后輔以如何正確的畫出功能流程圖和如何正確地畫出頁面流程圖。就可以交付給程序員進行正式開發(fā)锁孟。
