BeFor Web
为网而生 - 关注互联网及移动端产品的用户体验设计

UX基础 - OmniGraffle新手指南

UX基础 - OmniGraffle新手指南

我发现一事儿,就是最近这些年,每到入职一个新公司的时候,听得东西往往会比多数时候听得更重更金属些,此时以Slipknot和大敌为代表,所爱的东西也会更黑一些,激烈而凶猛的黑,并非Grunge所带来的那类绝望而压抑的黑。

话说这是一个难得的不用把工作带回来做的周末,加之昨天又过了个酒精+尼古丁+Rock N' Roll的周五放纵之夜,今天整个人有点倦怠;天气也阴晦着,毫无违和感。最近也许会做几篇与OmniGraffle相关的话题,希望能给用的着的朋友们带来些参考;今天是一篇很基础的入门小文。走起吧。

这里进入译文。OmniGraffle是一款相当全面的工具,用途很广泛,不过今天我们主要侧重在了解怎样使用它来制作线框图。我(英文原文作者)个人在这方面尝试过很多软件,坦诚的说,没有一款是真正完美的,包括OmniGraffle,但它在综合能力及效率方面的表现确实是最让我满意的。

不过首先,我还是想提及OmniGraffle的两点不足。一是它并不擅长于生成完美的可交互原型,当然,你还是能够制作可点击的界面原型的,譬如在某些情况下显示或隐藏某些图层,或是切换界面等等;另外一点就是这款软件只能运行在Mac当中。

还是那句话,没有哪个工具是真正完美的,忽略这两点缺陷(严格的说第二点不能算作缺陷),OmniGraffle真的是一款很棒的线框图工具。接下来,我将和各位一起对OmniGraffle的强大功能进行一下纵览,了解怎样通过它制作一流的线框图。

知识点

我们将在本文中对以下这些界面元素进行了解:

  • 画布与图层侧边栏(Canvas and Layers sidebar)
  • 模板窗口(Stencils Window)
  • 检查器(The Inspector)

     

     

    • 样式编辑器(Style Editors)

       

       

      • 填充(Fill)
      • 线条(Outline)
      • 阴影(Shadow)
      • 图片(Image)
      • 文字(Text)
    • 对齐/属性(Alignment/Properties)
    • 交互(Interactivity)

画布与图层(Canvases and Layers)

画布与图层侧边栏用来呈现文档及其内容的组织结构。我们可以在这里查看每个画布当中的内容缩略,还有它们之间的层级结构,这使得我们能够更加轻松的管理和组织文档。

01-Canvas-Layers-Sidebars-beginner-omnigraffle-wireframe.png

我们可以在画布中创建线框图,画布能够承载我们所需的任何类型的内容。我通常会先创建一个“封面”页、一些流程图,还有一些关于用户的信息或是我需要解决的问题。这之后才进入实际的线框图制作阶段。

02-Canvas-Layers-Sidebars-beginner-omnigraffle-wireframe.jpg

而图层则用于在画布当中组织内容。如果你熟悉Photoshop或Illustrator,那么对图层的概念应该很了解了。在图层中,你可以移动和组织各类元素;而调整不同图层的顺序则能够帮助你按照自己所需要的方式组织页面结构,就像我们在Photoshop当中所做的那样。

03-Canvas-Layers-Sidebars-beginner-omnigraffle-wireframe.jpg

我们所创建的多数界面中都会包含例如导航栏、页脚、背景这类不会随界面而发生变化的元素。这时我们就需要使用“共享图层(shared layer)”了,这种图层可以帮助我们轻松的创建出能够复用于多个画布的元素;将来任何针对共享图层所进行的修改也会直接作用于那些使用了该图层的画布之上。

有一点需要注意,共享图层中的元素在任何画布当中都会保持在固定的位置上,譬如导航栏永远会在导航栏的位置。如果你需要的是更加灵活的可复用元素,那么后文中将会介绍到的“共享对象(shared object)”才是更合适的选择。

04-Canvas-Layers-Sidebars-beginner-omnigraffle-wireframe.jpg

形状与文字(Shapes and Text)

形状

在创建线框图的过程中,各种形状是我们最常用到的工具。我通常会用到的都是那些最基本的形状,例如矩形、圆形和三角形。相比繁琐复杂的视觉表现形式,使用这些基本的形状来创建的页面布局通常可以更直观有效的展示出交互设计阶段所需表达的重点。

05-shape-beginner-omnigraffle-wireframe.png

我们可以根据实际需要来调整形状的各种属性。

填充色

06-shape-fill-beginner-omnigraffle-wireframe.png

形状和轮廓线条(包括线条的颜色、尺寸等等)

