對于任何一個開發(fā)項目來說最大的錯誤可能就是沒有計劃。最近，有些人認(rèn)為開始前無需計劃，一個優(yōu)秀的開發(fā)者需要的是隨機應(yīng)變。我敢肯定這樣的做法最后注定是要失敗的。

線框圖是計劃中的第一步也是最重要的一步。這是將創(chuàng)意轉(zhuǎn)換成客戶使用的程序的第一步。本文將要帶你了解線框圖整個的流程；包括涉及參與人員，工具等，以便您能夠更好的制作計劃。

1）了解自己的目標(biāo)
作為一個開發(fā)人員我想大家都有馬上坐下來開始編碼的沖動。通常最初的想法都很簡單，那么你真的可以坐下直接開始嗎？答案是否定的，項目很少有那么簡單的，任何有經(jīng)驗的人都知道這樣做將會有 很多這樣的那樣的問題等著你。

一個線框圖可以有效的提供您的工作效率。修改計劃內(nèi)容遠(yuǎn)比在工作開始后在更正要來得更容易。

這個過程也有助于對項目更深的理解。事先作出計劃，提出問題、意見，以便解決問題。

最終制定一個工作計劃，規(guī)劃設(shè)計者，開發(fā)者，工程師以及項目經(jīng)理各自的工作內(nèi)容，并且要保證各個環(huán)節(jié)的配合。

2）重功能，輕外觀

計劃展示的效果不同主要體現(xiàn)在所采用工具的多樣性。其實從根本上說都是介紹有關(guān)功能部分的應(yīng)用，例如，一個網(wǎng)頁將有3個文本框和2個按鈕。 這是功能而不是形式。

在Howard Baines我們嚴(yán)格按照這一原則進行，并且我們的線框圖只包括一些功能要素（線框，按鈕，下拉菜單等）。我們忽略任何視覺和布局的東西。其他人可能會做的更多一些，包括了布局和其他視覺的元素。這取決于你自己。

3）積累自身經(jīng)驗

并不一定要求您具備設(shè)計和開發(fā)的能力，而需要的是在網(wǎng)頁應(yīng)用或者網(wǎng)站上的經(jīng)驗。當(dāng)然經(jīng)驗越豐富越好，并且你不需去理解關(guān)系型數(shù)據(jù)庫只要畫線框。

4）確定負(fù)責(zé)人

確保有人對整個計劃負(fù)責(zé)。他們負(fù)責(zé)跟進和管理反饋，變化等。如果一個項目，那么通常負(fù)責(zé)人是發(fā)起人，因為他們更清楚目標(biāo)所在。如果為客戶提供服務(wù)，我們將會負(fù)責(zé)計劃的進程。不管是誰，只要有人負(fù)責(zé)。

5）涉及每個人

也許不是第一次會議，必須在紙上鎖定一個簡單的方案并且是涉及關(guān)鍵利益者的想法。很少，參與的人們加快設(shè)計進程。同時，線框圖的開發(fā)涉及你的團隊和客戶團隊。例如，你正在用你現(xiàn)有的數(shù)據(jù)庫整合你的應(yīng)用程序或者網(wǎng)站，然后確保數(shù)據(jù)庫所有者可以檢測所有數(shù)據(jù)庫中的數(shù)據(jù)字段在你把他們加入到你的線框之前。收集用戶的傳真號碼如果無處存放是不好的。同水平的設(shè)計師對用戶體驗有很好的理解，并且在早期流動時會存在潛在的問題。

6）完成期限

預(yù)先留出時間和交付期限，對保持項目運行是非常重要的。最初線框圖會議可以是一天或是幾天，具體取決于應(yīng)用程序的大小，但都需設(shè)定一個時期并且堅持下去。會后按記錄跟進，以保持項目進程。

7）保持清潔

如果一個特別的網(wǎng)頁要求兩個文本框和一個按鈕，那么只要有這些即可，不多不少。

8）避免設(shè)計的線框圖太多

線框圖只要闡述如何達到所需功能，不包括任何介紹和設(shè)計的內(nèi)容。應(yīng)盡量避免任何有關(guān)設(shè)計的內(nèi)容，這樣很容易分散客戶的注意力。例如：為了更生動而增加一些藍色，那么有可能需要半小時的時間 去解釋關(guān)于藍色的用意。這些設(shè)計的內(nèi)容應(yīng)該是設(shè)計師的工作。

