丁宇 | DING Yu

最好的原型和流程图绘制工具:OmniGraffle

“使用哪种原型设计工具”大概是设计师闲聊时出现频率最高的话题之一。据我了解一般以Visio和Photoshop为主,也有人用Flash和PPT,据一个新来的同事说,他们公司还用Excel。我实在想不出用Excel怎么画图,哈哈。我个人最喜欢的工具是OmniGraffle(如下图),自从我用了它以后,就再也不想用其它原型设计软件了。

首先我必须隆重介绍一下Omni Group这家只有26个人的小公司,他们人数虽少,但却产出了像OmniWebOmniGraffleOmniPlanOmniOutliner等等一系列深受用户欢迎的精品软件,实力绝对不容小觑。

你可以用OmniGraffle(以下简称OG)来做很多事情,我一般用它来绘制流程图和界面原型。相比较于Visio等工具,它的以下特点和功能让人爱不释手:

漂亮的界面

OG的界面太漂亮了,至少比灰突突的Visio好看多了。“美的就是好的”(《最佳设计100细则》),用OG绘图的时候脑中常常充满灵感,而对着Visio则只想尽快把工作做完。

能轻而易举的绘制出漂亮的图形

OG的可用性做得很好,可以让一名新手很快地绘制出“想让人舔一口”(Jobs当年评价OS X界面时的原话)的流程图和原型图。我使用它没多久就定义了一套自己的样式(如下图),并在项目中重用。

丰富、精致的模板(Stencil/Template)

除了官方的模板外,Graffletopia网站提供了众多设计精美的模板。不仅有常见的网络、软件流程、电路等类目,甚至还有UCD相关的模板(如下图),不仅显著提升工作效率,而且也使得你的产出物与众不同!


Information Architecture


User-Centered Design Activities

辅助对齐和尺寸调整功能

在用Visio的时候,你有多少次想把多个元素的大小调成一样的?反正我每次用它绘制流程图的时候都想这么做,可每次都需要一个个的调整,让人无可奈何。在OG里面,这是一件小菜一碟的事儿。当你调整任何一个元素的大小时,OG都会自动捕捉并显示页面内所有元素的大小,并辅助鼠标的运动(通过磁性感),以便让这一元素的大小和其它任何一个你想要的元素保持一致(如下图)。对于没用过OG的人来说,这听起来可谓“震撼”,我第一次发现这功能时激动不已!此外,保持两个或多个元素在水平和垂直方向上对齐也是轻而易举的事:辅助线总在你需要的时候出现(如下图)。


辅助尺寸调整


辅助对齐

OG还有数不清的好用的小功能,让人感觉无时无刻不处在这个软件的关怀之中!总之,对于设计类软件来说,OG绝对是用户体验的典范之作。

