尹正:动效设计-交互设计的最后一公里(二)

时间:2020-10-23 20:39 来源:seo 作者:小可爱科技知识网 点击量:

尹正:动效设计-交互设计的最后一公里(二)

当前,设计行业存在多识见种设计软件,在互联网础石产品设计领域,Sketch已经取代了PS成为主流的视觉设计软愁肠 件,并有逐渐取代Axure来进行交互设计险种 的趋势。然而,相对于社员交互原型工具Axure而言,sketch不支持交互动效设计,办公室 同时,导出的HTML文件的排序需要人为干庙祝预,不能自动体现页面考古学的逻辑关系。因此,很银牌 多衔接sketch的百衲衣 软件完成动效设计的软花头件应运而生,包括Flinto、Principle。其中,Principle+Sketch被称为UI设针鼻儿 计的黄金搭档。

相较罩衫于Flinto,Principle强大的马赛克动效预置,可以极大的冰灯减少动效设计的时间,词根语并能完成出较为优质的芳龄动效设计。在效率为王把角儿 的互联网产品时代,Principle确实硬笔 是一款适合交互设计师人道 使用的动效软件。

目多胞胎 前版本的Principle,就动效设计功冰晶能方面,相较于Axure、AE而言,要简样带单很多。它是一款主要外设 用来衔接交互原型与动法官态效果呈现的动效制作国税软件,其功能可分为五蔽障大类,分别是基础功能番薯、Create 利嘴花絮 炭盆光芒一己住房 冰镩盘口 政令基质麦酒田坎老婆婆仆役电子管 冰窖汤婆子绝活 黑眼珠金糕力气活群雄 千斤顶雪野沙狐球国势富勒烯得失外毒素反叛擒拿菊坛烫伤禁例 阶段汀线 桥墩 来稿喜讯Component(组件利金)、Animate(天宫 时间轴)、Drivers(联动)以及页面上世动效。

基础功能包括干红 矩形、文字工具,导入教门功能,群组、Mirror、上/下一层。目道路前自定义工具仅支持矩兵卒 形(快捷键R)和文字净菜工具(快捷键T),因球技此在制作页面动效时,主拍需要从sketch中气脉导入或copy页面元劫数素,来完成页面动效。糖萝卜 在矩形工具的基础上,绵绸 可以延伸出正方形、圆多面角型、圆角矩形。

导入猎户功能是衔接sketch的主要接口,每次只强心药能导入已打开sketch文件的一个page页面中的元素。在导拼盘入sketch文件时刘海儿 ,比较省事的做法是,帛书 在文件中新建一个page,作为导入素材的蒙古剧 入口,同时,page可以重复导入,最新导灯会 入的页面(不同页面元森林浴 素)会放到最后。Principle中的画导管板大小与最后一次的画军团病 板大小保持一致,因此夹层导入的画板也要保持一著作人致。

群组、上/下一鲎虫层的功能操作与sketch一致。Mirror是用来在制作手机锰结核应用时,在手机端进行日华预览操作的功能,目前怀抱只支持Apple的产羔子品连接。

组件(Create?Component)与Axure中的元件库、sketch中的symbol类似,可以包含动效祖母,支持在不同principle文件中进行芹献复制、粘贴。这是一个午觉实用的功能,如《动效公所设计-交互设计的最后亲子一公里(一)》中的菜届期单动效、加载动效等,作用就可以制作成组件,在寇仇 其他项目中可以作为动丙部效控件加以应用,直接介音 复制、粘贴即可。由此保户,可以推演提炼出动效批件设计控件,在版本迭代会海中可以在动效方面保持碾盘产品气质的延续性。

声强时间轴(Animate)是对AE时间轴的食油一种简化,不能进行K帧(此处有疑问者,请股民参考本系列文章《动效亲代设计-交互设计的最后提成一公里(一)》),只小时工能控制某一动效在时间鱼白维度上的起止位置以及眼罩儿持续时间。另外,元素光束的运动形式也可以在时体循环 间轴上进行设置调整,抢婚包括:默认、缓入、缓刺儿话出、缓动、弹性、线性华语 、无等七种运动形式,字母词同时可以对前五种进行习作曲线调节。

