這是一篇老生常談的問題，所以若有人已經(jīng)了解，請自動忽略好了。這也是在一次和PD的交流培訓會上再次提出的老問題：究竟線框圖為什么要畫，以及如何畫。

至于線框圖為什么要畫，就不在這里聱述了。相信已經(jīng)有很多人寫過類似的文章，當然，如果你還有疑問，可以給我寫郵件。

現(xiàn)在就是如何畫的問題。

這不是很簡單嗎？一個簡單的線框圖，斷不得比一個精美的視覺圖更花費時間吧？也不需要美學的基礎，也不需要精細的加工，加上已經(jīng)有一個號稱10分鐘上手的工具作為輔助，恐怕沒有必要單獨開這個話題來研究。

但是，之所以又拋出來，正是在一個“畫”字。

線框圖不是“畫”出來的，而是想出來的，是確認出來的。

線框圖，只是提供了一個供討論、供評審、供確認的承載物，然后并將確認后的需求（商業(yè)需求以及設計需求），以具象的方式再傳遞出去。

所以，線框圖本身看起來美觀不美觀，專業(yè)不專業(yè)，畫得好不好，都不是重要的問題。

一個畫在白板上的簡陋的線框圖，和一個無比精美專業(yè)的線框圖，是很難說哪個更“好”的。

說這個，是提醒我們自己，不要忽視線框圖的本質(zhì)問題。所以大多關于線框圖怎么畫的問題，可能不是出在不知道怎么畫，而是不知道為何要畫，具體畫什么，畫了怎么用的問題。

線框圖究竟如何畫呢？

一。必須的幾個理念和前提：

1. 并不是精美細致的就是好的線框圖

表面上，你似乎是沒有經(jīng)歷前面的階段，直接跳轉(zhuǎn)到詳細線框圖的，但是實際上，你腦子里也一定是有前面的階段的，而且在現(xiàn)實項目里，中間的這些環(huán)節(jié)是伴隨著不斷的評審、確認，確認一個問題，得到一個決定，排除一些可能性，得到一些idea，從而讓可能性變得更靠譜更聚焦，最后剩下一個選擇，產(chǎn)出了確定好的線框圖。

2. 從最簡單的開始，逐漸補充細節(jié)

輸入資料，信息，問問題，回答問題，畫圖，這是一脈相承的。

從最簡單的開始，若你先跳轉(zhuǎn)了到了最后一步，或許會出現(xiàn)很悲劇的情況，你已經(jīng)費勁了心思設計的交互，并不是需要的，如果把握不好確認的程度，會造成不只你一個人的資源浪費。

3. 最大的價值在于討論和確認

線框圖是用來吵架用的。所以，不能像視覺設計師一樣抗拒對視覺稿的修改。

也許正是因為如此，我們才不斷強調(diào)不要把線框圖畫得太美吧：）哈哈，因為看起來很美的東西，都不忍心去破壞它了。這是天性。

我們要慶幸，有了這么多次評審會，雖然限制更多了，但是方向也更清楚了。當方向越來越清楚時，我們就可以真正聚焦于一些交互細節(jié)的設計上了。

有一個經(jīng)典的圖，經(jīng)常被用到，那就是：

謹記：再不跟我確認這是一個人之前，不要給我談他的頭發(fā)的顏色。

二。選擇性價比最高的工具：

    僅heidi自己，就使用過word、ppt、flash來做過線框圖，我們身邊的同事，有使用visio的，也有使用excel的，也有使用photoshop的，當然，在使用這些工具前，我們最容易使用的，最經(jīng)常使用的，仍然是白紙和筆，所以，總是想在分享這個內(nèi)容前，先強調(diào)一下：工具真的不是問題！因為很多新人，總是喜歡上來就問工具，好像掌握了一個工具，就可以畫出很好的線框圖，就可以顯得自己很專業(yè)似的。

    我們發(fā)現(xiàn)，凡是輔助想法表達的工具，可能都會慢慢越來越缺乏專業(yè)性，使用門檻降至最低，正因為這樣，才能夠讓我們在表達想法時，不會去受工具使用的束縛，從而真正將注意力放到想法本身。

    最后我選擇了axure，也不是因為它目前流行，而是真正因為它的性價比。

    好的工具，能夠使線框圖本身的優(yōu)勢得到最大的發(fā)揮，所以選擇一個好的工具的原則是：

    1. 保證線框圖本身優(yōu)勢（快速、容易修改、幫助聚焦）

    2. 便于分享與傳播（導出html，只要有電腦就可以看）

    3. 上手快（axure幾乎沒有使用門檻，真不知道為何有人靠培訓axure收錢怎么收的）

    至于官方網(wǎng)站上寫的選擇的理由，我反而覺得不是最重要的，當然，也是仁者見仁，智者見智了。   

