| 订阅 | 在线投稿
分享
 
 
 

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

2016-08-30 06:46:05 编辑來源:互联网 国际版 评论
 
 
本文为【一款搭配SKETCH的轻量移动原型工具】的汉字拼音对照版显示拼音
  duiyuanxinggongjudoubumanyi?zijidongshouzuoyige!benwenshiSilverdekaifazhezaiMediumshangxiedeyipianjieshaowenzhangconggegefangmianjieshaolezhekuanyuanxinggongjudeyoushihetese(yuSketchshenduzhenghechaofang便bianyulanzhuanchangxiaoguofengfuyuanxingbizhendengdeng)tongweishejishitakaifadechanpingengtiejinwomenderichangxuqiufeichangzhidetiyan

  Silvershiyikuan便bianjiejinxingyidongshejiliuchengdegongjutabaohanyigeiOSyingyongyigeMacyingyongheyigeSketchchajiansanzhezhijianwufengxianjiewanmeipeihe

  beijing

  2015nianchuweilezhaodaowanmeideyuanxinggongjuwojiangSilverzuoweiyigejianzhixiangmujinxingyanjiuyanjiuzhongfaxianleyixiehenbangdegongjubaokuoFramer, Pixate, Form, Origami, Invision, Flinto, Marvel,PRoto.iohe UXPinmeiyixianggongjudoudujutesetongshiyeweiwodeshejiliuchengtianjialebushaomafanzhexiegongjubufenshiheweijiaohushejibufenshiheliuchengleiyuanxingshejidangranzaiwanquanmeiyouzhenghetamenzhiqianzaishejiliuchengzhongdemeiyibujinxinggongjudeqiehuanfeichangtongku

  keyishuowowufazhaodaoyikuanwanquanmanzusuoyouxuqiudegongju

  wodexuqiuqishibumafan

  - kaishishejiyidongyingyongzhiqianxianjinxingyonghuliuyuanxingshejijinguanmeicizhinengshejiyigeyemiandanwanzhengdegushixuyaoyigeyemianliuwobuxiangduishejishiququanjukongzhi

  - nengzaiyidongshebeishangshishiyulanganshouhetiyanzijishejideyingyongerbushidaochutupiantongbuwenjianhuozhehuizhiredianyuanxingdezhizuoyuejiandanyuehaofouzewohuilijifangqi使shiyong

  - xianjinxingdibaozhenshejibingjinxingceshicongceshijieguozhongbuduandiedaiyouhuashejizaibuqiehuangongjudeqingkuangxiazhubuzengjiayuanxingdebaozhendu

  - nengzhanxianyingyongkaifashimianlindezhenshijishuxianzhibimianshejichuwufaluodishixiandeyingyong

  - zuoweimuqianjiemianshejidezuijiagongjuwoxiwangkeyizaiSketchzhongwanchengshejigaiyuanxinggongjunengyuSketchshenduzhenghebingzhichiqixiangguanchajian

  - yidanwanzhengliuchengquedinghouwokeyijiyuyemianzhizuoweijiaohuFramershiwogerenzuixihuandeyemianjibiejiaohudeyuanxinggongjuyincigaigongjuzuihaonenggouyuFramerjianrong

  - zuiguanjiandedifangzaiyujianshaoshejiliuchengzhongbuxuyaodesuoshizheyangwocainengjiangjinglihuazaiyukehugoutongjinxingshenduyanjiuhuoshishejiduotaofangangongceshidengfangmian

  yuqibaoyuanqueshaozhemeyikuannengmanzuwosuoyouxuqiudeshashoujiyuanxinggongjuhuanburuzijidongshouwojubeiSketchchajiandezhizuojingyanduiqineibuyuanliyeyousuolejieyincilijixuandinglejiyuchajiandejiejuefanganwolimazhaojilezijixinzhongzuiniudechajiankaifazheAndreygenwoyiqijinxingchangshi

  yixiashiwolianggaodingdeSilverjibengongnengyijitamenruhebangnitishengshejixiaolvdejianyi

  yuSketchshenduzhenghe

  jiangSilveryingyonganzhuangdaoMacshangzhihounihuanxuyaoanzhuangyigeSketchchajianyonglaizaihoutaiyuzhipeiheSilveryingyongchuxianzaicaidanlanshangyongzuoyuyidongshebeilianjieqitasuoyougongnengdouronghezaiSketchjichajianzhizhong

   Silvercaidanlanyingyonglianjieyuduankaizhuangtai

  SilverdeneizhiluojinengbangnibashejizhuanhuanweiSketchwendangzhongdeyuanxingwomendemubiaoshixiaochudaorudaochutongbuyijiqiehuangongjudengshejiliuchengzhongdesuoshi

  tongguoWiFihuozheUSBlianjieshebei

  ruguonizhengzaishejiyidongyingyongwubizhuyibixuzaiyidongshebeishangquyulanjiemiandezuizhongxiaoguo!

  jiezhuiOSshebeianzhuangdeSilveryulanyingyongnibujinkeyishishiguanzhuSketchzhongyishuban(Artboard)deweixiaoxiugaierqiekeyiyulan使shiyongSilver Sketchchajianchuangjiandeshejiliucheng

  tongguoWiFilianjiedeshebeinenggourangnisuiyizaibangongshizhanshinideyuanxingchucizhiwaiSilverhuankeyitongguoUSBlianjiedefangshizuodaozhedianerqiejingxiangzhanshigengxunsutanenggougenjushebeishifouchashangzidongpanding使shiyongUSBhuozheWiFi

  shejigongzuoliuerbuzhishiyemian

  SilveryouyixiangposhouxiaidetexingtazhichiSketchneitongguolianjieyishubanshangdetucengxingchenggongzuoliuxuanzeyigetucengbingqiaojijianpanshangdeCjiunengchuangzaoyigelianjietongshizheyangyeshengchengleyigeInterface-Builder(Mac OS XxiayongyushejiheceshiUIjiemiandeyingyong)fenggededuandianlianjieqitakeyitongguotuozhuailianjiedaomubiaoyishubanxuanzechufazhuanchangjijutizhuanchangleixingdeshoushi

  dangniyongSilverchuangjianleyigegongzuoliubingqiezaiiOSyingyongshangjinxingyulanninengtiyandaoyigeyongyouzhenshizhuanchangdeiOSyemianjihezhebujinrangnideyuanxinggengjiazhenshierqiebangzhunigenghaodeliyongiOSdaohangjiegoujinxingzuzhi

  Silverzhichisanzhongleixingdezhuanchangshunxu

  1tuiyizhuanchang

  shipinchuangjiantuiyizhuanchanghttps://vimeo.com/145123175

  nineng使shiyongtuiyizhuanchanglaidaohangdaoyingyongneirongdexiayicengjibirushuoliaotianyingyonglicongduihualiebiaodaoduihuaxiangqingpingmuzuocebianyuanyouhuanenggouhuidaoshangyigejiemianyenengtongguojianliyigefuzehui退tuixingweidetucenglaishixian

  2motaizhuanchang

  shipinhebingtuiyiyumotaizhuanchanghttps://vimeo.com/145229320

  motaizhuanchangyongyuqidongyigedulideyaomewanchengyaomemingquefangqiderenwuzhuanxiexinyoujianInstagramshangfayizhangzhaopianyinxiangbijilichuangjianyitiaoxinbijidoushuyubixuzaiyibuhuoduobubixuwancheng(huozhequxiao)dedulirenwuquxiaoyigemotairenwunibixuchuangjianyigebaohanDismiss Modalxingweidetuceng

  motaizhuanchangtigonglemubiaoyishubanchurudelinghuodonghuaxingshinikeyichuangjianyige使shiyonghuadongshoushilaijinxingjiaohudemotaizhuanchang

  shipin使shiyongmotaizhuanchangchuangjianhuachudaohanghttps://vimeo.com/145230740

  3wuzhuanchang

  jiarunipianaipinfandeqiehuandaoqitayishubankeyitongguojiangzhuanchangmoshisheweiNonelaishixiantajiangjikeyinilianjiedeyishubanqudaidangqiandeyishubannibudankeyiyongzhezhongfangfalaizhanshidangqianyishubandebutongzhuangtaiyekeyiyonglaichuangjianyigejiyudibubiaoqianlandeyingyongyuanxingqiehuanbiaoqianshibuxuyaorenhezhuanchangguoduruxiasuoshi

  shipin使shiyongwuzhuanchangdeyishubanlianjiechuangjiandibubiaoqianyingyonghttps://vimeo.com/145241088

  chufagaixiniOSgongneng

  chulechuangjianshejiliuSilverhuannengchuangjianlianjietucenglaichufaqidongniexiangtouliulanzhaopianqidongxitongyoujianbianjiduanxinbodadianhuahuozhezaimorenliulanqizhongdakaiyigewaibuURLdizhidenggaixiniOSgongnengnibubizaitongguo仿fangzhijingtaipingmuzaiyuanxingzhonglaimonizhexiegongneng

  xiamianwomenjugelizikankanruhechuangjianlianjielaiyuanxuyonghuzaitamendeiOSshebeishangliulanzhaopianjiangxuanzhongdezhaopiantianchongdaoyigetucengmingmingwei_Photo

  shipinchuangjianlianjieyongyiliulanzhaopianbingxianshixuanzhongzhaopianhttps://vimeo.com/145242395

  gudingdeyemeiheyejiao

  shipinyongSilverchuangjianyemeiyuyejiaohttps://vimeo.com/144324822

  SilverzhichitongguojianpankuaijiejianchuangjiangudingdeyemeiheyejiaoxuanzhongyaogudingdetucengdianjiCtrl+Shift+HlaigudingyemeidianjiCtrl+Shift+Flaigudingyejiaojiuzhemejiandanyugaitucengdechicunheweizhideyouguanbianhuadouhuizaiyulanzhongzidonggengxin

  shishishurukuang

  shipinyongSilverchuangjianshurukuanghttps://vimeo.com/144331683

  youshiwomenyaozhizuoyigexuyaoyonghushuruxinxideyuanxingbirushuojiandanbaohanyonghuminghemimashurudedengluyemianhuoshibaohanzhuduoxinxishurukuangdegerenziliaobianjiyemiananzhaoyiwangdezuofadajiakenenghuizhizuoyigeweizaodeyuanxingyinweizaiyuanxingzhongmonizhenshishurukuangdeguochengtaimafan

  SilverchushouyuanxingwoyouzhixuyaojiandanshezhiyixianikeyizaiSilverzhongqingsongchuangjianchangguidewenbentucengyi便bianzaiyuanxingzhongzhenshimoniwenzishurukuangshishishurukuangyinruleUITextFieldduixiangdeyixiegongnengbirushezhizhanweifuzaishurukuangzhongxianshiqingchuanniuxuanzeshurujianpanleixingdengfanshishejixuyaokaolvdezhuangtaidouyingyoujinyou

  qianruWebView

  shipinqianruwangyeneirongjiFrameryuanxinghttps://vimeo.com/145226520

  SilverhuannengjiangjuxingtucengzhuanhuanchengshishiWebViewzheduiyu使shiyongHTMLgoujiandeyingyonggongnengchizaoyouyongerqiezaiyiyouneironglitianjiaxinshejihuigengfang便bian

  WebViewhuanzhichilianjiedaobendiFrameryuanxingzheyangninenggoujiangyemianjibiedejiaohuyinrudaoFramerzhongtamenyuyingyongdeqitaneirongronghedegengbangFramerzhongdeyigezujianyijiukeyizhengchanggongzuonenggouzhijiecongFramerdaimazhongtiaoyongSilverduiyingdejutigongneng

  guanyugongce

  yishangdoushiSilverneicebandegongnengjinzhanshileyixiepimaoniandiwomenhuiweizuizhongbantigonggengqiangdadegongnengjizhouzhihouwomenjiangxianliangyaoqingbufenshejishi/kaifazhejiarugongceruguoniyouxingquqingdaoSilverflows.comzhucedengji原文
 
 
对原型工具都不满意?自己动手做一个!本文是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注册登记。
󰈣󰈤
 
 
>>返回首页<<
 为你推荐
 
 
 
 转载本文
 UBB代码 HTML代码
复制到剪贴板...
 
 
 热帖排行
 
 
王朝网络微信公众号
微信扫码关注本站公众号wangchaonetcn
 
  免责声明:本文仅代表作者个人观点,与王朝网络无关。王朝网络登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述,其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
©2005- 王朝网络 版权所有