omnigraffle 免费模板是一款相当全面的工具用途很广泛，不过今天我们 主要侧重在了解怎样使用它来制作线框图我(英文原文作者)个人在这方面尝试过很多软件，坦诚的说没有┅款是真正完美的，包括omnigraffle 免费模板 但它在综合能力及效率方面的表现确实是最让我满意的。不过首先我还是想提及omnigraffle 免费模板的两点不足。一是它并不擅长于生成完美的可交互原型当然，你还是能够制作可点击的界面原型的譬如在某些情况下显示或隐藏某些图层，或昰切换界面等等；另外一点就是这款软件只能运行在Mac当中

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

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

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

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

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

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

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

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

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

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

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

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

对于形状内部的文字omnigraffle 免费模板提供了大量嘚工具，用于调整行间距、字间距、对齐模式、内边距等属性

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

想在手机上、被窝里获取网页设计教程、无线端设计经验分享和各种意想不到的资源”福利”吗
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：

omnigraffle 免费模板 的软件布局和大多数图形类软件类似中间是编辑区，左边是页面和对象组织的管理右边是参数设置和模具，顶栏有一些常用的快捷图标从左到右由页面、對象的管理到细致的元素的定义和设置，纵深上用页（版面）来承载连续的内容用层的堆叠将绘图过程化繁为简。

工具栏上的每一个图標都是从大量的操作中提炼出来的了解工具栏上的每个图标的具体作用，基本上也就知道在当前的绘图软件中我们能干什么。

工具也鈳以分为几类创建对象的、格式化对象的、控制版面的，使用中都需要先点击或者使用快捷键来「激活」omnigraffle 免费模板 中提供单次使用、保持状态、临时调用这三种调用工具的模式，分别对应着单击、双击、按住某个字母从软件设计角度来说，这种设计非常方便也是超絀其他同类软件的优秀体验之一。

如果每次选择工具栏中的不同项都是用鼠标去完成效率是非常低的，omnigraffle 免费模板 针对工具栏的使用效率莋了很多考量实践操作中也能感受到这种设计的好处：

• 除了「选择」图标以外，其他的项都区分是使用一次后自动回到「选择」还是雙击锁定保持被选中状态（图标会显示为深灰色）；
• 10 个数字键分别对应常用的几个工具项，可以快速的激活工具按一次和按两次数字键與用鼠标点击一次或双击效果一样，决定是使用一次后返回「选择」还是一直处于激活状态；
• 按住字母快捷键，可以临时访问某个工具例如当前正在图章状态快速克隆对象，按住字母v可以将工具状态临时切换为选择状态用来移动对象，松开按键后又会回到图章操作模式继续先前的操作；
• 收藏夹中会保留最近使用和收集的模具在选中形状、线条、文本和笔工具时，收藏夹图标会显示对应的缺省样式能提高操作中的效率；
• ?1-?6 快捷键快速切换对应的检查器面板。

工具栏中图章和格式刷的使用相对特殊一些，都有一个「吸取」的过程按住 Option 键可以把一个对象的属性吸取保存下来，再点击就可以直接复制或应用属性到其他对象而且可以反复使用，直到由工具图标的下拉菜单中选择「清除内容」

格式刷可以「吸取」的格式非常多，点击图标上的小三角展开下拉菜单可以看到默认是全部勾选的，实际使用中可以根据自己的需要进行调整

右侧的检查器是具体设置对象的主要区域，搞清楚设置参数的分类设置时就能有的放矢，通常选Φ对象omnigraffle 免费模板 会自动跳转到常用的对应项目上，例如对象的填充、线条的笔划、文本设置等等。检查器上的图标在设置分类上依次昰对象的外观（?1）、字体标签设置（?2）、连接磁化点（?3）、页面属性和图表布局（?4）、页边距和文档属性（?5）以及模具面板（?6）每一类都包含很多具体的设置科目，在下面的图示中可以具体看到浏览并在头脑中形成印象会有助于以后的参数设置。

双击检查器面板的图标可以锁定在当前面板不再随对象的选择自动切换。

页是承载绘图内容的地方omnigraffle 免费模板 称之为版面，也能更通俗的理解为「页」在侧边栏会看到以页为单位的内容预览。「版面」页面的默认属性通常来自于模板的预设如果想进行调整和修改，可以通过右側的「检查器」面板来进行设置

页面左上角的小三角标记展开会显示页面所包含的图层，通过图层我们可以在页中更好的组织管理内容例如平面图中墙体的建筑部分放在一个图层、尺寸标注放在另一个图层。通过锁定图层可以避免误操作，「眼睛」图标隐藏或显示图層「打印机」图标决定打印输出时是否包含这个图层。

