网页设计三剑客

“网页设计三剑客”可能很多新同学都没听说过，因为缔造神话的公司已经快销声匿迹。“网页设计三剑客”是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代码是不能复用的，如果控制不好节奏会增加很多成本。我目前因为工作关系尝试不多，一直以来还是争取走敏捷设计的路子，尽可能的减少工作环节。

除最终在互联网上呈现给用户的“客户端代码”，所有做产品的过程文档，我认为都不用过分在乎形式和方法。只要把事情说清楚，怎么都可以，但我们必须去选择最适合自己的工具。论语里有“工欲善其事，必先利其器。”当面临很多选择时，建议选择背景最资深、功能最强大的工具学习上手。不宜贪多，每种类型的交付物选择一种工具软件深入研究即可。当然，在团队协作的时候，需要同事共同维护“源文件”协作迭代，此时应该先达成共识。

最后展望一下未来，个人认为随着HTML5和CSS3的普及（也许需要十年），语义层“结构+表现”能够实现的视觉效果，能够满足互联网产品绝大部分高保真视觉设计需求。将来应该可以做到在代码编辑器里做“视觉设计”，很可能不再依赖于第三方软件。这样因为使用工具软件和交付物类型的减少，还可以进一步提高敏捷设计效率。