最近在外网搜集各种动态原型工具时，无意间发现一位 Desigrammer（会Coding的设计师，IT界暗影牧师） Aby Nimbalkar发表在Medium 上的一篇Blog, 介绍了他在做的一款原型工具。与所有其他的原型工具不同的是....这款工具是一个Sketch 插件！看完他的文章，笔者难奈激动的心情联系了开发者，征得其同意后翻译了其博文并与各位分享。

特别值得一提的是，Aby在借宣传他家工具的同时，也说了很多设计师想说却说不出口的话，比如做原型途中各种切换工具的烦恼，设计效果不知道是否能实现等等。看过上面那段简单的产品介绍VCR，常用sketch的同学应该会发现界面是如此地熟悉。

--------------------------------以下为翻译译文及原文对照----------------------------------

Silver 简介：基于Sketch3 的轻量手机UI原型工具

Introducing Silver : Lightweight Mobile Prototyping in Sketch 3

Silver是一个可以流畅地在Mac和IOS平台间传输设计稿的Sketch插件，能让设计师面向手机端UI流畅地开展设计。

Silver is a combination of an iOS app, a Mac app, and a Sketch Plugin that seamlessly communicate with each other to make your mobile design process as smooth as possible.

背景故事

Back Story

我曾经尝试寻找理想的原型工具，却没有得到一个明确的答案，于是在2015年初，我开始在Silver做一些小项目。在搜集过程中我发现了一些绝佳的原型工具，包括像Framer, Pixate, Form, Origami, Invision, Flinto, Marvel, Proto.io 和 UXPin. 每个这样的工具都有他们自己独特的优势，但他们都给我的设计带来了零散而繁重的额外工作。这里其中的一些工具可以设计精细的交互效果，另一些则适合做使用流程（workflow）演示的原型。然而，这些工具之间完全没有连通，我在设计中不得不痛苦地在他们之间转换。总结来说，我真的无法找到能满足我所有需求的一款软件。

I started working on Silver as a side-project in early 2015, when my hunt for the perfect prototyping tool yielded mixed results. During my search I discovered some brilliant tools, including Framer, Pixate, Form, Origami, Invision, Flinto, Marvel, Proto.io, and UXPin. Each of these tools had their own unique benefits, but they all added more chores to my design process. While some were geared towards designing micro-interactions, others were great for flow-based prototypes. And with absolutely no integration between these tools, it was painful to switch between them at every step of the process.Basically, I was unable to find just one single app that fit all my needs.

然而我的需求很简单：

And my needs were simple :

• 在设计一款应用的时候，我需要在开始设计时做一个用户流程图。虽然我每次只设计单个屏幕的内容，但有着多个页面的用户流程图代表了完整的用户使用故事线，我不想偏离设计方向。
• 我想要省略掉导图片、同步文件、或画热区（我讨厌画热区）的步骤，便能立即在手机上看到应用长什么样，页面给人的感觉，以及页面间如何跳转。实现原型的过程越轻松，投入得越少，我也越没那么依恋它。当我意识到这是错误的尝试时，我也能更释然地放弃这个设计效果。
• 我想要先用低保真的方式来设计我的应用并开始测试。当我从测试结果中学到一些东西，并通过设计表达出来的时候，我需要同步提高设计稿的保真度（fidelity），同时不需要更换设计工具。
• When designing an app, I need to start prototyping a user-flow from the get-go. Although I’m designing one screen at a time, the flow is the complete story, and I don’t want to lose track of it.
• I need to instantly see how the app will look, feel and flow on a mobile device, without having to export images, sync files, or draw hotspots (I hate drawing hotspots). The easier it is to make a prototype, the less attached I am to it, making it that much easier to discard if I realize it isn’t the best approach.
• I need to first design my app at low fidelity and start testing it. As I learn from these tests and iterate on the design, I want to simultaneously bump up the fidelity at every step, without having to switch tools.

