CSS，JS，SMIL动画制作优缺点

首页> 缘震优势

缘震优势

2016-11-14 15:28:24

网页设计师通常会使用CSS，JS，SMIL这三种工具制作动画。但是问题来了，这三种工具到底哪一件工具能够最大程度的展示动画风采呢？当然不可否认，每种工具都有自身的优点和缺点。也正是因为如此，才有必要根据具体的网页设计要求比较这三种工具从而做出有见识的决定。

今天上海网站建设润滋小编根据自身工作经验写一篇关于这三种工具优缺点的文章，希望能够帮助网页设计师理解到底哪种工具是最佳的制作动画的工具。

在开始分析这几个工具前，先了解下SVG。SVG也就是可缩放矢量图形，它是基于XML矢量图片格式制作二维图片的。SVG规格是由W3C制定的公开标准。

现在，我们就分别了解这3种工具

1. CSS

CSS是制作几乎所有动画最好的选择之一。尤其CSS动画比它的同行SMIL动画在移动端可缩放矢量图形效果要好。不过，CSS也有其自身的局限性，尤其是结合SVG一起使用时，CSS不足以驾驭所有的SVG属性。这种情况下，网页设计师别无选择，只能使用SMIL或者JS。

2. SMIL

SMIL即同步多媒体继承语言，是W3C推荐的可拓展标记语言，用来描述多媒体演示。SMIL负责定义标记包括布局，视觉转化，动画，时间多媒体插嵌等。它允许展示各种媒体项目例如文字，图片，视频，音频链接到其他SMIL演示上。SMIL标记使用XML语言编写的。

SMIL动画与JS和CSS比，主要优势在于当SVG以图片形式嵌入时，SMIL动画都会保留。

SMIL可以非常成功的驾驭那些CSS无法驾驭的属性。例如现有路径数据属性。然而， IE任何版本都不支持SMIL。此外，在相同的SMIL元素中使用多个动画有时候会显得笨重，尤其是包含多个转换的时候。

3. JavaScript

如果现有SVG动画库能有效渗入，JS可以实现简易动画。JS有利于帮助设计师更好的管理动画。然而，JS也有一个较为显著的缺点，当SVG以图片形式嵌入时，JS动画也无法实现保存。

网站如何正确使用面包屑导航？

当网站的子页面分类较多的情况下，一般都会选择使用面包屑导航作为页面的辅助和补充，有效帮助用户在网站中快速找到返回的路径，尤其体现在电商网站上，运用最为广泛，用户可以在众多产品类型中确定自己的位置以及找到目标产品，在一定程度上提高了用户体验。

　　网站使用面包屑导航虽然有它的优势所在，但并不是所有的页面都适合使用，毕竟它不能在网站上占据主导地位，以免造成对用户的误导，那么，网站应如何正确使用面包屑导航呢？

　　首先，上海网站建设在设置面包屑导航的关键词是一定要统一，每一个主目录和子页关键词都要精简且唯一，存在辨别性，这样能让用户在浏览网站或者电商购物网站中购买商品时产生疑问，且对自己的当前位置一目了然。同时，所有的分类面包屑的关键词都不能存在有歧义的词现象，避免重复性。譬如淘宝网的面包屑导航，每一个分类都清晰明了。

　　网站如何正确使用面包屑导航？

　　其次，认识分类少则不使用面包屑的误区。有些网站认为子页内容分类少，就没必要使用面包屑，其实这是一种错误的观念，千选网络认为，页面中只要有两个以上都分类页面，都有必要使用，毕竟用户在点击层级页面时总会有返回上级页面的需要，且在没有记住每个页面相关内容时，很容易忘记上级页面内容是什么，因此每次要靠返回按钮进行操作的话会更加麻烦一些，使用面包屑导航则可对当前页定位，帮助用户回到各层级页面。

　　网站如何正确使用面包屑导航？

　　再者，则是做好主导航与面包屑导航之间的区分，主导航始终承载整个网站的主导地位，而面包屑导航则是起辅助作用，因此用户在辨识面包屑导航时应起到更加精准的作用，而不是重复主导航已经存在的栏目分类，又或者说用户在点击主导航时会犹豫面包屑导航对其产生的干扰，否则面包屑就是去了本该有得价值和意义。

　　最后，在设计面包屑导航时无论分类是否复杂，但都要尽可能的精简层级，对产品分类或者概括要综合言简，避免太多太细的分类让用户浏览时容易疲劳，当然，这样的面包屑也有利于网站优化，容易被搜索引擎抓取，同时对提高用户体验有一定的帮助。

　　面包屑导航对于每一个网站来说，并非必须品，但却是精品，最常见的是在电商网站中，有它的存在就像给用户装上了另一个指示灯，帮助用户在网站上找到浏览的轨迹并让他们的需求快速得到满足。但前提是使用面包屑一定要注意正确的方法。