三。學會基本技能

很多學axure的同學，一不小心將自己進化到高級技能了。但是，除了顯示自己很專業(yè)外，真的有用嗎？

我靠axure吃飯很久了，也沒寫過什么高級命令，我用的最高級的功能，也就是imageregion以及動態(tài)面板了。

看起來很酷，但是實際項目里你會發(fā)現(xiàn)，將多種狀態(tài)做到動態(tài)面板里，反而會在交付后，引起誤解，并不一定有工程師知道有東西還隱藏在動態(tài)面板里嘛。

最簡單，仍然是將不同的狀態(tài)都列舉出來，這樣就一目了然了：

比如，在留言區(qū)域，輸入前狀態(tài)和輸入中狀態(tài)，都列舉出來：

所謂的基本技能，其實也就是：

1. 導入圖片

2. 增加組件（形狀、文本、線條、button等）

3. 改變組件的形狀、大小、顏色

4. 增加交互組件（radio button，check box，drop list之類）

5. 增加超鏈接（內(nèi)部鏈接、外部鏈接）

6. 生成html

over……以上這些，對于簡單的線框圖，足夠了。

若真的不明白，可以看一下這個文檔：http://www.webppd.com/thread-82-1-1.html

四。你可能會用到的工具和快捷鍵

就三個足矣。很不幸的是，我們必須要容忍axure的一些問題，這些問題有可能也是由于漢化導致的，比如中文輸入。我做線框圖的時候，一般就用以上的三個東西，一個快捷鍵，加兩個外掛。至于好用不好用，用過的人，你懂的。我在這里只所以提一下，是為了避免，萬一有同學用axure的時候，不淡定影響自己的情緒和生理健康：

為何別人的文本行距都很美，我的不知道怎么調(diào)整？——其實人家是一行一行寫的。
為何別人能輸入中文，我的就不行?——有可能是用記事本粘貼的，或者是用了別的輸入法。

我這里提到的高級技能，在大牛眼里看，其實還是初級的。但是so what，對于我來說，已經(jīng)足夠了，最需要的是效率而不是把線框圖做到完全交互的原型。

1. 動態(tài)面板實現(xiàn)頁面不刷新時的狀態(tài)切換

你可以將不同的內(nèi)容分別放到一個動態(tài)面板的兩個狀態(tài)里，根據(jù)你的需求，事先當鼠標點擊后，或者鼠標移上上的狀態(tài)切換。比如當點擊以下的“關閉演示指南”，使此區(qū)域變成收起的狀態(tài)：

使用動態(tài)面板就可以輕易實現(xiàn)不刷新頁面時的tab切換效果了。

但是，我真的建議，還是分成幾個頁面做，或者直接將不同的tab內(nèi)容羅列到同一個頁面上，這樣也可以幫助pd去整理文案需求，不至于因為隱藏在動態(tài)面板里而遺漏掉。

2. 頁面內(nèi)錨標記

一個頁面的某個鏈接點擊后，跳轉(zhuǎn)到同一個頁面的某個區(qū)域。

使用圖片映射熱區(qū)這個組件可以完成此使命，英文版叫做：image map region

我還是忍不住建議，干脆為鏈接加上標注，或者撰寫到文檔里好了，否則被交接的人，如何知道點擊后是跳轉(zhuǎn)到頁面內(nèi)的區(qū)域呢。線框圖是代替不了人與人之間的溝通的。

3. 做流程圖

我只所以把流程圖作為高級技能，是因為大家普遍認為axure做流程圖并不專業(yè)，所以基本還是用visio做的多一些，但是把流程圖和線框圖分開來做，很麻煩的，還是整合在一起吧。后來我發(fā)現(xiàn)，其實axure做流程圖并不難用，我現(xiàn)在無論是簡單流程圖還是詳細流程圖都用一個工具來實現(xiàn)，那就是axure：

簡單流程圖效果：

詳細流程圖（detailed page flow）效果：

 有些同學做的流程圖已經(jīng)很專業(yè)很美觀了，我的就獻丑了！

 其他的高級技能還包括：使用masters等，這里也不一一說了。

 最重要仍然是在實踐中學習。

 最后，和大家分享一個剛剛遇到的國外的網(wǎng)站，里面有關于線框圖的各種各樣的分享和有趣的東西：

原文：http://heidixie.blog.sohu.com/159793641.html