页面动效能否拯救扁平设计？(附工具推荐).pdfVIP

页面动效能否拯救扁平设计？（附工具推荐） 作为一个网页设计师，我们需要努力让我们的技术与技巧与时俱进。我们不用追随每一个时代潮 流（比如长投影），但是我们的确需要随着网络的发展与成熟，不断学习并提高我们的技巧。 网页设计产业最近开始火热的新发展之一便是动效，越来越多的公司在他们的应用和网站中放入动 效以取悦用户，从竞争对手中脱颖而出以及提升产品的可用性。 动效需求如此之高的另一个原因在于网页扁平化的潮流。 扁平化设计整体来说是挺不错的，而且使 得人们寻求新的方式来改善它为数不多的问题。 扁平化设计 的一些小问题 现如今，越来越多的公司接受最小化的“扁平设计”美学。网站之间开始缺乏品牌化差异，看起来都 差不多了。这使得设计师开始寻求其它方式让网站变得引人入胜，或令用户感到兴奋。 此时动效闪亮登场。动效如同盐之于薯条；没有它，它们有点冷漠、缺乏风味。让你设计中的不同 元素动起来，你就可以添加一点令人兴奋的要素，也可以通过具有创意且有帮助性的动效来取悦 用户。 扁平化设计中的另外一个问题就是用户与网站或应用交互的时候，有可能会失去他们所处位置的 概念。当按钮看起来不再像是个按钮，其他东西也看起来逐渐趋同，用户会开始搞不清楚在他们点 击那些元素之后，到底会发生什么。 我们可以通过为不同状态（如悬停或点击）的按钮设计不同的动画效果，来解决这个问题，比 如Colin Garven的提交按钮： 最后，我想阐述的一个问题是如何告知用户发生了变化。现在，很多现代网络应用都会使用诸 如AngularJs以及Node.js这样强大的工具来建 立“单页面、实时更新”的应用。想想Gmail：不用刷新 页面就可以获取新邮件，当有人给你发新邮件的时候，它自己就会弹出来了。 如果页面发生了改变或加载了新内容，而用户没有获得那些通知或者明确的提醒，这可就成问题了 。如果页面已经保存了，那么我们就需要看到什么，以告诉我们这个应用正在工作，它在后台保存 了我们的工作。 动效就是当不同事件发生时，用来提醒用户的绝佳方式。 比如说，你有一张登记了下一次聚会或者会议的名单。每当有新人登记，你就使用node.js实时将其 添加到名单上，这样他们就不用刷新页面。很好，这对用户来说很有帮助。然而人们要怎么知道有 新人登记了呢？ 我们需要的只是一个小小的动效，让人们看到有个人，登记了。从页面顶端抛下来一个小小的通知 信封如何？或者让这个新人的名字淡入进名单，并把他的名字高亮以区别出他是新登记的？ 所有这些都是微妙的效果，但是这确实就是说得过去的产品和那些真正令用户喜悦的产品之间的 区别。 网络正在走向成熟 还记得IE6和网景（Netscape）吗？还记得我们要担心是否每个人都开启了JavaScript，以及要用 表格来为网页布局的日子吗？ 我们已经走过了漫长的道路，我们有了强大的HT ML 5支持、CSS 3还有响应式设计，它们的组合可 以为动起来的网页提供惊人的选择。 CSS3动效 现在，所有的主流浏览器都支持大部分乃至全部的W3C建议的标准CSS 3特性。作为设计师，这给 了我们巨大的潜力去创建简单而引人注目的动效，让生活气息进入静态页面。 Transitions CSS过渡给你在两种不同状态之间创建简单过渡的能力。比如说你有一个简单的按钮，你想要在鼠 标悬停于其上的时候，改变颜色并让它稍稍向下一点，此时使用css过渡就是绝佳选择。 Keyframe动效 关键帧是CSS 3特性中的强大功能，可以让你创建自定义动效序列。它允许你控制开始时间、过渡 方式、持续时间、延迟、在持续时间中重复多少次、动效方向等等等等。你甚至可以在同一个页面 元素中使用多个动效。 SVG图像 “成熟网络”的超赞新功能之一就是SVG图像。我们终于有能在不同尺寸和分辨率的屏幕上高质量自 由缩放的图像了。不仅如此，SVG比PNG图像更为 强大，因为你可以使用CSS和JS使之产生交 互性。这使得我们可以创建令人印象深刻的动效，而以前我们只能用GIF或者Flash来完成这些事情 。 看看 这个动画gif，已经使用CSS和SVG重建了： 动效地址：http://codepen.io/bleepbloop/pen/Kkdzq SVG动效真正有用的一点是创建可动的表格和图表，并可以缩放到任意尺寸。看看这个使 用JSFiddle的简单例子： 观看地址：/roemer/rgMYP/ SVG的可能性几乎是无止境的！ HT ML 5画布（Canvas） 另外一项令人激动的技术，是所有浏览器已经支持许久的HT