深入淺出！交互+前端共同撰寫的動效設(shè)計合作指南

UI動效設(shè)計能讓用戶體驗更加舒適順暢，一直都非常受設(shè)計師歡迎。但是如何做出可交付能落地的動效，卻成了很多人不得不面對的難題。本系列的動效設(shè)計合作指南由交互設(shè)計師+前端工程師撰寫而成，幫你做出好用能用的動效設(shè)計。

故事背景

“我們的產(chǎn)品需要來點動效”
“好啊好啊”設(shè)計稿產(chǎn)出后...前端：“什么？這里為什么也要加動效？”
設(shè)計：“什么？這里為什么不能實現(xiàn)？”%&￥#@%*&￥既然你誠心誠意的發(fā)問了，那就大發(fā)慈悲的告訴你！

為了防止設(shè)計被破壞， 為了守護前端的尊嚴(yán)； 貫徹美與真實的魚和熊掌不能兼得，可愛又迷人的交互設(shè)計師?@砥七?與 前端工程師?@照澄，決定聯(lián)合寫一系列動效設(shè)計合作指南~~ 就是這樣，喵！

設(shè)計師是這么想的

首先，萬事起源都會有一個觸發(fā)點。那么動效的觸發(fā)點是基于產(chǎn)品不斷更新迭代而產(chǎn)生的高級需求。在產(chǎn)品設(shè)計中，UI動效設(shè)計使用戶在使用產(chǎn)品時能夠更加舒適、順暢，在不經(jīng)意之間還能給用戶創(chuàng)造小驚喜，讓用戶感受到產(chǎn)品的溫度和調(diào)性。

前期，設(shè)計師通過動效案例的歸納及分析，將動效所能呈現(xiàn)表達出的情緒程度劃分為三個層次——舒適、愉悅及驚喜。本次主要在舒適層次上對產(chǎn)品體驗進行優(yōu)化。

那么舒適的體驗感受是怎樣的？

• 首先，動效應(yīng)該是舒緩的，讓用戶感受到元件的親切和可控。
• 其次，應(yīng)該是符合理解認(rèn)知的，讓用戶不會感到疑惑。
• 再次，應(yīng)該是輕簡的，讓用戶不會覺得雜亂或浮夸。

因此，在舒適層次的基礎(chǔ)上，設(shè)定了以下動效設(shè)計目標(biāo)：

• 流暢性：元素前后變化連貫且可感知。
• 一致性：元素出入場變化一致。
• 收斂性：元素變化簡單有序。

那么怎么體現(xiàn)動效給產(chǎn)品帶來了舒適的體驗?zāi)?，讓我們來看一個小蜜場景里的實際例子：

用戶在與小蜜對話時，發(fā)出一句話后，會有一個簡短的等待時間（技術(shù)OS：請求發(fā)出后等待響應(yīng)的時間），然后獲得小蜜回答的內(nèi)容。

之前這段等待時間的處理方式是，首先是 “正在輸入...”，然后等請求響應(yīng)結(jié)果返回時再替換掉原來的提示文本。如下圖：

在這個過程中，小蜜的加載氣泡會突然出現(xiàn)，加載完畢后再突變成語聊氣泡。動效需要解決的是氣泡前后變化的連貫性，元素之間變化的有序性。

對應(yīng)的動效處理：

• 新增加載動效
• 加載狀態(tài)到語聊話術(shù)的變化
• 語聊氣泡的伸展

最終動效設(shè)計如下圖：

我們可以感知到的變化有：

- 加載狀態(tài)轉(zhuǎn)變?yōu)樵捫g(shù)

• 圓點上下跳動，模擬正在輸入的狀態(tài)，跳動的幅度使用戶對狀態(tài)的感知更明顯。
• 轉(zhuǎn)變?yōu)樵捫g(shù)時，圓點先漸變消失，話術(shù)再漸變出現(xiàn)。前后元素變化有順序，可感知。

- 語聊氣泡的伸展

• 氣泡從原始狀態(tài)橫向伸展放大，氣泡變化有延續(xù)性，感受更加順暢。

這么前后對比，果然看起來舒服了不少呢。那工程師是怎么高度還原實現(xiàn)動效的呢？

前端工程師是這么實現(xiàn)的：

準(zhǔn)備工作

1. 設(shè)計校驗評估