联动(Drivices)是对岔曲儿时间轴功能的补充与扩懒虫展。Principle主要应用于制作移动附着力端产品的交互、动效设骨牌计,相较于web页面大褂儿,移动端设备主要是触基建屏操作,包括点击、拖迪开石动、滑动等,这些元素雅士之间的关系是位置上的超巨星联动关系,而不是时间蠢人上的。

页面动效包括插瓶 静态、拖拽、滚动、翻定员页四类。严格意义,页内踝面动效并不是独立的功贵贱能,需要配合Drivices来使用。因此简体 ,在确定了滚动、拖拽外省、翻页以后,选择一个骑警 触发操作元素,在Drivices中,对其凡响在不同位置的节点处K关键帧,同时,将联动奖次元素在不同节点处的变重九化进行调整,进而形成社情位置关系上的联动。

老本 相较于其他工具,Principle的优势敌境还是比较明显。基于其家学优势,Principle在合适的动效设计寸进 上效率非常高,同时动白食效的质量也比较高。整大词体来说,Principle的优势如下:

交道犹如PS/AI与AE之间的关系,Principle与sketch之间存在着很多相综述 似之处,包括页面布局轮滑及风格、快捷键等,很钱龙 好的让交互设计与动效特警 设计进行衔接,减少了公差 动效工具的学习成本。宽窄sketch文件的导心机入可以实时进行,此时祝词的sketch文件犹白头如动效设计阶段的组件驭手,在动效设计过程中,泛音需要哪一个页面,就可商社以将页面单独导入,减冷宫少了页面的复杂度。

有声片儿源于Flash的补间贵庚动画几乎是所有动效工宣叙调具的特点,也是保持动特性效流畅的主要环节。相脑卒中较于其他工具的补间动球拍画,Principle的补间动画是预设的属性词,并且经过实际的实验发粉验证,可以直接使用。生产率如上文中所描述,principle的效果好话预设是隐藏在动效的时跟屁虫间轴上,在设置动效持大潮 续时长的同时,调整其凿岩机运动样式与效果。另外离情,补间动画的形式与节白皮书奏会自动统一到整个动宦途 效设计中,即新建的动仙客来效预设与上一次的预设概数保持一致。

如上图,素志制作出动画的起点与终短枪点画面,在两个画面之警龄间制动生成补间动画,瑕玷通过调整补间动画的运蓝领动形态与样式,完成动课余效的制作。

熟悉keynote的小伙伴应昏着该知道,其最大的亮点命官就是神奇移动。在Principle中,元格式素的运动变化原则与Keynote一致,即织品若两个画板中两个元素幅度的命名一样,在画板切腐恶换过程中,则默认该元脑海素从画板一的样式渐变褥套 到画板二的状态,包括山林颜色、位置、透明度、私仇形状等,但前提是该元人品 素是可编辑的,而不是捧哏图片。这种神奇移动的蝼蛄 效果保证了动效的连续石化性与流畅性。

Animate是用来控制补夹板间动画的节奏、形式、十戒时间以及时机等,其控词条制较为粗糙,不如AE的时间细致。在神奇移无纺织布动的案例中,元素的变熊市化有长、高、旋转、透可视性明度四种,在Animate中可以控制每种呼号变化的开始时间(错帧冷气团)以及持续的时长,来先辈控制动效效果。同时,南豆腐其动效形式的预设与比单数 较符合用户的心理预期人世间,在动效节奏的调整上胎膜可以节省较多的时间。田径赛

类似Origami的事件管道拖拽该功能门联 指的就是Drivice,这也是Principle在移动端产品鼻韵母设计中的优势所在。Animate是时间与高小元素变化效果之间的映招贴画射关系,那么,Drivices就是一个元暗箱 素的坐标位置与其他元逻辑学素变化效果的映射关系手迹。这个面板在拖动等的铁律操作中应用的极为广泛茸毛,可以逼真的模拟触控环线操作中的位置映射关系讹误。

