动效是种浪漫

1、初见

动效顾名思义就是动画效果。网页中为何须要动效呢？简单来讲就是为了有趣。

若是把网页和用户的关系比作正在恋爱的情侣，很显然网页的 UI 是颜值，而动效在我看来则是情侣之间的小浪漫。可能和颜值比起来，浪漫彷佛并非那么的重要，可是若是感情中没有了浪漫，是否是会以为少了点什么呢？

初次和女神见面的时候，咱们老是会精心的打扮，可是若是咱们能顺便带上本身的幽默感，是否是会更加让女神心动呢？在网站的初期咱们都会特别的关注视觉，与此同时若是还能加上一点细致的动效则会更加的吸引人。

起点国际初版登陆页面的视觉设计很是好看，夜空高清的大图给人一种大气沉稳的感受。可是老板说这并不能直观的表达出我们是和书打交道的网站。做为国内 IP 源头，咱们但愿用户可以在第一眼就知道咱们是干什么的，咱们的优点是什么，此时不断循环滚动的书封动效在这里就发挥了它极大的做用。

动效是一种网页和用户之间的浪漫。这种浪漫能够没有，但有必定是为了让用户更爽。而用户爽了就天然愿意为你的产品买单。若是个人这个假设成立，那么动效就变成了一道爱情题。和全部爱情问题同样，模仿必定是最简单的捷径。多向老司机学习把妹技巧和动效创意，下次在本身的实战当中就能够用到。

2、动效应有品味

有的妹子喜欢小鲜肉，有的妹子偏心大叔。做为浪漫制造者，咱们一定要提早弄清楚妹子的口味。Apple 做为国际化一线公司选择了以下的动效风格。

第一次看到这个效果总体给个人感受像是一个舒缓而沉稳的大叔。而大叔给人的印象一般都会是安全感。安全感同时意味着 Apple 的产品信得过，值得你们购买，而这正是 Apple 的套路。

简单来讲动效的速度反应着一个网页的气质和品味，快的动效相对来讲会显得活泼可爱，慢一点的动效则会显得更加沉稳大气。

起点国际是一个面向海外的在线阅读平台，咱们但愿能给读者带来最全面、最精准、最高效更新及最便捷的体验。可是和 Apple 这个成熟大叔比起来，咱们只能算作一个小鲜肉。若是一个小鲜肉装成熟不免会给人油腻的感受。因此起点国际的动效总体感受是轻快愉悦的。你不会在总体上看到太多复杂的效果。可是你动一动，点一点就会发现咱们给你藏下的玫瑰。

3、动效应保有距离

在刚开始追女孩子的时候，咱们每每更但愿妹子们可以看到咱们的真诚和真心。若是一来你就送女孩珍珠和项链，我相信大多数女孩仍是容易被吓到的，而那些没有被吓跑的女孩，你后面要送什么？

因此前期我更推荐小而美的东西，这样既不会显得太突兀，也比较可以让人接受。固然也不是说我们不能玩儿点大的，在这节奏匆忙的互联网时代，你们什么妖魔鬼怪没有见过，但这得是在彼此创建足够多的信任以后才能够挑战的事情。

比如平时循规蹈矩的程序员男朋友，天还没亮就拉着女友的手，也无论妹子的起床气和疑问直接载到山顶。当太阳出来的那一刻我相信女孩会被融化。但若是这个男朋友换成就见过一次面的朋友。可能大多数人内心仍是拒绝的。

这也是起点国际初期并无选择加入太多酷炫的动效的缘由。固然还有一个缘由是为了和你们快点见面，咱们把须要花时间和精力研究的酷炫效果留在了后续的迭代当中。毕竟先让你们看到咱们，咱们才有机会给你们展示咱们其余方面的优势。太急于展示本身，反而会显得不尊重对方，保持人与人之间应有的距离，才能让彼此关系更长久。而这也说明动效是一件和浪漫同样须要花时间和心思才能完成的事情。

4、动效应贴心

请客的男生满天飞，入座的时候主动为女生搬椅子的帅哥却没有几个。既然咱们你们都作得同样，那么女生在选择的时候就只能看颜值了。因此细节此时就显得特别重要了。初次见面你送女生一支玫瑰，出门随身揣一包纸巾，或者在就餐的时候把女生喜欢吃的菜安排在她的容易夹到的位置。这些细节都是可以给你加分的项目。

