Keynote + Sketch 制作APP交互演

3,510 阅读10分钟
原文链接: www.ui.cn

实际生产环境中需要快速输出交互演示,我们选择了 Keynote 与 Sketch 相结合的方式,本文主要介绍大致的方法及一些心得。

Image title


MacOS 平台下的 Sketch 以其轻量高效迅速成为界面设计的一把利器,但每当进入到交互环节,却始终受限于其无法“动起来”的短板,需要通过 AE 或 Principle 之类的其他应用来完成,这两者本身存在一定的学习和使用成本,往往令人望而却步。

 

而Keynote 作为 Mac OS 系统中的一款幻灯片制作软件,也被不少人称之为演示界的神器。因其强大而酷炫的动画效果,在当下的“发布会时代”,我们经常能看到他的它的美妙之处,比如老罗的单口相声等。


当这两者组合使用时,主要有以下三个优点:


1、学习成本低

Mac OS平台的一贯使用体验,极易上手,没有时间轴,没有图层。常用动画均已内置,只需修改部分参数即可。


2、时间成本低

相比传统方法,至少节省了超过一半的时间。Sketch 与 Keynote 之间可以实现无缝切换,Sketch 设计完页面不用导出,可直接 copy 至 Keynote。


3、演示效果好

Sketch 与 Keynote 两个软件都是矢量的,不同尺寸环境之下演示同样清晰。

 

当然,不可否认 AE 等专业动画工具的强大,Keynote 只能作为“小快灵”的一种选择,毕竟本质上它只是一个幻灯片演示工具。





Keynote 简单介绍  


相比 PowerPoint 的操作界面 Keynote 显得极其简洁,这也符合 MacOS 系统的使用体验。中间是舞台区域;其丰富的参数调节基本全部被放置在了右侧面板中;顶部放置了部分常用工具,与 Sketch 同样可通过右击自定义功能;左侧则作为导航器总览全局;四个部分即可完成大部分的操作,此处不再赘述。Image title


需要注意的是右侧面板,在选中【左侧幻灯片】与【右侧舞台元素】时对应的参数是不同的,并且通过“格式、动画效果、文稿”三个Tab对其进行了分类。


Image title

Image title




开始前的五步准备

 (分的较细,熟练工可忽略)


1、清楚演示的流程  

Keynote 本质上是幻灯片的播放,并非生成了真正可交互的页面。可以在画面上模拟点击的效果,但却不能进行任意的操作,因此开始之前需要设计好演示的流程,单线播放。形式不限,用交互稿连线、纸上画画草图、甚至心中有数均可。


Image title



2、设置舞台的尺寸  

Sketch 中我们使用 @1x 的尺寸来设计页面,为了方便复制与对齐元素,加上均是矢量的软件,可将 Keynote 的舞台尺寸设置为 @1x 的大小。若使用 Photoshop 设计一般按照  @ 2x 的尺寸来做,总之与设计稿对应即可。

Image title



3、明确层次关系  

明确前景层、内容层、背景层的关系及需要做动效的部分。对于初次接触的同学经常会忽略这一块,但这个结构反映在每一个页面,需要清晰的记住。


Image title


4、编辑母版  

通过母版设置页面背景色。Keynote 本身为每一个幻灯片都准备了许多母版,基本上用不到。一个APP中常用的背景色不会太多,可以将其设置到母版中,方便调取。


Image title


5、整理公共元素  

在 Sketch 中整理出动效需要用到的切片,不用导出,放在一起即可。一是可以明确动效的内容,二是以防止在来回的切换中破坏设计稿。当然,能做到心中有数或者时间紧迫的情况下,不整理也行。


Image title


剩下的就是尽情的做动效就好,将元素从 Sketch 复制到 Keynote 中,然后添加动画效果调节参数即可,调节参数需要反复尝试达到完美的效果。

Image title





经验小结   


1、关于构件顺序

Keynote 中没有图层,构件顺序一定程度起到了分层管理的作用,构件即为画面中的元素。页面中的所有元素很少同时产生动作,因此就有了先后的顺序。通过这些顺序来组合出变化多端的动画效果。


a、一行即为一个构件,左侧是构件的名称,右侧是该构件对应的动效。

b、当两个构件按顺序依次产生动效时,两行会连在一起,中间有分隔线。

c、当两个构件同时产生动效时,两行也会连在一起,但中间没有分隔线。

d、若中间断开不相连,则两个构件的动效互不影响,且下一个构件需要在上一个构件动效结束之后通过点按产生动效。


以上4种情况的切换可通过【拖拽】或【起始】下拉菜单中的选项来完成。


Image title

通过时间轴可以更好的理解:有分隔线则3个构件依次产生动效,没有分隔线则同时产生动效。


Image title

Image title


在构件顺序中还可以通过【延迟】增加效果,即给定一个动效产生的时间。可以做出让构件2在构件1尚未结束时即开始动作的效果。 

Image title



2、不要把全部效果做在同一页  