• 我想要在设计中能直面工程师在最终开发时会遇到的各种限制，确保我们不会耗费过多精力在一个实现起来无比困难的设计效果上。
• 我想继续在Sketch里面设计，因为它是到目前为止，最适合用来设计平面界面的工具。我想要一个能和Sketch整合在一起的工具，因为这样我可以同时用到所有Sketch好用的插件和功能。
• 一旦整体的使用流程被确定，测试，并被通过（译者：国内的Boss测），我需要在单个页面完成交互细节原型的制作。 Framer （译者：Framer.js, 一款需要写轻量代码，能实现复杂交互动效的原型工具）是我个人最喜欢的，能在单个页面的原型上增加交互细节的工具。所以我理想中的原型工具应该能和Framer完美的结合在一起。
• 最重要的是，我需要减少在设计流程中繁重而琐碎的工作，从而我可以节省下时间来与客户沟通，做用户研究，或者做更多用于测试的交互原型。
• I need to work within the constraints faced by developers who will eventually build the app, so that we don’t end up with a design that is outrageously difficult to build.
• I want to continue designing in Sketch because it is, by far, the best tool for designing interfaces. I need a tool that will integrate well with Sketch, taking advantage of all the great plugins and features that come with it.
• Once the overall flow is defined, tested, and approved, I need to prototype micro interactions at a screen level.Framer is my personal favorite tool for adding screen level interactivity in a prototype, so the ideal tool would integrate well with Framer
• Most importantly, I need to reduce the mundane chores that have infiltrated my design process, so I can instead spend that time talking to customers, doing research, or simply prototyping more options to test.

与其抱怨世界上缺少一个可以解决我所有问题的杀手级应用（译者：原文为silver bullet，具有魔力的银色子弹，也是Silverflows的名称来源），不如自己开始做一个这样的应用。我曾经做过sketch的插件，也已经知道一些Sketch的内部构件，所以一个基于插件的解决方案立刻吸引了我。之后我说服Andrey - 我认识的sketch插件开发领域界的大师 - 加入到我的团队，来把想法推动到新的阶段。以下是我们完成开发Silver后，它目前能做到的功能，以及你如何能通过它来加速你的设计流程：

Rather than complain about the lack of this silver-bullet app, which would magically solve all my problems, I started building it myself. I was already making plugins and knew a bit about the internals of Sketch, so a plugin-based solution immediately appealed to me. I then teamed up with Andrey, who I consider to be one of the gurus of plugin development, to help take the idea to the next level.Here are some of the capabilities of Silver that we ended up building, and how you might use them to speed up your design process :

和sketch的整合

Integration with Sketch

当你在一台Mac电脑上安装Silver的时候，会同时收到安装sketch插件的请求。这个插件用于在后台连接Mac应用。Silver的应用本体则停驻在菜单栏上，帮助你连接移动设备。所有其他的功能则以组件的形式放在Sketch上面。将视觉稿转化为原型的所有后台逻辑都会同步保存在你的Sketch文件内。我们的目标是去掉所有导入导出，同步文件以及在工具间切换的步骤。

When you install Silver on a Mac, you will also be asked to install the companion Sketch Plugin which communicates with the Mac app behind-the-scenes. The Silver app itself lives in the menu bar, and helps you connect to mobile devices, but all other functionality is built right on top of Sketch and is facilitated by the plugin.All the logic that converts your design into a prototype lives within your Sketch document. Our goal was to eliminate the process of importing, exporting, syncing, and switching between tools.

通过wifi或者USB连接设备

Connect Devices via WiFi or USB

如果你在为一个手机应用做设计，你一定要在你的手机上预览你的界面，没有借口回避！当你在你的IOS设备里安装了Silver的预览应用，你可以将修改过的设计稿从画板同步到手机里查看，或者在Sketch插件中预览应用的使用流程。通过Wifi连接设备的功能增加了设计师在办公室环境下分享原型的便捷性，同时Silver也允许通过USB连接应用来加快原型同步到设备的速度。基于设备是否接入USB，Sliver会在USB和WIFI间自动地切换。

