我們在設計產品的時候，就好比微信，由很多個可滑動的頁面組成，而每個頁面中存在的線框圖也需要一個一個去進行設計。我們都知道?Axure（http://www.axurechina.cc/）是一款原型設計工具，那么我們要使用Axure如何去實現(xiàn)線框圖的繪制呢？

畫出主要狀態(tài)的線框圖

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

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

補充次要狀態(tài)的線框圖

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

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

優(yōu)化線框圖的細節(jié)

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

元件的大小比較恰當，看起來是否協(xié)調。

元件的位置，是否恰當，是不是對齊。

同樣功能的元件，大小是不是一致。

元件的配色，是不是只有黑白灰，建議少用彩色。

添加交互

如果你們公司要求只需出靜態(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)方式

至于具體寫邏輯的方法，請移步我的其他文字

產品邏輯的5種呈現(xiàn)方法和

Notes-Axure最正統(tǒng)的產品邏輯表達法。

預覽效果

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

當你學會了畫頁面的線框圖，整個APP的原型也就顯得容易些。就好比從細節(jié)著手，整個頁面的線框圖能夠正確的畫出來 ，那么一個APP的所有頁面就比較簡單。以上教程就已經(jīng)全部介紹完了，希望對你有幫助。如果有更多感興趣的內容，可以訪問Axure中文網(wǎng)。

本篇文章來源于：http://www.axurechina.cc/news/1452.html