本文將表述我對這個問題的回答——“作為體驗或界面設(shè)計師，如何得知什么時候、什么地方用動效來提升可用性？”

過去的5年中，我通過自己的工作坊和課程，在四十多個國家，為幾百個頂尖品牌提供了體驗和界面的設(shè)計指導(dǎo)。

研究了15年的界面動效后，我總結(jié)出了12個使用動效提升產(chǎn)品體驗可用性的機(jī)會點(diǎn)，我將其稱之為“十二條動效體驗原則”。這些原則能夠以無限的創(chuàng)新方式互相堆疊組合。

我將這篇“宣言”分為五個部分：

1. 什么是界面動畫——不是你想的那樣
2. 即時vs非即時交互
3. 動效提升可用性的四種方式
4. 理論、手段、屬性和值
5. 十二條動效體驗原則

1、界面動畫不是你想的那樣

因為界面動效經(jīng)常被設(shè)計師理解成“界面動畫”——然而并不是——我覺得進(jìn)入十二條原則之前有必要提供一些背景信息。

“界面動畫”很容易被設(shè)計師想象成某種增強(qiáng)愉悅體驗的東西，自身并不具備什么價值。繼而“界面動畫”常常被當(dāng)做用戶體驗的拖油瓶，像化妝中的口紅一樣，通常作為最后一步點(diǎn)綴。

另一方面，界面動效理所當(dāng)然地被當(dāng)做迪士尼動畫的某一種分支，對于這點(diǎn)我曾在《UI Animation Principles?—?Disney is Dead》中發(fā)表過反對觀點(diǎn)。

這篇“宣言”中我將告訴你，“界面動畫”之于“十二條動效體驗原則”，就好比“施工”之于“建筑”。這句話的意思是，一棟樓房需要在物理上被真正建造才存在（需要施工），而決定該建造什么的來自基礎(chǔ)理論。

動畫是關(guān)于工具的。理論或原則是關(guān)于想法的實施運(yùn)用，能夠指導(dǎo)工具的使用，可以為設(shè)計師提供杠桿和機(jī)會點(diǎn)。

“界面動畫”事實上是更高等級的設(shè)計展現(xiàn)形式：表達(dá)界面元素在即時和非即時事件下的行為動作。

2、即時vs非即時交互

首先很重要的一點(diǎn)是，要區(qū)分“狀態(tài)”和“行為”。用戶體驗中，狀態(tài)是靜態(tài)的，作為設(shè)計上的補(bǔ)充屬性；而行為是基于時效和動態(tài)的。舉個例子，一個元素能夠被遮罩，這個遮罩可以是一種狀態(tài)，也可以是一種行為。如果是行為，那么動效就可以加入，幫助提升可用性。

除此之外，所有的交互行為，從是時效性上，可以被分為即時發(fā)生和非即時發(fā)生。即時表示用戶是直接與界面元素進(jìn)行互動的；非即時表示界面元素的動作是在互動之后的：作為過渡，在用戶操作之后才出現(xiàn)。

區(qū)分這兩個概念很重要。

即時交互也可以被理解成“直接操作”，因為這種用戶與界面元素的交互是直接而同時的。非即時交互通常在用戶操作之后才發(fā)生，并且在過渡完成之前，都不允許用戶進(jìn)行其他交互。

上述澄清能夠幫助大家更好地融入十二條動效體驗原則的世界觀。

3、動效提升可用性的四種方式

下面將介紹用戶體驗時效動作提升可用性的四大支柱。

可預(yù)期

預(yù)期包含兩個方面——用戶如何感知界面元素是什么，以及界面元素如何動作。換種說法就是，作為設(shè)計師，我們想要減小用戶預(yù)期與實際體驗之間的差距。

連續(xù)性

連續(xù)性即關(guān)乎用戶流程的順暢，也關(guān)乎用戶體驗的統(tǒng)一。連續(xù)性是整個用戶體驗的連續(xù)性，既包含場景/頁面之內(nèi)的連續(xù)性，也包含場景/頁面之間的連續(xù)性。

描述性

描述指的是通過用戶體驗的線性事件，所構(gòu)造出來的時空框架?？梢岳斫獬上嗷ミB接并貫穿整個用戶體驗的一系列關(guān)鍵時間與事件。

關(guān)聯(lián)性

關(guān)聯(lián)指的是界面元素之間的時空和等級表現(xiàn)，這些都能夠幫助用戶理解和決策。

4、理論、手段、屬性和值

Tyler Waye 說過，“理論……是功能的基礎(chǔ)前提和規(guī)則，而功能能夠產(chǎn)生很多的技術(shù)手段。無論變數(shù)，這些要素都不會改變”。所以我想要再次強(qiáng)調(diào)，原則與設(shè)計無關(guān)。

想象一種等級結(jié)構(gòu)，理論在頂端，下面是技術(shù)，再下面是屬性，最底部是值。

手段可以被認(rèn)為是理論的無限制執(zhí)行，我認(rèn)為類似于“風(fēng)格”。

屬性是用戶創(chuàng)造技術(shù)的特定參數(shù)，可能有位置、透明度、比例、角度、錨點(diǎn)、顏色寬度、形狀等。

值是實際的隨時間變化而變化的數(shù)值，以此創(chuàng)造我們所謂的“動畫”。

到此為止，用一個例子解釋，你可以說一個界面動畫基于模糊（Obscuration）的理論原則，使用“毛玻璃”的手段，其模糊和透明度的屬性分別是25px和70%。

——

本文譯自《Creating Usability with Motion: The UX in Motion Manifesto》的前半部分。后半部分《十二條動效體驗原則》將詳細(xì)描述作者的結(jié)論和各種動效類型。

Z Yuhan：這篇文章真的超級難翻譯啊，原文的描繪非常細(xì)膩隱晦，大部分句子根本沒法直譯，只能理解后用中文的表達(dá)方式重新造句，幸好我的翻譯水平也有進(jìn)步啦～大家要是發(fā)現(xiàn)有什么問題，不論是翻譯還是錯字，歡迎評論我指正 : )

譯者：Z Yuhan

譯文地址：https://zhuanlan.zhihu.com/p/27676738?group_id=865286594767237120

本文由 @Z Yuhan 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。