線框圖：那些必要的理論和前提

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

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

現在就是如何畫的問題。

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

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

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

線框圖，隻是提供了一個供讨論、供評審、供确認的承載物，然後并将确認後的需求（商業需求以及設計需求），以具象的方式再傳遞出去。

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

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

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

線框圖究竟如何畫呢？

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

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

表面上，你似乎是沒有經曆前面的階段，直接跳轉到詳細線框圖的，但是實際上，你腦子裡也一定是有前面的階段的，而且在現實項目裡，中間的這些環節是伴随着不斷的評審、确認，确認一個問題，得到一個決定，排除一些可能性，得到一些idea，進而讓可能性變得更靠譜更聚焦，最後剩下一個選擇，産出了确定好的線框圖。

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

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

從最簡單的開始，若你先跳轉了到了最後一步，或許會出現很悲劇的情況，你已經費勁了心思設計的互動，并不是需要的，如果把握不好确認的程度，會造成不隻你一個人的資源浪費。

3. 最大的價值在于讨論和确認

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

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

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

有一個經典的圖，經常被用到，那就是：

謹記：再不跟我确認這是一個人之前，不要給我談他的頭發的顔色。

二。選擇成本效益最高的工具：

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

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

最後我選擇了axure，也不是因為它目前流行，而是真正因為它的成本效益。

好的工具，能夠使線框圖本身的優勢得到最大的發揮，是以選擇一個好的工具的原則是：

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

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

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

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

三。學會基本技能

很多學axure的同學，一不小心将自己進化到進階技能了。但是，除了顯示自己很專業外，真的有用嗎？

我靠axure吃飯很久了，也沒寫過什麼進階指令，我用的最進階的功能，也就是imageregion以及動态面闆了。

看起來很酷，但是實際項目裡你會發現，将多種狀态做到動态面闆裡，反而會在傳遞後，引起誤解，并不一定有工程師知道有東西還隐藏在動态面闆裡嘛。

最簡單，仍然是将不同的狀态都列舉出來，這樣就一目了然了：

比如，在留言區域，輸入前狀态和輸入中狀态，都列舉出來：

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

1. 導入圖檔

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

3. 改變元件的形狀、大小、顔色

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

5. 增加超連結（内部連結、外部連結）

6. 生成html

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

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

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

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

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

四。所謂的進階技能

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

1. 動态面闆實作頁面不重新整理時的狀态切換

你可以将不同的内容分别放到一個動态面闆的兩個狀态裡，根據你的需求，事先當滑鼠點選後，或者滑鼠移上上的狀态切換。比如當點選以下的“關閉示範指南”，使此區域變成收起的狀态：

使用動态面闆就可以輕易實作不重新整理頁面時的tab切換效果了。

但是，我真的建議，還是分成幾個頁面做，或者直接将不同的tab内容羅列到同一個頁面上，這樣也可以幫助pd去整理文案需求，不至于因為隐藏在動态面闆裡而遺漏掉。

2. 頁面内錨标記

一個頁面的某個連結點選後，跳轉到同一個頁面的某個區域。

使用

圖檔映射熱區這個元件可以完成此使命，英文版叫做：image map region

我還是忍不住建議，幹脆為連結加上标注，或者撰寫到文檔裡好了，否則被交接的人，如何知道點選後是跳轉到頁面内的區域呢。線框圖是代替不了人與人之間的溝通的。

3. 做流程圖

我隻是以把流程圖作為進階技能，是因為大家普遍認為axure做流程圖并不專業，是以基本還是用visio做的多一些，但是把流程圖和線框圖分開來做，很麻煩的，還是整合在一起吧。後來我發現，其實axure做流程圖并不難用，我現在無論是簡單流程圖還是詳細流程圖都用一個工具來實作，那就是axure：

簡單流程圖效果：

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

有些同學做的流程圖已經很專業很美觀了，我的就獻醜了！

其他的進階技能還包括：使用masters等，這裡也不一一說了。

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