07-shape-outline-beginner-omnigraffle-wireframe.png

阴影

08-shape-shadow-beginner-omnigraffle-wireframe.png

几何属性

09-Shape-Properties-beginner-omnigraffle-wireframe.png

你还可以将常用的形状包括它的各种订制化属性打包添加到偏好当中,以便反复使用。要添加新的偏好形状,你需要在页面中选中某个形状,然后选择形状(Shape)菜单中的“将当前选项添加至喜爱的样式(Add Current Selection to Favorite Styles)”。

10-favorate-Shape-beginner-omnigraffle-wireframe.png

文字

你可以在形状内部添加文字,并以某种方式和形状本身保持对齐。添加之后,文字就会成为形状自身的一部分,跟随形状一起联动。

11-Text-Within-Shape-beginner-omnigraffle-wireframe.png

对于形状内部的文字,OmniGraffle提供了大量的工具,用于调整行间距、字间距、对齐模式、内边距等属性。

13-Text-edit-beginner-omnigraffle-wireframe.png

你同样可以添加独立的文字,无论其在视觉形式上处于形状范围之内或之外。

12-Text-outside-Shape-beginner-omnigraffle-wireframe.png

模板与主题(Stencils and Templates)

“模板”与“主题”是创建和使用可复用元素的极佳工具。主题可以帮你建立起一套已经包含了各种相关预设的文档,例如集体研讨、组织图表、空间计划等。我在日常的工作中有自己的一套专用主题,你也可以创建属于自己的主题。

模板则是一系列有着预置样式的界面元素,例如按钮、文字、图标等等。

14-Template-Chooser-beginner-omnigraffle-wireframe.png

你同样可以修改已有的模板和主题。在右侧的模板面板中选中一套模板,然后点击模板面板上的齿轮按钮,在菜单中选择“编辑模板”,即可调出模板编辑界面,你可以在里面像处理其他OmniGraffle文档一样来编辑模板中的元素。对于主题来说也是同理。

15-Stencil-Edit-beginner-omnigraffle-wireframe.png

网上有很多模板资源供你下载,我常用到的一些都来自于Graffletopia.com,例如移动设备界面元素模板等。推荐你看看这些模板:

通过这些模板,你可以快速创建出很漂亮的线框原型。

16-Stencils-beginner-omnigraffle-wireframe.png

共享对象(Shared Objects)

正如前面提到的,在多数时候,共享图层是足够满足需求的,但有时你确实需要一些属性相同但在布局位置上有所区别的界面元素。曾经有一度,我以为OmniGraffle并没有提供类似共享元素这样的功能,但事情不是这样的,只是创建共享元素的方法有些隐蔽。

在文档中选中你要创建为共享对象的界面元素,在顶部的编辑菜单中找到“拷贝为”一项,选择其中的PDF。然后删除之前所选中的界面元素,再执行粘贴操作,这时被粘贴回来的PDF形式的元素就是我们所说的“共享对象”了。

要编辑共享对象,只需在对象上双击,这时会出现一个独立的OmniGraffle文档,你可以在里面对共享对象进行编辑。保存之后,你会发现所有用到这份拷贝的元素都已经发生了相应的变化。

对齐和文档属性(Alignment/Properties)

另外一些版面方面的功能,譬如对齐、空间调整、画布属性等等,也是我们必须了解的。这类功能都集中在右侧的检查器面板当中。

对齐界面元素的功能是非常重要的。选中你要对齐的元素之后,在对齐面板中选择需要对齐的基准点(侧边、边角或中心),然后点击所需的对齐类型,包括横向和纵向。

界面元素之间的相对空间调整也是常用的功能。你可以使若干元素在某个方向上等距分布,还可以进一步为它们设定彼此之间的距离。

18-Alignment-beginner-omnigraffle-wireframe.png

在这些与版面相关的面板中,你可以看到默认的长度单位是以“英寸”为主的,建议你在实际工作中切换到更符合数字产品规则的像素。对于切换长度单位这类操作来说,最有效率的方式是在主题当中进行。

19-Canvas-Properties-beginner-omnigraffle-wireframe.png

交互(Interactivity)

如果你需要为线框原型添加一些基本的交互,那么OmniGraffle也是可以提供相关支持的。你需要做的就是选中界面中的交互元素,然后打开检查器中的动作(Action)面板进行设置。OmniGraffle可以为点击动作添加如下几类交互动作:

  • 打开一个URL
  • 打开文件
  • 运行脚本
  • 跳到别处
  • 显示或隐藏图层

我个人最常用的是“打开一个URL”和“跳到别处(Jumps Elsewhere)”,特别是后者,可以用来实现画布之间的切换,通常在线框原型中用来展示界面间的跳转。

