IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

网页设计三剑客

2010-08-22 22:23:43 累计浏览 3,216 次
本机暂存

    “网页设计三剑客”可能很多新同学都没听说过,因为缔造神话的公司已经快销声匿迹。“网页设计三剑客”是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的普及(也许需要十年),语义层“结构+表现”能够实现的视觉效果,能够满足互联网产品绝大部分高保真视觉设计需求。将来应该可以做到在代码编辑器里做“视觉设计”,很可能不再依赖于第三方软件。这样因为使用工具软件和交付物类型的减少,还可以进一步提高敏捷设计效率。

同分类推荐文章

  1. 如何写好设计文档? (2026-06-23 08:00:00)
  2. Designing With Uncertainty: How AI Supercharges Probabilistic Thinking (2026-06-16 23:00:00)
  3. The Benefits Of Cognitive Inclusion In UX Research (2026-06-10 18:00:00)

查看更多 设计 文章 →

建议继续学习

  1. Web表单设计之注册表单 (累计阅读 8,877)
  2. 视觉设计前瞻实用性研究(PNVD) 第三期 (累计阅读 6,039)
  3. 不得不说的糟糕设计 (累计阅读 4,905)
  4. 为flash建立socket安全策略文件服务器 (累计阅读 4,785)
  5. 在信息架构层次对比开心网和Facebook的设计 (累计阅读 4,394)
  6. 如何将AIR应用打包成exe (累计阅读 4,141)
  7. 《Patterns for Sign Up &Ramp Up》下载 (累计阅读 4,083)
  8. 设计师:值得长期关注的网站 (累计阅读 4,028)
  9. 清除Firefox下Flash(swf文件)缓存 (累计阅读 3,949)
  10. FlashCookie (累计阅读 3,942)