畫好線框圖的20個步驟：知道什麼時候結束

　　對於任何一個開發項目來說最大的錯誤可能就是沒有計劃。最近，有些人認為開始前無需計劃，一個優秀的開發者需要的是隨機應變。我敢肯定這樣的做法最後注定是要失敗的。

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

　　1)了解自己的目標

　　作為一個開發人員我想大家都有馬上坐下來開始編碼的沖動。通常最初的想法都很簡單，那麼你真的可以坐下直接開始嗎?答案是否定的，項目很少有那麼簡單的，任何有經驗的人都知道這樣做將會有 很多這樣的那樣的問題等著你。

　　一個線框圖可以有效的提供您的工作效率。修改計劃內容遠比在工作開始後在更正要來得更容易。

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

　　最終制定一個工作計劃，規劃設計者，開發者，工程師以及項目經理各自的工作內容，並且要保證各個環節的配合。

　　2)重功能，輕外觀

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

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

　　3)積累自身經驗

　　並不一定要求您具備設計和開發的能力，而需要的是在網頁應用或者網站上的經驗。當然經驗越豐富越好，並且你不需去理解關系型數據庫只要畫線框。

　　4)確定負責人

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

　　5)涉及每個人

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

　　6)完成期限

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

　　7)保持清潔

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

　　8)避免設計的線框圖太多

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

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

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

　　10)想想用戶

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

　　11)不要懶惰

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

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

　　一個網站地圖或者應用被經常分為幾個部分，比如新聞，產品，和用戶賬戶。這樣做更容易理解。

　　13)頁面的數量

　　一個網頁的應用往往包含了若干程序;結算就是一個很好的例子。通常是線性的，但是有時用戶會選擇不同步驟，例如跳過一步。顯然你文檔中的一些頁面和頁面中的標簽(例如點擊按鈕)讓用戶跳轉。

　　14)重復性

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

　　15)全部檢查是有意義的

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

　　16)廣告也是功能

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

　　17)這不僅僅是公開網站

　　很多網站有一個管理區域用來管理內容，浏覽注冊用戶概況，重設密碼等。這個功能許多人都用不到，但是也很重要。很多時候這可能包含一些不公開的數據(例如用戶賬戶啟用按鈕)。這對於開發在設計數據庫時是很重要的信息。

　　18)知道什麼時候結束

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

　　19)選擇正確的工具

　　用紙和筆比用電腦更能抓住你的想法和創意。

　　一旦你開始設計你的文檔我們建議使用你更喜歡的工具。例如，開發者可以用Microsoft Visio，項目經理用PowerPoint，設計者用AdobeFireworks。

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

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

　　20)考慮相依性

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

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

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

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

　　文章來源：ued.alimama.com