品牌细节中的动效和一些低成本的实现方式
除了不断提升产品的用户体验之外，意想不到的菜单也可能会对人们对你品牌的感受或记忆印象深刻。对于正在工作的产品也是如此- 获得正确的的品牌基因。用Jared M. Spool给我的话来解释这个道理，这句话一直在影响着我做设计的过程：
你期望你的酒店房间有基本的东西，比方卫生纸，床单和毛巾。你不会感谢这家酒店，也不会因为这件事推荐你的朋友来这家酒店 - 但如果他们没有满足这些基本需求，你就会很烦恼。相同的，你可能会对登记入住时服务人员的热烈欢迎，免费洗浴用品等额外奢侈品或着墙上漂亮的艺术品感到满足和感激......但是如果你没有获得这些额外的东西，你也不一定会感到失望，因为你并没有期望他们 - 但你可能更有可能退回或转移到其他酒店。
满足人们的基本期望会让他们满意，但是让人感到愉悦是产品体验的更高追求。两者都非常重要。
首先，作为前提
为了本文的目的，我先假设你已经掌握了基本知识，你知道你的产品用户需要什么？它用起来简单吗？存不存在bug？当你可以肯定这些问题之后，就已经准备好专注于可以提升品牌体验的方法，并且让您的受众满意。
没有任何方法是适合所有解决方案的解决方案
本文探讨了一些可以尝试提升数字品牌和网站以及产品体验的方法，并且给它们增加魅力值。这些额外的细节和彩蛋，可以带来更难忘的用户体验。
动效设计
随着各类开发工具的更新迭代，我们可以用CSS动画和JavaScript来做非常多的事情。可能性几乎是无限的！产品中的动效也是非常常见的一种。关键也需要融入足够多的动画细节，让结果变得有趣，充满魅力值，并保证不会去分散用户的注意力。
在加载的时候尝试对关键元素进行动画处理。简单的淡入淡出可以作为引入内容的有效方式，加上一些微妙的细节。在让用户注意关键元素的时候非常有用。保证时机，加上一定的变化。在下面的例子中我们可以看到不同的元素是如何按顺序和谐地移动的; 横向或者纵向。尝试不同的方式可以获得更多逼真引人注目的流畅动效。
请注意，上面和下面的大多数案例都是以不同方向“擦除”颜色的块，构建新页面并显示内容。微妙地使用视差滚动也很有趣。您还可以将动画与更具戏剧性的内容配对，比如说视频：
聘请外包或着全职的前端开发人员来制作和微调这些额外的小细节并让你的动实现落地是一笔巨大的投资！
但是，作为本文中反复出现的主题，我会尝试提出简单，免费或着更少预算的替代方案。在这种情况下，动画，去看看由由Daniel Eden开发的Animate.css。她会让你的的网站设置非常容易。您只需按步骤进行操作。用最少的努力，你会创造出惊人的效果来。
<p class=”animated fadeInLeft”>Hello</p>
例如，上面的内容会使单词“Hello”淡入，从左向右移动。下面是几个简单的例子，需要几分钟的时间来完成：
如果您想要更多控制，可以关注译者（Jadon7）后续关于CSS相关的文章。或者访问Awwwards，看看有什么创新的动态效果。
对于它的价值：我个人在几个月前才学会了CSS动画。如果你了解CSS代码相关的知识，你可能不会觉得太困难，并且有大量资源可以帮助你。我的第一次尝试是Club of the Waves （下文）
视觉设计师的思考：当你在考虑如何通过大量学习去而仅仅产出一个DEMO文件的时候，为什么不把精力投资在如何去实现落地这个想法上呢？我觉得设计师更应该是一个愿意吧想法落地的人群，并且把他们的细节调整的深入人心。
小细节
除了细节丰富的页面加载动画之外，像悬停状态这样简单的事情可以让用户感到愉快。产品中的微交互和细节表现可以对用户体验产生重大影响。只需一行CSS，就可以通过从一种颜色淡入到另一种颜色，或者从一个位置到另一个位置平稳地过度，而不是默认的生硬的状态更改，使悬停状态更“美观”。下面是有和没有简单的CSS转换的按钮悬停状态：
transition: all .5s ease;
将上述代码复制到你的CSS当中，并且查看接下来会发生什么。然后尝试使用不同的悬停状态，比如颜色，宽度，高度，填充和不透明度，浏览最终得到的结果。点击链接查看更多效果和CSS动画。
不同的应用案例
情感化元素不应该去分散用户的注意力; 例如，谷歌在平衡功能和情感化方面做得非常出色。而且他也因因为此而闻名，他们不时用一个“动画标注”替代他们的标志，并且仅仅展示一天。有时它是一个插图，有时是一个动画，甚至是一个简单的游戏！除了有趣之外，情感化还有助于纪念周年纪念活动或特殊节日，有助于教育、娱乐或着通知搜索结果。
谷歌其他的一些菜单：尝试谷歌搜索：“ Do a barrel roll”，看看会发生什么！或者搜索：“ Atari breakout ”，然后点击图片。也可以尝试：“ Anagram ”，“ Askew”，“ Zerg rush ”或“Flip a coin”。
品牌吉祥物
为了保持与品牌的乐趣，在合适的情况下尝试让品牌吉祥物做一些有趣的小动作。让他们充分的“活过来“
Freddie品牌的MailChimp是吉祥物的最佳例子之一。他们通过丰富多彩的动画将Freddie整合到他们的产品中，比如下面的两个，用于发送电子邮件和安排活动
从几年前开始，在体验MailChimp产品的时候我最喜欢的功能之一。在登录时 - 不像您所期望的那样简单地显示标志- 在每次访问时，Freddie都会有一个包含不同信息的演讲泡泡。大多数情况下，都会让交互变得更加有趣，有时会链接到有趣的外部内容或YouTube视频。我实际上很喜欢登录并看到他们精心为我准备的东西，而我告诉其他人我是多么高兴能够拥有这种有趣的产品体验。
关于MailChimp：对于这个品牌的吉祥物Freddie来说，还有很多他的惊人之处。他有他自己的漫画，并且也公开露面，并且被制作成了非常多的周边。这所有一切促使她成为一个强大的品牌！
让沉闷的时间变得有趣
这是任何一个产品都需要考虑的部分 - 所有的内容都需要时间来加载。这会让用户感到沮丧。用户是不耐烦的。而设计应该做一些事情减轻用户等待的焦灼感，让加载时间不那么令人沮丧。
Hipmunk就是一个非常好的例子。他们的品牌吉祥物是一个可爱的花栗鼠。有了这个可爱的吉祥物，用户会乐在其中！他们的产品的性质意味着你需要花费大量时间去等待检索结果 - 用在航班，酒店和汽车上。不同的产品搜索功能有不同的动画版本的吉祥物，比如下面的航班。
显然，除了给吉祥物一个加载动画之外，一个成熟的产品情感化的动效并不仅限于此，他可能出现在logo上、ICON、插画等等各种细节之上
迪斯尼和环球主题公园的等待线是一个很好的比喻。排队可能长达2个小时，但两家公司都做了很棒的工作，创造了一种环境，即使是等待的一条线也变得非常有趣味。当然，做这一切的目的就是为了让等待沮丧的过程变得愉悦
如果你不是百万美元的创业公司，没有一支庞大的产品团队，而且也没有太多时间，或者你没有一个职业的动效设计师，那么不用担心。有很多很酷的、免费的GIF图像库。试试这个，这个或这个。
复活节彩蛋
使用一些意想不到的功能作为彩蛋。
接下来这些真的只是为了好玩！并非产品中的所有操作都需要提供功能。只要在不分散用户注意力的同时带来愉悦感体验就可以。例如，在一个404页面增加一些动效也能带来非常多好玩的惊喜
上面的第2到第5个手机屏幕显示了来自同一应用的另外两个示例。一个常见的iOS交互是向下滑动以重新加载。看上面的左数第二个屏幕 - 当你向下滑动 - 除了预期的加载图标之外还有一个意想不到的虚线...如果你不停地向下滑动（这是一个非常异常的iOS交互），你最终会找到一只小蜜蜂（一只Swarm品牌的吉祥物）。
其他方式
本文仅探讨一些方法可以让你的品牌或产品获得更多生命力。除此之外你也可以尝试：
· 丢弃陈旧无聊的设计稿。尝试跟客户去交流，他们是人，而不是呆板的数据。每个人都会有他自己的个性。用你的尝试，号召性行为等等来尝试 让你的动画更加贴近真实需求，并且友善和实用。
· 有一个有趣，实用或简单有趣的404页面。
· 使用非无聊的头像或空状态或者个人资料的图片，并且给他们添加一定的动效
本文翻译来自 Medium
原作者：Andrew Couldwell
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
阿里动效设计师带你了解更多动效相关知识/软件技能/公开课程：
