Silver简介：超轻量级APP原型制作软件

刘助理

官网：http://www.silverflows.com



视频：http://v.qq.com/page/p/9/g/p0173opfw9g.html

Silver是一个超轻量级应用程序，它不仅是一款Sketch3插件，还可以连通ios及mac端，使您的移动程序设计更便捷、更高效。

背景故事


2015年年初，我们开始设计开发Sliver，当时的原型开发工具已经比较多了，比如Framer，Pixate，Form，Origami，Invision，Flinto，Marvel，Proto.io和UXPin等等。它们每个工具都有自己独特的优势，但却都使我的设计过程更复杂、更难操作。有些工具着眼于让每一个页面更细腻，还有一些工具追求每一屏之间的切换与流动更加顺畅。可是这些工具之间并没有很好的整合，在它们之间进行切换使用是非常痛苦的。

基本上，作为设计师的我，在市场上还找不到任何一个单一的工具能满足我的以下需求：

我的需求很简单：

-当我设计一个应用程序时，我希望我每个页面的设计过程和用户的使用过程是一致的。用户使用应用时，每屏之间是有着像故事一般的联系的，而我却只能一页一页的分开设计。

-当我想立即在移动设备上看到我设计的应用程序试运行时，我不想导出图像、不想设置热区、不想同步，不想那么复杂。因为这样我调整任何一丁点的细节都特别费劲。

-当我的设计还是线框图时，我就想开始在设备上进行测试。因为这样可以步步为营，那里不合适立刻修改，从而节省时间与资源。 设计工作是受开发制约的，我不想在我的设计完成时，开发说做不出来，所以我们要尽早讨论原型设计。

-我想继续使用Sketch3进行设计，因为它是迄今为止最棒的界面设计工具。我需要一款可以完美配合Skech3，以及Sketch3的各种强大插件的工具。

-当整个项目到了评审、测试及升级等流程节点时，我需要一种可交互的界面原型用于在移动设备上进行展示和介绍。Framer是我之前一直在用的工具，它可以方便的让界面与界面之间产生交互，所以我希望这款工具还能完美配合Framer。

-最重要的是，我需要精简设计中的各种琐碎的事情，可以使我节省出时间去与用户交流、去做调查研究或者让更多的想法落地。

我决定自己动手开发一个完美解决我所有需求的工具，而不在抱怨市场上没有这样的软件或者抱怨现有程序的各种不好。我曾经开发过Sketch3插件，知道一点关于Sketch3的内部结构，所以用Sketch3插件的形式解决我这些需求的想法便应运而生。之后我联系了安德烈（他是我认为的插件开发的大师之一），我希望我们能合作完善这个想法并将它实现。

最终，经过一段时间的研究、设计与开发，我们赋予了Sliver很多强大的功能。以下便是这些功能以及这些功能如何使您的工作更高效。

与Sketch3配合使用

当您在Mac上安装Silver的App时，您也要同时安装Sketch3插件，插件将在后台与App通信。如下图，Silver应用程序在菜单栏，可帮助您连接到移动设备，但其它功能在Sketch3的插件中。

Image title

左侧为连接Sliver时，右侧为不连接Sliver时.

所有的展示不用导入导出、不用标注、不用添加热区就可以直接在Sketch3源稿中进行操作，超级超级的高效与便捷。（这句话是栗子君添加的）

通过WiFi或USB连接设备

当您设计移动端界面时，您非常需要在移动设备中预览您的设计稿。别找借口！！！（嗯嗯，好吧，Aby你是对的——栗子）

在IOS设备中用Sliver，您不仅可以立刻在手机上预览您的设计稿与全部界面，还可以立刻展示您的调整与修改，最重要的是还能让他们交互起来！您可以用Wifi也可以用USB（通信速度更快）连接移动设备用来展示您的设计及交互。而WiFi连接和USB连接将基于设备是否已插上电源来进行自动切换。

设计整个原型流程，而不仅仅是每一页

Sliver最强大的功能便是连接Sketch3中的一个一个画板（Artboards），使之成为可交互的流程。想要将两个图层或画板连接起来的话，只需要选中其中一个并在键盘上摁下“C”键，然后直接将连线拽到目标画板就可以了。之后这将启动一个连接生成器来进行后续操作，您可以在其中设置触发、转换方式及过渡手势等其它交互细节。

