動效的基本常識

02-07

原文：https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc

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

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

研究了15年的界面動效後，我總結出了12個使用動效提升產品體驗可用性的機會點，我將其稱之為「十二條動效體驗原則」。這些原則能夠以無限的創新方式互相堆疊組合。

我將這篇「宣言」分為五個部分：

順便，如果你想要我在你的會議上發表演講、為你的團隊提供工作坊的現場指導，請前往這裡。如果你希望在你的城市參加相關課程，請前往這裡。如果你想找我做項目諮詢，可以去這裡。郵件訂閱「可用性與動效」的相關文章，請前往這裡。

界面動畫不是你想的那樣

因為界面動效經常被設計師理解成「界面動畫」——然而並不是——我覺得進入十二條原則之前有必要提供一些背景信息。

「界面動畫」很容易被設計師想像成某種增強愉悅體驗的東西，自身並不具備什麼價值。繼而「界面動畫」常常被當做用戶體驗的拖油瓶，像化妝中的口紅一樣，通常作為最後一步點綴。

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

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

動畫是關於工具的。理論或原則是關於想法的實施運用，能夠指導工具的使用，可以為設計師提供槓桿和機會點。

「界面動畫」事實上是更高等級的設計展現形式：表達界面元素在即時和非即時事件下的行為動作。

首先很重要的一點是，要區分「狀態」和「行為」。用戶體驗中，狀態是靜態的，作為設計上的補充屬性；而行為是基於時效和動態的。舉個例子，一個元素能夠被遮罩，這個遮罩可以是一種狀態，也可以是一種行為。如果是行為，那麼動效就可以加入，幫助提升可用性。

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

區分這兩個概念很重要。

即時交互也可以被理解成「直接操作」，因為這種用戶與界面元素的交互是直接而同時的。非即時交互通常在用戶操作之後才發生，並且在過渡完成之前，都不允許用戶進行其他交互。

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

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

可預期

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

連續性

連續性即關乎用戶流程的順暢，也關乎用戶體驗的統一。連續性是整個用戶體驗的連續性，既包含場景/頁面之內的連續性，也包含場景/頁面之間的連續性。

描述性

描述指的是通過用戶體驗的線性事件，所構造出來的時空框架。可以理解成相互連接並貫穿整個用戶體驗的一系列關鍵時間與事件。

關聯性

關聯指的是界面元素之間的時空和等級表現，這些都能夠幫助用戶理解和決策。

Tyler Waye 說過，「理論……是功能的基礎前提和規則，而功能能夠產生很多的技術手段。無論變數，這些要素都不會改變」。所以我想要再次強調，原則與設計無關。

想像一種等級結構，理論在頂端，下面是技術，再下面是屬性，最底部是值。

手段可以被認為是理論的無限制執行，我認為類似於「風格」。

屬性是用戶創造技術的特定參數，可能有位置、透明度、比例、角度、錨點、顏色寬度、形狀等。

值是實際的隨時間變化而變化的數值，以此創造我們所謂的「動畫」。

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

——

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

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

未經允許請勿轉載。