If you’re designing a mobile app, you must preview your designs on a mobile device while you design the interface. No excuses!With the Silver Preview app installed on your iOS device, you can either stream changes made to the current Artboard from Sketch, or preview entire Flows created using the Silver Sketch Plugin.Connecting devices via WiFi gives you the flexibility to show your prototypes around the office, but Silver also lets you connect devices via USB, which greatly improves mirroring speed. Silver automatically switches between USB and WiFi based on whether a device is plugged in.

界面跳转，设计的元素也在跳转

Design Flows, Not Just Screens

我们最喜欢Silver的一个功能，是它可以直接在sketch中将图层与画板链接起来，生成使用流程的原型（Flows）。想要建立链接，用户可以选中图层，然后按下键盘上的“C”键。这会触发一个 “界面生成样式”的线型连接器（译者：与QC和Form等节点类工具相似），然后可以将它放置在目标画板上。 随后你可以选择触发跳转的手势，以及其他的过渡动画细节。当你用Silver做完了流程原型并在IOS 应用中预览，你会看到一个真实的IOS界面导航，同时有着逼真的页面过渡效果。这不仅仅让你的原型看起来更真实，同时也利用到了IOS的导航结构的优势。

One of our favorite features of Silver is the ability to link Layers with Artboards to create Flows, directly within Sketch. To create a Link, select a layer and type the ‘C’ key on the keyboard. This launches an Interface-Builder-style noodle connector which can be dropped onto the destination Artboard. You can then select the gesture that triggers the transition and other details specific to the transition type.When you create a Flow using Silver and preview it in the iOS app, what you get is an actual iOS navigation stack with real transitions. Not only does this make your prototype feel more realistic, it also helps you use the iOS navigation structure to your advantage.

Silver支持三种形式的过渡效果（Segues）：

Silver supports three types of transition segues :

推移转场

Push Transitions

你会在用户进入到应用下一层级的时候使用推移转场。举例来说，在一个聊天应用中，从一组对话列表中进入到一个单独的对话页。想要返回到上一页，你可以从页面左端滑动，或设置一个返回图层来执行返回操作。

You would use a Push transition for navigating to the next hierarchical level of your app’s content. For example, going from a list of chat conversations to a single conversation in a messages app. To go back to the previous screen you can either swipe from the left edge of the screen, or set up a layer with a Link Back behavior.

【推移视频】

（UI中国无法插入视频，请点击图片打开腾讯视频观看）

http://v.qq.com/page/l/s/o/l0175l6ebso.html

模态转场

Modal Transitions

模态转场用于启动一个基于当前页面的任务。这个任务需要被完成，或者被用户明确放弃。 比方说，写一封新邮件，在Instagram上发一张新照片，在印象笔记中建立一个新笔记，这些都是基于当前页面任务的例子 - 任务必须在一步或者多个步骤中完成，或者被一起取消。想要退出一个模态任务，你需要创建一个图层并赋予关闭模态的动作。

A Modal transition is used to begin a self-contained task that must either be completed or explicitly abandoned by your users. Composing a new email, posting a new photo on Instagram, creating a new note in Evernote, are all examples of self-contained tasks that must be completed in one or more hierarchical steps, or must be cancelled altogether. To cancel a modal task, you must create a layer with a Dismiss Modal behavior.

【模态转场视频】

http://v.qq.com/page/w/z/j/w01756qrazj.html

模态转场为目标画板的动态进出提供了更多的灵活性。你也可以设置一个能通过滑动交互手势来退出的模态转场。

Modal Transitions provide more flexibility in terms of animating the destination Artboard in and out. You can also set up a Modal Transition to be dismissed interactively with a swipe gesture.

【模态转场视频2】

http://v.qq.com/page/b/j/j/b0175pvthjj.html

无转场

No Transitions

当你希望立即从当前画板切换到另一个画板，你可以设置过渡类别为“无（None）”。这将会在转换时用你连接的画板立即替换当前画板。当你希望用户看到当前界面的不同状态时，你可能会想用到这个转场。你也可以使用这个转场来做基于标签栏（Tab-bar）的应用，并在切换Tab的时候将其设置为 “None”，就像下面这个视频那样

