威龙发艺发型设计价格联盟

纯科普!动效元素在网页设计中的运用

优秀网页设计2021-02-22 15:39:18

移动web时代,大家花费在浏览网页和使用移动数据流量上的时间越来越多,由此为获得友好的用户体验而专注于交互设计的设计师们,使用了多种表现方式来传达 产品在网页中的视觉效果,因此在未来网站建设中,使用友好的动态交互界面与用户更好的互动是每个设计师要去学习和思考的,在适应这一主流趋势的战斗中,作 为专业的网页设计狮,学习并掌握动效元素在网页设计中的运用是关键所在。


晋小言在《形式感+网页视觉设计创意拓展与快速表现》中就提到了在图片大视觉中,关于照片移轴的表现方式,运用在高空俯拍城市的大视觉中突出视觉感受。那么,要更加优雅的表现出你的产品创意,还能怎么做呢?


首先,我们从两个网站来认识动态网页到底是长什么样子的。


Mac Pro

http://www.apple.com/cn/mac-pro/

在 网页中, 设计师通过HTML5对MP4视频文件做了编辑,其视频文件大小为16.4MB,在浏览网页的过程中,通过鼠标的滚动以及点击来有效的控制播放视频在网页 中的位置和时间节点。用户几乎察觉不到这里使用的是视频元素。但由于文件比较大,网页加载会延迟,请耐心看完……




AQUATILIS

http://aquatilis.tv

该网站中使用的视频文件格式为webm,其视频文件大小为2.33MB,视频文件在网页中仅位于首页,与其它动效结合使用,交互效果明显。视觉体验很赞。




通过上面两个网页设计,你可能已经认识到了视频动态元素在网页设计中的使用方式,在更多的网站设计中,我们可能接触的最多的是GIF动态图,视频类元素在网 站中的使用有限,大多使用格式为MP4,AVI,MOV等,在网页设计中要使用的视频元素则在格式上受到了一定的限制,原因是HTML5支持的视频格式只 有三种,以MP4为主,WEBM是后来才出现的的一种视频格式。2015-09-02微软终于也宣布将在Edge浏览器中添加对WEBM格式播放的原生支 持,这意味着这种新起的视频文件格式得到了更多浏览器的支持。


魅族官网-pro5新产品介绍页面

http://www.meizu.com/products/pro5/craft.html

该网站中使用的视频文件格式为MP4,其视频文件大小为4.5MB,展示的是新手机的工艺,让消费者更清楚的了解暗藏的玄机。



1
视频文件

MP4 相信你一定不会陌生,就来说说WEBM和Ogg吧。WEBM是基于mkv开发的新格式,但WEBM将封装格式限制成了VP8-Ogg,因为 AVC(h.264)出现了x264这个强大高效的编码器,相比之下VP8就不那么强大高效了,但为什么今天得到了大家的认可,需要在两个方面去认识,一 是文件单位体积,二是文件编码时间,具体的参数性能之类不做具体解释,有兴趣的请自行查阅。我们就说这种视频文件在设计使用上的便捷之处和突出的优势。


2
GIF文件

当 你打开视频文件开启循环播放并静音后,视频文件看起来就是GIF,只不过WEBM相较于GIF来说,品质更高,文件体积更小。有这两点显著的优点,在网页 设计中,作为网页首屏大视野动态元素来说,没有比既能够得到高质量的视频输出,文件体积还更小,不会延迟网页加载更让设计师开心的了,具体比较方法请戳 http://www.iefans.net/dongtai-tupian-geshi-webm-qudai-gif/

说 到这里,或许你要问怎么样才能得到WEBM格式的文件呢?一般我们制作视频文件都会使用到ADOBE家族中的两款软件(After Effects和Premiere Pro),当然在制作GIF的时候,大多设计师也会用到photoshop来转换帧速率及控制文件大小,当然photoshop也会有文件大小的限制,一 般文件过大,在导入视频帧到图层的时候会被限制在500。在使用Affter Effects或者Premiere Pro导出视频文件时,或许你会发现,并没有WEBM这种格式选项,因此就需要用到WEBM转换工具,http://video.online- convert.com/convert-to-webm(线上转换),但文件大小超过100MB就会收费。


3
SVG+代码

当然了,除了以上两种方式之外,在网页设计还会用到的一种方式是使用代码对素材的运动路径加以编辑,具体方法是通过矢量编辑软件生成SVG格式文件,使用代码对SVG路径文件加以控制,能够实现手写的表现效果。请戳:

LIX

http://lixpen.com/




在使用这种方法制作SVG文件的时候需要注意,如果你使用的是Illustrator矢量软件,那么在使用路径时,一定是描边路径,而不能使用填充,并且描边路径只能使用居中对齐描边,不然是无法使用代码加以编辑的。


4
webGL

https://www.batmanarkhamknight.com/en_US/batmobile

webGL 是一种新兴的网络技术,实现方式是基于3D建模文件在服务器上存储,通过浏览器中的解析模型文件,生成Mesh网格模型,显示在场景中。需要说明的是,这 次验证的模型文件是通过平面建模的方式获取模型文件,也就是说模型本身是由多种小的三角面片或者矩形面片形成,类似的软件有3Dmax、maya等,也就 是所谓的平面建模,而还有一种建模方式是曲面建模,能否使用webGL技术在网页中使用有待验证,这里使用到的技术原理是顶点和面索引之间的关系,因此和 模型联系起来也就很容易理解平面建模的点线面构成模型了。


以上每一种动效使用方式各有其特点,在使用的过程中需要自行斟酌,考虑文件大小,加载浏览流畅度,用户使用移动流量大小等。文章有说明不当的地方,希望您提出并指正,帮助我一起成长。通过本文的阅读希望能够帮助到您,谢谢。


-----

作者微博:@CHUNIE-俊

编辑:Eric


【优设投稿:2650232288@qq.com】

友情链接