網頁設計三劍客
“網頁設計三劍客”可能很多新同學都沒聽說過,因為締造神話的公司已經快銷聲匿跡?!熬W頁設計三劍客”是Macromedia公司旗下Dreamweaver,Flash,Fireworks三款軟件合集的簡稱,而Macromedia在2005年底已被Adobe收購。在我學習web-design那會兒,它們已經是明星——Dreamweaver用來做頁面,Fireworks用來做圖形,Flash用來做動畫。如此反映的客觀事實,那個年代的web design由三大要素構成——頁面、圖形、動畫。
九年后的某個下午,例行UCD書友會的北京分會場,奇遇咖啡館內一群人在討論“互聯網產品設計軟件及工具”。我自己說了很多心得體會,也認真聽了大家的分享,發現曾經“網頁設計三劍客”里的Fireworks, Flash沒有任何人提及。其實正符合目前web design的發展趨勢,圖形用的越來越少,動畫用的越來越少。原因比較復雜,第一互聯網產品設計方法體系正在規范,第二各成熟技術體系在逐漸分離,第三現在好用工具的選擇太多。
曾經“做網頁”的概念,已經一步步上升到了“做網站”和“做產品”,相應我們工作的軟件也應該革新換代。使用工具主要看個人的技術背景,還有工作習慣,沒有所謂絕對的高效和優秀。再爛的方法,當熟能生巧之后也可以有較高效率,只不過理論上學習選擇優秀工具會比較劃算。目前我主要使用的軟件有如下三個,還是“三劍客”,區別在于它們分別來自三家公司:
- Mindjet MindManager,做抽象化的架構圖。
- Microsoft Office Visio,做具象化的線框圖、流程圖。
- Adobe Dreamweaver,做高保真、低保真HTML頁面。
我對MindManager有偏愛,既可以用來快速整理思路,也可以做長遠規劃式的結構,這幾年一直在嘗試個人知識管理的體系積累。Visio是最早接觸信息架構學習JJG那套Vocabulary遺留下來的習慣,功能足夠強大,操作上的不足我用經驗來彌補。Dreamweaver的使用經歷與我學習web design同步,目前主要用來寫HTML的線框圖,包括表現層CSS的結合。目前還在嘗試用來做設計規范和文檔須知,Dreamweaver的強大可以深入到互聯網產品的邊邊角角。針對軟件版本,我認為不是新的就一定好,我現在使用還是Macromedia時代的MX 2004版本,好用又不復雜,記得當時出的8.0就很糟糕。
曾經Fireworks主要用來做圖形界面,也就是web design里的修飾性Graphic,但是它的圖形處理能力又不及Photoshop,定位比較尷尬。到今天,能夠替代Fireworks做各程度高低保真界面原型的軟件很多,比如Visio, OmniGraffle, Axure等等都可以。
重點探討下Axure這個軟件,既可以使用設計模式很容易的“搭建”原型,也可以便捷的生成HTML頁面和交互路徑,用以在屏幕上真實演示。如此可以更真實的傳達“交互”邏輯,這是折中解決制作Web原型成本太高,但普通文檔原型又無法真實互動的低成本方案。定位很精準,因為目前從業人員直接有能力寫Web頁面的是少數,并且在某些項目中的確需要如此方式的快速迭代。但是,顯然它生成的HTML代碼是不能復用的,如果控制不好節奏會增加很多成本。我目前因為工作關系嘗試不多,一直以來還是爭取走敏捷設計的路子,盡可能的減少工作環節。
除最終在互聯網上呈現給用戶的“客戶端代碼”,所有做產品的過程文檔,我認為都不用過分在乎形式和方法。只要把事情說清楚,怎么都可以,但我們必須去選擇最適合自己的工具。論語里有“工欲善其事,必先利其器?!碑斆媾R很多選擇時,建議選擇背景最資深、功能最強大的工具學習上手。不宜貪多,每種類型的交付物選擇一種工具軟件深入研究即可。當然,在團隊協作的時候,需要同事共同維護“源文件”協作迭代,此時應該先達成共識。
最后展望一下未來,個人認為隨著HTML5和CSS3的普及(也許需要十年),語義層“結構+表現”能夠實現的視覺效果,能夠滿足互聯網產品絕大部分高保真視覺設計需求。將來應該可以做到在代碼編輯器里做“視覺設計”,很可能不再依賴于第三方軟件。這樣因為使用工具軟件和交付物類型的減少,還可以進一步提高敏捷設計效率。
源地址:http://blog.rexsong.com/?p=9474
- 目前還沒評論,等你發揮!