• 設(shè)計是否有必要：是否能夠幫助用戶理解內(nèi)容？是否會打斷用戶的操作行為？
• 動效是否能夠帶來體驗提升：效率提升，情感反饋
• 動效開發(fā)成本是否合理：前端功能支持；瀏覽器 / 客戶端兼容，詳情查看下面技術(shù)檢查部分；性能保證

2. 合作流程約定

設(shè)計師采用 Principle 提供動效設(shè)計稿，關(guān)于 Principle 更多的了解可以戳這篇：Principle: 做動效，選對軟件很重要（http://www.jianshu.com/p/48b871a681a0）

使用 Principle 的優(yōu)點，同時也是對開發(fā)友好的地方有：

• 窗口實時預(yù)覽
• 導(dǎo)出mov、gif
• 手動獲取動畫數(shù)值

簡單來說是一款動效版的 Sketch，設(shè)計和前端合作起來的溝通成本就降低了很多。

3. 面向技術(shù)的檢查

雖說前端對動效的支持越來越好了，但是現(xiàn)實很骨感，瀏覽器更新?lián)Q代也不是那么快的，所以兼容考慮和性能檢測是做動效之前必備的準(zhǔn)備工作。

• 兼容檢測：caniuse 可以查看瀏覽器支持使用 CSS Animation 或 CSS Transition 的情況。
• 性能檢測：csstriggers 可以了解當(dāng)前使用的哪些動畫屬性不會造成瀏覽器重繪導(dǎo)致頁面卡頓。

實現(xiàn)過程

以小蜜語聊氣泡為例，我們來說一說前端是怎樣將設(shè)計稿落地成代碼展現(xiàn)的~

繪制靜止態(tài)

將靜態(tài)氣泡先用 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. 加載提示語變成動畫，且三個圓點有節(jié)奏的彈跳，彈到最下時，會變扁一些，如下圖：

• 位移 transform: translateY 處理圓點從上到下的位置變化
• 旋轉(zhuǎn) transform: rotateX 處理圓點在落到最下方時，變扁的變化

2. 語聊內(nèi)容出現(xiàn)時，語聊有從無到有的透明度變化

• 透明度 opacity：氣泡本身的透明度變化
• 字體顏色 color: rgba(...)：修改字體透明度變化
• 坐標(biāo)原點 transform-origin: left center ：從左側(cè)中間展開氣泡

編寫動畫

• 加載動畫的彈跳曲率，用了標(biāo)準(zhǔn)的線性曲率：animation-timing-function: linear
• 動畫次數(shù)為無限循環(huán)，使用了 animation-iteration-count: infinite
• ?三個圓點依次開始運動，運用到 animation-delay: ${waitTime}s

拼裝組合

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

總結(jié)

溝通機制

• 設(shè)計師需要將動效元素通過設(shè)計語言描述且提供詳細參數(shù)的設(shè)計稿。
• 開發(fā)工程師需要依據(jù)動效檢驗標(biāo)準(zhǔn)來評估動效是否可實現(xiàn)，共同討論動效可實現(xiàn)性以及實現(xiàn)方式。

相互理解

• 開發(fā)工程師需要理解設(shè)計的初衷與思路，更好地理解設(shè)計稿的設(shè)計意義，才會更有動力原汁原味地實現(xiàn)它。
• 對于設(shè)計師來說，理解開發(fā)的實現(xiàn)思路以及其實現(xiàn)的環(huán)境局限性更有助于動效設(shè)計的順利落地。

即時反饋

• 方案調(diào)整：在實際開發(fā)過程中，調(diào)整動效方案可實現(xiàn)的內(nèi)容。
• 沉淀總結(jié)：自省合作方式，完善溝通機制，提升評估效率。

歡迎關(guān)注作者的微信公眾號：「37點2度體驗」

「動效設(shè)計三步走」

1. 先學(xué)會分析：《動效丨七何分析法幫你全面分析界面動效》
2. 動效設(shè)計方法：《改善你的UX設(shè)計！值得參考的四個動效使用方法》
3. 提升用戶體驗：《5個小技巧，用動效提升界面的用戶體驗就這么簡單》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計導(dǎo)航：國內(nèi)人氣最高的設(shè)計網(wǎng)址導(dǎo)航，設(shè)計師必備：http://hao.uisdc.com