The story background

“We need some action on our product.” “Yes, yes.”

After the design is produced…

Front end: “What? Why do we need kinetic effects here?” Design: “What? Why can’t it be done here?”

% & * & % $# @ $

Since you sincerely ask the question, it will be a mercy to tell you!

To prevent the design from being destroyed, to protect the dignity of the front end; To realize that beauty and authenticity can’t have it both ways, cute and charming interaction designer @Strop Qi and front-end engineer @Zhaocheng decided to jointly write a series of interactive design guidelines for motion effects.

The designer thinks so

First of all, everything has a trigger point. Then the trigger point of dynamic efficiency is based on the advanced demand generated by the continuous updating and iteration of the product. In product design, UI dynamic effect design enables users to be more comfortable and smooth when using products, and inadvertently creates small surprises for users, allowing users to feel the temperature and tonality of products.

In the early stage, through the induction and analysis of dynamic effect cases, the designer divided the emotions expressed by dynamic effect into three levels — comfort, pleasure and surprise. This time, the product experience is optimized on the level of comfort.

So what does it feel like to be comfortable?

  • First, the motion effect should be soothing, making the user feel friendly and controllable.

  • Secondly, it should be in line with understanding and cognition, so that users will not feel confused.

  • Thirdly, it should be light and simple, so that users do not feel cluttered or pompous.

Therefore, on the basis of comfort level, the following dynamic effect design objectives are set:

  • Fluency: Elements change back and forth coherently and perceptibly

  • Consistency: Elements come in and change identically

  • Convergence: Element changes are simple and orderly

So how to reflect the dynamic effect to bring comfortable experience to the product, let’s look at a small honey scene in the actual chestnut:

When the user talks with Xiaomi, after sending a sentence, there will be a short waiting time (TECHNICAL OS: waiting time for a response after the request is sent), and then get the content of xiaomi’s reply.

The previous wait time was handled by first saying “entering…” And then replace the original prompt text when the result of the request response is returned. The diagram below:

In this process, the small honey loading bubble will suddenly appear, after loading the mutation idiom chat bubble. Dynamic effect needs to solve the continuity of changes before and after bubbles, and the order of changes between elements.

Corresponding dynamic effect treatment:

  • Added loading dynamic effect

  • Load the state to the talker change

  • Talk about the extension of bubbles

The final dynamic effect design is shown as follows:

The changes we can perceive are:

– Load status changed to talk

  • The dot jumps up and down to simulate the state being input, and the amplitude of the jump makes the user’s perception of the state more obvious.

  • When turning into speech, the dot gradually disappears and the speech gradually appears. Changes of elements before and after are sequential and perceptible.


– Talk about bubble stretching

  • The bubbles extend and enlarge horizontally from the original state, the bubbles change has continuity, and the feeling is more smooth.

So before and after comparison, as expected looks comfortable a lot. So how does the engineer achieve high degree of reduction in dynamic efficiency?

Front end engineers do it this way

The preparatory work

– Design calibration evaluation

  • Is design necessary: does it help users understand the content? Does it interrupt user operations?

  • Whether dynamic effects can improve the experience: increased efficiency, emotional feedback

  • Whether the cost of dynamic development is reasonable: front-end function support; Browser/client compatibility, see the technical check section below for details; Performance guarantee

-Cooperation process agreement

Stylist USES the Principle to provide dynamic effect design draft, know more about Principle can stamp this article: Principle: do the dynamic effect, choose is very important for software (http://www.jianshu.com/p/48b871a681a0)

The advantages of using Principle, as well as being development-friendly, are:

  • Window live preview

  • Example Export a MOV or GIF file

  • Get the animation value manually

To put it simply, Sketch is a dynamic version, which reduces the communication cost between design and front-end cooperation.

– Technology-oriented inspection


Although front-end support for motion is getting better and better, the reality is that browsers don’t update very quickly, so compatibility considerations and performance testing are necessary to prepare for motion.


  • Compatibility check: Caniuse can see if the browser supports CSS Animation or CSS Transition.

  • Performance check: CsStriggers can learn which animation properties are currently in use that do not cause browser redraw and page stutters.

The implementation process

Take small honey talk bubble as an example, let’s talk about how the front end is to show the design draft into code ~

– Draw the rest state

First draw the static bubble with HTML+CSS, the code is as follows:

<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;

}

– Deformable disassembly

1. The loading prompt becomes animation, and the three dots bounce rhythmically. When bouncing to the bottom, they will become flat, as shown below:

  • Transform: translateY handles the position change of the dot from top to bottom

  • Rotate transform: rotateX handles the flattening of a dot as it falls to the bottom

2. When the content of chat appears, the transparency of chat changes from nothing to something

  • Opacity: Changes in the transparency of the bubble itself

  • Rgba (…) : Modify font transparency changes

  • Transform-origin: left center: Expands the bubble from the left center

– Write animations

1. Load the bouncing curvature of the animation, using the standard linear curvature: animation-timing-function: linear

2. The number of animation cycles is infinite, using animation-rotund-count: infinite

3. Animation -delay: ${waitTime}s

– Assemble and assemble

1. Loading dynamic effect dot animation (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. Bubbles expand from left to right


@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;

}

The final Demo effect by CodePen view: https://codepen.io/zchen9/pen/evLaML

conclusion

Communication mechanism

  • The designer needs a design draft that describes the dynamic elements in the design language and provides detailed parameters.

  • Development engineers need to evaluate whether dynamic efficiency can be realized according to dynamic efficiency testing standards, and discuss the feasibility and realization methods of dynamic efficiency together.

To understand each other

  • Development engineers need to understand the original intention and ideas of the design, better understand the design meaning of the design draft, will be more motivated to achieve it.

  • For designers, it is more helpful to understand the implementation ideas of development and the environmental limitations of the implementation of dynamic effect design.

Immediate feedback

  • Scheme adjustment: In the actual development process, adjust the content that the dynamic effect scheme can achieve.

  • Precipitation and summary: introspect the way of cooperation, improve the communication mechanism, and improve the evaluation efficiency.

This article was co-written by @Stroqi and @Zhaocheng. If there is any similarity, you plagiarized it.)