【译文】Silver：一款搭配Sketch3的轻量移动原型工具
【译者注】作为一款设计工具，Sketch只用了1年多时间，就迅速风靡于移动设计师之间，无论是我所在的团队和公司，还是国内外各大设计组织，都对其推崇不已，“设计流是否支持Sketch”也成为移动原型工具的重要竞争力。本文是Silver移动原型工具作者在Medium上的SWLH（Startups,Wanderlust, and Life Hacking）话题下写的一篇介绍文章，从各个方面介绍了这款原型工具的优势和特色，相信对各位移动设计师有一定的吸引力。
Silver是一款便捷进行移动设计流程的工具，它包含：一个iOS应用、一个Mac应用和一个Sketch插件，三者之间无缝衔接，完美配合。
背景
2015年初，为了找到完美的原型工具，我将Silver作为一个兼职项目进行研究，研究中发现了一些很棒的工具，包括：Framer, Pixate, Form, Origami, Invision, Flinto, Marvel, Proto.io和 UXPin。每一项工具都独具特色，同时也为我的设计流程添加了不少麻烦。这些工具部分适合微交互设计，部分适合流程类原型设计。当然，在完全没有整合它们之前，在设计流程中的每一步进行工具的切换非常痛苦。
可以说，我无法找到一款完全满足所有需求的工具。
我的需求其实不麻烦：
-开始设计移动应用之前，先进行用户流原型设计。尽管每次只能设计一个页面，但完整的故事需要一个页面流，我不想对设计失去全局控制。
-能在移动设备上实时预览、感受和体验自己设计的应用，而不是导出图片、同步文件或者绘制热点。原型的制作越简单越好，否则我会立即放弃使用。
-先进行低保真设计并进行测试，从测试结果中不断迭代优化设计，在不切换工具的情况下逐步增加原型的保真度。 -能展现应用开发时面临的真实技术限制，避免设计出无法落地实现的应用。 -作为目前界面设计的最佳工具，我希望可以在Sketch中完成设计，该原型工具能与Sketch深度整合并支持其相关插件。 -一旦完整流程确定后，我可以基于页面制作微交互。Framer是我个人最喜欢的页面级别交互的原型工具，因此该工具最好能够与Framer兼容。
-最关键的地方在于减少设计流程中不需要的琐事，这样我才能将精力花在与客户沟通、进行深度研究或是设计多套方案供测试等方面。
与其抱怨缺少这么一款能满足我所有需求的杀手级原型工具，还不如自己动手。我具备Sketch插件的制作经验，对其内部原理也有所了解，因此立即选定了基于插件的解决方案。我立马召集了自己心中最牛的插件开发者Andrey跟我一起进行尝试。
以下是我俩搞定的Silver基本功能，以及它们如何帮你提升设计效率的建议：
与Sketch深度整合
将Silver应用安装到Mac上之后，你还需要安装一个Sketch插件，用来在后台与之配合。Silver应用出现在菜单栏上，用作与移动设备连接，其它所有功能都融合在Sketch及插件之中。
Silver菜单栏应用，连接与断开状态。
Silver的内置逻辑能帮你把设计转换为Sketch文档中的原型，我们的目标是消除导入、导出、同步以及切换工具等设计流程中的琐事。
通过WiFi或者USB连接设备
如果你正在设计移动应用，务必注意，必须在移动设备上去预览界面的最终效果！
借助iOS设备安装的Silver预览应用，你不仅可以实时关注Sketch中艺术板（Artboard）的微小修改，而且可以预览使用Silver Sketch插件创建的设计流程。
通过WiFi连接的设备能够让你随意在办公室展示你的原型，除此之外，Silver还可以通过USB连接的方式做到这点，而且镜像展示更迅速，它能够根据设备是否插上自动判定使用USB或者WiFi。
设计工作流而不只是页面
Silver有一项颇受喜爱的特性，它支持Sketch内通过连接艺术板上的图层形成工作流。选择一个图层并敲击键盘上的C就能创造一个连接，同时这样也生成了一个Interface-Builder（Mac OS X下用于设计和测试UI界面的应用）风格的端点连接器，它可以通过拖拽连接到目标艺术板，选择触发转场及具体转场类型的手势。
当你用Silver创建了一个工作流并且在iOS应用上进行预览，你能体验到一个拥有真实转场的iOS页面集合。这不仅让你的原型更加真实，而且帮助你更好的利用iOS导航结构进行组织。
Silver支持三种类型的转场顺序：
1、推移转场
【视频】创建推移转场
https://vimeo.com/145123175
你能使用推移转场来导航到应用内容的下一层级。比如说，聊天应用里从对话列表到对话详情。屏幕左侧边缘右划能够回到上一个界面，也能通过建立一个负责回退行为的图层来实现。
2、模态转场
【视频】合并推移与模态转场
https://vimeo.com/145229320
模态转场用于启动一个独立的要么完成要么明确放弃的任务。撰写新邮件、Instagram上发一张照片、印象笔记里创建一条新笔记，都属于必须在一步或多步必须完成（或者取消）的独立任务。取消一个模态任务，你必须创建一个包含Dismiss Modal行为的图层。
模态转场提供了目标艺术板出入的灵活动画形式，你可以创建一个使用划动手势来进行交互的模态转场。
【视频】使用模态转场创建滑出导航
https://vimeo.com/145230740
3、无转场
假如你偏爱频繁的切换到其它艺术板，可以通过将转场模式设为None来实现。它将即刻以你连接的艺术板取代当前的艺术板。你不但可以用这种方法来展示当前艺术板的不同状态，也可以用来创建一个基于底部标签栏的应用原型，切换标签时不需要任何转场过渡，如下所示：
【视频】使用无转场的艺术板连接创建底部标签应用
https://vimeo.com/145241088
触发核心iOS功能
除了创建设计流，Silver还能创建连接图层来触发：启动摄像头、浏览照片、启动系统邮件、编辑短信、拨打电话或者在默认浏览器中打开一个外部URL地址等核心iOS功能。你不必再通过仿制静态屏幕在原型中来模拟这些功能。
下面我们举个例子，看看如何创建连接来允许用户在他们的iOS设备上浏览照片。将选中的照片填充到一个图层，命名为_Photo。
【视频】创建连接用以浏览照片并显示选中照片
https://vimeo.com/145242395
固定的页眉和页脚
【视频】用Silver创建页眉与页脚
https://vimeo.com/144324822
Silver支持通过键盘快捷键创建固定的页眉和页脚，选中要固定的图层，点击Ctrl+Shift+H来固定页眉，点击Ctrl+Shift+F来固定页脚，就这么简单。与该图层的尺寸和位置的有关变化，都会在预览中自动更新。
实时输入框
【视频】用Silver创建输入框
https://vimeo.com/144331683
有时我们要制作一个需要用户输入信息的原型，比如说简单包含用户名和密码输入的登录页面，或是包含诸多信息输入框的个人资料编辑页面。按照以往的做法，大家可能会制作一个伪造的原型，因为再原型中模拟真实输入框的过程太麻烦。
Silver出手，原型我有。只需要简单设置一下，你可以在Silver中轻松创建常规的文本图层以便在原型中真实模拟文字输入框。实时输入框引入了UITextField对象的一些功能，比如设置占位符、在输入框中显示清除按钮、选择输入键盘类型等，凡是设计需要考虑的状态都应有尽有。
嵌入WebView
【视频】嵌入网页内容及Framer原型
https://vimeo.com/145226520
Silver还能将矩形图层转换成实时WebView，这对于使用HTML构建的应用功能迟早有用，而且在已有内容里添加新设计会更方便。
WebView还支持连接到本地Framer原型，这样你能够将页面级别的交互引入到Framer中，它们与应用的其它内容融合的更棒。Framer中的一个组件依旧可以正常工作，能够直接从Framer代码中调用Silver对应的具体功能。
关于公测
以上都是Silver内测版的功能，仅展示了一些皮毛，年底我们会为最终版提供更强大的功能。
几周之后，我们将限量邀请部分设计师/开发者加入公测，如果你有兴趣，请到silverflows.com注册登记。
有问题或建议，或者想援助我们，请在我们的Twitter账号@silver_flows留言。
想在自己的设计流中用上Silver，记得给我们点赞。
原文地址： https://medium.com/swlh/introducing-silver-lightweight-mobile-prototyping-in-sketch-3-cee46d267f1f#.6ba30fxta
译者：
阿里巴巴/1688事业部/无线交互 舒舟
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
