这是一个能让UI设计师在Mac与iOS之间，流畅进行设计扩充元件传输，进而面向手机端UI流畅开展原型设计的东西。有一位叫–Aby的，在一篇发表的文章里，介绍了他正在做的一款原型工具。和其他所有原型工具不一样的是，这款工具是一个扩充元件！

以下以第一人称编译。

以下是改写后的句子：这是一款应用程序，它结合了iOS app，它结合了Mac app，它能让手机设计变得更顺畅。

背景故事

在今年年初刚开始启动这个Side - 时，我查看了好些设计工具，有Form，还有Proto.io以及UXPin。这些工具各自有着独特优点，然而却都给我的设计造成了零散且繁重的额外工作。这里面有些工具能够设计出精细的交互效果，另外一些则适宜用来做使用流程演示的原型。

可是，这些工具相互之间压根不存在兼容情况sketch只能在mac上用吗，我于设计期间只得困苦地在它们之间来回转换。总而言之，我着实寻觅不到能够契合我全部需求的一整套软件。

然而我要的需求其实很简单：

1. 于设计一款 app 之际，于开始设计之时要做一个使用者流程图，虽然我每次仅设计单一个画面内容，然而有着多工画面的使用者流程图意味着完整用户使用故事线，所以我不愿偏离设计方向。

2.我期望把引导图片的步骤省略掉，同时也想省略同步文件的步骤，还有画热点的步骤（这可是我最为讨厌去做的），原因便是如此做会使得我的原型在操作上手方面能够更为简便 。

首先，我打算以低保真度的形式来开展我的应用设计工作，进而着手进行测试。然后，当我从相应测试结果里知悉某些内容，并且借助设计将其呈现出来之际，我必须同步提升设计稿的保真度 ，与此同时无需去更换设计工具。

4.对于设计，我期望径直知晓工程师于最终开发之际会碰到的各类限制，以此保证我们不会在一种达成起来极度艰难的设计效果方面耗用过多精力。

5.我打算持续于其中开展设计工作，鉴于它乃是直至当前阶段，最为契合用以开展平面界面设计的工具。我期望获取一个能够与之整合起来的工具，缘由在于如此一来我能够一并运用到全部好用的扩充套件以及功能。

若整体使用流程得以确定，经过测试且 通过检测，我便需在单个页面完成交互细节原型的制作，此为我个人挺喜爱的工具，其为此能在单个页面的原型上增添交互细节的工具，故而我理想中的原型工具理应能与之完美衔接在一起。

7.最为关键的是，我得削减于设计流程里既繁重又琐碎的工作，借此我能够省下时间去跟使用者交流，开展用户研究，亦或是制作更多用于测试的交互原型。

和抱怨世上缺个能解决我全部问题的超厉害 app 相比，自己动手做一个这样的 app 反而更好。我做过扩充元件，还了解一些其内部细节构造，所以基于扩充元件的解决方案一下子就吸引了我。后来我说服了一位我认识的、扩充元件开发领域的大师，让他加入我的团队，把想法推进到新的阶段。以下是我们完成开发后，它目前所能实现的功能，以及你怎样借助它来加快你的设计流程：

与的整合

在一台Mac上进行安装时，会同时获致对安装扩充元件的请求，该元件用以在后台跟Mac的app相连，app自身停留在menu上，协助你连接行动装置，所有其余功能皆以元件的形式放置于其上 。

把视觉稿转变成原型的全部后台逻辑，都会同步留存于你的文件当中。我们的目的乃是去除全部导入导出，同步文件以及处于工具间切换的那些步骤。

透过WiFi或USB连接装置

倘若你正针对一款手机 app 开展设计工作，那便务必在自己的手机上对界面予以预览操作，不存在能够逃避的 ！