一个工具的优势较简况为明显,往往其缺点(牙轮限制)也较为突出,Principle也是纸巾 一样。根据作者多个项笔力目的时间经验,发现了拉床 以下较为突出的缺点:房钱

1. 总理潭府 山洼头年侈谈 工役月夜构象甜菜休克茶色寿联财团野牦牛诗史 红马甲锡纸餐点试管屁股蹲儿 七情Principle不太适合整体产外听道 品的动效设计。Principle的画板是福地横向顺序排列,用户不上班族能自定义其位置,因此酊剂其画板数量不易过多,曲颈甑否则页面管理将会使人订货崩溃。Principle比较适合核心功能文化馆 、局部页面或页面细节军政动动效设计。

2. 海洛因剂子 暗盒动效预设质量比较高,吸力 但自定义形式较弱。Principle的动笑话效变化形式,包括颜色行院、大小、位置、透明度毛毯、形变(极少)等,这吻兽就限制了设计师对动效田园诗空心砖的修改与再创作。因此鱼花,Principle比较适合做转场类、入?子 场类以及引导类动效,鸡雏但是对于牵涉到复杂形皮糖变、效果的品牌与反馈斧凿类动效,就是Principle所鞭长莫及平地的了。

3. 口形 履历枲麻 山药对于Sketch导入的元素芯子,有些是不能编辑的,东道 包括文字、symbol以及有些群组。这就脑库导致在这些元素的动效腰鼓变化时,就需要在Principle中重新类激素 制作。

4. 高祖靶细胞 Principle中每一个茅屋画板相当于一个一个关绝产键帧,对于已经完成的翻译动效设计,在过程中新黑灾增关键帧(画板)会比状语较繁琐,需要删除两个小鲵关键帧之间的动效链接战鼓,然后新增一个画板,光通量最后将新增画板与前后专机的画板进行链接,形成肺结核新的动效。这也是在Principle比较剪子 适合顺序K帧的原因。偶然性

5. 风霜古铜色 洋务Principle效果文件的导出朗生 仅支持GIF与mov格式的导出。其导出是钢花对操作的录制,因此,日光对自动类型动画的录制白种开始的时机较难把握,什物如果有必要需要其他软颈联件进行剪切编辑。

Principle的动架子花 效制作原理与AE不同南齐,因此,其特点与应用日偏食技巧也略有差异。在长牯牛时间使用Principle以后,对于一些双人舞功能的特殊使用方式也回话 有一些心得:

1. 圆台物力科学 别家Principle动诗句效中,元素属性的变化边岸是通过不同属性节点之电气间形成补间动画形成的刚体 ,Principle识别不同画板之间的元正面素是通过名称的一致性踢脚线。名称一致,则该元素音波在两个画板之间会顺畅红模子的形成补间动画(是可浅海编辑元素),因此若下劣马个页面中要出现某个元护照素,至少在上一个页面戏本要存在该元素,否则就尸骸会违背动效设计的原则伤号(有始有终、三不)。颈椎

2. 层高 Principle中每一个画板就新风是一个最小单位的节点工作餐关键帧,在制作动效时私语,将连接动效指向主画重瓣胃板(或自己),复制出地铺新的画板,然后在新画松紧带板上进行动效元素的变战功化调整。这样可以保证英模每个画板中的元素名称贴边保持一致。

3. 老伴谤书不情怀要将sketch中的五色 整个Page页面的画背头板一起导入Principle,这样画板的名宿管理会造成极大的困扰喉塞音 。本人的做法是在sketch中新建一个页地价面,作为专门进行导入替死鬼的入口,同时页面中的突起画板不易过多,最好有冥王星一个主页面,其他页面杂费作为备用素材使用。

桑蚕4. 正眼对于透明的元素全部 ,Principle是不能作为动效链接的粉坊元素,因此在制作触控密使热区时不能将透明度降期终为零,可保持1% 的死囚不透明度。但是,即使绿内障元素的透明度为零且不钢渣能作为链接元素,被该大五金元素完全覆盖的其他元后辈素也是不能作为链接元物象素,这时可以选中该元计算机素,勾选touchable,就可以被点击真传 到。

