“網(wǎng)頁設(shè)計(jì)三劍客”可能很多新同學(xué)都沒聽說過，因?yàn)榫喸焐裨挼墓疽呀?jīng)快銷聲匿跡?！熬W(wǎng)頁設(shè)計(jì)三劍客”是Macromedia公司旗下Dreamweaver,Flash,Fireworks三款軟件合集的簡稱，而Macromedia在2005年底已被Adobe收購。在我學(xué)習(xí)web-design那會兒，它們已經(jīng)是明星——Dreamweaver用來做頁面，F(xiàn)ireworks用來做圖形，F(xiàn)lash用來做動畫。如此反映的客觀事實(shí)，那個(gè)年代的web design由三大要素構(gòu)成——頁面、圖形、動畫。

九年后的某個(gè)下午，例行UCD書友會的北京分會場，奇遇咖啡館內(nèi)一群人在討論“互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)軟件及工具”。我自己說了很多心得體會，也認(rèn)真聽了大家的分享，發(fā)現(xiàn)曾經(jīng)“網(wǎng)頁設(shè)計(jì)三劍客”里的Fireworks, Flash沒有任何人提及。其實(shí)正符合目前web design的發(fā)展趨勢，圖形用的越來越少，動畫用的越來越少。原因比較復(fù)雜，第一互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)方法體系正在規(guī)范，第二各成熟技術(shù)體系在逐漸分離，第三現(xiàn)在好用工具的選擇太多。

曾經(jīng)“做網(wǎng)頁”的概念，已經(jīng)一步步上升到了“做網(wǎng)站”和“做產(chǎn)品”，相應(yīng)我們工作的軟件也應(yīng)該革新?lián)Q代。使用工具主要看個(gè)人的技術(shù)背景，還有工作習(xí)慣，沒有所謂絕對的高效和優(yōu)秀。再爛的方法，當(dāng)熟能生巧之后也可以有較高效率，只不過理論上學(xué)習(xí)選擇優(yōu)秀工具會比較劃算。目前我主要使用的軟件有如下三個(gè)，還是“三劍客”，區(qū)別在于它們分別來自三家公司：

• Mindjet MindManager，做抽象化的架構(gòu)圖。
• Microsoft Office Visio，做具象化的線框圖、流程圖。
• Adobe Dreamweaver，做高保真、低保真HTML頁面。

我對MindManager有偏愛，既可以用來快速整理思路，也可以做長遠(yuǎn)規(guī)劃式的結(jié)構(gòu)，這幾年一直在嘗試個(gè)人知識管理的體系積累。Visio是最早接觸信息架構(gòu)學(xué)習(xí)JJG那套Vocabulary遺留下來的習(xí)慣，功能足夠強(qiáng)大，操作上的不足我用經(jīng)驗(yàn)來彌補(bǔ)。Dreamweaver的使用經(jīng)歷與我學(xué)習(xí)web design同步，目前主要用來寫HTML的線框圖，包括表現(xiàn)層CSS的結(jié)合。目前還在嘗試用來做設(shè)計(jì)規(guī)范和文檔須知，Dreamweaver的強(qiáng)大可以深入到互聯(lián)網(wǎng)產(chǎn)品的邊邊角角。針對軟件版本，我認(rèn)為不是新的就一定好，我現(xiàn)在使用還是Macromedia時(shí)代的MX 2004版本，好用又不復(fù)雜，記得當(dāng)時(shí)出的8.0就很糟糕。

曾經(jīng)Fireworks主要用來做圖形界面，也就是web design里的修飾性Graphic，但是它的圖形處理能力又不及Photoshop，定位比較尷尬。到今天，能夠替代Fireworks做各程度高低保真界面原型的軟件很多，比如Visio, OmniGraffle, Axure等等都可以。

重點(diǎn)探討下Axure這個(gè)軟件，既可以使用設(shè)計(jì)模式很容易的“搭建”原型，也可以便捷的生成HTML頁面和交互路徑，用以在屏幕上真實(shí)演示。如此可以更真實(shí)的傳達(dá)“交互”邏輯，這是折中解決制作Web原型成本太高，但普通文檔原型又無法真實(shí)互動的低成本方案。定位很精準(zhǔn)，因?yàn)槟壳皬臉I(yè)人員直接有能力寫Web頁面的是少數(shù)，并且在某些項(xiàng)目中的確需要如此方式的快速迭代。但是，顯然它生成的HTML代碼是不能復(fù)用的，如果控制不好節(jié)奏會增加很多成本。我目前因?yàn)楣ぷ麝P(guān)系嘗試不多，一直以來還是爭取走敏捷設(shè)計(jì)的路子，盡可能的減少工作環(huán)節(jié)。

除最終在互聯(lián)網(wǎng)上呈現(xiàn)給用戶的“客戶端代碼”，所有做產(chǎn)品的過程文檔，我認(rèn)為都不用過分在乎形式和方法。只要把事情說清楚，怎么都可以，但我們必須去選擇最適合自己的工具。論語里有“工欲善其事，必先利其器?！碑?dāng)面臨很多選擇時(shí)，建議選擇背景最資深、功能最強(qiáng)大的工具學(xué)習(xí)上手。不宜貪多，每種類型的交付物選擇一種工具軟件深入研究即可。當(dāng)然，在團(tuán)隊(duì)協(xié)作的時(shí)候，需要同事共同維護(hù)“源文件”協(xié)作迭代，此時(shí)應(yīng)該先達(dá)成共識。

最后展望一下未來，個(gè)人認(rèn)為隨著HTML5和CSS3的普及（也許需要十年），語義層“結(jié)構(gòu)+表現(xiàn)”能夠?qū)崿F(xiàn)的視覺效果，能夠滿足互聯(lián)網(wǎng)產(chǎn)品絕大部分高保真視覺設(shè)計(jì)需求。將來應(yīng)該可以做到在代碼編輯器里做“視覺設(shè)計(jì)”，很可能不再依賴于第三方軟件。這樣因?yàn)槭褂霉ぞ哕浖徒桓段镱愋偷臏p少，還可以進(jìn)一步提高敏捷設(shè)計(jì)效率。

源地址：http://blog.rexsong.com/?p=9474