起点国际的页面承载着很是丰富的内容，但这同时意味着我们的页面会相对较长，当用户想回到顶部的时候还得拖动滚动条，这明显比较的麻烦。咱们的作法就是在页面滚动到超过一屏的时候显示一个返回顶部的按钮，点击以后页面滚回到顶部按钮消失。按钮出现和消失，都是采用和页面滚动一致的滑动效果，既起到提醒用户这里有一个按钮的功能，又不会让这个按钮出现的时候显得太过生硬。

酷炫的动效固然能够吸引人，可是咱们每每容易进入为了酷炫而酷炫的坑，反而忽略掉细节。咱们一般会在按钮 hover 的时候给到一个动效，也能把这个效果作得很赞。可是按钮可不止「:hover」这一种状态，「:active」、「:visited」、「:disabled」、「:focus」这些也一样是咱们须要考虑的细节。

有的人可能会以为考虑到这么的极致是否是一件值得的事。咱们喜欢一我的的时候，不会考虑作这些事情是否是值得的，即便明知道对方可能并不必定会看到。可是，若是对方看到了呢？这是什么？这就叫贴心。贴心这种东西，有的时候咱们感受不到，可是只要对方感觉到了就会放大其它全部的好。而这也是网页中的动效重要的地方。咱们为别人考虑的越多，别人天然也会记住咱们的好，这是再简单不过的道理了。

5、动效应特别

老司机的套路千千万，咱们能够学习的可不止一种。这里我拿网页中常见的下拉菜单举例。咱们要作的事也很简单，就是用户在点击按钮以前让下拉菜单不可见 ( display:none ) ，移入按钮可点区域的时候显示 ( display:block ) ，这样咱们功能的需求就实现了。但是这还不够，女友让你去倒杯水，你就傻傻的给她倒了一杯水放到了她的面前。这样并不会让妹子开心，由于这样一点也不浪漫。

女生让你倒杯水有多是大姨妈来了很差意思告诉你，此刻你应该拿出平时准备好的姜茶给她泡上。待姜茶稍微凉下来以后，你再端过去，抱住她喂她。还要伪装这茶有点烫，给她吹一吹，关心的说：「宝贝，当心烫。」这看似戏剧化的倒水，虽然给人感受有点做，但这相对来讲会比较的浪漫。

咱们的下拉菜单又未尝不能浪漫？在显示下拉的时候加一点透明度，是否是就柔和了？让下拉出现的时候再有一个上下的偏移，这样是否是就丰富了？再大胆一点咱们让子元素出来的时候有一个前后顺序的延迟，这样是否是就更有层次了？若是想要更酷炫，甚至能够考虑一些 3D 的效果。

CSS 强大的地方在于咱们对几乎全部的DOM属性都有操做的能力。时间，透明度，大小，位置，颜色，速度，甚至是 3D 等等咱们都是能够尝试的。甚至组合控制不一样的属性，还会出现意想不到的效果。

别人送花，你也送花，这怎么能体现出本身的优点？要让女神在众多追求中看到本身，就不要送花，咱们送口红，这样会不会显得本身很特别，颇有品味？

固然这种特别的尝试都是须要符合接下来要讲的用户预期的。你女友可能真的只是口渴这么简单，你给她搞这么一出浪漫，那明显就是戏演过了。女神可能喜欢的是少女粉色号的口红，你却送了一只姨妈红，这就弄巧成拙了。

6、动效应符合预期

你和你的女友在繁华的街道逛街，忽然你华丽转身，对着你的女友唱起了《Marry Me》，而后单膝下跪，从胸口掏出了一个精致的盒子。此时大家周围已经围满了人，你的女友也激动得眼睛有些湿润。你打开盒子，里面什么都没有「Tada！ 愚人节快乐！」我想此刻你女友心中必定有一万匹羊驼狂奔。

再转回到咱们网页的场景当中，相信不少人和我同样，原本打算下载一个起点国际的阅读 APP，好不容易进入到了一个下载的界面，超大的下载按钮让我看到了但愿，我点了下去。哐当！一个有声的全屏视频广告炸了出来。我急忙关掉。而后再点一次下载下来一个安装文件。好不容易安装好打开一开，XX是一个流氓软件。

以上两个都是属于不符合用户预期的行为，这很容易引发用户的不适，甚至是反感。由于说得严重一点，这其实叫作欺骗。让人喜欢你很难，但让人讨厌你是垂手可得的事。一旦用户感受本身上当了，你以前全部的努力就都有可能白费。