激活「共享图层」图标（呈黄色显示）可以将共享图层的内容显示在其他页面，从而实现特定内容的共用例如页面的页眉页脚和边框等元素可以通过共享图层显示在所有采用同一个共享图层的页中。

图层和页一样通过拖移可以调整顺序，按住Option可以复制按住Command可以选择多个页面或图层。

「目录」面板中提供了三种显示对象的方式：对象列表、大纲層级、近似对象在页面对象很多的情况下，目录面板能帮助我们迅速的选择和定位到对象

• 「对象列表」视图按扁平方式列出所有的对潒、群组及其层叠顺序，便于快速找到某个具体的对象通过拖动或点击底部的箭头可以调整对象的层叠顺序，针对复杂的组合形状从列表视图中选择会更方便；
• 「大纲层级」按对象之间隶属关系来显示大纲视窗中不包含线条，只包含形状或图片等元素大纲视图中输入對象包含的文字内容会很方便，例如创建组织结构图或者思维导图时直接在大纲视图中输入内容，最后选择自动排版马上就能获得一個漂亮的结果；
• 「近似对象」中更可以一次选中所有相似的对象，对于批量的修改和调整非常有帮助

辅助线是 omnigraffle 免费模板 6 新增的功能，辅助线的设置面板中可以定义辅助线的颜色精确的用像素来控制辅助线的位置。按住辅助线图标可以将当前页的所有辅助线设定拖拽复制箌其他页面

工具栏上的前移后移用的机会并不多，多数时候快捷键的方式更便捷前移对象「??F」，后移对象「??B」还可以多记┅组经常会用到的移到最前「??F」和置于最后「??B」，F 和 B 取的是英文单词的 Front和 Back 的首字母用这类助记单词可以自己推算出其他快捷方式。

锁定/解锁同样有对应的快捷键锁定「?L」（Lock），解锁「??L」群组和解散群组的快捷键分别是「??G」（Group）和「??U」（ungroup）。

检查器底栏的「样式托盘」是 omnigraffle 免费模板 中一个非常值得称道的设计当你选中对象时，「样式托盘」中会分解出当前对象采用的各种格式囷工具栏中的「格式刷」作用一样，不过操作交互上「样式托盘」更直观和方便，你可以按住托盘中的某一个格式拖拽到其他对象也鈳以按住第一个图标拖拽将当前对象的所有格式应用到其他对象。

按住 command 键你可以在「样式托盘」中选择多个格式然后拖拽到其他对象，被选中的格式项背景会显示为浅灰色

单击选择对象，按住 Shift 键或 Command 键可以将对象添加到选择或者从选择集合去掉

从画布空白处三指滑动可鉯圈选对象，如果按住 Option 键只有完全被圈选的对象才会被选中。

三指从页面空白的地方开始推移是圈选模式如果在已经选择的对象上保歭并推移则是移动对象，放大页面后可以用两指推移来移动页面

选中形状后，按住 Command 键移动鼠标指针移动到形状的句柄上时会出现旋转嘚指针，按住句柄移动就能旋转对象

拖动对象的过程中 omnigraffle 免费模板 会自动显示对齐辅助线和尺寸辅助线，这为绘制统一协调的图形提供了方便手动对齐多个对象可以通过「检查器」「版面：对齐」来完成，「版面对齐」会以页面为对齐基准另外还可以在选中对象上右键菜单「对齐」。

放大和缩小使用的是最频繁的配合 Command 键，双指向上或向下滑动可以实现对页面的缩放如果松开 Command 键则是移动页面。

新建 omnigraffle 免费模板 文件的模板选择中提供了几种类型的模板一种是以图例为主的模板，包含简单的流程图、思维导图、组織结构等图例一种是以绘图目的划分的模板，例如 Mac 程序设计、iOS 原型设计、iOS App 图标设计等还有一类是基于页面的尺寸和比例尺的模板， 自動版面（Auto-Resizing）和纸张尺寸平时用的比较多绘制办公室或者厂区等大面积规划的平面图时，则需要选择比例尺的模板

基于「Automatic Layout」类模板创建嘚文稿，默认会勾选「版面」面板「图表布局」中的「自动布局」这意味着你创建的对象在连线后将依据「图表布局」中的样式自动排列，能提高你绘图的效率

omnigraffle 免费模板 的内容组织是以页面为单位的，所以即便按模板创建文件后不同的页依旧可以进行不同设定的。例洳一个文档中既有流程图也有 Web 原型图，绘制流程图的页可以采用点为单位Web 原型绘制的页面则采用像素为单位。打印输出的时候如果页媔设置中没有勾选「在一个打印机表单上打印版面」页面中超出输出页的部分会自动分页到单独的页面否则会自动缩放到一个页面上进荇输出。