In cases where you wish to instantly switch to another Artboard, you can achieve that by setting Transition type to None. This will instantly replace the current Artboard with the one you link to. You might use this in cases where you wish to show the current Artboard in a different state. You could also use this setting to prototype a Tab-bar based app, and set transition to None when switching between different tabs, like this:

【无转场视频】

http://v.qq.com/page/l/w/5/l0175z401w5.html

触发 IOS 内核功能

Trigger Core iOS Functionality

除了制作使用流程，Sliver同时能让你生成能触发IOS内核功能的链接。这些功能包括打开相机，浏览照片，打开系统邮件，打开短信编辑器，拨出电话，或者用默认浏览器打开一个外部链接。你在也不需要在你的原型中去制作一个假的静态界面来模拟这些功能。这里有一个案例，演示如何生成一个链接，让用户在他们IOS设备中浏览照片。你也可以通过将一个图层命名为 “_photo” 来将用户选中的照片去填充它。

Trigger Core iOS FunctionalityIn addition to creating flows, Silver also lets you create Link layers that trigger core iOS functionality such as launching the Camera, browsing Photos, launching the system Email or SMS composers, making a phone call, or launching an external URL in the default browser. You no longer need to create fake static screens to emulate such functionality in your prototypes.Here’s an example that shows how to create Links that allow users to browse photos on their iOS devices. You can also use the selected photo to fill a layer, by naming it _photo.

【触发IOS内核视频】

http://v.qq.com/page/q/c/2/q0175yd6ac2.html

固定的头部和尾部

Fixed Headers and Footers

通过一个简单的键盘快捷键，Silver 能让你为界面设置固定的头部（Header）和尾部(Footer)。选择你要固定的图层，按下 “Ctrl + Shift + H” 来固定为头部，“Ctrl + Shift + F” 来固定为尾部，就完成了。所有关于尺寸（Size）和定位（Position）的设置你都可以之后操作，同时改动都会在预览中自动更新。

Silver lets you create fixed Headers and Footers with a mere keyboard shortcut. Select the layers you want to keep fixed, hit Ctrl+Shift+H for Headers or Ctrl+Shift+F for Footers, and you’re done. Any changes made to the size and position of these layers thereafter, will update the preview automatically.

【固定头部和尾部视频】

http://v.qq.com/page/s/t/j/s01754xm2tj.html

真实的输入框

Live Input Fields

有时候你需要设计一个需要用户输入一些内容的使用流程。也许是一个简单的有用户名和密码的登陆框，或者一个有着更多输入框的个人资料编辑页。你可能倾向于伪装这个行为，考虑到在原型中制作一个真实的输入框是一个痛苦的过程。然而，这些都不再是问题了。有了Silver, 你可以在Sketch中建立一个普通的文本图层，然后通过几步简单的设置将它在预览中转为真实输入框。这些输入框同时为我们带来 Ios里“UITextField” 对象（译者：Xcode开发中输入域的对象类别）的一些功能，比方说设置占位符，显示一个清晰的“X”在输入框中作为清空按钮，选择键盘类别等等等等，所有这些功能对设计师而言都能轻松用上。

Sometimes you need to prototype a Flow that requires users to enter some information. Perhaps it’s a simple Login screen with Username and Password fields, or an Edit Profile screen that contains more text fields. You may tend to fake this behavior, since creating an actual input field in a prototype is quite a painful process.Well, not anymore. With Silver, you can make a regular Text Layer in Sketch convert to a live input field during preview, just by editing a few settings. Live input fields bring some of the functionality of UITextField objects, such as setting placeholders, showing a clear (x) button within the textfield, selecting a keyboard type, etc., within your reach as a designer.

【真实输入框视频】

http://v.qq.com/page/x/n/v/x0175z73qnv.html

嵌入式的网页视图

Embed WebViews

