[翻譯]ＵＸ中功能性動畫：什麼創造出好的過場（Transition）？
原文：https://uxplanet.org/functional-animation-in-ux-design-what-makes-a-good-transition-d6e7b4344e5e#.tddlqc6rx
功能性動畫（functional animation）是一種隱晦的動畫有著清楚的，邏輯性的目的。他減少認知的負載，阻止盲目的轉變，建立在空間上更好的記憶點。還有另外一件事，動畫把使用者介面變得栩栩如生。
以乘和除的方法，改變他們形狀或尺寸，這些移動(motion)可以讓表面彷彿活了起來。你應該使用功能性動畫平順地將使用者從在探索的情境，解釋元素排序在螢幕之間變化，帶到增強元素的階層順序(element hierarchy)。
成功的移動設計(motion design)擁有以下六種特徵：
1. 反應性（ Responsive）
視覺的回饋在ＵＩ設計中非常重要。之所以有用，因為他能喚起使用者認知上自然的期望。在現實中，按鈕控制著物件對我們的互動做回應，而這正是人們所預期事情是如何作用的。
使用者介面應該要迅速地回應使用者的輸入，精準地在使用者引發的位置，顯示出新的外觀與元素或互動之間的連結。在app中點擊，而且永遠知道什麼事情會發生，這種感覺很好。
2. 連結性(Associative)
將新產生的畫面與所產出元素或動作做結合。其連結性背後的邏輯是幫助使用者能夠理解那些在螢幕中剛發生的變化以及什麼讓他產生變化的。
底下你可以看到兩個選單例子的過場動畫。第一個選單的例子，出現在遠離觸發點的位置，這樣就斷開與輸入之間的關係。
第二個選單的例子，從觸碰點顯示出來，這將元素與觸碰點緊緊綁在一起。
另外一個例子是行動按鈕（action button），其功能改變在某些狀況下。“播放”和“暫停”按鈕可能是最普遍的例子在可轉換的按鈕中。改變播放按鈕到停止按鈕表現出兩個動作有被聯結，和按一個會讓另一個顯現。你應該在兩個狀態間做過場動畫，這樣可以看起來更順暢，沒有不連續的感覺。
3. 自然性(Natural)
避免太過驚喜的過場。每一個動作應該被自然界中的力所刺激。在真實世界中，一個物件加快或急煞是因為物體的重量和表面摩擦力。相同的，再好的介面設計當中，開始與結束並非立即發在。
底下你可以看到一個好的例子，使用者選擇在清單中的一個項目要把它放大到細節畫面。在擴張過程中，小張的卡依照弧形移動至目的地，同時擴張到大一點的卡。
4. 有意的(Intentional)
在對的時間，引導注意力到正確的點。移動必須是在使用者介面中，有著最高的重要性。不管是文字段落或是靜止的圖像都不能與其相比。一個好的過場可以幫助使用者到互動的下一個步驟。
第一次使用者無法預期這個互動將會發生什麼事，但適當的動畫可以幫助使用者專注和不會感到內容突然地轉變。
Mac作業系統中，當縮小視窗時，使用了功能性動畫。這動畫連結了第一個狀態與第二個狀態。
另外一個好的例子是 父子過場動畫（parent-to-child transition），使用者在清單中或是卡片的元素中選擇一個項目，而它放大到細節模式。這個互動可讓使用者維持在同樣的情境下。
5. 快速(Quick)
當元素從位置或狀態中移動，動作應該要夠快，才不會造成等待，但也要夠慢能讓過場動畫可以被理解。
不要把動畫做的太慢導致不需要的延遲和加長過程時間。
將很多元素的動作遲緩會加長過程中時間。
把動畫做快可以讓使用者不需要等到動畫結束。
保持簡短的過場，讓使用者可以時常的看到他們。保持動畫過程在300幀(300ms)或是以下。
6. 清晰(Clear)
過場動畫應該避免一次做太多。因為當數個項目需要移動到不同的方向或交叉路徑時，會造成使用者的困惑。
過場動畫應該要清楚，簡單，和一致。請記住，關於動畫，少即是多。所以我們應該僅注意動畫在實際事情上，為使用者做了什麼。
結論
最重要的事，移動（motion）不是隨機的。每一個移動後面都會有著它的目的。移動引導並專注著什麼是真正重要的，好讓你不會迷失。不管你的app是有趣好玩的，或是嚴肅直接的，使用移動的原則可以幫助你提供清楚與快速有共鳴的體驗。
留心設計。注意每一個細節是你成功製造人機互動容易使用的關鍵。
謝謝。
Originally published at babich.biz