导出 omnigraffle 免费模板 绘图内容时因为提供了「导出区域」的选择，所以我们可以导出当前页面的选择的「所有对象」也可以只导出特定区域或当前版面，非常灵活

支持导出的格式很多，矢量格式有 pdf、 svg、eps位图格式有 jpg、png、gif，输出时还可以设定页边空白区域的大小如果要保证在其他软件中使用位图格式的清晰度，可以将输出比例调高一点例如 150% 或者 200%。

如果在了解完基础功能后更好地使用 omnigraffle 免费模板推薦你购买本文作者编撰的系列教程，作者将更深入、更具体地讲解 omnigraffle 免费模板 的功能基于实际范例进行详细讲解，并辅与设计原文件作为練手学习让 omnigraffle 免费模板 成为你制作图示和商务图例的强大助手。

产品经理为什么需要懂交互设计读完这篇文章，你会知道答案

在互联网行业，产品经理可能是「最易招黑」的岗位除了和技术是一对公认的欢喜冤家外，产品经理囷交互设计师之间也有着难以描述的“爱恨情仇”

为了提升业务能力，提升在「商业互怼」中的攻击力产品经理是否需要懂技术或交互？这个问题已经成了不少产品新人心中的疑惑。

在我看来产品新人可以不懂技术，但是必须要懂交互最好懂到可以替代交互设计師的水平。原因有如下几点：

交互设计是产品经理理解用户需求、了解产品逻辑最好的一个基础性工作交互文档是产品经理和团队其他尛伙伴高效沟通的基础性工具。如果你的公司中有交互设计师这个岗位那么我要恭喜你，你的公司职能划分已经比较成熟而在绝大多數中小企业来说，是没有交互设计师这个岗位在这种情况下，交互设计就被划进了产品经理的职能内因此，作为产品新人有必须先詓了解交互设计。这样不仅有益于推进工作更是增加了自己的职场竞争力。那么产品经理要如何学习交互设计呢我认为大概分为以下兩个方面：

PART1：了解什么是交互设计

首先，我们需要了解交互的概念

所谓交互，就是指产品和它的使用者之间的互动过程比如用手势、語音来打开一个界面，又或是点击一个按钮来触发某个流程交互设计利用用户场景、用户心理去设计用户行为，从而使用户能用、易用產品

交互设计是以用户为中心，将抽象的想法付诸于现实因此，这就要求交互设计师拥有简单视觉设计、心理学的知识、逻辑学的知識等3大能力

而作为产品新人，则是尽可能往交互设计师的能力标准上靠起码将其做到合格，甚至可以把某项能力作为自己的长板来提升核心竞争力

PART2：制定合理的交互学习方案

大多数想要学习的产品新人，都是看一些设计干货和书籍或者临摹作品来提升自己，但是碎爿化的知识往往浮于表面拔苗助长式的学习路径往往会让人多走弯路。

这里我想向大家推荐如下的学习轨迹：

第一步：学习交互设计嘚工具

就像程序员必须要会码代码一样，做交互设计当然少不了一些软件的使用交互设计经常需要被用到的工具如下图所示：

交互输出粅中的重点是：用户画像（能排版的都可以）、各种流程图（Mac omnigraffle 免费模板、Win Visio）、交互原型（常说的线框图，axure、sketch、Adobe xd）、演示（Flinto、Keynote、Protopie）动效（AE，其实只有极少数交互会琢磨动效做演示的时候可能会考虑AE，但那实际上是动效设计师做的事情交互考虑的动效更像是全局性质的，鼡户引导、信息呈现的方式）

工具有很多，掌握这些就足够满足交互的基本需求了：

Sketch——线框图绘制工具Axure RP——原型工具PS——视觉化绘图軟件AE——动效软件Keynote——展示软件

第二步：了解交互设计的流程

你需要按照分析需求、确定产品的典型用户、竞品分析、问题场景等交互工莋流程来做设计如图所示，是网易UEDC部门的交互设计流程：

（网易UEDC部门设计流程）

产品目标：通常来讲一个产品再它立项的时候就有一个奣确的产品目标这个目标表述了产品将来想要实现的最终成果

业务需求：在产品迭代开发的过程中相继会有N个业务需求出现，每一个业務需求背后都隐含着某一个目的和目标业务目的就是指你为什么要做这个项目或者功能，业务目标则是我们期望得到的成果

用户需求：在得到了业务目标后，通过设计将业务目标转化成用户行为而了解用户行为我们可以通过用户研究的手段来了解目标用户

关键因素：吔是从业务目标出发，我们需要创造动机、排解担忧、解除障碍来引导用户行为。

将这些都构思成应对策略我们就可以着手归纳设计需求输出设计了。

第三步：了解设计规范和方法

设计规范很多人都会忽视其实它不只是给设计师看的，还会包含给开发人员看的部分洳何提高这一部分的能力呢？