20-Actions-beginner-omnigraffle-wireframe.png

总结

关于OmniGraffle的新手指南就到这里了。对于UXer们,这是一款日常工作中的基础型工具;上手并深入探索之后,你会发现它可以帮助你快速的创建各类图形文档,特别是线框原型。此外,网上也有很多关于OmniGraffle的优秀资源等待你去发现和使用好运叭!

译文代表原作者观点。欢迎发表评论,或到译者微博进一步交流探讨。

本站原创编译文章。如需转载,请注明:本文来自Be For Web
译者信息: C7210 - 设计布道师,设计师,独立开发者,译者,猫奴,音乐玩家。
评论 (29)
我在用 OmniGraffle 制作东西的时候,遇到这么个问题,求帮助 一个 Canvas 内有两个 Layer,A 和 B,A 是 Visible 的 B 是 Invisible,A 中有个按钮我想设置 Action 为点击该按钮隐藏 A 显示 B,结果在 Action 中我无法找到 Layer B,除非把 B 设置成 Invisible,还好我的 B 刚好是被 A 覆盖了的,否则没法选到 B,功能没法用啊(或许以后还会遇到这个蛋疼的问题),好了,我进 Presentation 模式操作一下,点了该按钮,A 隐藏了,B 显示了,实现了我需要的,结果退出 Presentation 模式,A 变成了隐藏,B 变成了显示,再进入 Presentation 则是 B 显示 A 不显示……难道我每次演示还得手动调整一下已经改变的属性?好吧,我导出 HTML,结果压根就没有交互,那个按钮完全无法点击,看输出的文件夹,也只有一张图片。冲着各种「好用的 Mac App」买了 Mac,结果发现有些想像中好用的东西如此蛋疼,好吧,吐槽半天我想问您是否有此现象,还是我个人问题,谢谢耐心看完吐槽,期待回复……
有值得推荐的iOS线框图工具吗?
iPad上有些值得一看
不好意思,我是说模具(模版)。
hi,想请教个问题,各位有用到OmniGraffle6的么?里面的居中参考线没了,也不知道如何能调出来,即使打开智能对齐什么的,也只有边缘对齐了。很费解为啥omnigroup为啥砍了这么好的功能
抱歉我个人只用了那么一小用
太有帮助了,非常感谢!
不谢的,多多交流:)
推荐balsamiq
嗯那,偏重草图效果的工具
Thank you. Good job!
Thanx =)
非常期待接下来的文章啊,一直很喜欢Omni家的产品,自己一直在用Omnifocus,但是画线框图之前都用的是Axure,感觉这个用模板的话会出来更好看一些?
我个人一直也是Axure,最近有OmniGraffle方面的使用需求了,所以也从头开始接触的。
哈过了两个月真要开始使Omnigraffle了,又过来看看~ 顺道想再问个问题,关于流程图(就是用来表示整个网站 or App的页面间or操作间的逻辑)有什么文章推荐看看的么?比较关系其制作的方法,解释的问题,面向的对象之类的。 新手问的比较粗略哈~
建议直接搜以下,另外很多书中也都提到过流程图方面的原则和方法
个人用这个也比较多,但一直都是静态文档,最近一直纠结要不要学习axure,如果你也用的话你觉得个字优势是什么?
其实我个人赶脚OmniGraffle的优势不在线框原型方面,而是文档一类。如果确实需要制作交互性比较强的、涉及输入、逻辑判断一类的原型的话,建议还是用Axure了。
有一个问题,为什么文章里的图片在greader和intapaper里都无法显示,浏览器访问正常。是博客图片有反盗链吗?
嗯,有...问题是对greader确实打开访问权限了,不知为什么有时还是会有问题
同样问题,只好打开原文链接来看的.不错的文章,windows下除了axuere还有啥推荐的?
在Windows下一直都是Axure...不少奇葩也会用PS或AI做原型,但是个人不推荐
奇葩。。哈哈。。。
得罪人了 XD
shit!我被你称作奇葩了.. 之前用axure,但是图形工具不好使. 刚接到一个项目尝试着用ai做,花了一天完成了一半的工作量. 其效率还是可以的.打算做好了放在pop上面拿给客户看,这就是交互原型!你玩去吧!
^^ 我辍了
译文赞一个! omnigraffle做静态原型真心好用,但就是觉得模拟一些动态效果,比如延迟、滑动等还是不如axure强大,所以一直下不了决心转 ><
哈哈还是根据实际产出物的需求来选择吧;推荐试下Brief
brief用来展示确实很不错~不过ios上的app我没搞懂要怎么用 - -