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

| 40 comments 2007-11-19 17:45:07

“使用哪种原型设计工具”大概是设计师闲聊时出现频率最高的话题之一。据我了解一般以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的话,不妨看看这里 :)

40 comments so far

  1. Felix Ding 2007-11-20 20:53:30

    测试评论功能 :D

  2. TT 2007-11-23 10:13:27

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

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

  3. Felix Ding 2007-11-26 21:57:10

    Blend是MS的Expression系列中的那个吗?

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

  4. TT 2007-11-28 14:44:24

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

  5. ll 2008-02-16 23:03:22

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

  6. monkeypipi 2008-02-28 13:57:21

    Win下我推荐SmartDraw

  7. ♂Alan Yan 2008-03-02 02:16:36

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

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

  8. 冰淇淋 2008-04-22 20:46:35

    ask.gif

  9. 冰淇淋 2008-04-22 20:49:05

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

  10. 网友 2008-06-24 13:48:01

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

  11. Jonesky 2008-07-09 11:07:58

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

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

  12. 浩翔 2008-10-14 17:20:51

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

  13. 冰片蜜桃 2008-11-18 10:11:36

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

  14. 小猪 2008-12-23 13:22:26

    啥时候给共享一下那个小人的呗....

    那个链接坏了 =.=

    多谢哦

  15. maxchow 2008-12-24 14:53:24

    http://bbs.think-different.cn/ 打开不了。。。

    这是什么网站?在PC下也有这么好的流程和原型工具吗?

  16. 丁宇 2008-12-24 14:59:55

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

  17. 丁宇 2008-12-24 15:02:14

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

  18. 番茄超人 2009-01-07 10:48:59

    big_smile.gif

    口水哗啦了一地,结果用不了。。。。

  19. Avant 2009-01-18 21:21:16

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

  20. losemc 2009-02-26 16:08:08

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

  21. 季子乌 2009-03-08 21:09:45

    同上面某楼,PC的那个链接地址打不开了哦。。 sick.gif

  22. 季琳 2009-03-09 02:14:23

    我想加你联系方式,学习学习

    MSN ui.ki@hotmail.com

  23. iCream 2009-03-19 17:10:57

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

  24. 丁宇 2009-03-20 20:21:02

    @iCream 共参考:

    /Users/felixding/Library/Application\ Support/OmniGraffle/Stencils

  25. oyool 2009-03-21 00:06:39

    尝试一下不同工具也不错,做出来的框架图效果还不错,没找到交互的功能。

    要收费,能不能搞到免费的啊。 ask.gif

  26. Robin 2009-03-23 21:53:30

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

  27. 影子 2009-04-13 13:42:41

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

  28. 2009-04-22 21:10:01

    请问有中文破解版吗?

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

  29. 小松 2009-12-23 17:29:11

    glasses.gif

  30. 丁宇 2009-12-23 17:50:58

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

  31. Shawn 2010-03-07 21:30:02

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

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

  32. 丁宇 2010-03-08 09:52:59

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

  33. 文方 2010-03-10 23:04:36

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

  34. Shawn 2010-03-10 23:37:29

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

  35. 丁宇 2010-03-11 10:22:51

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

  36. jarcher 2010-03-24 16:42:04

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

  37. 丁宇 2010-03-25 10:33:17

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

  38. 田点 2010-03-25 15:22:36

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

  39. MDZ 2010-07-14 16:24:21

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

  40. 泥鳅 2010-08-25 11:50:05

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

(Support Gravatar)
  • angel.gif
  • glasses.gif
  • hum.gif
  • sad.gif
  • caresse.gif
  • sick.gif
  • angry.gif
  • zip.gif
  • gun.gif
  • emu.gif
  • big_smile.gif
  • clin_oeil.gif
  • devil.gif
  • wahou.gif
  • confus.gif
  • mad.gif
  • larme.gif
  • wave.gif
  • scare.gif
  • lang_1.gif
  • ask.gif
  • xd.gif
  • eye_up.gif
  • mdr.gif
  • smile_1.gif
  • lang_2.gif
  • zzz.gif
  • bad_smile.gif
  • jet.gif
  • smile_2.gif
  • love.gif

About

我在厦门拍的照片

丁宇(Felix Ding),电脑Geek,狂热的爱书和爱乐分子,99年迷上网页设计,并从此一发不可收。现在在上海做用户体验/产品设计咨询。Email: felixding[AT]gmail.com。

订阅到RSS