線框圖是計(jì)劃中的第一步也是最重要的一步。這是將創(chuàng)意轉(zhuǎn)換成客戶使用的程序的第一步。本文將要帶你了解線框圖整個(gè)的流程；包括涉及參與人員，工具等，以便您能夠更好的制作計(jì)劃。
1）了解自己的目標(biāo)
作為一個(gè)開發(fā)人員我想大家都有馬上坐下來(lái)開始編碼的沖動(dòng)。通常最初的想法都很簡(jiǎn)單，那么你真的可以坐下直接開始嗎？答案是否定的，項(xiàng)目很少有那么簡(jiǎn)單的，任何有經(jīng)驗(yàn)的人都知道這樣做將會(huì)有 很多這樣的那樣的問(wèn)題等著你。
一個(gè)線框圖可以有效的提供您的工作效率。修改計(jì)劃內(nèi)容遠(yuǎn)比在工作開始后在更正要來(lái)得更容易。
這個(gè)過(guò)程也有助于對(duì)項(xiàng)目更深的理解。事先作出計(jì)劃，提出問(wèn)題、意見，以便解決問(wèn)題。
最終制定一個(gè)工作計(jì)劃，規(guī)劃設(shè)計(jì)者，開發(fā)者，工程師以及項(xiàng)目經(jīng)理各自的工作內(nèi)容，并且要保證各個(gè)環(huán)節(jié)的配合。
2）重功能，輕外觀
計(jì)劃展示的效果不同主要體現(xiàn)在所采用工具的多樣性。其實(shí)從根本上說(shuō)都是介紹有關(guān)功能部分的應(yīng)用，例如，一個(gè)網(wǎng)頁(yè)將有3個(gè)文本框和2個(gè)按鈕。 這是功能而不是形式。
在Howard Baines我們嚴(yán)格按照這一原則進(jìn)行，并且我們的線框圖只包括一些功能要素（線框，按鈕，下拉菜單等）。我們忽略任何視覺和布局的東西。其他人可能會(huì)做的更多一些，包括了布局和其他視覺的元素。這取決于你自己。
3）積累自身經(jīng)驗(yàn)
并不一定要求您具備設(shè)計(jì)和開發(fā)的能力，而需要的是在網(wǎng)頁(yè)應(yīng)用或者網(wǎng)站上的經(jīng)驗(yàn)。當(dāng)然經(jīng)驗(yàn)越豐富越好，并且你不需去理解關(guān)系型數(shù)據(jù)庫(kù)只要畫線框。
4）確定負(fù)責(zé)人
確保有人對(duì)整個(gè)計(jì)劃負(fù)責(zé)。他們負(fù)責(zé)跟進(jìn)和管理反饋，變化等。如果一個(gè)項(xiàng)目，那么通常負(fù)責(zé)人是發(fā)起人，因?yàn)樗麄兏宄繕?biāo)所在。如果為客戶提供服務(wù)，我們將會(huì)負(fù)責(zé)計(jì)劃的進(jìn)程。不管是誰(shuí)，只要有人負(fù)責(zé)。
5）涉及每個(gè)人
也許不是第一次會(huì)議，必須在紙上鎖定一個(gè)簡(jiǎn)單的方案并且是涉及關(guān)鍵利益者的想法。很少，參與的人們加快設(shè)計(jì)進(jìn)程。同時(shí)，線框圖的開發(fā)涉及你的團(tuán)隊(duì)和客戶團(tuán)隊(duì)。例如，你正在用你現(xiàn)有的數(shù)據(jù)庫(kù)整合你的應(yīng)用程序或者網(wǎng)站，然后確保數(shù)據(jù)庫(kù)所有者可以檢測(cè)所有數(shù)據(jù)庫(kù)中的數(shù)據(jù)字段在你把他們加入到你的線框之前。收集用戶的傳真號(hào)碼如果無(wú)處存放是不好的。同水平的設(shè)計(jì)師對(duì)用戶體驗(yàn)有很好的理解，并且在早期流動(dòng)時(shí)會(huì)存在潛在的問(wèn)題。
6）完成期限
預(yù)先留出時(shí)間和交付期限，對(duì)保持項(xiàng)目運(yùn)行是非常重要的。最初線框圖會(huì)議可以是一天或是幾天，具體取決于應(yīng)用程序的大小，但都需設(shè)定一個(gè)時(shí)期并且堅(jiān)持下去。會(huì)后按記錄跟進(jìn)，以保持項(xiàng)目進(jìn)程。
7）保持清潔
如果一個(gè)特別的網(wǎng)頁(yè)要求兩個(gè)文本框和一個(gè)按鈕，那么只要有這些即可，不多不少。
8）避免設(shè)計(jì)的線框圖太多
線框圖只要闡述如何達(dá)到所需功能，不包括任何介紹和設(shè)計(jì)的內(nèi)容。應(yīng)盡量避免任何有關(guān)設(shè)計(jì)的內(nèi)容，這樣很容易分散客戶的注意力。例如：為了更生動(dòng)而增加一些藍(lán)色，那么有可能需要半小時(shí)的時(shí)間 去解釋關(guān)于藍(lán)色的用意。這些設(shè)計(jì)的內(nèi)容應(yīng)該是設(shè)計(jì)師的工作。
9）記住用戶界面不是用戶體驗(yàn)
想一些使用的介紹方法是極其誘人，比如AJAX。注意：線框圖是關(guān)于功能元素而不是方案展示或者互動(dòng)的方法。為了更直觀的展示應(yīng)用，應(yīng)盡量避免AJAX，應(yīng)側(cè)重于線框圖。
10）想想用戶
這是很顯然的，但是在規(guī)劃線框圖過(guò)程中還是很容易忽略這一點(diǎn)。我們的重點(diǎn)是功能，但是同樣要考慮用戶的體驗(yàn)。例如，如果你做了一個(gè)三頁(yè)長(zhǎng)的注冊(cè)表單，可能發(fā)現(xiàn)很多人都是無(wú)法完成的。
11）不要懶惰
我們常聽到：登陸頁(yè)面是簡(jiǎn)單，可以不用寫在線框圖內(nèi)。確保線框圖包含計(jì)劃的所有內(nèi)容。在項(xiàng)目的末尾你應(yīng)該有一個(gè)詳細(xì)的說(shuō)明。每一步都不應(yīng)被忽略。
12）將線框圖分成幾個(gè)部分
一個(gè)網(wǎng)站地圖或者應(yīng)用被經(jīng)常分為幾個(gè)部分，比如新聞，產(chǎn)品，和用戶賬戶。這樣做更容易理解。
13）頁(yè)面的數(shù)量
一個(gè)網(wǎng)頁(yè)的應(yīng)用往往包含了若干程序；結(jié)算就是一個(gè)很好的例子。通常是線性的，但是有時(shí)用戶會(huì)選擇不同步驟，例如跳過(guò)一步。顯然你文檔中的一些頁(yè)面和頁(yè)面中的標(biāo)簽（例如點(diǎn)擊按鈕）讓用戶跳轉(zhuǎn)。
14）重復(fù)性
應(yīng)用中的一致性可以有效地幫助用戶，開發(fā)和設(shè)計(jì)者。組的重復(fù)元素是一件好事。例如，無(wú)論用戶輸入一個(gè)地址，將會(huì)是同樣的地方在同樣的命令。在規(guī)劃線框圖時(shí)就可以將其表示出來(lái)。
15）全部檢查是有意義的
最終文檔應(yīng)該讓任何人都能簡(jiǎn)單的操作。如果只是一個(gè)開發(fā)可以理解你的線框圖，那么肯定是有問(wèn)題的。最后問(wèn)一下對(duì)這個(gè)項(xiàng)目什么都沒有做的人，他們是否能理解。
16）廣告也是功能
很多網(wǎng)站都有收費(fèi)廣告，這可能和google的廣告一樣簡(jiǎn)單，但他是功能而不是設(shè)計(jì)，所以也包括在內(nèi)。
17）這不僅僅是公開網(wǎng)站
很多網(wǎng)站有一個(gè)管理區(qū)域用來(lái)管理內(nèi)容，瀏覽注冊(cè)用戶概況，重設(shè)密碼等。這個(gè)功能許多人都用不到，但是也很重要。很多時(shí)候這可能包含一些不公開的數(shù)據(jù)（例如用戶賬戶啟用按鈕）。這對(duì)于開發(fā)在設(shè)計(jì)數(shù)據(jù)庫(kù)時(shí)是很重要的信息。
18）知道什么時(shí)候結(jié)束
確保所有的利益相關(guān)者有機(jī)會(huì)去給反饋，但不把這種鍛煉成畫西斯廷教堂。通常情況下，可以說(shuō)三步就能把工作確定下來(lái)。第一，把想法寫在紙上；第二，從其他人那里得到反饋意見，比如，開發(fā)和設(shè)計(jì)者；第三定稿。
19）選擇正確的工具
用紙和筆比用電腦更能抓住你的想法和創(chuàng)意。
一旦你開始設(shè)計(jì)你的文檔我們建議使用你更喜歡的工具。例如，開發(fā)者可以用Microsoft Visio,項(xiàng)目經(jīng)理用PowerPoint，設(shè)計(jì)者用AdobeFireworks。
我認(rèn)為線框圖應(yīng)該是一篇文檔而不僅僅是交互交流（像設(shè)計(jì)，可能被分散注意力）因此設(shè)計(jì)html可能不是最好的。
有很多線框圖的工具，例如Balsamiq提供環(huán)境幫助很快的增加和自定義普遍的界面元素。他們可以給它一個(gè)手繪的感覺，提供一個(gè)視覺工具而不是真正開始的設(shè)計(jì)。
20）考慮相依性
每個(gè)人都知道一個(gè)購(gòu)物車的流程是什么吧？因此很容易畫成線框圖并且放在一邊。如果你用第三方支付工具例如PayPal?那么也許影響部分網(wǎng)站的工作。研究相依性，做出相應(yīng)的修改。這在開始時(shí)更容易做到。
希望這篇文章可以提供一個(gè)清晰的畫線框的思路，誰(shuí)參與，如何完成，工具如何使用，最后的輸出怎么樣。最終的事情是，好的完整的線框可以節(jié)省你的時(shí)間。
你有其他什么秘籍，可以更快的畫出線框圖嗎？
英文原文：http://carsonified.com/blog/features/20-steps-to-better-wireframing/
聯(lián)系客服