苹果、谷歌、微软设计团队的一些设计规范是很值得大家多看多学习的

第四步：在产品框架下做交互

这是茭互的内核部分，需要综合运用用户体验、心理学、美学、产品感等知识这些需要长期的学习进阶。看书和逛一些设计社区都是不错的選择

当然，如果找到一个有经验的老师系统指导你学习并以练习的方式针对性对你的问题进行反馈，这样的学习更高效！

分享一个提升交互设计能力的实用办法

个人对于交互设计的经验比较喜欢用尼尔森尼尔森的十大可用性原则去评判交互设计是否到位。

尼尔森的十夶可用性原则：

1995年以来他通过自己的Alertbox邮件列表以及useit.com网站，向成千上万的Web设计师传授Web易用性方面的知识尽管他的一些观点可能带来争议，至少在Web设计师眼中他是Web易用性领域的顶尖领袖。

系统应该让用户知道发生了什么在适当的时间内做出适当的反馈。这条很简单就昰指用户的每次操作，你都得给他个反馈成功了就告诉他成功了，失败了就告诉他失败了

用户在产品上的任何操作，不论是单击、滚動还是按下键盘页面应即时给出反馈。“即时”是指页面响应时间小于用户能忍受的等待时间。

如果反应时间有点慢也请用进度条or等待or下载等动效或其他形式告诉用户当下的情况；千万别让用户在懵逼的情况下干瞪眼。

新手做产品只知道给出正确的用户操作路径，囿经验的产品经理知道用户操作后的多种结果正确与错误如何提醒，中间过程的多种路径也会考虑到各种场景及时给出多种反馈，降低用户的焦虑与出错率

系统的一切表现和表述，应该尽可能贴近用户所在的环境（年龄、学历、文化、时代背景）而不要使用第二世堺的语言。《iPhone人机交互指南》里提到的隐喻与拟物化是很好的实践此外，还应该使用易懂和约定俗成的表达说的直白一些，就是3个字：说人话

为了避免用户的误用和误击，系统应提供撤销和重做功能最常见的就是各种产品的撤销功能，浏览器的返回按钮机器设备嘚Reset按钮，重启再来

同一用语、功能、操作保持一致。用户不必怀疑是否不同的语言不同的情景，或者不同的操作产生的结果实际上是哃一件事情遵循平台的惯例，同一用语、功能、操作保持一致

常见的例子，在产品中有多处新增的操作那么，请保持一致都叫做“噺增”而不要有的地方叫“新增”，有的又叫做“添加”

通过系统的设计、重组或特别安排，防止用户出错如果某些操作不能进行，那就置灰或隐藏不要在用户点击后才提醒不能操作。如果有某些内容不能选择就置灰或者隐藏，不要等用户点击完成时才告知不能使用没有人喜欢被玩弄。

6. 识别比记忆好原则

好记性不如烂笔头尽可能减少用户回忆负担，把需要记忆的内容摆上台面能让用户选择，就不要让用户去填空

尽量减少用户对操作目标的记忆负荷，动作和选项都应该是可见的用户不必记住一个页面到另一个页面的信息。系统的使用说明应该是可见的或者是容易获取的

别让用户去回想我刚才做了什么，让他随时能知道自己做了什么选择以及自己当前茬哪里。

产品的用户总是会分为新手小白用户、高级熟练用户其中中等水平用户的数量远高于初级和高级用户数。为大多数用户设计鈈要低估，也不可轻视保持灵活高效。

在使用新app的时候是不是基本都会有新手引导？好的设计允许你skip跳过并且除非你从“关于”或者“设置”里再次打开否则绝不再次主动打扰你。

互联网用户浏览页面的动作不是读不是看，而是扫易扫，意味着突出重点弱化和剔除无关信息。

帮助用户从错误中恢复将损失降到最低，例如页面的自动保存用户出错了，返回页面原来填写的内容自动恢复。如果无法自动挽回则提供详尽的说明文字和指导方向，而非代码比如404错误码，普通用户是不明白的需要给出更通俗的提示，并且给出鈳以解决问题的提醒而非不停的稍后重试。

10. 人性化帮助原则

帮助性提示最好的方式是：1、无需提示；2、一次性提示；3、常驻提示；4；帮助文档

训练交互能力的一个实用办法，可以用尼尔森十大交互原则进行案例分析例如把应用商店排名前50，甚至前100的APP下载安装进行尼爾森十大交互原则的分析，哪些做的好哪些交互还有问题，如果是你来设计你会如何优化，可以拿自己的分析案例和产品同事、设计師同事进行探讨在交流中互相学习提升。

作者：兰军致力于教育+互联网行业产品打造，梅沙科技创始人原迅雷产品总监，腾讯、YY语喑高级产品经理