当您用Silver的IOS应用程序预览您的程序时，您将得到的是一个包含导航与页面跳转等功能的原型。这不仅让您的原型更加真实，还会使您的原型变为真正的带有ios导航功能的高保真原型。

Silver支持以下三种类型的页面跳转：

（视频1）http://v.qq.com/page/l/l/s/l0173ersmls.html

PUSH转换（Push Transitions）

（参见视频1）创建PUSH转换（Push Transitions）

PUSH转换（Push Transitions）可以使您进入更深一层级的App内容页。例如，可以从聊天列表层级点击进入详细对话层级。当您想反回上一屏时，您可以朝另一个方向滑动移动设备屏幕，或者设置一个连接上一页的返回按钮。


Modal转换（Modal Transitions）


（参见视频1）当明确需要完成一个独立任务时，可以设置Modal转换（Modal Transitions），它可以使您单独打开或关闭一个页面。例如，撰写新邮件时，在Instagram上发布一张照片时，或在Evernote的创建一个新的笔记时，都是常见的Modal转换（Modal Transitions）使用场景，您需要为Modal转换到的页面设置一个关闭按钮。Modal转换（Modal Transitions）为页面间的切换提供了更大的灵活性，有很广泛的使用场景。当然，您也可以设置一个滑动手势来关闭Modal转换（Modal Transitions）。


NO转换（No transitions）


当您想快速切换到另一个画板而不必返回的情况下，您可以设置跳转类型为无。例如，点击页面出现新的状态时和点击不同标签进行切换时（很多以标签栏为基础进行切换功能的产品和原型都是如此）。就像这样：


（参见视频1）使用NO转换（No transitions）创建基于TABS条的APP原型


触发核心的iOS功能


（视频2）http://v.qq.com/page/p/1/m/p0173wuz51m.html


Silver还允许您触发iOS的核心功能，如启动相机、浏览照片，启动系统的电子邮件或短信，拨打电话，或在默认浏览器中启动外部URL链接。这样您就不需要在原型中制作假的系统界面了。以下实例便是如何触发IOS核心功能的演示，您还可以通过将图层命名为_photo来调用系统中的图片来填充图层。

（参见视频2）创建一个浏览照片的链接，并访问和显示设备中的照片


固定Headers和Footers


（参见视频2）创建一个浏览照片的链接，并访问和显示设备中的照片在Silver中使用简单的键盘快捷键便可以固定Header和Footer。选择要固定图层，按Ctrl + Shift + H将之定义为Headers，或Ctrl + Shift + F将之定义为Footers，就是这么简单。之后固定好的Heders和Footers便不会随页面切换而消失或隐藏了。


设置可输入的文本框


（参见视频2）在Silver中创建文本输入框有时候您的原型需要允许用户输入一些文本信息。例如输入用户名和密码，或者其它常见的文本编辑页面。您可能会制作假页面进行假演示，因为在原型中创建真实的文本输入框是比较困难的。Silver便创造了一个强大的功能来解决这个问题，您只需要在Sketch3中创建一个普通的文本图层，然后经过几步简单的设置，就可以在移动设备演示中输入文本了。Silver文本输入还满足文本输入时很多常见的需求，例如设置默认文本字符（Placehoders）、在文本框内添加清除文本按键以及可选键盘类型等。


嵌入WebViews


（参见视频2）嵌入网页内容或Framer内容Silver也可以将矩形形状图层转换为实时Web视图。这样的功能是非常实用的，例如当您想添加或修改已经写好HTML页面的应用程序时。Web视图也可以连接本地Framer原型。在您统一的应用程序的背景下，这允许您的页面与Framer页面连接互动。我们也在Framer中开发了相应的接口，以使其更容易直接从Framer代码中调用这个Silver的功能。


公测版


以上便是截至目前为止本次内测版的主要功能，很多界面还并不完善，我们还制定了需要在今年年底前完成的计划，这些计划将在稍晚发布。最近几个星期，我们便将会邀请部分设计师及开发人员加入我们的公开测试。如果您有兴趣，可以在silverflows.com进行注册与申请。如果您有任何疑问，建议或只是想展示您的支持，请点一下赞吧，或来Twitter上找我们@silver_flows。期待着在您自己的设计工作中使用Silver！


作者：Aby Nimbalkar

原文地址：https://medium.com/swlh/introduc ... ixn3f41Silver_flows

转自：http://www.ui.cn/detail/79778.html

翻译：栗子老师（请大家多多指正）

powersoft

大家好，从事软件行业很多年，期望能与大家合作开发