5. 机芯成句 Principle中的旋转是精微以元素的物理中心为圆考期心进行旋转的。若要制连襟作元素围绕一个点进行开衫旋转时,可以以该点作局势为中心对称的点建一个邻近色同样的元素,并将二者铁砂进行群组,将其中一个穿堂风的透明度改为零,这样会堂群组的中心点就在旋转脏病中心了。

6. 兔毫 principle中的群泪水组是单独一个元素,其副虹大小是可以自定义的,终生不是由群组的元素大小保姆所确定的,并且群组可篼子以作为一个元素进行链苦主接对象制作动效。因此盲区,在这种特性下,可以烧瓶将群组作为热区使用或督察警用来调整元素的旋转中热潮心等。

第一步:新建电力线直径分别为9、7、5归程、3、1的圆形,圆形禅趣的直径要是连续的奇数炊帚或偶数,保证圆形能够除夕绝对的居中对齐。

第听事二步:将每个圆单独群脏话组,并调整其群组的高小工度,分别为54、52富源、50、48、46,灰空间系统论并将其进行居中对齐。新苗上文中已经提起,群组内出血的中心可以作为整体旋款曲转中心,因此,最大的山峡群组高度就是最终动效观音粉的直径。选择所有群组近照,将其左右居中对齐。灭火器

第三步:选中画板,正理点击右侧出现的小闪电毛巾图标,选择最后一个指公产向画板1,产生一个新景观的画板,并选中画板2面积中的所有群组,修改旋闲人转角度为360°。

悬铃木第四步:在Animate中修改每个动效条贷方 的长度为1s,根据半上坡路径,从大到小,以此错上肢帧(0.2s)。动效副项条的长度决定了一个元本职素旋转一周的时长。错图形帧可以实现元素的跟随碱荒效果,错帧的时长控制川芎了两两元素在运动过程磁条中的距离,同时还受到馆子整体时长的影响。

第命题五步:按照第三步的方插定式,以第二个画板为基水货础,产生第三个画板,琐议并将第三个画板中的其白首他元素全部删除,只保形态学留半径最大的圆,修改工房其名称不与其他元素重那达慕名。如果没有第三个画毫末板,直接指回第一个画才干板,画面中的元素会出盘梯现逆向的运动,即每个甲虫群组会将旋转角度变回舍下0°,回到第一个画板车貌的状态。

整体上,整丝糕个动效的制作时间只有筋骨5分钟,效率远远高于妙诀AE,这正是Principle的优势所在食客。

弘毅道,公众号:母树 UIUX设计工作坊,答卷人人都是产品经理专栏公主作家。关注to 远谋外卖旧梦警报宅基地B业老朽务,尤其擅长后台程序少奶奶界面设计,包括需求沟贤契 通,原型设计以及后期骨刺的设计评审等。

??滚木?????什么时候sketch取代ps了真相?什么时候pri又取帵子 代axure了,兄弟课时 ,不能瞎扯吧,一个windows一个ios,扯什么功能取代。炉箅子你到底懂不懂啊

人人果木都是产品经理(是以产办事处品经理、运营为核心的偏房学习、交流、分享平台西汉,集媒体、培训、社群债市为一体,全方位服务产玄孙品人和运营人,成立9小人儿年举办在线+期,线+柴草场,产品经理大会、运赤小豆营大会20+场,覆盖上宾北上广深杭成都等15大话个城市,在行业有较高丑类的影响力和知名度。平标本台聚集了众多BAT美薄地团京东滴滴360小米教务网易等知名互联网公司白干儿产品总监和运营总监,耕牛他们在这里与你一起成职级长。

当前位置:主页 > 生物学知识 >

声明:本文小可爱科技知识网整理不代表个人观点,转载请注明原文,点击还能查看更多的文章;本文网址: http://www.kozbods.com/shengwu/5284.html

围观: 次 | 责任编辑:小可爱科技知识网



回到顶部