Axure教程：用Axure画出手绘效果的原型图 | IxD交互设计学堂专注交互原型与用户体验-我是UE交互神器！谁是最好用的原型绘制工具？
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
& / & 正文
Hi,我是优设小编
交互神器！谁是最好用的原型绘制工具？
尚：作为一个师，选用什么工具来完成快速是一个争论不断的话题，从早些年“唯一”的选择 visio 到如今 Axure / Omnigraffle / Adobe Creative Suite 遍地开花，再加上在线工具,
或 ，思维导图工具 ,
或 ，在不同的细分领域给了我们很多的选择，那么，哪个才是最好的工具呢？
相关推荐：
在实际使用过程中，由于项目具体阶段、平台特性以及输出物展示对象的不同，并没有哪个工具受到设计师们一致认可，每个都有其各自的优势和缺陷，按照个人经验对比了一下常见的几款。
下面，详细介绍一下每一类软件的优劣。
作为设计师的看家技能，理论上可以通过它做出任何图形，但对于交互原型来说制作和改动成本略高，图层和组件的处理上比较死板，软件自身性能和模板库也很受挑战，容易过快进入细节讨论而忘记初衷，并非交互稿首选，当然也有设计师一开始就是朝着高保真 Demo 方向做的，用它最直观。
同胞兄弟 Illustrator 在矢量处理上表现的略好，不受画布大小和图层的困扰，也有丰富的模板库支持原型设计，但继承了 Adobe 家族一贯功能大而全导致操作很繁琐的特点，原型图制作效率也不高。
相比之下，干儿子 Fireworks 拥有更简单的界面，同样在图层处理方面的优势，尤其是可编辑 png 文件包含了图层和矢量信息这一点保证了文档的传承性，受到很多的设计团队的青睐而做为交互输出工具的首选，可惜 Adobe 对其支持有限，最新的 Adobe CC 家族中更是失去了它的踪影，未来 Fireworks 优化空间很有限。
作为非专业绘图工具，用 Keynote / PPT 来画交互稿算是曲线救国，丰富的交互动作和简单的使用流程解决了很多交互演示需求，CDC 的同事曾写过一篇《》 做了很好的解释，但问题也正如文章中所述，优缺点非常明显，模板库几乎为零，在没有其它工具辅助情况下自行绘制费时费力，在这里就不详细介绍了。
号称是互联网产品经理标配，国内有大量资料和讨论，其优势非常明显：操作复杂度介于 Keynote/PPT 和 Adobe 家族之间；拥有全套 web 控件库，直接拖拽即可快速制作网站原型；丰富的动态面板可以用来模拟各种复杂的交互效果；导出 HTML 后可以更加准确的传达信息架构和页面跳转。
但对移动产品原型支持不足，Axure 无法导出可在移动端演示的文件，只适合做信息结构和页面逻辑的展示。在对形状样式的处理上不够丰富，很多细节处理的不够好，做出来的线框图大多不够好看。
作为 Mac 平台下最好的原型设计工具，除了用来绘制普通图表、树状结构图、流程图、页面编排等，还可以试试规划电影剧本、 绘制公司组织结构，甚至是作为演示文稿来展示一个项目。
由于利用了很多 OS X 原生绘图属性，Omnigraffle 只支持 Mac / iPad ，它在很多方面表现都有 Visio 的影子，就连名字里的 “Graffle” 都是创造出来对应 “Visio” 的，尽管在 web 交互事件上并不如 Axure 那么丰富，对移动平台的支持也不如一些新星 (如
) 的表现那么亮眼，但由于其丰富的模板库、轻松的上手体验以及大量贴心的细节，战胜了其它所有竞争对手，成为我日常工作最主要的工具。
以上几个软件已经能涵盖大多数的使用场景，但工具毕竟只是纸和笔的延伸，在熟练掌握其中一个的基础上，不断尝试新工具不仅能发现更多有价值的技巧加快设计节奏，更是对自身能力短板的了解，互相结合使用让想法不受工具牵绊，努力让自己成为全栈设计师才是它们的价值。
另外，市面上较少介绍 OmniGraffle 技巧的文章，很多人感兴趣但不知道怎么用好它，下面分享10个有用的小技巧来加快上手。
1. 自定义你的工作界面
在 Omnigraffle 中，可以通过拖拽指示器到另一个组件上的方式将包括边框填充颜色等样式复制过去，也可以复制任意单一属性，大大节省了重复或近似组件的样式修改成本。
3. 网格、智能辅助线及参考线
除图示外，在画布空白处点击右键可以看到三个选项
对齐到网格，参考定义画布环节描述的网格设定，勾选这个选项后，调整形状大小就会使边缘贴近网格，拖拽位置时会根据形状大小让任意一边贴近网格。
智能对齐辅助线，勾选后，拖拽形状位置时，会自动寻找当前水平或垂直方向，边缘或中心能对齐的已有形状或画布中心线，推荐勾选
智能距离辅助线，勾选后，会自动寻找水平或垂直方向上临近的两个形状，在等距的时候给出提示，推荐勾选
在用 visio 画流程图过程中最受不了的就是连接线不能随意控制形状位置样式，只能画几种特定的图，新建节点的操作步骤也很繁琐，而这一缺陷直接导致各种思维导图软件的崛起。在 Omnigraffle 中这些都变得很容易，只要记住几个快捷键，画起流程图来轻松写意。
5. 点击事件以及导出 pdf & html
在制作交互模型时，加入对点击事件的处理能很方便的演示我们想要的效果，Omnigraffle 支持的脚本不多，没有鼠标滑过，没有动画，只有点击跳转和点击显示或隐藏图层两种，对于一般的原型演示足够用了，尤其是图层显示隐藏，例如可以像图中所示将浮层中的内容放在图层2上，用关闭按钮用来触发隐藏，来实现图示效果。
在演讲模式、导出为 pdf 或 html 后都可以用来演示设定好的交互点击效果。在演示移动原型的时，我通常的做法是制作和屏幕大小一致的文件，设置好点击效果后导出 pdf ，在手机上用任意支持读取 pdf 的应用打开。（这里推荐多看，无页面翻转动画，无多余留白）
6. 画布和图层
和 Fireworks 一样，Omnigraffle 提供类似的画布和图层管理，方便将项目所有内容集中在一个文件中，每个画布可以单独设置页面背景、大小、单位、网格和参考线，并且可以通过共享图层让所有画布使用同一个母版，也就是说既可以当 Indesign 用，也可以当 PPT 用。
画布：Omnigraffle 默认使用 pt 来定义自身单位，在画布面板中用 1pt = 1xx 的方式来设置换算方式，目标单位可以是像素、厘米、英尺、千米等，意味着除了用来画用户界面，还支持用来画地图、家装平面图等任何大小的精准图形。
图层：可以将 Omnigraffle 中的图层理解为一个特殊的、可以批量隐藏或锁定的、可以直接转换为所有页面共享的群组，共享图层的名称会被标记为橙色，界面左下方的内容面板显示了每个图层内部的层叠顺序，如果文件导出时选择 psd，Omnigraffle 还会将图层内容合并成 photoshop 能读取的格式。
如图所示，利用共享图层这一特性，我们可以将画布设定为，并在共享图层的指定位置插入页码 (Edit→Insert Variable→Canvas Number) 等，模拟 PPT 的方式制作演示用文档。
点击 Help→Keyboard Shortcuts，查阅所有的系统快捷键，了解下面这几个就能满足大部分情景了
最常用的检查器面板，cmd+12345切换；
设置好一个常用的形状样式，右键点击加入收藏，以后按住 s 不放就可以直接画出来；
按住 t 不放点击空白处就可以直接新建一个文本块，双击任意形状也可以在里面插入文字；
放大缩小只能通过 cmd+shift+. 和 cmd+shift+, 右手需要离开鼠标不是很方便，我通常是按住 z 鼠标点屏幕来放大，option+z 点击屏幕来缩小（z这个操作在ps和ai里也通用）；
快速复制一个形状 cmd+d，新的形状会在当前形状右下方一个网格的位置出现，比cmd+c之后在cmd+v省一步。
8. 无穷的模板库
在 Omnigraffle 中，工作文档 .graffle和模板文档 .stencil 的表现和编辑是完全一样的，可以很方便的将已经编辑好的文档组织整理后，复制粘贴到模板文件中沉淀，作为后期复用规范，如果搭配云同步工具使用，小型设计团队统一设计规范不再是难事。
除软件自身提供的一堆模板外，全球 Omnigraffle 爱好者们搭建了
用来共享各自的模板 (部分收费)，事实上如果你有足够的耐心和精力，所有的模板你都可以照猫画虎自己画出来。
9. 制作自己的图标库
Omnigraffle 自带的图形基本上能满足大部分需求，简单形状也可以用形状组合和钢笔工具来画， Graffletopia 上有很多其他人画好的形状图标，但面对具体项目的时候需要自己画图标时该怎么办呢？以下有几种方式可供大家选择
最快捷：直接粘贴图标图片进来，缺点是无法调整颜色，不可放大。
多色图标：从 AI 中直接拖拽图形进来，仍旧保持矢量可随意拖拽但不可调整颜色。
单色图标：将 AI 中画好的单色图标导出为pdf (File→Scripts→SaveDocsAsPDF) 后用 Omnigraffle 打开，可随意调整大小和颜色，非常适合图标库的建立。
10. 使用hex值定义颜色
Mac 自带的取色器只能在已有的颜色集里选或是靠肉眼在色盘里选，非常不严谨，还好有爱心人士提供了
插件来帮助我们精准设定颜色。
，用来帮助从旧版本升级上来不知所措的老用户回到 Omnigraffle 的怀抱。
？如果需要手动安装，则只需要在 Omnigraffle 中点开模板库，任意选择一个模板后，点击模板名称右侧的齿轮，选择 Show In Finder 就可以看到全部的模板，将下载好 Stencil 文件拖进来即可。
Mac 下另一款设计软件
也非常棒，五星推荐。
相关推荐：
原文地址：
================关于优设网================
“优设网“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
PS礼仪手册：网页设计师必须修炼的内功技法，更是不可或缺的WEB设计指南。
设计微博：拥有粉丝量63万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：
订阅更新：您可以通过
【推荐！设计师必备网址导航】
我们的团队
大家在关注因为自学UI的关系用了 Sketch，但是身为产品经理回头去用 Axure 发现用 Sketch 画原型还是不错的，对齐标注什么的用应有尽有.....好用太多。
？你们的原型不做交互么？
-&br&讨论这种问题没有意义。&br&&br&举个例子，目前我们团队PM和部分UI都在用Sketch，所以Sketch显然比Axure好用，反之亦然。&br&团队协作，统一工具是大前提，大家都不同的工具还谈个屁的好不好用。&br&&br&说说我目前的方法：&br&&br&&ul&&li&小需求，白板上画一下就可以直接进入UI&br&&/li&&li&大点的需求，出一个带引导线的artboard，基本上就搞定&br&&/li&&li&新APP或复杂流程，肯定是高保真然后把玩N次不断修正，所以一般用sketch+marvelapp 。把玩真的很重要。&/li&&/ul&谈到高保真的问题，我把高保真定义为灰度无色彩但比例和位置都是我心中最完美的样子（不是视觉上的完美）的交互稿（我们团队要求每个PM都要出交互，老大也不例外），所以这个看个人的追求或团队要求。&u&&b&至于说到效率问题，在软件使用娴熟并有组件库积累的情况下，影响快慢的只是有没有想清楚而已。&/b&&/u&&br&在想的环节，我推荐白板或纸笔，可以随意的涂改，不用拘泥像素是否对齐之类的东西。&br&&br&逻辑复杂的产品仍然逃不开PRD，比如搜索、CRM啥的。&br&&br&-
-讨论这种问题没有意义。举个例子，目前我们团队PM和部分UI都在用Sketch，所以Sketch显然比Axure好用，反之亦然。团队协作，统一工具是大前提，大家都不同的工具还谈个屁的好不好用。说说我目前的方法：小需求，白板上画一下就可以直接进入UI大点的需求，出…
&b&我是坚决来唱反调的！！&br&&/b&&br&产品经理早期规划产品使用Sketch是极为不合理的，我知道题主肯定是不小心瞄到了那些看起来牛逼闪闪的产品原型图（&a href=&/shots/1356038-Kitchenware-Pro-Wireframe-Kit/attachments/193170& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&这里&i class=&icon-external&&&/i&&/a&？、&a href=&/shots/1300176-Wireframes/attachments/181309& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&这里&i class=&icon-external&&&/i&&/a&？&a href=&/shots/825485-Mac-Chat-Application-Wireframes/attachments/85602& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&还有这里&i class=&icon-external&&&/i&&/a&？）；是不是觉得，哇塞，好酷好专业好有逼格！但是我敢打赌，这些高保真的线框图绝大多数都是设计师在主导并且是业余兴趣使然的作品，你放在实际生产环境中试一试？！绝对吃力不讨好、严重拖延项目进度的不负责任的表现。&br&&br&我是深有体会，一年前我帮好朋友做一个很小的项目，那段时间我也是刚刚学会Sketch，觉得有必要像Dribbble上的歪果仁一样专业，输出高逼格的产品原型图......结果就是，原本我自己评估下来一周可以理顺的产品，我用了近三周时间，这个过程中我一直被设计思维牵着鼻子走，而不是产品严谨的逻辑思维。后来我特地去翻看了Dribbble上那些拿Sketch画线框图的大牛们的Profile和博客，试图去了解和学习他们在项目中是如何协作的，但是，毫无例外，我发现他们对自己的定位都是UI/UX设计师，而不是PM...&br&&br&作为一个同时掌握产品+交互+开发的人，我后来在项目中即时调整了我的工作流程，看我的Dock，我是如此安排在Code之前我的开发节奏的：Axure & Sketch & (QC) & ... 对比之后，发现效率极大的提升，在设计成本一定的情况下，产品策划（Axure） 和 UI设计（Sketch）的时间成本可以保持在3:1的样子；而之前用Sketch的时候，我估计是5:1的样子，甚至更多....&br&&br&&img src=&/ee8bcfee5e3d2bd5e03f5d1_b.jpg& data-rawwidth=&824& data-rawheight=&160& class=&origin_image zh-lightbox-thumb& width=&824& data-original=&/ee8bcfee5e3d2bd5e03f5d1_r.jpg&&&br&我是这么理解我吃饭的家伙们的：&br&&ul&&li&Axure：梳理完成全部产品信息架构和功能。所以Auxre之于我的重要性他不是画图软件、不是交互软件，而更多的是帮助我从无到有梳理整个产品大的脉络&br&&/li&&li&Sketch：基于之前的线框图增强设计感，具象之前的产品；如果产品理顺了的话，设计UI在Sketch的帮助下产出简直是飞速的，这也是Sketch之于Photoshop之流在做UI设计时候的牛逼之处。但是如果你错误的将Sketch定义为规划产品的工具，那产能会十分的低下&br&&/li&&li&QC：仅针对一些极为复杂和细腻的交互动画（千万别试图拿QC当产品的交互工具，搞死你...），配合使用即可，也是帮助自己梳理特效的交互逻辑，避免在真实开发环境中走太多弯路。学习成本略高的软件，我今年上半年花了大力气学习的东西，传送门：&a href=&/question//answer/& class=&internal&&Quartz Composer 如何入门？&/a&&br&&/li&&li&Coding...（业余选手，主要是前端）&/li&&/ul&前面扯的其实已经立场鲜明的表明了我的观点，但是还有一个可能被很多PM忽略掉的，光下面这一点就可以无视掉市面上所有的Wireframe软件：&br&&br&&b&Axure有很好的目录结构，层级关系！&/b&看似只是一个目录，实际上是你整个产品信息架构组成的重要部分，很多产品经理都忽略了这块的重要性。说实话，Axure开发团队如果有心，制定好设计规范，配合好描述性组建，完全可以像Doxygen、Sphinx那样根据目录结果自动生成需求文档。&br&&img src=&/2ae0d1bd789f_b.jpg& data-rawwidth=&498& data-rawheight=&1684& class=&origin_image zh-lightbox-thumb& width=&498& data-original=&/2ae0d1bd789f_r.jpg&&&br&我们再来看下Sketch的目录，他很核心的一部分资源输出实际上是形状的成组以及Artboard画板，仔细看里面的目录结果，跟PS没有任何两样。Sketch被Bohemian Coding发明出来的初衷本来就是希望能够短平快的画出精致的UI，而不需要跟臃肿不堪的PS周旋个没完没了，更加没有想过用Sketch去规划他们的产品。Sketch只是一个设计工具，仅此而已；而 &a data-hash=&831c72493bd2eaeed27a53d& href=&///people/831c72493bd2eaeed27a53d& class=&member_mention& data-editable=&true& data-title=&@huiter& data-tip=&p$b$831c72493bd2eaeed27a53d&&@huiter&/a& 所谓的生态圈在我看来不过是支持了第三方插件而已，而所谓的插件功能也只是js写的一堆批处理罢了。Sketch虽然很好很强大，但真心没有必要把一个工具上升到这样一个高度。&br&&br&&img src=&/7c2dcd1fe9dfebc926eafb7f_b.jpg& data-rawwidth=&438& data-rawheight=&1332& class=&origin_image zh-lightbox-thumb& width=&438& data-original=&/7c2dcd1fe9dfebc926eafb7f_r.jpg&&&br&&br&私不见，在两款软件的左侧目录结构中，Sketch的最小单位是Shape，而Axure最小单位是Page，相当于Sketch的Artboard。作为一个产品经理，我关心的是一个Page，而不是Page里面的一个圆角按钮啊亲。&br&&br&总结一下，Sketch会让一个产品经理陷入一个不该他职业本身追求的设计怪圈中去。这里用灰色可以显逼格啊有木有？！圆角头像比直角头像更有设计感啊有木有？！对齐标注什么的应有尽有好方便啊有木有？！...
好吧，这好像真的不应该是产品经理在规划产品阶段需要做的事情吧？！&br&&br&另外，我觉得产品和设计都是产品开发环节中都很重要的两个部分，产品设计的阶段需要严谨严肃的产品态度和逻辑，UI设计则更多偏向情感和用户体验方面的设计；好像所调用的大脑组成部分都不一样？两者真心需要分开对待，同样的选择合适的开发工具也依然很重要～&br&&br&最后的最后...补充一句：以上只是我个人在做项目时候的经验总结以及对工具的理解，每个人对工具的使用习惯和选择的初衷都是不一样的，讨论Axure画原型好还是Sketch画原型好是没有意义的。就好比某些人群在争执是Python牛逼还是Ruby牛逼；亦或者，知乎上的那个段子，「&a href=&/question//answer/& class=&internal&&怎么用WORD达到成为作家的水平&/a&」。
我是坚决来唱反调的！！产品经理早期规划产品使用Sketch是极为不合理的，我知道题主肯定是不小心瞄到了那些看起来牛逼闪闪的产品原型图（？、？？）；是不是觉得，哇塞，好酷好专业好有逼格！但是我敢打赌，这些高保真的线框图绝大多数都是…
好好说话，别发自拍，行么？