这是实际操作中很容易发生的问题,我们习惯性的把一个幻灯片理解为一个页面,于是该页面的所有效果就做到了同一页上,实际大可不必如此。因为没有图层,同一页效果太多会导致后期修改非常麻烦。不用吝惜幻灯片的数量,一个APP的页面对应10个幻灯片的页面也是可以的,只要演示时不让观众反感就行。


Image title


大胆的使用左侧的页面,按下【Tab】键可对其进行简单的分组,方便管理。

Image title


以一个长达3屏的APP页面为例,如何将其分到数个幻灯片页面中:


1、在1、2、3个幻灯片中分别放对应的3屏高度的页面

2、在1、2之间插入一个过渡页,放入一个第1屏与第2屏相连的页面

3、页面滑动的动效就做在这个过渡页上


这是利用了页面“自动过渡”的效果,选中页面时,右侧可以选择页面过渡是【自动】或【在点按时】,自动即为播放完该页后自动切换到下一个页面,在点按时顾名思义。(PS:实际演示过多次,从未被察觉。)

Image title


这里的切换只要明白一个道理就行: 当点按时,只是在切换下一个动作,而不是下一个页面。


对页面【开始过渡】与第一个元素的【起始】有几种搭配的情况,简单统计如下

Image title



3、参数更准确  

Sketch 到 Keynote的复制也存在问题,比如透明度无法完美复制,此部分需要在 Keynote 中通过参数来调节。(如下图,同一色值的透明度渐变,从Sketch复制到Keynote后变为纯色)

Image title

在复制含投影的图层时,需要计算元素的宽度,默认会将投影算进尺寸中。

Image title

如果当仔细检查卡顿之后,仍然感觉演示不流畅,问题可能是出现在动画时长的设置上。视觉感知的时长与影响中的时长通常存在差异,这里不免需要严谨到毫秒来设置。Image title


4、眼见不一定为实  

在实际演示中难免会遇到一些 Keynote 自带效果无法实现的动效,此时可以通过一些简单的动作组合出想要的演示效果。

Image title

实现动效的方式不止一种,如下图中的“长按悬浮”就是两种不一样的制作方式。不时会出现固有方法解决不了的动效,可以换个思路。

Image title


Image title



5、文件体积

如果是简单几个页面的演示可以忽略,但若是一个完整的项目演示,这个问题就比较明显,虽然影响不大。即便都是矢量的软件,但是 Copy 多了以后还是会影响体积,动辄几个G的 Keynote 文件也是常有的事。

 

以  @ 1x 尺寸下的标题栏为例,通过【文字】+【形状】工具在 Keynote 中制作出左侧的效果,其文件体积与直接从 Sketch 中复制而来呈现出巨大的差异。


Image title


加上几个模块后,体积差异越发明显。(右下方的折线图中竖轴代表两者文件体积的比值,横轴表示内容数量)

Image title


当然,在 Keynote 中完全手动复原效果图很不显示,也与“快速制作交互演示”的宗旨相悖,此处仅供参考。






常用动画


Dribbble等设计网站中很容易发现许多的动图,给我们练习动效提供了借鉴。拿到动效后,不用着急动手,可以先分析其中包含了哪些动作,拆解之后会发现并不难,即便是复杂的动效也逃不出基础动作的组合。


对比了大量APP页面中的常见动效之后,基本可以归纳出以下四个动作:

Image title

以上四个动作通过各种组合,可以搭配出很多美妙的效果。






Keynote自带效果


Keynote 中为我们提供了许多动画效果,满足常见的APP页面交互搓搓有余。即使是初学者也不用被诸多的效果干扰,大可放心的尝试,下图中已经淡去了基本用不到的部分。


需要注意的是,选中【页面】与【元素】所对应的效果是不同的。下图是选中【页面】时的效果。


Image title


此处单独介绍下【神奇移动】,这是在选中【页面】时才能添加的效果。其原理是在 两个页面 切换时,为两个页面中的 相同元素 添加补间动画。通过元素位置、形状、透明度……等差异,达到移动、变形、渐变……等效果。其中也与其他动效一样加入了【抹入抹出】的加速效果,增加运动曲线的弯曲度,使动效更加自然。

Image title


如下,右图中的圆角矩形是用左图中的圆改变倒角而来,因此使用神器移动时会出现“圆变形为圆角矩形”的过程;右图中的三角形与左图中的圆无关系,页面切换时不会产生补间动画。

Image title


选中【元素】时分为三类,分别对应元素的“出现、动作、消失”三个阶段,各有差异。


【构件出现】即为画面中元素从无到有的动效,多用在页面切换、弹框或其他用户操作之后。

Image title


【动作】是面对已经显示的元素进行的动效,如移动、缩放等常见效果。有时也可以用过透明度,组合出构件出现的效果。

Image title

【构件消失】顾名思义与出现相反,其中的效果也大多与构件出现对应。


Image title


综上,是我在使用 Keynote+Sketch 制作交互演示的一些小结,供大家参考。


 

UI界面在人机交互中作为软件的呈现,不只是静态的美术作品,更是包含交互行为在内的动态环境。因此动效对于交互设计,尤其是APP和Web页面来说非常重要。对设计、对研发、对用户流畅的动效均是很好的加分项。




Image title