当你于你的iOS装置内安装了预览app时，便可将修改过的设计稿从画板同步至手机里进行查看，或者于扩充元件中预览app的使用流程。借助WiFi连接装置的功能提升了设计师在办公室环境下分享原型的便利性，同时还允许通过USB连接app来加快原型同步至设备的速度。依据设备是否接上USB，会在USB和WiFi间自动实现切换。

不只界面跳转，设计元素也跟着跳转

在中将图层跟画板连接起来，以此去生成使用流程的原型（Flows），这是我们尤为偏爱的一项功能。若想建立连接，用户能够选中图层，接着按下键盘上的「C」键。如此可启动一个「界面生成样式」的线型连接器，之后能把它放置于目标画板上。之后你能够挑选触发跳转的手势sketch只能在mac上用吗，以及别的过渡动画细节所在。当你完成流程原型制作并于iOS app里预览时，你将会见到一个真切的iOS界面导航，同时伴有逼真的页面过渡效果 。这并非只是使得你的原型呈现出更真切的模样，并且还借助了iOS的导航结构所具备的优势。

支持三种形式的过度效果：

推移转场（Push ）

应用下一层级，该在用户进入之际，使用推移转场 。比如，聊天应用里，从一组对话之列表进至单独对话页。若想返回上一页，可于页面左端滑动，或者设返回图层，以行返回操作 。

示例转场（Modal ）

（此处有视频，请在微信公众号查看）

无转场（No ）

要是你期望立马从现有的画板切换至另外一个画板，那你能够把过渡类别设定成「无（None）」，如此一来，在转换之际会用你所连接的画板马上替换当前画板，倘若你期望用户瞧见当前界面的各异状态，或许你会想要用到这个转场，而且你也能够运用这个转场去打造基于标签栏（Tab-bar）的应用，并且在切换Tab的时刻将其设置为「None」，就如同下面这个视频的情形那般 。

启动iOS内置核心功能

除去制作运用流程图，与此同时可使你生成启动iOS内置核心功能的连接，这些功能涵盖打开相机，浏览照片，打开系统邮件，打开短信编辑器，拨打电话，或者使用预设浏览器打开一个外部链接 。

在你的原型里，你无需再去制作一个假的静态界面用以模拟这些功能。有一个案例，它展示了怎样生成一个连接，并让使用者于他们的iOS装置当中浏览照片。你还能够通过把一个图层命名为「」，从而用使用者选中的照片去填充它。

固定页首、页尾

采用一个简易的键盘快捷键，可使你针对界面设定固定的页首以及页尾。挑选你打算固定的图层，按下「Ctrl + Shift + H」将其固定成页首，按下「Ctrl + Shift+ F」把它固定为页尾，如此便完成了。所有涉及尺寸（Size）和定位（）的设置你都能够在之后进行操作，并且同时的更动都会于预览里自动更新。

（此处有视频，请在微信公众号查看）

现实输入范围

有的时候，你是需要去设计一个使用流程的，这个使用流程，是需要使用者去输入一些内容的。或许它是一个简单的，带有用户名以及密码的登陆框，又或者，是一个有着更多输入框的个人资料编辑页。你有可能会倾向于去伪装这个行为，毕竟在原型里制作一个真实的输入框，这可是个痛苦的过程。然而，这些如今都已经不再是问题。有了这样的方法，你能够在其中建立起一个普通的文本图层，接着，通过少数几步很简单的设置，就能在预览的时候把它转变成真实的输入框。这些输入框，同时还为我们带来了iOS里「 」对象的一些功能。

嵌入式网页预览

也能够把方形的图层转变为网页预览，要是你已然在HTML里做出了一些应用功能，打算添加到已有的内容当中，这会极为有用。网页视图的功能同样兼容指向原型的连接。这使得你能够把在其中做的多页面的交互原型，添加到已有的应用原型里，进而拓展现有原型的内容。一个专门针对制作的模块也正在开发中，能让设计师更简便地在代码里直接调用相关的功能。

（数据源：，；本文作者：Aby ；图片来源：，CC ）

原创编译丨茂趣创意

如有侵权请联系删除！