网站首页 | 典型案例 | 政策法规 | 认可认证 |
科技支撑服务
五部委百台协作仪器
首都大型仪器协作
北京地区对外开放仪器
环渤海区域协作共用仪器
远程科学仪器简明教程
远程教学课件下载
培训基地
培训活动
升级改造服务介绍
升级改造申报
升级改造技术汇编
评估
进口免税
政府采购
维修联盟
仪器预约服务介绍
 
当前位置:主页 > 典型案例 >
返回
交互设计应该学的软件有哪些
北京科学仪器设备共享服务网    2020-02-29    
工具不在多,在与满足你的真实需求。很多软件大家也就是尝试一下,真正的使用价值寥寥,以我的自身经历来说一下几款是经得起时间考验的:一款线框图绘制工具——Sketch一款视觉化绘图软件——PS+AI一款原型工具——OrigamiStudio一款动效软件——AE一款展示软件——Keynote除了Origami和AE,其他软件学习难度极低,没啥好讲的。国内接触OrigamiStudio的设计师没那么多,但是作为原型软件真的非常优质,是Facebook设计团队出品,这里着重讲一下:使用Origami作为我的原型设计/动效软件已经有一年多时间了,因为它的逻辑性和广泛适用性所以即使有一些难度也坚持在学习使用。很早之前就知道Facebook设计团队在规划新版本,但是当新版本发布时,真的是比想象中更加惊艳。新版本更名为“OrigamiStudio”,不再作为插件依附苹果的QuartzComposer,而是Mac上的独立应用(不用烧Mac了)。除了延续之前的Patch连线的使用逻辑外,还增添了sketch联动、调用基础接口(如摄像头!)等极为实用的功能,比之前的Origami上手难度也降低了一大截。随着移动互联网发展,更多从业人员进入这个行业。原型设计软件也是雨后春笋,不过身边经常听到设计师朋友说交互设计对于这种技能的掌握可有可无,对于这种想法我不能评价,但是放眼美国硅谷,编程已经成为一项设计师的基础技能了,Google等大公司对于设计部门的职能划分越来越趋向于统一而不是细分,而且操作过实际项目的设计师应该了解视觉稿和可用原型之间体验的差别还是很大的,这种原型软件或者说视觉化编程已经为设计师参与到更广泛更便捷的互联网产品开发全流程中提供了途径,何乐不为?至于在纷繁的原型软件中用哪一个,每个人需求不同会有所差异。这次我把我用的OrigamiStudio做一个介绍和一个快速上手的教程,以供你在选择时参考。使用逻辑/设计师最熟悉的图层OrigamiStudio刻意追求与Sketch一致的使用逻辑,在画面的右边你的每个设计元素都是一个Layer(图层),所有的交互动作在这些layer的基础上开展。OrigamiStudio准备了非常实用的iOS和MaterialDesign预置图层,可以调用几乎所有的基础组件如甚至包括摄像头、高斯模糊!也就是说你可轻易的实现一个具有录像功能的交互原型,听起来是不是很cool!如果你们团队都在使用OrigamiStudio,它也支持你在上面储存自己产品的组件库。OrigamiStudio中最基本的元素就是Patch(模块),通过连接不同功能的patch使你的设计可以交互。Layer本身也是一种Patch,首先你要把你的视觉稿切片也就是layer放到画布上,如果你使用sketch,那么你就可以很方便的复制元素到OrigamiStudio中,它会自动变成一个整体的切片。接下来你就可以开始对layer进行交互操作了,在PatchEditor(模块编辑器)中,你可以挑选你想要的interaction(交互动作)、animation(动画效果)、behavior(反馈行为)连接到你的layer上。下面做一个简单的示例,企鹅FM上线的新功能——“跟我跑”跑步电台,点击开始后有倒计时的动效,如下(gif图请点开观看)——第一步-导入素材这一步如果你用sketch的话就很简单,在sketch里面复制,再到OrigamiStudio里面粘贴就自动在。如果你是用别的软件做的,你需要先倒出切片,然后拖进来就可以了。第二步-设定动作在每个layer上都有一个「touch」,这个代表的是你将要用什么手势操作,里面有点击/向上滑动/向下滑动/双击/长按······在我们这个案例里,只需要点击操作——tab。选择之后就会自动生成一个interactionpatch,这也是所有的动作的第一步。第三步-设定变换数值并连接到变化的因素在我们的操作里,点按卡片之后,应该出现高斯模糊页,那么高斯模糊页的透明度应该从0到1。所以在画布中添加一个transtionpatch(数值变化组件)——然后设定start为0,end为1,然后把连接到“高斯模糊页”的透明度上去——这样,点按卡片就会出现高斯模糊效果了。第四步-添加动画效果单纯的图层变化十分生硬,我们的app在设计的时候一定会加入缓冲和动画效果。在OrigamiStudio中有PopAnimation(流行动效)与ClassicAnimation(经典动效)等6种动画patch可以选择。只要把动画patch加在interaction和transtion之间就可以了。这里要提醒大家,如果希望点按之后只有一次效果即可那么你需要在interaction之后加上switch开关,不然的话每次点按,效果都会重复一次,但往往我们的App都是线性操作,需要加入switch来进行控制。接下来的素材,按照这个流程一一设定就可以了。至于你想要实现的效果需要使用哪些patch,你可以在他们的官方文档中查看,在patcheditor中,也都有注释。大的分类有动画/色彩/功能(包括调用摄像头、麦克、浏览器···)/反馈效果/函数/逻辑/循环/数学/形状/效用。不要害怕,虽然他提供了很多patch,但你常用的比较固定,多用几次就很熟练了,遇到什么不会的你也不用着急看文档,可以先看看官方示例库里面有没有,实在不行到fb的群组里面或者私信我也可以。动态演示/与原生App无差别交互当你在搭建你的原型时,你可以实时在你的手机上查看并进行交互,当你制作完成准备给leader与开发人员展示你设计的应用时,你可以发送到你手机上,你就可以很轻便的带着ta去与所有人交流。这些操作只需手机中下载一个OrigamLive。忘了说一句,OrigamiStudio所有的相关应用都是全免费的(亲亲??FB??爸爸)。超实用的辅助功能录屏:可以录制并剪辑操作视频分享:你可以分享Oriagmi文件给朋友,这样无需你在场ta也可以自行体验原型OrigamiCommunity:OrigamiCommunity是OrigamiStudio在Facebook上面的官方群组,你的所有问题都有工作人员为你解答,你也可以与其他使用者交流。教程:官方网站上有许多实用教程,都是基于facebook和instagram的真实案例取消了代码导出功能新版本发布后,Community中很多用户在问为什么之前备受关注的codeexport功能取消了,facebookdesign的设计师是这样回复的:在实际使用过程中我们自己用的次数也很少,同时本身他们导出的代码能够适用的范围有限。我们相信真正能实现一个好产品的途径并不是一键代码,而是设计师与开发人员真诚的交流。同时我们并不是放弃这个功能,这一期没有上线是因为我们在寻求更好的方式。在之前的版本里面,Origami是可以导出代码的,但是需要开发人员装Facebook的动效库,推动这件事并不是只靠我一个设计师能够推动的,所以我们要靠“真诚的交流”,以后还原的时候请彼此真诚一点。其实我有给他们提意见,他们可以生成一张以时间轴为坐标的可视化图表,感觉这样开发人员看得更明白,希望他们可以早日开发出新的功能来帮助我们设计师与开发交流。结语很感谢FacebookDesign勇于在设计师的工具领域尝试,我也始终相信彼此的初衷,工具对于效率的提升只是表象,珍贵的本质在于它能让设计师的思维更新换代,而OrigamiStudio就是这样一款让设计师具有更加动态与纵深感思维的优质原型软件。我自己的案例涉及公司产品就不放出来了,结尾准备了一份官方教学视频送给不能翻墙的同学们GettingStarted!OrigamiStudio-腾讯视频https://v.qq.com/x/page/k0350157dnd.html不能翻墙的请下载我的这份微云文件,任何问题请在评论留言统一回复

上一篇:家庭装修超六类七类网线一般买哪些品牌
下一篇:霍比特人里面的奇力和冰与火里面的JonSnow哪一个更帅气这两部里面明显他们都非常抢眼风头很劲
 
北京科学仪器装备协作服务中心 版权所有 2012
京ICP备1203965号

网站地图