UI设计

腾讯UED:动态图像设计在h5项目中的应用

作者:口袋使者 2016-10-30 我要评论

动态图像设计(Motion Graphics Design)是将原本静态的平面图像经过动态的设定,呈现出动感。 动态图像应用在设计中的很多方面,如:产品展示、品牌建设、动效...

动态图像设计(Motion Graphics Design)是将原本静态的平面图像经过动态的设定,呈现出动感。

动态图像应用在设计中的很多方面,如:产品展示、品牌建设、动效原型、趣味应用等。

动态图像的特点:

1.与影片不同,MG是短小精炼的。如电影的片头,logo的演绎,视频常见的角标动画等。

2.传统影片通过角色来演绎剧情,MG则不然。角色的目的是为了传达信息或表达氛围。

3.通常结合了许多不同的元素(二维/三维动画,视频,字体排版,插画,摄影,音乐等)。

4.时间不会太长,可循环\单次播放。

5.有一定的指引(引导)。

6.富有趣味性,更强的视觉表现力,更优质的细节展现。

 

通常我们会采用哪些处理方式将动态设计应用在H5项目中?

一、文字

文字是我们最经常需要设计的元素,栏目logo、主标题副标题,甚至内容等等。通常我们会根据以下几点进行设计。看一下例子:

1.自身变化(颜色、形状、出现方式)

2.文字与图形的结合

3.文字与场景之间的转换

 

二、影像

1.为给照片赋予新的生命

2.用插画构建新的世界

3.用影片来协助设计

4.创造3d的虚拟空间

 

结合H5中常见的应用场景,动效设计通常应用在:

1.Loading

2.封面

3.转场

4.其他(指引\说明等)

在动画的制作中可以根据不同的使用场景可以将动画设定为可循环和不可循环。其中可循环动画也可以分为单频率动画,即所有动态元素遵循一个节奏运动。

或多频动画,即所有动态元素遵循两个或两个以上节奏运动。

只要有好的创意,即使用玉兔系统,一样可以实现一个不错的展示效果!


阅读原文 本文来自:口袋知识网 news.papocket.com

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 没灵感?这里是最全的15个设计风格总结

    没灵感?这里是最全的15个设计风格总结

  • 没灵感?这里是最全的15个设计风格总结

    没灵感?这里是最全的15个设计风格总结

  • 淘宝刚发布的新版本,可能会引领2017年

    淘宝刚发布的新版本,可能会引领2017年

  • 学会这个教程,可以把任何一张人物照都

    学会这个教程,可以把任何一张人物照都