9）記住用戶界面不是用戶體驗

想一些使用的介紹方法是極其誘人，比如AJAX。注意：線框圖是關(guān)于功能元素而不是方案展示或者互動的方法。為了更直觀的展示應(yīng)用，應(yīng)盡量避免AJAX，應(yīng)側(cè)重于線框圖。

10）想想用戶

這是很顯然的，但是在規(guī)劃線框圖過程中還是很容易忽略這一點。我們的重點是功能，但是同樣要考慮用戶的體驗。例如，如果你做了一個三頁長的注冊表單，可能發(fā)現(xiàn)很多人都是無法完成的。

11）不要懶惰

我們常聽到：登陸頁面是簡單，可以不用寫在線框圖內(nèi)。確保線框圖包含計劃的所有內(nèi)容。在項目的末尾你應(yīng)該有一個詳細(xì)的說明。每一步都不應(yīng)被忽略。

12）將線框圖分成幾個部分

一個網(wǎng)站地圖或者應(yīng)用被經(jīng)常分為幾個部分，比如新聞，產(chǎn)品，和用戶賬戶。這樣做更容易理解。

13）頁面的數(shù)量

一個網(wǎng)頁的應(yīng)用往往包含了若干程序；結(jié)算就是一個很好的例子。通常是線性的，但是有時用戶會選擇不同步驟，例如跳過一步。顯然你文檔中的一些頁面和頁面中的標(biāo)簽（例如點擊按鈕）讓用戶跳轉(zhuǎn)。

14）重復(fù)性

應(yīng)用中的一致性可以有效地幫助用戶，開發(fā)和設(shè)計者。組的重復(fù)元素是一件好事。例如，無論用戶輸入一個地址，將會是同樣的地方在同樣的命令。在規(guī)劃線框圖時就可以將其表示出來。

15）全部檢查是有意義的

最終文檔應(yīng)該讓任何人都能簡單的操作。如果只是一個開發(fā)可以理解你的線框圖，那么肯定是有問題的。最后問一下對這個項目什么都沒有做的人，他們是否能理解。

16）廣告也是功能

很多網(wǎng)站都有收費廣告，這可能和google的廣告一樣簡單，但他是功能而不是設(shè)計，所以也包括在內(nèi)。

17）這不僅僅是公開網(wǎng)站

很多網(wǎng)站有一個管理區(qū)域用來管理內(nèi)容，瀏覽注冊用戶概況，重設(shè)密碼等。這個功能許多人都用不到，但是也很重要。很多時候這可能包含一些不公開的數(shù)據(jù)（例如用戶賬戶啟用按鈕）。這對于開發(fā)在設(shè)計數(shù)據(jù)庫時是很重要的信息。

18）知道什么時候結(jié)束

確保所有的利益相關(guān)者有機會去給反饋，但不把這種鍛煉成畫西斯廷教堂。通常情況下，可以說三步就能把工作確定下來。第一，把想法寫在紙上；第二，從其他人那里得到反饋意見，比如，開發(fā)和設(shè)計者；第三定稿。

19）選擇正確的工具

用紙和筆比用電腦更能抓住你的想法和創(chuàng)意。

一旦你開始設(shè)計你的文檔我們建議使用你更喜歡的工具。例如，開發(fā)者可以用Microsoft Visio,項目經(jīng)理用PowerPoint，設(shè)計者用AdobeFireworks。

我認(rèn)為線框圖應(yīng)該是一篇文檔而不僅僅是交互交流（像設(shè)計，可能被分散注意力）因此設(shè)計html可能不是最好的。

有很多線框圖的工具，例如Balsamiq提供環(huán)境幫助很快的增加和自定義普遍的界面元素。他們可以給它一個手繪的感覺，提供一個視覺工具而不是真正開始的設(shè)計。

20）考慮相依性

每個人都知道一個購物車的流程是什么吧？因此很容易畫成線框圖并且放在一邊。如果你用第三方支付工具例如PayPal?那么也許影響部分網(wǎng)站的工作。研究相依性，做出相應(yīng)的修改。這在開始時更容易做到。

希望這篇文章可以提供一個清晰的畫線框的思路，誰參與，如何完成，工具如何使用，最后的輸出怎么樣。最終的事情是，好的完整的線框可以節(jié)省你的時間。

你有其他什么秘籍，可以更快的畫出線框圖嗎？

 英文原文：http://carsonified.com/blog/features/20-steps-to-better-wireframing/