from:/entry/26181
我发现一事儿，就是最近这些年，每到入职一个新公司的时候，听得东西往往会比多数时候听得更重更金属些，此时以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)
画布与图层侧边栏用来呈现文档及其内容的组织结构。我们可以在这里查看每个画布当中的内容缩略，还有它们之间的层级结构，这使得我们能够更加轻松的管理和组织文档。
我们可以在画布中创建线框图，画布能够承载我们所需的任何类型的内容。我通常会先创建一个“封面”页、一些流程图，还有一些关于用户的信息或是我需要解决的问题。这之后才进入实际的线框图制作阶段。
而图层则用于在画布当中组织内容。如果你熟悉Photoshop或Illustrator，那么对图层的概念应该很了解了。在图层中，你可以移动和组织各类元素；而调整不同图层的顺序则能够帮助你按照自己所需要的方式组织页面结构，就像我们在Photoshop当中所做的那样。
我们所创建的多数界面中都会包含例如导航栏、页脚、背景这类不会随界面而发生变化的元素。这时我们就需要使用“共享图层(shared layer)”了，这种图层可以帮助我们轻松的创建出能够复用于多个画布的元素；将来任何针对共享图层所进行的修改也会直接作用于那些使用了该图层的画布之上。
有一点需要注意，共享图层中的元素在任何画布当中都会保持在固定的位置上，譬如导航栏永远会在导航栏的位置。如果你需要的是更加灵活的可复用元素，那么后文中将会介绍到的“共享对象(shared object)”才是更合适的选择。
形状与文字(Shapes and Text)
在创建线框图的过程中，各种形状是我们最常用到的工具。我通常会用到的都是那些最基本的形状，例如矩形、圆形和三角形。相比繁琐复杂的视觉表现形式，使用这些基本的形状来创建的页面布局通常可以更直观有效的展示出交互设计阶段所需表达的重点。
我们可以根据实际需要来调整形状的各种属性。
形状和轮廓线条(包括线条的颜色、尺寸等等)
你还可以将常用的形状包括它的各种订制化属性打包添加到偏好当中，以便反复使用。要添加新的偏好形状，你需要在页面中选中某个形状，然后选择形状(Shape)菜单中的“将当前选项添加至喜爱的样式(Add Current Selection to Favorite Styles)”。
你可以在形状内部添加文字，并以某种方式和形状本身保持对齐。添加之后，文字就会成为形状自身的一部分，跟随形状一起联动。
对于形状内部的文字，OmniGraffle提供了大量的工具，用于调整行间距、字间距、对齐模式、内边距等属性。
你同样可以添加独立的文字，无论其在视觉形式上处于形状范围之内或之外。
模板与主题(Stencils and Templates)
“模板”与“主题”是创建和使用可复用元素的极佳工具。主题可以帮你建立起一套已经包含了各种相关预设的文档，例如集体研讨、组织图表、空间计划等。我在日常的工作中有自己的一套专用主题，你也可以创建属于自己的主题。
模板则是一系列有着预置样式的界面元素，例如按钮、文字、图标等等。
你同样可以修改已有的模板和主题。在右侧的模板面板中选中一套模板，然后点击模板面板上的齿轮按钮，在菜单中选择“编辑模板”，即可调出模板编辑界面，你可以在里面像处理其他OmniGraffle文档一样来编辑模板中的元素。对于主题来说也是同理。
网上有很多模板资源供你下载，我常用到的一些都来自于，例如移动设备界面元素模板等。推荐你看看这些模板：
通过这些模板，你可以快速创建出很漂亮的线框原型。
共享对象(Shared Objects)
正如前面提到的，在多数时候，共享图层是足够满足需求的，但有时你确实需要一些属性相同但在布局位置上有所区别的界面元素。曾经有一度，我以为OmniGraffle并没有提供类似共享元素这样的功能，但事情不是这样的，只是创建共享元素的方法有些隐蔽。
在文档中选中你要创建为共享对象的界面元素，在顶部的编辑菜单中找到“拷贝为”一项，选择其中的PDF。然后删除之前所选中的界面元素，再执行粘贴操作，这时被粘贴回来的PDF形式的元素就是我们所说的“共享对象”了。
要编辑共享对象，只需在对象上双击，这时会出现一个独立的OmniGraffle文档，你可以在里面对共享对象进行编辑。保存之后，你会发现所有用到这份拷贝的元素都已经发生了相应的变化。
对齐和文档属性(Alignment/Properties)
另外一些版面方面的功能，譬如对齐、空间调整、画布属性等等，也是我们必须了解的。这类功能都集中在右侧的检查器面板当中。
对齐界面元素的功能是非常重要的。选中你要对齐的元素之后，在对齐面板中选择需要对齐的基准点(侧边、边角或中心)，然后点击所需的对齐类型，包括横向和纵向。
界面元素之间的相对空间调整也是常用的功能。你可以使若干元素在某个方向上等距分布，还可以进一步为它们设定彼此之间的距离。
在这些与版面相关的面板中，你可以看到默认的长度单位是以“英寸”为主的，建议你在实际工作中切换到更符合数字产品规则的像素。对于切换长度单位这类操作来说，最有效率的方式是在主题当中进行。
交互(Interactivity)
如果你需要为线框原型添加一些基本的交互，那么OmniGraffle也是可以提供相关支持的。你需要做的就是选中界面中的交互元素，然后打开检查器中的动作(Action)面板进行设置。OmniGraffle可以为点击动作添加如下几类交互动作：
打开一个URL打开文件运行脚本跳到别处显示或隐藏图层
我个人最常用的是“打开一个URL”和“跳到别处(Jumps Elsewhere)”，特别是后者，可以用来实现画布之间的切换，通常在线框原型中用来展示界面间的跳转。
关于OmniGraffle的新手指南就到这里了。对于UXer们，这是一款日常工作中的基础型工具；上手并深入探索之后，你会发现它可以帮助你快速的创建各类图形文档，特别是线框原型。此外，网上也有很多关于OmniGraffle的优秀资源等待你去发现和使用好运叭！
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：133985次
积分：2044
积分：2044
排名：第13028名
原创：54篇
转载：141篇
(1)(2)(8)(3)(1)(1)(1)(4)(11)(7)(11)(1)(2)(2)(7)(8)(7)(2)(2)(14)(8)(2)(5)(6)(7)(1)(1)(1)(1)(2)(5)(4)(3)(2)(1)(4)(5)(4)(7)(1)(2)(2)(4)(1)(2)(1)(8)(4)(4)(3)(3)关于OmniGraffle的一些初步使用小节
OmniGraffle 是windows
visio的在mac下的替代软件。打开graffle后，将首先出现选择模板的窗口，omni将一些常用的模板如云图，结构图都已经列出来以供方便的创作一个图表。
如点选 Hierarchical图，进入出现：
那么在这样一个图表中，如何添加一个方框来表示一个结构呢？
在左边的一列中（outline），有 click to add
topic,在此软件中，每一个方框称为一个topic，添加一个topic后，可右键来添加他的parents， children，
spouse、和sibling。这个时候右边一列（Canvas），将回画出相应的图表。
点击右上角inspect（蓝色的i）图表将会出现如下窗口，
该窗口将对应每一个object，通过这个窗口可以调整object和canvas的一些属性。也可以添加箭头改变箭头的形状，属性等。
特别提出，如何更改某object的颜色呢？在菜单 Format －》 show color打开一下窗口以后，
可以通过单击色盘选择颜色，选中的颜色将会出现在上面的长方形中，如下图已经选中了绿色，然后再单击长方形，将此绿色拖到你想要的object中，就ok了。
目前探索到的就这么多！
通过这个软件确实能够创造除比visio更美观的图表，但是很多功能的使用需要重新的学习。tbc......
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。AdvertisementOmnigraffle画线框图的新手操作指南AdvertisementChinese (Simplified) (中文（简体）) translation by
(you can also )
Omnigraffle作为工具，可以有多种用途。不过今天我们要探索如何用它来画线框图。 我用过各种线程图工具，总体上来说，Omnigraffle并不算完美，但就对我工作而言，它性能和效率总体表现最佳。
它最大的问题是不具备很好的原型交互功能。 你最多可制作出能点击的原型图，仅此而已了。 你也可以显示或隐藏图层，不过只能在Ominigraffle应用内才能生效。
其他的缺点就是只能在Mac平台上使用。
如果不考虑这些缺点的话，Omnigraffle是个超棒的线框图制作工具。 我们将深入了解这个程序，看看Omnigraffle功能有多强，我们怎样结合stellar来制作线框图。
下面是一些我们将在教程中看到的元素： 如果你对其他元素有兴趣想进一步了解的话，你可以在后面留言给我，我将尽力为您提供相关信息。
画布和图层工具栏
模板(Stencils)窗口
样式编辑器
画布和图层
画布和图层边栏是用来查看你所有文档和其内容的组织结构。 它们可以展示内容和层级结构，帮助你轻松管理和组织页面。
在画布上你可以建立多个页面。 可以容纳各种所需的内容。 我通常先建一个封面页，一些流程图，再加一些用户信息，还我希望解决的问题。 然后再开始真正创建线框图。
一个画布里可以放置多个层。 如果你很熟悉Photoshop或者Illustrator，那么Ominigraffle里的层和它们是一样的。 在层里面，你就可以组织或随意放置一个个的元素。 层可以上下切换顺序，这样你就可以用你需要的方式来管理页面结构。
你是否需要在多个页面中放置同样的菜单栏，页面背景，或者是页面底部内容？ 那可以用一个共享层。 共享层可以直接复用在不同的画布上。 调整也很方便，如果你修改了共享层，所有使用了这个共享层的画布都会同步生效。
不过，请记住，共享层会出现在不同画布相同的位置上。 如果你不希望这样，可以使用后面会提到的共享对象解决。
图形和文本
画线框图时，图形是最重要的工具。 我最常使用的是长方形、圆形和三角形这些基本图形。 用基本图形来构建页面，可以直观地看到页面效果。 和画肖像不同，做线框图的时候基本图形和文本以外的东西几乎用不上。
对图形来说，你可以改变几种属性。
实际形状和边框（颜色、边框尺寸等等）
你可以把图形设为你最喜欢的图形。 这样当你需要反复使用相同样式的图形时会更加方便。 只需要选中你需要的图片，然后再在图形菜单中选择&增加当前选择到最喜欢的样式&即可(在最新版本中，右键选择即可）。
你可以在图形中增加文本，然后对齐。 这时，文本就成为这个图形的一个性，移动图形时文本也会跟着移动。
你可以直接使用单独的文本。 除了常规使用以外，当你需要在一个图形中放置多个文本的话，这样也会比较方便（？）
文本有许多常用的设置工具。 Omnigraffle是一个设计工具，设置留白、紧缩、首行空格这样属性也非常方便。
Stencils和模板
Stencils和模板可以为您提供可供直接复用的元素。 模板是个现成的文档，你直接填东西就好。 我自己有个单独的工作模板，不过Omnigraffle预装的模板也很不错。 当然，自己建模板也很方便。 Stencils是一个预先设置好样本的元素库，象按钮、文本、图标、或者是其他的单个元素，你可以用在自己的线框图里。
你也可以编辑Stencils和模板。 如果是Stencils，你只需要点击Stencil，在顶部的菜单里点击&编辑Stencil&. 应用会打开这个Stencil，你可以象编辑其他Omnigraffle文档一样编辑Stencil. 模板也一样，你也可以象编辑其他Omnigraffle文档一样编辑模板。
你可以创建自己的Stencils，也可以直接从网上下载现成的Stencils. 我用过网站提供的一些Stencils. 我通常用在特别用途，比如简笔画或者移动端元件。 下面集合里提供绝大多数常见的元素：
你可以用这些现成的元素快速创建非常棒的线框图。
这有几件怪事。
长久以来，我觉得Omnigraffle没有共享对象是一个最大的缺陷，虽然Omnigraffle实际上确实是有这么个东西。 问题是创建和编辑共享对象的方式不管怎么说都不够突出。 绝大多数情况下，用共享层就够了。不过偶尔会遇到你想用共享层，但位置却并不一样的情况。 这时用共享层就搞不定了。 我们该学习怎样来创建共享对象吧。
先创建你的对象（物体） 对象你要多复杂就可以设计成多复杂的。 将所有需要的元素编成组，然后创建一个对象。 选中这个对象然后在编辑菜单栏下选择Copy as PDF。
诡异的事情发生了 你先将原来的删掉，然后粘贴。 双击群组对象然后进入编辑模式。 这时会打开一个新Omnigraffle文档。 不用管它，在新打开的文档里编辑然后保存。 然后关掉文档回到你原来的界面下。 这时你会看到刚才的改动已经在你粘贴到文档里的实例上全部生效。
对齐和文档属性
有些事和线框图的制作关系不大，但注意对齐绝对会让你轻松很多。 包括：对齐、空格，还有画布属性。
对齐就是我用得最多的 点击需要对齐的边、角、或者图形中央，然后点击水平和垂直对齐按钮。 就会与被选中的物体对齐。 需要注意的时，第一个被选中的物体就是需要被对齐的对象。
空格元素也很重要 。 设置间隔距离，然后将选中的对象按距离隔开。 不过，我做得更多只使用快速平均间隔按钮。 对所有被选中的元素，从第一个到最后一个物体实现平均分布。 只要在你设置的最大范围两边放置两个物体，然后选中所需要对齐的物体，点击对齐按钮就可以。 瞬间完成有木有！ 所有元素都完美、平均的排列好了。
在我看来通常情况下，缺省设置里，画布属性的度量单位通常是英寸。 在数字编辑时，这不是非常方便，所以可以把它改成像素。 最好是在你自己的模板里设置好。 选择所有的画布，然后将长度单位改成像素。 也可以改成别的测量单位。
如果你只想做一些基本的交互，Omnigraffle也是可胜任。 选中你想进行交互的元素，然后在检查器里的&属性&卡中打开(译译者注：6.4版本中）。 点击时可以实现如下效果：
打开一个链接
打开一个文件
运行一个脚本
跳到别的地方
显示/隐藏图层
我只使用过打开链接和跳到别的地方功能。 跳到别处这个效果比较有用，线框图有点象可点击的原型，可以实现从这个画布跳到别的画布。
警告：在PDF中我从来没有使用过显示/隐藏图层选项。 这个功能只在Omnigraffle的交互模式下才有效(按下B键）(也称动作浏览工具）。
Omnigraffle是一个很棒的工具，许多设计师天天都在用。 可以用很少的时间快速创建效果不错的线框图。
如果你已经是用户体验师，或者还在寻找一款线框图制作工具,Omnigraffle值得一试。 同样，如果有什么问题或建议可以在下面留言，我将尽量提供帮助。 祝线框图制作顺利。
Advertisement
just $90/yr AdvertisementEnvato Tuts+ tutorials are translated into other languages by our community members&you can be involved too!Powered byAdvertisementcourse now
has a range of items for sale to help get you started.