| 订阅 | 在线投稿
分享
 
 
当前位置: 王朝网络 >> 学院 >> 一款搭配SKETCH的轻量移动原型工具
 

一款搭配SKETCH的轻量移动原型工具

2016-08-30 06:46:05 编辑來源:互联网 繁體版 评论
 
 
  对原型工具都不满意?自己动手做一个!本文是Silver的开发者在Medium上写的一篇介绍文章,从各个方面介绍了这款原型工具的优势和特色(与Sketch深度整合、超方便预览、转场效果丰富原型逼真等等),同为设计师,他开发的产品更贴近我们的日常需求,非常值得体验。
  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注册登记。
 
 
 
上一篇《2016年日历怎么制作》
下一篇《十二月设计圈干货素材大合集》
 
 
 
 
 
 
 
日版宠物情人插曲《Winding Road》歌词

日版宠物情人2017的插曲,很带节奏感,日语的,女生唱的。 最后听见是在第8集的时候女主手割伤了,然后男主用嘴帮她吸了一下,插曲就出来了。 歌手:Def...

兄弟共妻,我成了他们夜里的美食

老钟家的两个儿子很特别,就是跟其他的人不太一样,魔一般的执着。兄弟俩都到了要结婚的年龄了,不管自家老爹怎么磨破嘴皮子,兄弟俩说不娶就不娶,老父母为兄弟两操碎了心...

如何磨出破洞牛仔裤?牛仔裤怎么剪破洞?

把牛仔裤磨出有线的破洞 1、具体工具就是磨脚石,下面垫一个硬物,然后用磨脚石一直磨一直磨,到把那块磨薄了,用手撕开就好了。出来的洞啊很自然的。需要猫须的话调几...

我就是扫描下图得到了敬业福和爱国福

先来看下敬业福和爱国福 今年春节,支付宝再次推出了“五福红包”活动,表示要“把欠大家的敬业福都还给大家”。 今天该活动正式启动,和去年一样,需要收集“五福”...

冰箱异味产生的原因和臭味去除的方法

有时候我们打开冰箱就会闻到一股异味,冰箱里的这种异味是因为一些物质发出的气味的混合体,闻起来让人恶心。 产生这些异味的主要原因有以下几点。 1、很多人有这种习...

《极品家丁》1-31集大结局分集剧情介绍

简介 《极品家丁》讲述了现代白领林晚荣无意回到古代金陵,并追随萧二小姐化名“林三”进入萧府,不料却阴差阳错上演了一出低级家丁拼搏上位的“林三升职记”。...

李溪芮《极品家丁》片尾曲《你就是我最爱的宝宝》歌词

你就是我最爱的宝宝 - 李溪芮 (电视剧《极品家丁》片尾曲) 作词:常馨内 作曲:常馨内 你的眉 又鬼马的挑 你的嘴 又坏坏的笑 上一秒吵闹 下...

乌梅的功效与作用以及乌梅的食用禁忌有哪些?

乌梅,又称春梅,中医认为,乌梅味酸,性温,无毒,具有安心、除热、下气、祛痰、止渴调中、杀虫的功效,治肢体痛、肺痨病。乌梅泡水喝能治伤寒烦热、止吐泻,与干姜一起制...

什么是脂肪粒?如何消除脸部脂肪粒?

什么是脂肪粒 在我们的脸上总会长一个个像脂肪的小颗粒,弄也弄不掉,而且颜色还是白白的。它既不是粉刺也不是其他的任何痘痘,它就是脂肪粒。 脂肪粒虽然也是由油脂...

网络安全治理:国家安全保障的主要方向是打击犯罪,而不是处置和惩罚受害者

来源:中国青年报 新的攻击方法不断涌现,黑客几乎永远占据网络攻击的上风,我们不可能通过技术手段杜绝网络攻击。国家安全保障的主要方向是打击犯罪,而不是处置和惩罚...

河南夫妻在温岭网络直播“造人”内容涉黄被刑事拘留

夫妻网络直播“造人”爆红   1月9日,温岭城北派出所接到南京警方的协查通告,他们近期打掉了一个涉黄直播APP平台。而根据掌握的线索,其中有一对涉案的夫妻主播...

如何防止墙纸老化?墙纸变旧变黄怎么办?

如何防止墙纸老化? (1)选择透气性好的墙纸 市场上墙纸的材质分无纺布的、木纤维的、PVC的、玻璃纤维基材的、布面的等,相对而言,PVC材质的墙纸最不透气...

鲜肌之谜非日本生产VS鲜肌之谜假日货是谣言

观点一:破日本销售量的“鲜肌之谜” 非日本生产 近一段时间,淘宝上架了一款名为“鲜肌之谜的” 鲑鱼卵巢美容液,号称是最近日本的一款推出的全新护肤品,产品本身所...

中国最美古诗词精选摘抄

系腰裙(北宋词人 张先) 惜霜蟾照夜云天,朦胧影、画勾阑。人情纵似长情月,算一年年。又能得、几番圆。 欲寄西江题叶字,流不到、五亭前。东池始有荷新绿,尚小如...

关于女人的经典语句

关于女人的经典语句1、【做一个独立的女人】 思想独立:有主见、有自己的人生观、价值观。有上进心,永远不放弃自己的理想,做一份自己喜爱的事业,拥有快乐和成就...

未来我们可以和性爱机器人结婚吗?

你想体验机器人性爱吗?你想和性爱机器人结婚吗?如果你想,机器人有拒绝你的权利吗? 近日,第二届“国际人类-机器人性爱研讨会”大会在伦敦金史密斯大学落下帷幕。而...

全球最变态的十个地方

10.土耳其地下洞穴城市 变态指数:★★☆☆☆ 这是土耳其卡帕多西亚的一个著名景点,传说是当年基督教徒们为了躲避战争而在此修建。里面曾住着20000人,...

科学家称,人类死亡后意识将在另外一个宇宙中继续存活

据英国《每日快报》报道,一位科学家兼理论家Robert Lanza博士宣称,世界上并不存在人类死亡,死亡的只是身体。他认为我们的意识借助我们体内的能量生存,而且...

《屏里狐》片头曲《我爱狐狸精》歌词是什么?

《我爱狐狸精》 - 刘馨棋   (电视剧《屏里狐》主题曲)   作词:金十三&李旦   作曲:刘嘉   狐狸精 狐狸仙   千年修...

 
 
 
对原型工具都不满意?自己动手做一个!本文是Silver的开发者在Medium上写的一篇介绍文章,从各个方面介绍了这款原型工具的优势和特色(与Sketch深度整合、超方便预览、转场效果丰富原型逼真等等),同为设计师,他开发的产品更贴近我们的日常需求,非常值得体验。 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注册登记。
󰈣󰈤
 
 
 
  免责声明:本文仅代表作者个人观点,与王朝网络无关。王朝网络登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述,其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
高清美女摄影(5)
高清美女摄影(4)
高清美女摄影(3)
高清美女摄影(2)
痞子的甘南日记
疑是银河落九天
雪域坝上四——纯美色
冬日恋歌——西城杨柳弄轻柔
 
>>返回首页<<
 
 
 为你推荐
 
 
 
 
 
 转载本文
 UBB代码 HTML代码
复制到剪贴板...
 
 
 
 
 
 
 
 
 
 
 
©2005- 王朝网络 版权所有