如何将这种效果衍生到咱们的网页中呢？起点国际在不少鼠标交互的地方，都统一采用的是鼠标移入的时候添加阴影，按下的时候变小的方式。设想一下桌上放了一块 QQ糖咱们准备用手去捏它。当咱们手移过去的时候会挡住光，因此会看到阴影，捏下去的时候，由于用了劲因此糖被捏扁了。这是否是比较符合咱们对按下这个动做的预期？冰冷的网页应尽可能用动效去贴近咱们的生活，下降用户的理解成本，减小用户在你页面效果上的迟疑。而这也是拟物为何始终是培养用户习惯的首选设计风格的缘由。

固然这只是万千场景中的一种，根据咱们预设的场景不一样，咱们的动效也须要相应的调整。你也能够设想咱们鼠标点击的过程是一个在平静湖面扔石头的场景，当鼠标按下，按钮出现一个逐渐扩散的阴影，以模拟湖面涟漪的效果。这也是很是不错的一个选择。

7、动效应始终如一

这个比较像咱们和女友聊天。前一秒大家诗词歌赋人生哲学聊得正嗨。忽然你话锋急转聊起了昨天来你家的某个亲戚很让人讨厌。这种聊天方式我相信没有几我的可以招架的住。话题和话题之间应该有一种起承转合的联系，这样才不容易把天聊死，这在咱们动效当中也是一样的道理。

点击按钮和弹出弹窗这两个动做其实自己是没有太大联系的。咱们点击按钮能够触发的事件太多了，弹出弹窗只是其中一种而已。但咱们的需求又是如此。因此咱们建议用动效去拉近它们之间的关系。人与人相处有一个相似的道理，我重复你的动做就是为了和你拉近关系。女神给你眨了一下眼睛，你天然会想到赶忙给女神也抛个媚眼。路人给了你一个微笑，你天然也是会回敬一个微笑。重复让本来陌生的两我的有了联系，也可让两个没有关系的操做有联系。

以前我解释过起点国际对于按下这个动做的处理方式是鼠标按下变小移开变大，延续到弹窗咱们让弹窗顺着按钮变大。由于弹窗出来的时候是由小变大，那么关闭的时候天然就想到由大变小。这样咱们的动效就只有由大到小，和由小到大一种交互形式，用户的认知成本也大大下降。而且重复是一个能够节约开发成本的事，一箭双雕何乐而不为呢？

从一开始咱们几乎不知道怎么作动效到后来知识储备愈来愈多，咱们老是会但愿可以小小的炫耀一下。可是咱们知识的来源每每是不一样的网站或者不一样的大神。咱们把他们的优点通通的拿过来放到咱们的网站中，就容易在咱们本身的网页上出现百花争艳的状态。局部看美极了，但总体用起来老是以为怪怪的。混搭可能很惊艳但很难高级。

重复能够达到统一总体风格的目的，若是有的地方不能作到重复，咱们也尽可能应采用速度一致或风格相近的动效，以求达到总体的一致性。而这种一致性带来的温馨感，可能比酷炫带来的惊喜，更容易留住咱们的用户。

8、动效不该制造麻烦

当咱们和女友准备出门的时候，女生每每都会精心的打扮一下。「亲爱的你看我是穿这条粉色裙子好呢？仍是这条蓝色的裙子好呢？」一般这样的问题，对于一个彻底不懂打扮的 “程序猿” 来讲简直就是噩梦。你说选粉色吧「不行，这个颜色太嫩了，不适合我。」你说选蓝色吧「这个颜色和个人皮肤不搭。」而后大家就在这个问题上不断的重复，轮回。最后你女友会在生气的妥协当中陪你出门，但是这一切你也无能为力。

在咱们的网页中若是同一时间给用户的选择越多，用户一个都不想选的概率就越大。因此咱们要作的是在交互上尽可能减小选择，在动效上弱化选择给用户带来的恐慌。

起点国际首页 Banner 上的按钮默认是不显示的，用户鼠标移入到 Banner 区域，咱们认为用户有了切屏的意愿，此时再显示咱们的按钮，而且按钮出现的时候咱们用动效让右侧按钮比左侧按钮先出现。这样即契合咱们第六点讲到的符合用户预期，也避免了视觉上同时出现的选择给用户带来的焦虑感。完美！

在一块儿

咱们花那么多的时间，相识，相知，中间绞尽脑汁的彼此套路，最终目的都是但愿对方感觉到咱们的用心而后和咱们在一块儿。透过动效，咱们但愿用户也可以感觉到咱们的真诚与善意，不求能与用户天长地久，只求用户能在咱们这个书的城堡中有一场浪漫的旅程。

本文做者：Ziven27

欢迎转载但请注明做者、出处和连接。