关于原型 axure 以及sketch

作为一个交互设计师，因为在公司使用axure进行原型线框图绘制以及基本动效制作，

在家使用sketch绘制线框图or高保真图，所以对两者都有一点点经验。

本文会尝试从实际作业的角度讨论下这些原型工具以及原型绘制本身的事情。

＃非矢量的忧伤

axure有着成熟的周边社区，所以能轻而易举的找到许多ios／android／web等对应现成模版。

遗憾的是这些模版本身大多数都是图片，这就意味着难以对模版进行简单的调整以及放大缩小，更提其他操作。

如果一名产品经理需要提高单纯静态的交互原型，那么或许使用sketch也是一种好选择。

毕竟sketch天生支持矢量的gui绘制工具，也有着sketch社区本身提供的众多模版，

在这个基础上调整模版内容（文字与色彩）进行快速拼合绘制原型，可能更快成品也更为美观。

＃原型制作——线框以外

线框图的绘制并非简单的拖拽控件，如果希望线框图本身更能接近实际的ui完成稿且可行性更强，需要制作者有对于交互以及设计的好品味和实现能力。

根据我惨痛的经验，要获得这些技能只能通过老老实实写代码学技术（动效的实现等），看文档，以及实实在在的临摹ui并且学习一部分美术知识（并且要学以致用）。

这些全都意味着实实在在的砸时间——如果你不仅仅希望了解一两个看似高明好听的名词用以谈资，而是希望切实的研究一把。

别以为总是围观现有的产品就能弥补对技术与设计的知识确是，没有这方面的知识学习持续的技能训练你甚至没有足够深入的角度去发掘那些产品的优越之处，更别提模仿和化用了。

更糟糕也更美妙的事情在于——学无止境，技术变化飞快，时间上的投入并不会随着职业生涯的推进而减少。

＃造物并非易事

交互设计原型制作除了简单制作部件拖动部件进行布局，也有不少对组件本身排列组合，布局排版的部分。

遗憾的是axure对于这方面的支持远远不够。

如果我希望制作一个部件后批量复制这个部件

——在axure内我只能进行简单的复制，但是sketch能make grid，从而很方便复制部件并且精确的排列好位置。

如果我希望复用一个部件，比如actionbar并且仅仅改变文字的内容

——axure内的模版几乎是全有全无类型，sketch的symbol提高排除文字内容在外的选项，甚至是阴影和透明度变化的支持。

值得一提的是，sketch的symbol无论是分组还是嵌套，使用起来都比axure要更为直观，axure要跳入新页面修改模版本身＝ ＝！

如果我希望整理图层进行分组管理

——axure制作可交互原型的时候，其实很容易造成各种图层分类的层叠问题（因为要大量使用动态面板），

遗憾的是，axure本身并没有提供独立的窗口让使用者快速查看当前页面全部图层使用状况，并且进行快速分组。

相比之下，sketch左边有一整个长长的面板让使用者组合排序图层上下层次，所以相较起来方便很多。

字体管理

——axure虽然可以设置组件默认字体，但是！居然没有！常用字体置顶！

我不得不感叹下，osx下原生字体渲染以及字体管理都比windows要舒服易用。

如果我希望对比两个设计

——axure用页作为单位，因此很难同时对比两个页面。

在我印象中只有sketch还有ai是使用artboard这种形式，使得在同一个屏幕内查看多个artboard对比差异相对轻松。

矢量支持

——对于面向gui以及web设计而言，矢量支持极为重要。

axure因为缺乏矢量图形绘制支持（其实也因为自身的图形绘制功能较为简单），原型中即便是简单的icon等都需要导入图像。

偏偏axure本身性能以及生成的html性能都不好，导致导入图像后性能更糟糕。

动效制作

——如果希望精细的制作某个简单的动效，请用sketch加其他工具甚至直接写代码，改现成的代码。

如果希望整体页面能连贯起来制作一个原型，那么还是使用axure导出html本身较为实际。

＃人都是看脸的——axure与sketch的界面对比

axure有着极多的功能，以及非常糟糕笨重的gui设计，其中最令人感到烦躁的就是功能极多但是缺乏分类以及整合。

真不敢相信至今还有这种类似office 03系列风格交互形式的软件（而且还是给设计师／产品经理用的！），

axure顶栏一堆小图标密密麻麻的紧密排列着，既不易于寻找与发掘功能，更也没有突出重点。

如果能采用metro风格（确切的说是office 07以及以后的设计），那么能更有效的区分各类功能，突出重点操作

也能避免相似功能如对于组件内样式的调整，分散各处的情景。

这样的设计也能根据不同功能以及情景对窗体空间进行规划与分布，从而节约空间，也提高在不同情景下的沉浸度。

axure本身既然融合了基本图形绘制和排版功能，以及动态原型制作功能，那么就有必要有针对性在软件中分隔这些操作。

否则既不利于操作者学习，也更不利于培养操作者良好的工作流。

如果你们觉得axure因为功能太多而且功能之间互相交融才不得不有如此糟糕的交互设计——请你们看看office系列（特别是2010，2013

难道功能就少吗？！，但是人家依然能好好区分排版，内容编辑，等众多功能）

＃绘制简单的原型——仅仅是工具问题？

如果产品经理需要绘制原型，那么可能线上的快速原型工具对他们而言更为方便。

但是，无论是快速原型工具，还是手绘草稿，还是axure和sketch，这些工具都有前提——也就是脑补能力。

有了良好的脑补能力，快速原型本身才能产出比较好的作品，也能发挥其快速筛选方案的能力——而不是等技术和完整设计做出来才能进行区分。

没有在设计和技术上的扎实底子，快速原型无法在脑中投射出真实情况下该方案的形态，仅仅能作为简单的布局工具。

遗憾的事，许多合作方，比如产品和销售，甚至是技术人员，他们都无法对原型进行脑补，以及还原出视觉设计稿背后的逻辑。

如果他们并不有很好的沟通能力，和主动表达意愿，那么可能视觉和交互设计需要做大量的工作才能猜到他们的本质需求。

某种程度上这就是产品经理的存在价值吧，不是制作精美的设计稿而是尽量整合统一各种需求，并且转化为实际的产品。