7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. UX

Omnigraffle画线框图的新手操作指南

Scroll to top
Read Time: 1 min
This post is part of a series called UX Foundations.
A Beginner’s Guide to Wireframing
Defining And Applying Personas to UX Design

Chinese (Simplified) (中文(简体)) translation by Rongrong Zhan (you can also view the original English article)

Omnigraffle作为工具,可以有多种用途。不过今天我们要探索如何用它来画线框图。 我用过各种线程图工具,总体上来说,Omnigraffle并不算完美,但就对我工作而言,它性能和效率总体表现最佳。

它最大的问题是不具备很好的原型交互功能。 你最多可制作出能点击的原型图,仅此而已了。 你也可以显示或隐藏图层,不过只能在Ominigraffle应用内才能生效。

其他的缺点就是只能在Mac平台上使用。

如果不考虑这些缺点的话,Omnigraffle是个超棒的线框图制作工具。 我们将深入了解这个程序,看看Omnigraffle功能有多强,我们怎样结合stellar来制作线框图。

界面

下面是一些我们将在教程中看到的元素: 如果你对其他元素有兴趣想进一步了解的话,你可以在后面留言给我,我将尽力为您提供相关信息。

  • 画布和图层工具栏
  • 模板(Stencils)窗口
  • 监控器。
    • 样式编辑器
      • 填色
      • 边框?
      • 阴影
      • 图片
      • 文本
    • 对齐/属性
    • 交互

画布和图层

画布和图层边栏是用来查看你所有文档和其内容的组织结构。 它们可以展示内容和层级结构,帮助你轻松管理和组织页面。

Canvas Layer Sidebars

在画布上你可以建立多个页面。 可以容纳各种所需的内容。 我通常先建一个封面页,一些流程图,再加一些用户信息,还我希望解决的问题。 然后再开始真正创建线框图。

Canvas Sidebar

一个画布里可以放置多个层。 如果你很熟悉Photoshop或者Illustrator,那么Ominigraffle里的层和它们是一样的。 在层里面,你就可以组织或随意放置一个个的元素。 层可以上下切换顺序,这样你就可以用你需要的方式来管理页面结构。

Layers Sidebar

你是否需要在多个页面中放置同样的菜单栏,页面背景,或者是页面底部内容? 那可以用一个共享层。 共享层可以直接复用在不同的画布上。 调整也很方便,如果你修改了共享层,所有使用了这个共享层的画布都会同步生效。

不过,请记住,共享层会出现在不同画布相同的位置上。 如果你不希望这样,可以使用后面会提到的共享对象解决。

Shared Layers

图形和文本

图形

画线框图时,图形是最重要的工具。 我最常使用的是长方形、圆形和三角形这些基本图形。 用基本图形来构建页面,可以直观地看到页面效果。 和画肖像不同,做线框图的时候基本图形和文本以外的东西几乎用不上。

Shape

对图形来说,你可以改变几种属性。

填充色

Shape Fill

实际形状和边框(颜色、边框尺寸等等)

Shape Outline

阴影

Shadow

几何属性

Shape Properties

你可以把图形设为你最喜欢的图形。 这样当你需要反复使用相同样式的图形时会更加方便。 只需要选中你需要的图片,然后再在图形菜单中选择“增加当前选择到最喜欢的样式”即可(在最新版本中,右键选择即可)。

Favorite ShapeFavorite ShapeFavorite Shape

文本

你可以在图形中增加文本,然后对齐。 这时,文本就成为这个图形的一个性,移动图形时文本也会跟着移动。

Text within shape

你可以直接使用单独的文本。 除了常规使用以外,当你需要在一个图形中放置多个文本的话,这样也会比较方便(?)

Text outside shape

文本有许多常用的设置工具。 Omnigraffle是一个设计工具,设置留白、紧缩、首行空格这样属性也非常方便。

Text Edit

Stencils和模板

Stencils和模板可以为您提供可供直接复用的元素。 模板是个现成的文档,你直接填东西就好。 我自己有个单独的工作模板,不过Omnigraffle预装的模板也很不错。 当然,自己建模板也很方便。 Stencils是一个预先设置好样本的元素库,象按钮、文本、图标、或者是其他的单个元素,你可以用在自己的线框图里。

