介紹一種好的設(shè)計(jì)方法——在軟件設(shè)計(jì)前先畫界面圖

totoo130

在做軟件設(shè)計(jì)之前，畫好系統(tǒng)的界面圖是一種非常有效的建模和交流方式。
總是有人抱怨在需求和軟件設(shè)計(jì)之間仍然有很大的鴻溝需要填補(bǔ)，這是至今仍然未能有效解決的軟件工程難題。多年以來(lái)，有很多人一直在尋找從需求到設(shè)計(jì)的直接的形式化映射方法，但是收獲很少。實(shí)際上軟件工程對(duì)于軟件生命周期前面的那些階段并沒有多大的幫助。為了響應(yīng) o6z 說(shuō)的努力在在現(xiàn)有技術(shù)基礎(chǔ)上殺死人狼的號(hào)召，我來(lái)推薦一種有效的設(shè)計(jì)方法。

這種方法其實(shí)非常簡(jiǎn)單，就是不要急于從需求轉(zhuǎn)到軟件設(shè)計(jì)，而是根據(jù)需求文檔（可以是傳統(tǒng)的需求說(shuō)明書也可以是用例）先畫出系統(tǒng)的界面圖來(lái)。用什么畫圖呢？你可能立即會(huì)想到 Word、Visio、ROSE 一類的工具，我現(xiàn)在告訴你這是錯(cuò)誤的做法。你應(yīng)該采用最快的方式把界面圖畫出來(lái)，因?yàn)榻缑鎴D主要是用來(lái)交流的（是給人看的而不是給機(jī)器看的），所以你不需要太拘泥于形式。你找些白紙和一支鉛筆，馬上就可以開展這項(xiàng)重要工作了。如果用白紙和鉛筆，我一天最多可以畫 20 張界面圖，但是用 Word 我的速度可就慢多了，因?yàn)槲疫�要考慮排版、美觀等等無(wú)聊的細(xì)節(jié)。
你要把界面的布局畫的詳細(xì)些，起碼界面上所有的功能點(diǎn)（比如所有的按鈕和超鏈接）應(yīng)該全部畫出來(lái)。不僅要畫出第一級(jí)頁(yè)面，那些第二級(jí)頁(yè)面、彈出頁(yè)面、子頁(yè)面也都要畫出來(lái)。他們之間的邏輯關(guān)系和導(dǎo)航關(guān)系都要明確地標(biāo)記出來(lái)。你最好盡量考慮的細(xì)致一些以便頁(yè)面制作人員（實(shí)際上我們是由程序員自己來(lái)制作頁(yè)面的，可能又會(huì)引起某些人的驚詫和憤慨了）可以參照這些界面圖不需要費(fèi)什么腦子就能順利把頁(yè)面做出來(lái)，而不是他們做出來(lái)后你又要告訴他們這個(gè)地方不對(duì)那個(gè)地方不對(duì)。如果你能把這些界面圖全部想象出來(lái)并且能細(xì)致地畫在紙面上（當(dāng)然這個(gè)工作并不象這里說(shuō)的那么容易），那么系統(tǒng)該做成什么樣子你就胸有成竹了。使用這些界面圖來(lái)進(jìn)行討論也會(huì)比較具體和深入。需求文檔總是給人以不夠具體的感覺，界面圖畫出來(lái)后，需求就非常具體了（一目了然，程序員因?yàn)橹苯訁⑴c這項(xiàng)工作，因此對(duì)于需求非常清楚，做開發(fā)的時(shí)候可以大量減少由于理解上的問(wèn)題而產(chǎn)生的 bug）。而且還可以根據(jù)界面圖的數(shù)量和復(fù)雜度估算工作量，和客戶討價(jià)還價(jià)的時(shí)候心里比較也有底，客戶對(duì)我們估計(jì)的工作量也比較信服。當(dāng)然你還要盡量把界面設(shè)計(jì)的美觀大方而且容易使用，這方面可以參考我上面介紹的那本書和 Alan Cooper 的《軟件創(chuàng)新之路》。

這些界面圖需要討論上兩到三次才能定稿，討論的時(shí)候最好能有最終用戶的參與，以便盡早獲得他的反饋。在這時(shí)候發(fā)現(xiàn)需求理解上的錯(cuò)誤，修改只需要在白紙上重新畫幾張界面圖，成本可以說(shuō)是最低的。定稿后這些界面圖要作為重要的項(xiàng)目文檔歸檔保存。

下一步工作是根據(jù)界面圖制作出頁(yè)面，這里我指的是正式的頁(yè)面（而不僅僅是一個(gè)由超鏈接形成的界面原型），包括全部的 JavaScript 腳本。我們現(xiàn)在創(chuàng)造了一種新的開發(fā)方式，可以完全不做后臺(tái)的開發(fā)把全部頁(yè)面制作好。然后再寫后臺(tái)的代碼和配置。因?yàn)槲覀兡壳肮ぷ髁康拇蠹s 2/3 集中于前臺(tái)的頁(yè)面和 JS 上，所以頁(yè)面全部做好后可以說(shuō) 2/3 的工作量就已經(jīng)完成了。

有很多的經(jīng)驗(yàn)都是軟件工程的經(jīng)典教材中所沒有的，難道我們就可以忽略這些經(jīng)驗(yàn)了嗎？有那些項(xiàng)目組是采用這種方式來(lái)做開發(fā)的？

原文 http://www.javaeye.com/topic/5545