
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人
1.2.4 动效设计
当把界面设计好之后,尽量制作一些简单的动效,让大家更好地理解该设计,也为开发工程师制作后续界面提供一些参考,能提高整个项目组的工作效率。
这是一组用Sketch制作的音乐App的一系列界面。当用户在播放界面中点击音乐列表图标时,就会弹出音乐列表界面。如果使用Principle为界面制作动效,就可以快速地让团队理解这组设计的灵魂,并且让开发人员理解设计的运作方式,更好地为项目组节省时间。

下图就是将右侧两个界面的关系加以交代,通过Principle的Animate面板,将每层列表X轴的内容和不透明度整体用错帧的方式,做出列表陆续进入的动态视觉效果。

