UI动效设计能让用户体验更加舒适顺畅,一直都非常受设计师欢迎。但是如何做出可交付能落地的动效,却成了很多人不得不面对的难题。本系列的动效设计合作指南由交互设计师+前端工程师撰写而成,帮你做出好用能用的动效设计。
“我们的产品需要来点动效”“好啊好啊”设计稿产出后…前端:“什么?这里为什么也要加动效?”设计:“什么?这里为什么不能实现?”%&¥#@%*&¥既然你诚心诚意的发问了,那就大发慈悲的告诉你!
为了防止设计被破坏, 为了守护前端的尊严; 贯彻美与真实的鱼和熊掌不能兼得,可爱又迷人的交互设计师 @砥七 与 前端工程师 @照澄,决定联合写一系列动效设计合作指南~~ 就是这样,喵!
首先,万事起源都会有一个触发点。那么动效的触发点是基于产品不断更新迭代而产生的高级需求。在产品设计中,UI动效设计使用户在使用产品时能够更加舒适、顺畅,在不经意之间还能给用户创造小惊喜,让用户感受到产品的温度和调性。
前期,设计师通过动效案例的归纳及分析,将动效所能呈现表达出的情绪程度划分为三个层次——舒适、愉悦及惊喜。本次主要在舒适层次上对产品体验进行优化。
那么舒适的体验感受是怎样的?
因此,在舒适层次的基础上,设定了以下动效设计目标:
那么怎么体现动效给产品带来了舒适的体验呢,让我们来看一个小蜜场景里的实际例子:
用户在与小蜜对话时,发出一句话后,会有一个简短的等待时间(技术OS:请求发出后等待响应的时间),然后获得小蜜回答的内容。
之前这段等待时间的处理方式是,首先是 “正在输入…”,然后等请求响应结果返回时再替换掉原来的提示文本。如下图:
在这个过程中,小蜜的加载气泡会突然出现,加载完毕后再突变成语聊气泡。动效需要解决的是气泡前后变化的连贯性,元素之间变化的有序性。
对应的动效处理:
最终动效设计如下图:
我们可以感知到的变化有:
– 加载状态转变为话术
– 语聊气泡的伸展
这么前后对比,果然看起来舒服了不少呢。那工程师是怎么高度还原实现动效的呢?
前端工程师是这么实现的:
1. 设计校验评估
2. 合作流程约定
设计师采用 Principle 提供动效设计稿,关于 Principle 更多的了解可以戳这篇:Principle: 做动效,选对软件很重要(http://www.jianshu.com/p/48b871a681a0)
使用 Principle 的优点,同时也是对开发友好的地方有:
简单来说是一款动效版的 Sketch,设计和前端合作起来的沟通成本就降低了很多。
3. 面向技术的检查
虽说前端对动效的支持越来越好了,但是现实很骨感,浏览器更新换代也不是那么快的,所以兼容考虑和性能检测是做动效之前必备的准备工作。
以小蜜语聊气泡为例,我们来说一说前端是怎样将设计稿落地成代码展现的~
绘制静止态
将静态气泡先用 HTML+CSS 绘制出来,代码如下:
<div class="chat-bubble"> <div class="card-loading"> <span class="card-loading-circle"></span> <span class="card-loading-circle"></span> <span class="card-loading-circle"></span> </div></div>.chat-bubble { display: inline-block; max-width: 300px; padding: 8px 15px; margin: 15px 10px 5px; line-height: 30px; min-height: 30px; min-width: 40px; background-color: #FFF; border-radius: 20px 20px 20px 4px; overflow: hidden;}.card-loading { width: 100%; height: 100%; margin: 0 auto;}.card-loading-circle { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 1px; background-color: #E1E4E6;}
形变拆解
1. 加载提示语变成动画,且三个圆点有节奏的弹跳,弹到最下时,会变扁一些,如下图:
2. 语聊内容出现时,语聊有从无到有的透明度变化
编写动画
拼装组合
1. 加载动效圆点动画(SCSS)
@keyframes bubbleLoadingAni { 0% { transform: translateY(0) rotateX(0); } 25% { transform: translateY(130%) rotateX(40deg); } 50% { transform: translateY(0) rotateX(0); } 75% { transform: translateY(-130%); } 100% { transform: translateY(0); }}@mixin loadingItem($num) { $waitTime: (-1 + $num) * 0.25; animation-delay: #{$waitTime}s;}@for $i from 1 to 50 { .card-loading-circle:nth-child(#{$i}) { @include loadingItem($i); }}
2. 气泡从左到右展开
@keyframes bubble-up-from-left { 0% { opacity: 0; color: rgba(0, 0, 0, 0); } 100% { opacity: 1; color: rgba(0, 0, 0, 1); }}.bubble-up-from-left { transform-origin: 0 50%; animation: bubble-up-from-left 260ms cubic-bezier(.42, 0, 1, 1) both;}
最终的 Demo 效果可以通过 CodePen 查看:https://codepen.io/zchen9/pen/evLaML
沟通机制
相互理解
即时反馈
欢迎关注作者的微信公众号:「37点2度体验」
【网页设计 原创文章 投稿邮箱:yuanhttp://www.yinxi.net/】
================明星栏目推荐================
优优教程网: yinxi.net 是巅云旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。
设计导航:国内人气最高的设计网址导航,设计师必备:http://www.yinxi.net/