最后,很不幸的是,这个软件只有Mac版。不过如果你只有PC的话,不妨看看这里 :)


  1. Felix Ding @ 2007-11-21 04:53:30 +0800:

    测试评论功能 :D

  2. TT @ 2007-11-23 18:13:27 +0800:

    felix,请教windows下的原型工具。


    目前用blend,太大太占资源了。。。

  3. Felix Ding @ 2007-11-27 05:57:10 +0800:

    Blend是MS的Expression系列中的那个吗?
    软件还是很多的,还是要看你具体的需求了。根据产出物或使用目的的不同,我一般会使用Dreamweaver或Photoshop,如果你仅仅需要快速地搭建低保真原型的话,Axure也是个不错的选择,Taobao就在用。

  4. TT @ 2007-11-28 22:44:24 +0800:

    是的,是MS的。我没接触过PS什么的,估计老大也不会让我用那个出原型图,我目前也在尝试Axure,希望会很顺手:)

  5. ll @ 2008-02-17 07:03:22 +0800:

    共同关注电子商务和网络,十分愿意跟一个既懂技术又热爱文史哲的人成为朋友,能联系吗?QQ:36165708

  6. monkeypipi @ 2008-02-28 21:57:21 +0800:

    Win下我推荐SmartDraw

  7. ♂Alan Yan @ 2008-03-02 10:16:36 +0800:

    相当有意思的一个软件,如果用MAC应该是不错的绘制工具,可惜用的是Win Vsita。

    也看了看Omni做的其他软件的描述,感觉在功能以及体验上有不错的设计;如果能针对Omni系列软件的体验分析就好。相信能有不少在用户体验上可以学习和借鉴的地方。

  8. 冰淇淋 @ 2008-04-23 04:46:35 +0800:

    [emoticon:ask]

  9. 冰淇淋 @ 2008-04-23 04:49:05 +0800:

    呵呵 ,我是新手所以不太懂哎... (^__^) 嘻嘻……多多指教哦各位前辈!哈哈 ..

  10. 网友 @ 2008-06-24 21:48:01 +0800:

    你行你,勾引了我这么半天兴趣,最后才说只有MAC版。

  11. Jonesky @ 2008-07-09 19:07:58 +0800:

    看來很不錯,可惜只是Mac不是PC.

    Axure會是唯一PC用家可考慮的了.

  12. 番茄超人 @ 2009-01-07 18:48:59 +0800:

    [emoticon:big_smile]
    口水哗啦了一地,结果用不了。。。。

  13. 浩翔 @ 2008-10-15 01:20:51 +0800:

    可惜需要serial number, 我只有4.2b的lisense, 这个工具里的地图中,中国地图没有台湾

  14. 冰片蜜桃 @ 2008-11-18 18:11:36 +0800:

    只有mac版。。。。逼我在家加班么。。。

  15. 小猪 @ 2008-12-23 21:22:26 +0800:

    啥时候给共享一下那个小人的呗....
    那个链接坏了 =.=

    多谢哦

  16. maxchow @ 2008-12-24 22:53:24 +0800:

    http://bbs.think-different.cn/ 打开不了。。。
    这是什么网站?在PC下也有这么好的流程和原型工具吗?

  17. 丁宇 @ 2008-12-24 22:59:55 +0800:

    @maxchow: 这是我原来做过的一个站点(OSX86 China),里面讲的是如何在PC上安装Mac OS X。PC下是无法运行OmniGraffle的。

  18. 丁宇 @ 2008-12-24 23:02:14 +0800:

    @小猪: 那个User-Centered Design Activities的stencil我也没有了,找到也告诉我吧 [emoticon:confus]

  19. Avant @ 2009-01-19 05:21:16 +0800:

    今天买了MacBook Pro,就是为装OmniGraffle,谁share下破解的,剩点大洋,买了mac,穷啊!

  20. losemc @ 2009-02-27 00:08:08 +0800:

    刚接确这些东西。很多东西还不会。希望前辈多指点。

  21. 季子乌 @ 2009-03-09 05:09:45 +0800:

    同上面某楼,PC的那个链接地址打不开了哦。。 [emoticon:sick]

  22. 季琳 @ 2009-03-09 10:14:23 +0800:

    我想加你联系方式,学习学习
    MSN ui.ki@hotmail.com

  23. iCream @ 2009-03-20 01:10:57 +0800:

    好用是好用,但是一直没有找到模板文件放置在那里,新下在下来的模板兜捕知道该怎么用... ...

  24. 丁宇 @ 2009-03-21 04:21:02 +0800:

    @iCream 共参考:
    /Users/felixding/Library/Application\ Support/OmniGraffle/Stencils

  25. oyool @ 2009-03-21 08:06:39 +0800:

    尝试一下不同工具也不错,做出来的框架图效果还不错,没找到交互的功能。
    要收费,能不能搞到免费的啊。 [emoticon:ask]

  26. Robin @ 2009-03-24 05:53:30 +0800:

    用惯了Axure, 感觉OmniGraffle没那么方便呀. 哪里有用OmniGraffle做原型的教程吗? 多谢了

  27. 影子 @ 2009-04-13 21:42:41 +0800:

    大哥,最后一句话,让我这个PC用户差点吐血啊。那个链接也找不到网页了。我想用这个软件,咋办?

  28. @ 2009-04-23 05:10:01 +0800:

    请问有中文破解版吗?

    我刚学信息管理系统...急需这个啊~~~

  29. 小松 @ 2009-12-24 01:29:11 +0800:

    [emoticon:glasses]

  30. 丁宇 @ 2009-12-24 01:50:58 +0800:

    @小松 我编辑了你的留言内容,这个信息发在这里我会有麻烦的。

  31. Shawn @ 2010-03-08 05:30:02 +0800:

    感谢你的介绍,本来只是想在mac上找一个visio的替代品, 但是这个软件却让我用的更开心.

    不过用mac时间很短,想问一下,ominigraffle默认存文件的格式都是自家的.如果我做好了一张图,想给其他人share,或者是放到keynote或ppt里,该怎么办? 非常感谢

  32. 丁宇 @ 2010-03-08 17:52:59 +0800:

    @Shawn 你用OG输出图片就好了,也可以输出成Visio可读的XML格式。

  33. 文方 @ 2010-03-11 07:04:36 +0800:

    请问OmniGraffle哪里可以下载中文版的哦?

  34. Shawn @ 2010-03-11 07:37:29 +0800:

    感谢,发现了在export选项里有很多选择可以用

  35. 丁宇 @ 2010-03-11 18:22:51 +0800:

    @文方OG内含多语言包,有简体中文的。

  36. jarcher @ 2010-03-25 00:42:04 +0800:

    请问,第一张图,是什么模板,找了半天没找到

  37. 丁宇 @ 2010-03-25 18:33:17 +0800:

    @jarcher OG官方网站上的,我也不知道是什么模板,大概是他们自定义的。

  38. 田点 @ 2010-03-25 23:22:36 +0800:

    我下载的是:OmniGrafflePro-5.2-beta-6.dmg这怎么安装啊

  39. MDZ @ 2010-07-15 00:24:21 +0800:

    我用 Dia,同时支持多系统。

  40. 泥鳅 @ 2010-08-25 19:50:05 +0800:

    很遗憾没有WIN版,只能用axure了

  41. 胡忠 @ 2010-10-21 19:14:16 +0800:

    很遗憾,木有mac

  42. samba @ 2010-11-03 23:35:39 +0800:

    我用的到是Mac 笔记本可是软件是收费的。
    用时间大家可以一起研究一下设计。
    qq: 460309689

  43. 沙漠狼 @ 2010-12-02 18:04:42 +0800:

    OmniGraffle牵线来到你的博客,发现好东西很多呀,先学习了。

  44. seri @ 2010-12-03 07:47:04 +0800:

    [emoticon:bad_smile] 为什么比较好用的软件都只适用于mac,真是 - - ……

  45. 阳光の碎片 @ 2010-12-05 17:57:20 +0800:

    可以做交互么?

  46. naturengie @ 2011-04-15 06:08:37 +0800:

    问个问题,ipad的触控方式跟mac操作方式差不多吗?
    我没有用过这个软件。但是在充分发挥触控特性的画图软件方面,我觉得会有一些潜力。你的看法呢。

  47. ykgg @ 2014-03-13 19:57:47 +0800:

    Graffletopia 这个网站上得模板需要收费吧