β

深入浅出!交互+前端共同撰写的动效设计合作指南(一)

优设-UISDC 7 阅读

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 {
% {
 transform: translateY(0) rotateX(0);
 }
% {
 transform: translateY(130%) rotateX(40deg);
 }
% {
 transform: translateY(0) rotateX(0);
 }
% {
 transform: translateY(-130%);
 }
% {
 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 {
% {
 opacity: 0;
 color: rgba(0, 0, 0, 0);
 }
% {
 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度体验」

「动效设计三步走」

  1. 先学会分析: 《动效丨七何分析法帮你全面分析界面动效》
  2. 动效设计方法: 《改善你的UX设计!值得参考的四个动效使用方法》
  3. 提升用户体验: 《5个小技巧,用动效提升界面的用户体验就这么简单》


【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================ 明星栏目推荐 ================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的 知识树专栏 。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航 :国内人气最高的设计网址导航,设计师必备: http://hao.uisdc.com

作者:优设-UISDC
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座,聊设计,找素材,尽在优设网

发表评论