Sketch和Axure画原型，哪个好用？
Sketch和Axure画原型，哪个好用？
最近换了一家公司，就换了一款设计软件。之前公司，同事之间的稿件交流，都是统一用Axure原型图。现在新公司，同事之间的稿件交流，都是统一用Sketch原型图。我把自己这段时间的Sketch使用感受，现在分享一下。Sketch和Axure相比，有哪些特点？Sketch大部分功能和操作思路，和Axure是一样的，比如：按住空格键， &显示抓手工具，这时候一边按住空格键，一边可以用鼠标拖动界面大图。下面我通过边用Sketch画几个示例图片，然后通过示例来讲解Sketch的特点。-----------------------------------------------上图是Sketch示例1：这是一个Sketch布尔运算功能画icon的示例。通过这里示例，可以发现Sketch包括有4种不同的布尔运算，你可以根据需要来具体选择：合并形状 (Union)：减去顶层形状 (Subtract)：与形状区域相交 (Intersect)：排除重叠形状 (Difference)：这些功能跟CDR和Ai以及PS软件的使用效果是一样的。之前喜欢用布尔运算画icon的同学们，你们遇到Sketch，就有福了。因为Sketch也可以通过布尔运算来画icon。
现在新版的Axure8.0，也开始有了布尔运算的功能。不过，还是Sketch的布尔运算位置更明显，用起来更顺手。-----------------------------------------------上图是Sketch示例2：这是一个用Sketch画的搜索框的示例：这个功能和Axure的一样的。不过，仔细看上面这张图，可以发现，Sketch可以绘制两头渐隐的直线，可以给文本框添加内阴影和外投影。-----------------------------------------------上图是Sketch示例3：这个示例展示了sketch快速切图的功能。sketch可以快速导出切图， 包括各种倍数的切图，一键导出，并且自动命名，比如：2倍图，导出之后，自动命名尾巴，@2x；3倍图，导出之后，自动命名尾巴，@3x；-----------------------------------------------上图是Sketch示例4：这个示例是我用Sketch调整的2段示范文字。Sketch可以轻松调整字间距，行间距，段间距。配图的间距比例为：字间距(Charater) : 行间距(Line) : 段间距(Paragraph) = 1:26:16-----------------------------------------------上图是Sketch示例5：这是一个快捷键的示例。Sketch的界面截图：它具备很多自带的快捷键，比如：输入R，就可以绘制矩形；输入L，就可以绘制直线；输入T，就可以开始输入文字。Axure则需要用鼠标选择矩形，然后拖动到面板，才可以开始更改矩形的尺寸。-----------------------------------------------上图是Sketch示例6：这是一个镜像功能的示例。Sketch画icon，可以支持镜像功能，使用方法和CDR，Ai是一模一样的。上图是先用布尔运算先绘制返回icon，然后通过镜像之后，就变成了更多按钮。-----------------------------------------------上图是Sketch示例7：这是一个导出pdf的示例。Sketch可以导出pdf格式的文件，从而解决Mac邮件发送附件到windows电脑，打开为乱码的问题。因为pdf文件的兼容性很好。具体操作是：点击&Insert&，在弹出的下拉菜单中，选择&Artboard&，或者直接按下快捷键A，直接在界面上画一个新画板，点击File，在下拉菜单中，选择导出pdf格式即可。-----------------------------------------------上图是Sketch示例8：这是一个展示Sketch自带规范控件的示例。Sketch可以自动提供iOS Ui Design的尺寸和按钮规范控件，比如：在线框图（wireframe）绘制过程中，经常需要绘制界面Tab的按钮大小和位置，在Sketch这里，只需要直接复制一套过来就好。除了iOS 的规范控件之外，Sketch还提供了Web Design的规范控件。具体操作：点击File，在弹出的下拉菜单中，选择New from Template，再选择iOS Ui Design。-----------------------------------------------上图是Sketch示例9：这是一个Mac电脑缩放屏幕的示例。轻轻滑动Mac电脑的触摸键盘，即可缩放Sketch的界面。双指向外滑动，Sketch界面开始放大。双指向内收拢，Sketch界面开始缩小。这个功能，在Axure上是不能单靠Mac的触摸屏来实现的。-----------------------------------------------上图是Sketch示例10：这是一个所页面pdf排序的示例。Sketch可以导出多页面的pdf，多个画板导出多个pdf。页面的顺序，可以在上图的红色区域中，调整Artboard的顺序，即可对应到pdf内页的页面顺序。-----------------------------------------------上图是Sketch示例11：这是一个Sketch选择群组里面的单个控件的示例。选中已经群组过的单个箭头。Sketch里面，对于已经群组过的部件，如何选中？只需要按住command键单击，就可以选中群里过的单个部件。-----------------------------------------------上图是Sketch示例12：这是Sketch快速更新版本的示例。Sketch的版本更新，只需要在联网的情况下，点击&Sketch&，弹出下拉菜单，再选择&Update&，即可一键完成软件的版本升级-----------------------------------------------上图是Sketch示例13：这是在Sketch里面把彩色图片改成黑白的示例。使用场景：制作交互稿的时候，直接把彩色稿，改成黑白稿。操作步骤：选中图片，点击Color Adjust，调整Saturation即可实现。-----------------------------------------------与Sketch相比，Axure作为专业的线框图的原型工具，也有一些很有趣的功能。上图是Axure示例1：这是Axure的切图功能的示例。我们可以把电脑桌面上的图片，拖入Axure中，利用Axure的裁切图片功能，进行裁切，从而截取图片中的一部分。-----------------------------------------------上图是Axure示例2：这是一个Axure画流程图的示例。Axure的流程图控件很强大，在绘制原型图之前，可以先绘制流程图，再用流程图去沟通。等流程图定稿大致确认之后，再开始绘制页面的线框图。这时候，工作过程中，我们就可以避免因为业务流程没有理顺，导致的原型图频繁修改的沟通情况。-----------------------------------------------我给沟通优先级，做了一个排序：用流程图沟通 大于线框图沟通。流程走通了，才开始绘制线框图。这样可以避免因为流程上的修改，导致线框图反复修改。而线框图的时间评估，如果是2个小时。那么，每修改一次，就需要加班1个小时。这样就可以解释设计师离职的2种情况：改稿的次数越来越多，进而显得设计师的水平很差，从而导致设计师被辞退。加班次数越来越多，进而导致设计师很累，从而导致设计师跳槽。这两种离职情况，都可以通过这个沟通的优先级来改善。沟通思维 大于 沟通语言，跟不同部门的同事沟通，需要从对方的思维方式去思考。比如：跟开发沟通，更侧重后台的流程是否走得通。手绘流程图 大于 软件流程图，手绘流程图可以边沟通，边修改。而软件流程图，则需要敲打键盘和指点鼠标，两人凑近一台屏幕来修改，这样显得既麻烦又缓慢。-----------------------------------------------上图是Axure示例3：这是一个Axure绘制页面跳转关系的示例。Axure的优点是可以设计出全套页面，点击跳转的高仿真页面操作流程图。因为Axure的最小单位是page，很适合整理页面之间的整体架构，通过页面之间的跳转流程，来反映出线下业务的真实流程。其次：Axure用户群更广。Axure有windows和Mac两种版本。而Sketch目前只用Mac版本。这样一来，Sketch的用户群就丢失了windows用户。-----------------------------------------------上图是Axure示例4：这是描述Axure的主要特点的示例。我个人的更倾向于先分析产品的使用场景，用户需求，产品目标，以及商业模式，接着分析业务流程，然后绘制功能流程图，再分析页面的跳转流程图。接下来才开始绘制原型图，前期只需要用手绘打草稿的原型图，经过大致沟通确认之后，再开始绘制线框图。至于用什么工具绘制线框图，这并不重要。我看有些产品经理直接使用PPT画原型图，整个产品思维，业务流程，功能逻辑，也表现得挺不错的。-----------------------------------------------总结一下，如果想表现产品的业务流程，那么我建议使用Visio来绘制流程图。如果想表现产品的页面图文布局和页面的跳转关系，我建议使用axure。如果想表现产品的信息架构，我建议使用Mindmanager或Xmind。如果想表现产品的视觉层，包括圆角＋投影＋布尔运算画icon，我建议使用Photoshop或Sketch来作图。本文作者：张云钱，个人微信公众号：泡一杯茶，从Ui设计师&到产品经理&到高级交互设计师&到UED经理
打开微信“扫一扫”，将本文章分享到朋友圈
快给朋友分享吧！
21人已收藏
Ctrl+Enter
你的打赏就是我的动力！
悄悄说，听说打赏的人收入都比我高，不信你试试。
注: 打赏金额随意，完成后，请手动关闭本窗口。
Ctrl+Enter
您将要删除您的普通推荐大作
Sketch和Axure画原型，哪个好用？
在她入驻到UI中国的日子里
总共吸引了4840位设计师的驻足流连
总共收获了35位设计师的由衷赞赏
总共获得了21位设计师的悉心珍藏
总共引起了4位设计师的深入讨论
依然要删除吗？原型设计｜6种原型图的优缺点
互联网产品设计过程中，原型图的常用格式，我见过6种以上。它们的优点和缺点，介绍如下：1. Axure格式的原型图优点：可以在另一台电脑上，阅读和编辑Axure原型图；在Axure预览模式下，可以在浏览器左侧显示网页的目录；Axure软件有Mac版本和windows版本。缺点：如果接收文件同事的电脑，没安装Axure，就打不开了；不能在手机微信聊天窗口上，直接阅读Axure原型图；Axure低版本，不能打开高版本的Axure文件。2. Sketch格式的原型图优点：可以在另一台Mac电脑上，阅读和编辑Sketch原型图；Ui设计师，可以直接在Sketch里面，把原型图，做成高保真的Ui设计稿；可以导出PDF格式的多页面PDF原型图。缺点：Sketch软件，目前只有Mac版本，没有Windows版本；在手机微信App的聊天窗口上，不能直接阅读Sketch原型图；Sketch低版本，不能打开高版本的Sketch文件。3. PPT格式的原型图优点：可以在Mac或Windows电脑上，阅读和编辑PPT格式的原型图；在手机微信App的聊天窗口上，直接阅读PPT格式的原型图；可以通过其它软件，将画好的原型图，导入PPT里面。缺点：ppt页面的面积太小，不支持表达多个页面之间的跳转关系；页面的缩放，难以操作；PPT里面的画图控件太少，画图工具隐藏的比较深，操作起来，不方便；4. Html网页格式的原型图优点：可以在任何电脑上，用浏览器打开，直接阅读Html原型图；不能在手机微信聊天窗口上，直接阅读Html压缩包的原型图；可以先用Axure设计原型图，然后导出Html网页格式。缺点：不支持Html网页原型图的再次编辑，不支持在浏览器左侧显示网页的目录；邮件接收Html原型图的压缩包，需要解压，然后还需要在众多网页文件中，一个个点开查看；页面之间的跳转关系，各种中间状态的逻辑判断，Html难以表达清楚。5. 一大张jpg图片格式的原型图优点：可以在任何电脑上，阅读和编辑jpg图片格式的原型图；邮件发送jpg图片格式的原型图，文件可以很小；可以在手机微信聊天窗口上，直接阅读jpg格式的原型图；可以通过其它软件，将画好的原型图，导出为jpg图片格式。缺点：在电脑上，jpg图片格式的原型图，比较难操作：比如：调整到100%大小，并左右移动查看页面跳转关系；在手机上，微信发送的时候，具有流程关系的一大张jpg图片格式的原型图，会压缩，导致微信接收后不清晰。6. PDF格式的原型图优点：可以通过其它软件，将画好的原型图，导出为PDF格式。可以在Windows或Mac上阅读；支持软件：Adobe Reader，极速PDF，福昕pdf，Acrobat；可以在智能手机上，阅读pdf格式的原型图；支持手机APP软件：WPS，极速PDF，福昕pdf，Acrobat，甚至微信app的聊天窗口，直接发送，对方直接打开。在电脑上，页面容易调整到100%大小，并且左右移动查看页面的跳转关系；Mac电脑自带的预览pdf软件，可以合并多个pdf，旋转pdf的某一张内页；电脑版的福昕pdf软件，可以给pdf内页添加标注文本，可以在多页面的pdf左侧添加目录链接；缺点：如果需要重新编辑pdf里面的某一页，那么就要提取多页pdf文件中的某一页，待修改好之后，再合并到多页PDF文件里；电脑阅读和手机阅读pdf，最好是已经安装了专业的PDF阅读器。总结：APP产品设计的原型图，重在表达意思，只要意思传达到位了，那么格式可以不必在意。原型图的格式，属于“道”，“法”，“器”，这3个层次中的“器”。如果想在用户体验上，走的更远；那么就需要在“道”，“法”，这2个层次上，积累更多的项目经验，还有不同岗位的思维方式和沟通思路。#专栏作家#张云钱，人人都是产品经理专栏作家，百度签约作者，Ui中国认证设计师；喜欢分析不同岗位的思维方式和沟通思路，偶尔网上冒泡，写篇文章。本文原创发布于人人都是产品经理。未经许可，禁止转载。
TA的推荐TA的最新馆藏出错啦 - PMCAFF产品经理社区 中国第一产品经理人气组织
PMCAFF目前不支持IE浏览器, 请用其它的浏览器打开PMCAFF, 如果是双核浏览器, 请选择极速模式}