Silver也可以将方形的图层转换为网页视图。如果你已经将一些应用功能在HTML中做出来，想要加到已有的内容中，这将会非常有用。网页视图的功能也兼容指向本地Framer原型的链接。这让你可以把在Framer里做的多页面的交互原型，加入到已有的应用原型中来，从而拓展现有原型的内容。一个专门为Framer制作的模块也已经在开发中，能让设计师能更简单地在Framer代码中直接调用Silver相关的功能。

Silver can also convert rectangle shape layers into live Web Views. This might come in handy when you have some functionality of your app already built in HTML, and you want to add new designs in an existing context.Web Views can also contain links to local Framer prototypes. This allows you mix screen-level interactions built in Framer, with the broader context of your app. A module for Framer is also in the works, to make it easier to call Silver-specific functionality directly from your Framer code.

【嵌入式网页视图功能】

http://v.qq.com/page/v/z/a/v0175b1frza.html

公测版本

Public Beta

这些是在内测版本中我们已经测试的功能，而且只是一些简单的皮毛（Scratching the surface）。有更多计划中的功能会在今年最终的发布中放出。我们将邀请一定数量的设计师和工程师，在接下来的几周里参与我们公测版本的测试。如果你有兴趣，请在我们silverflows.com的网站上注册。如果你有任何的问题，建议，或者只是要表达你对我们的支持，请在Twitter上找到我们@silver_flows. 如果你希望尽快在你的原型设计中用到Silver，记住按一下下面小小的绿色 ♥按钮支持我们！

These are the features included in the private beta that we’ve been testing so far, and this is just scratching the surface. There is a lot more planned for the final release later this year.We will be inviting a limited number of designers/developers to join our public beta, which will begin in a couple of weeks. If you’re interested, please sign up on silverflows.com.If you have questions, suggestions, or just want to show your support, please add a response here or find us on Twitter @silver_flows.Remember to hit the little green ♥ below, if you’re looking forward to using Silver in your own workflow!

-----------------------------------------强行介入的分割线-------------------------------------------

目前该工具即将进入公测阶段，阿伦已经第一时间登记了公测。如果这个工具能最终实现，将极大地帮助交互设计师们高效地设计可用于测试的动态原型。如果你也想加入公测的行列，一起研究这个诚意满满的新晋原型工具，请点下面官网的地址，留下邮箱信息吧！

Silverflows官方网站：http://silverflows.com/

视频教程专辑：http://v.qq.com/vplus/cca008a964ac04eba0b6c87bb849e22c/foldervideos/qgx000001izy5uf

Aby的原文地址：https://medium.com/swlh/introducing-silver-lightweight-mobile-prototyping-in-sketch-3-cee46d267f1f#.ovzgtrf30

另，笔者最近在研究快速原型和动效的实现，目前手头在用Principle和AE实现动效目标是找到能快速实现简单页面间转场动效，但也可以精雕细琢设计精美动效的工具。而SilverFlows与Framer的整合则完美地实现了这一点。不得不说，在面向移动端设计的交互原型工具领域，还没有一家巨头的出现，尚属于空白区域。（Axure毕竟是最早期windows时代面向Web端而开发出来的设计工具），各位小伙伴们一起期待一个集大成者的出现吧！

如果小伙伴们有其他好用的原型工具或者经验分享，也欢迎多多交流 = )

阿伦 - 交互设计师一枚

Email: 294108706@qq.com

qq: 294108706

-----------------------------------------2016.03.21 的分割线-------------------------------------------

最新消息：

目前 Silverflow 已被大名鼎鼎的 Invision 旗下的 Craft 组件合集收购，将作为系列组件中的一部分出现。

SilverFlow官方通告（英文）：https://medium.com/@abynim/silver-flows-joins-invision-faa3dd1fc250#.o3ovnwbbz

Craft官网（含介绍视频）：http://labs.invisionapp.com/craft?utm_campaign=craft-social&utm_content=29792124&utm_medium=social&utm_source=twitter#content

一起期待吧 =）

阿伦

2016.03.21 更新