Watch应用制作动效时,不能像从前那样依赖于开发人员通过代码来完成 —— Watch中的动效是通过图片序列来构建的,同样不能把GIF动画丢给开发人员去放到界面当中。作为设计师,必须为动画的每一帧提供一幅静态图片。
工具/原料
Apple Watch
方法/步骤
1
最有效的方法是将动画文件导入After Effects或Photoshop,然后导出图片序列。下面大致描述一下在Photoshop当中的操作方法:1.在Photoshop中打开GIF或导入MOV文件。2.如果需要的话,对动画的帧率进行调整。3.选择“File – Export – Render Video”
2
4.进行命名等设置,确保图片序列从序数“1”开始。点击Render按钮后,Photoshop便会将动画逐帧分解并保存为指定格式的图片。
3
5.可以使用TinyPNG或ImageOptim一类的工具对这些图片进行优化,确保文件不会很大。
4
最后再帮开发人员一个忙,为这些文件增加@2x后缀;如果文件太多,建议使用Automator一类的工具来完成:打开Automator,选择“Service”。
5
将需要重命名的文件拖进来。
6
选择“Files & Folders”,双击“Rename Finder Items”,会出现对话框询问是否为每张图片添加一份副本以便保护原始文件的命名方式。可以选择不添加副本,点击“Don’t Add”。
7
在下拉列表中选择“Add Text”,填写“@2x”,选择“after name”作为插入位置。
8
最后,点击右上角的“Run”按钮,搞定。为Apple Watch进行设计的过程很有意思。目前在设计方面受到的制约确实很多,不过从另一个角度看,这也使得必须将注意力聚焦在最核心的体验上,打造最基本最简化的界面及交互流程,并基于自己产品的特性来设计最符合情境的通知机制。如果涉及到较为复杂的功能,要考虑通过Handoff配合iPhone来完成。此外,也不要忘记在恰当的地方通过合理的动效来提升产品的交互体验。
下一篇:好香的火腿肠炒饭