TemplatesTemplatesTemplates

你也可以编辑Stencils和模板。 如果是Stencils,你只需要点击Stencil,在顶部的菜单里点击"编辑Stencil". 应用会打开这个Stencil,你可以象编辑其他Omnigraffle文档一样编辑Stencil. 模板也一样,你也可以象编辑其他Omnigraffle文档一样编辑模板。

Edit StencilEdit StencilEdit Stencil

你可以创建自己的Stencils,也可以直接从网上下载现成的Stencils. 我用过Graffletopia.com网站提供的一些Stencils. 我通常用在特别用途,比如简笔画或者移动端元件。 下面集合里提供绝大多数常见的元素:

你可以用这些现成的元素快速创建非常棒的线框图。

StencilsStencilsStencils

共享对象

这有几件怪事。

长久以来,我觉得Omnigraffle没有共享对象是一个最大的缺陷,虽然Omnigraffle实际上确实是有这么个东西。 问题是创建和编辑共享对象的方式不管怎么说都不够突出。 绝大多数情况下,用共享层就够了。不过偶尔会遇到你想用共享层,但位置却并不一样的情况。 这时用共享层就搞不定了。 我们该学习怎样来创建共享对象吧。

先创建你的对象(物体) 对象你要多复杂就可以设计成多复杂的。 将所有需要的元素编成组,然后创建一个对象。 选中这个对象然后在编辑菜单栏下选择Copy as PDF。

Copy as PDFCopy as PDFCopy as PDF

诡异的事情发生了 你先将原来的删掉,然后粘贴。 双击群组对象然后进入编辑模式。 这时会打开一个新Omnigraffle文档。 不用管它,在新打开的文档里编辑然后保存。 然后关掉文档回到你原来的界面下。 这时你会看到刚才的改动已经在你粘贴到文档里的实例上全部生效。

对齐和文档属性

有些事和线框图的制作关系不大,但注意对齐绝对会让你轻松很多。 包括:对齐、空格,还有画布属性。

对齐就是我用得最多的 点击需要对齐的边、角、或者图形中央,然后点击水平和垂直对齐按钮。 就会与被选中的物体对齐。 需要注意的时,第一个被选中的物体就是需要被对齐的对象。

Alignment

空格元素也很重要 。 设置间隔距离,然后将选中的对象按距离隔开。 不过,我做得更多只使用快速平均间隔按钮。 对所有被选中的元素,从第一个到最后一个物体实现平均分布。 只要在你设置的最大范围两边放置两个物体,然后选中所需要对齐的物体,点击对齐按钮就可以。 瞬间完成有木有! 所有元素都完美、平均的排列好了。

在我看来通常情况下,缺省设置里,画布属性的度量单位通常是英寸。 在数字编辑时,这不是非常方便,所以可以把它改成像素。 最好是在你自己的模板里设置好。 选择所有的画布,然后将长度单位改成像素。 也可以改成别的测量单位。

Canvas Properties

交互

如果你只想做一些基本的交互,Omnigraffle也是可胜任。 选中你想进行交互的元素,然后在检查器里的“属性”卡中打开(译译者注:6.4版本中)。 点击时可以实现如下效果:

  1. 打开一个链接
  2. 打开一个文件
  3. 运行一个脚本
  4. 跳到别的地方
  5. 显示/隐藏图层

我只使用过打开链接和跳到别的地方功能。 跳到别处这个效果比较有用,线框图有点象可点击的原型,可以实现从这个画布跳到别的画布。

Actions

警告:在PDF中我从来没有使用过显示/隐藏图层选项。 这个功能只在Omnigraffle的交互模式下才有效(按下B键)(也称动作浏览工具)。

结论

Omnigraffle是一个很棒的工具,许多设计师天天都在用。 可以用很少的时间快速创建效果不错的线框图。

如果你已经是用户体验师,或者还在寻找一款线框图制作工具,Omnigraffle值得一试。 同样,如果有什么问题或建议可以在下面留言,我将尽量提供帮助。 祝线框图制作顺利。

关注我们的公众号
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.