提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
这周的前几天,我们发布了Potluck的新版本,重要更新是在登录界面添加了当下最新和最有趣的新闻。
这次的设计过程与以往稍有不同。我们修改了Potluck的核心交互方式,不再是覆盖或者弹出式的展示新闻。取而代之的是我们根据iOS用户的操作习惯,采用动效的方式,让用户了解网站是怎样工作的。我们曾尝试过给网站添加一些动效,很不幸,取得的成效并不大。
在这次的设计过程中,我们使用了Angular.js和Framer.js,多亏了这两款工具才让我们的目标得以实现。我愿意分享在这次网站动效设计中的心得体会,希望能给做同样工作的你一些灵感。
为何需要动效?
Potluck最大的改变就是你的列表区总是最新的信息。上一个版本中,阅读过的新闻还会保留在列表区中,如果这些新闻有新的变化,它们又会弹到最上面来。这让列表区始终都是陈旧的信息,并且把最近的新闻都排挤在了下面。有时候没有新闻可看也比都是旧的新闻好。
为了达到保持新鲜感的列表区,当你点击一条新闻时,它会消失,并在右边展开。但原型被设计出来时,我们发现点击后消失会让人觉得困惑,它到底去哪了。动效似乎也没有起到什么作用。
用这种方式给人的感觉就好像东西一直在消失。但我们想要表现的是这里有新东西冒出来了。该怎么办呢?
我们构思了一些消除这种感觉的草图。最方便的就是把列表区当作一个物理容器,就像把一件物品从容器中拿出来展示。这样的过程更像是“打开”的方式,而不是“消失”。这样就能保证用户的焦点是放在内容上的,同时列表区也会有更准确的表现形式。
在展示最终效果前,我要说一些背后的故事。。。
为什么在网页上做动效这么难?
为网站应用添加有意义的动效如此困难有两点原因。
第一,在成为产品之前,设计原型和充实动效总是让人难以捉摸。Keynote或许是一个不错的开始,但交互和转换却显得不真实,而且很难设计非线性的原型。AE和Flash有同样的缺点,你始终是在静止的屏幕前设计,不能体会网站那种可滚动和交互的感觉。用HTML/CSS设计还不错,但要手工编写以及在两个不同的地方(JS和CSS)整合代码确实让人生厌。
要实现网络应用的产品动效也是很复杂的。常规的在服务器端加载动画数据是不可能的。客户端应用程序也行不通,它需要加入Javascript代码库中与业务逻辑相关的代码(工程师对此毫无兴趣)。而且,CSS动画在状态转变,插入和删除方面都表现得不好,如你不能做显示属性的动画。
基于这两点,我们总是把动效放到最后或者仅仅在设计的最后一步作为装饰。但新的工具将动效和设计完美的结合在一起。这还是我们第一次在开始设计的时候考虑动效,心中有了想法,然后画出草图,一旦有了线框图,我们就开始测试动效转换是否起作用,反复试验,最终形成有真实感的视觉体系。
怎样利用Framer.js创建原型
Framer已经成为我们心中十分实用的动效原型框架了,但如果手动建立原型,那么比老式的HTML/CSS也快不了多少。Framer有一个Photoshop导出器,能将PSD分层文件转换成原型。但在Branch上,我们主要使用Sketch来作模型制作工具。这两者之间就有了矛盾。
让一切变得美好的是Ale Muñoz开发的Framer-Sketch这个插件。把插件装入工程并运行起来,突然发现仅用一个快捷键就能将Sketch分层文件导出成Framer格式的文件。那就意味着我们能够做一个网站或应用的复制品,然后尝试各种疯狂的交互方式。当一件事变得简单而且有趣时,你自然而然地就想继续做下去:)
先从在Sketch中建立一个代表网站的简单线框图开始,然后导出到Framer工程中,接下来就是在列表区中打开和关闭的动画的测试。和没有动效设计经验的人交流,让我觉得工作的时候没有压力,也教会了我很多东西。比如:当很多东西需要移动的时候“没有必要同时移动所有部分”,细微的延迟能起很大的作用。同样地,“保持平滑”让动画看上去顺畅自然。多亏了Framer,我才能够在产品上线前将所有的细节做的这么好。
我们发现了一些小技巧,比如:小卡片和大卡片拥有不同的属性和内容,所以在转换时看上去不是那么完美。但只要他们各自被限制在自己的容器中,而且动画足够快的话,就会造成一种看上去一样的假象。请看下面的慢镜头动画:
测试让我们排除那些在使用中容易分散人注意力或者根本就是无意义的点子。我们就觉得把卡片机械性地移动到我的聊天列表中有点太疯狂了。
用Framer构建原型让我们体会到动效在浏览器中真实运行的感觉。我们最终得到的并不是一个假的动画模型,而是一个真正能反应我们的滚动和点击的网页。真切的感觉让我们更有信心去拓展这些想法并实现他们。
怎么利用Angular让想法变成现实
另外一个工具就是Angular,没有它也不可能实现我们的产品。这款由Google维护的神奇的前端框架,我们使用它开发了整个Potluck应用程序。
Angular对设计师来说是很友好的,不用写任何的Javascript,只要根据元素的状态添加不同的类就可以了。在元素转换时,添加一系列的类即可,十分简单。
这是我们做的卡片飞出列表区的动画。
开发过程中发现的一些关于CSS动画的提示:
最近的更新中,Angular对数据层的动画也进行了支持扩展,使用ng_animate指示符即可。这就意味着添加或者删除对象以及视图之间的切换动画都将变得简单。Angular做了这些繁杂的事才让它们成为可能(好奇,请戳这看视频)。
比如,我们在进入聊天区和离开聊天区之间使用ng_animate指示符。这种情况下,Angular很智能地将聊天区的DOM元素同时留在屏幕上,给其中一个附加进入动画,另一个附加离开动画。而且能够根据CSS动画的持续时间,推断何时将离开的元素从DOM中移除。
(注:此图应该是有所损坏,原作是此图。)
接下来是什么呢?
这是我们第一次郑重的决定为我们的网页应用程序添加动效:仅仅是列表区这么一个小范围里。在以后的时间里,我们还将逐渐完善核心交互的方式,给网站剩下的部分也添加上转换动效。挑战依然存在,浏览器对动画的支持还不够好,在非webkit引擎的浏览器中的表现也是大的问题。
这些改变不仅是增加了Potluck的易用性,也增加了趣味性。动效成为现实让我们很兴奋,也更期待网站出现更多的动效。
去Potluck.it上看看并检测一下这篇文章中所讲述的列表区的漂亮动效吧。
怎样才能让动效和界面融为一体?我最喜欢的就是iCloud.com,我觉得它总是走在网络应用潮流的前端。来Twitter上和@gem_ray交流交流吧!
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册