生命和自然是一個很大的轉場效果。太陽徐徐升起標志一天開始然後緩緩落下標志白晝結束夜晚來臨。我們誕生於子宮起源於微小細胞，慢慢成長漸漸老化，直至死亡。
有時，當一件東西從一個狀態突然跳到另一個狀態，感覺上可能還行但就是不太對。
故意設計的比較慢的轉場效果感覺很糟。當設計一個應用、界面或者任意類型的結構化內容時，我們必須要確保當用戶抵達一個新頁面或新狀態時知道他們從哪裡來。從一個屏幕或一組內容到其他地方的轉場效果應該自然且應該在各種配置下的設備上進行測試以得到更寬泛的效果感受評估。轉場太快，可能令人有斷裂或跳躍感；太慢，用起來很絕望。
當討論到設計時，“轉場”這個詞通常會喚醒人們對於ppt或用廉價視頻編輯軟件做出來的自制電影的印象。但所謂轉場過渡不僅只是如此。
轉場讓我們在不同狀態間跳轉，一天好幾次。大多數時間，這些轉場效果是完全不可見的（他們應該就是這樣），直到他們被拿走了我們才認識到原來他們在那兒。本文討論了轉場效果以及完美設計的轉場效果通過傳達了一種控制感及便捷導航來增強用戶體驗的內容。同時也將討論為何不好的轉場效果會損害用戶體驗。
什麼是轉場過渡？
在定義上，轉場的意思是“某種形式或類型之間的變化，或者是這種變化的過程。”之前已提過，我們一直無意識地在做轉場變化，並且這些變化擴展了電腦界面。一個設計的好的轉場效果就像是告知了用戶他們用哪條路徑快速的從A點到了B點。
眾所周知，轉場在界面設計中很常見，但同時也在電影和產品設計中被使用到。在產品設計中，轉場由觸摸、移動或者對於產品的物理搬動而觸發；而在界面設計中，轉場由應用界面或內容之間的跳轉而觸發。轉場效果應該是可以給用戶提供他們究竟在界面之間處於哪個位置這一信息。
轉場的例子：
電影
在1971年的電影Willy Wonka & the Chocolate Factory的開場鏡頭裡，金票獲得者們為了一睹難以捉摸的Willy Wonka出現而聚集在神秘的工廠門外。
Frames from Willy Wonka & the Chocolate Factory （1971）
如鏡頭展現的，觀眾的視線從人群身後，穿過門，朝向工廠；另一台攝影機角度取的人群身後到工廠大門之間；我們的視線時而在Wonka身邊看著他一瘸一拐走在紅地毯上；時而從他身後看著他。盡管從攝影機角度上來說沒有可見的在這兩者之間的轉場效果，觀眾仍可以十分清楚地理解視線究竟位於何處。
觀眾是坐在他們舒服的沙發上看電影的然而他們仍有一種身臨其境的感覺。這是一種情緒上的轉場效果。
界面
如果你有一部iPad或者iPhone，拿起來點擊進入設定。輕擊菜單選項看一看屏幕如何從右至左以及從左至右地切換。滑動任一界面至底部看一看那個提示已到內容底部的輕微跳動。這些簡單的轉場效果小心謹慎地傳達給用戶他們在操作系統裡處於何種位置。只有緩慢播放這些轉場效果才能注意到位於狀態和狀態之間的這些微小細節。
iOS transition effect in slow motion from Lim Chee Aun on Vimeo.
盡管我們的視線不像是在電影中某一物理位置，操作系統仍通過轉場效果給用戶提供空間感。當用戶輕擊菜單按鈕時，屏幕向右切換展示下一步操作，或者向左切換展示之前的操作。
Google在windows系統上的chrome浏覽器展示了另外一種簡單轉場，具體可見如下視頻。當打開一個新的tab頁時，可以發現從左側會出現一個簡單動畫效果。而當關閉tab頁消失前又會有一個小動畫。
Android和iPhone上都可以使用的應用Path，充滿了各式各樣狀態之間的有趣轉場效果。
當應用打開時，用戶從啟動畫面通過一個快速翻頁效果跳到實際內容頁。點擊主菜單將彈出幾個菜單選項，關閉菜單後這些選項將彈回。這個細節告知用戶選項是從哪裡出來的，也許用戶並不一定會意識到，但這仍是整個用戶界面中的一個重要細節。
Path – Introducing Path 2 from Path on Vimeo.
應用scorekeeper有一個看起來非常簡單的界面。大色塊和直角邊帶來一種易用感——視覺設計也充分體現了這一點。但仔細看。該應用的轉場效果頗具美感。當一名選手在游戲中得分，該應用會在列表中更新排名，用一種絕妙的過渡效果將選手從原始排位移動到現有排位。
（需翻牆）
產品設計
恐怕在這裡又不得不用Apple舉個例子了。如果你曾買過一台iPhone，肯定會注意到它的包裝設計。不光滑薄片材質做成的緊湊包裝盒的每一個細節都設計到位。提起蓋子造成的真空效果表明你並不只是在打開密封，破壞盒子，蓋子緩慢被抬起的過程是揭示了設備的閃亮登場。這個開盒的動作可謂是一個物理轉場。
Mission Transition from Mark Cossey on Vimeo.
盡管不是一個很明顯的轉場，MacBook的電源燈在睡眠狀態下徐徐呼吸。這個轉場有意思在若隱若現的顯示方式模仿了沉睡者的呼吸節奏。之所以被認作一種轉場過渡是因為它從視覺上象征了一種狀態，這種狀態既不是開啟也不是關閉，而是介於兩者之間。
（需翻牆）
汽車
現代汽車充滿了各種引導駕駛員在各種狀態之間過渡的絕妙轉場效果。比如說，車前燈在關閉車門時亮起，扣上保險帶啟動引擎後漸漸熄滅。這個微妙的光線讓用戶實現了身份上在一個轉場之間從普通行人到駕駛員平滑轉換。
自然
當我坐在椅子上打這篇文章時，我可以從左至右的轉動頭。通過這個動作，我的視野轉換了。如果我想要看左邊的東西，我轉動頭——通過這個轉動過程可以抓住觸及視線的一切事物——直到視線停留在注意力中心。請觀看視頻中人體是如何從一個狀態轉換成另一個狀態的。
Stunt Poetry from Rishi Kaneria on Vimeo.
為什麼轉場如此重要？
我們作為設計師竭盡所能讓內容更容易找到、容易閱讀並且充滿藝術美感。而隨著科技進步、數據處理器越來越強大，人們用以閱讀內容的設備和系統將向前更進一步，我們將開發更新方式來展現這些內容。就像被迅速接納的觸摸操作，手勢正也變得越來越重要。正因如此，我們需要讓用戶在應用中擁有位置感，轉場在此之中會變得尤為重要。
現在大多數的頁面內容都被歸類為“頁”：點擊或者輕擊鏈接顯示了藏在鏈接之後的頁面。頁與頁之間的跳轉非常少見，我們已經習慣於這種內容展現方式。但設計師其實可以引入有用且漂亮的轉場效果到網頁中——比如通過應用jQuery ScrollTo——但這些轉場效果可能會由於如下理由有些簡陋難看，比如過慢的網速，大量的處理請求以及由JavaScript決定的效果速度。
轉場過渡的好案例
將轉場動畫充分融入到設計中有許多方法。接下來是一些建議：
* 避免在點擊、觸摸或者滑過操作中任何停頓。
硬件速度一直會是一個硬傷，但很高興芯片、處理器以及內存每秒都變得更快，所以測試你的代碼和加載時間以確保沒有延遲。
* 在真實環境裡測試。
沒有比在真實環境裡測試轉場更好的了——特別是設計移動產品，因為移動中的人花更少的時間和注意力在導航上。在超市裡或者火車上用原型進行測試，並觀察在壓力下轉場效果表現如何。
* 留心未來。不要重新改造輪子。
近來，我們用點擊、觸摸、滑過以及對話等各種方式與應用交互。然而，手勢將很有可能成為另一種操作內容的新方式，所以從現在起試著思考這個問題。如果人們將可以使用身體（而不是手指或鼠標）通過各種形式來控制屏幕，我們將不得不考慮時間、速度以及物理條件——也就是，手勢移動內容的速度需匹配內容本身移動的速度。設想一下盡全力投擲一個網球但結果球只移動了幾英尺的挫敗感。如果轉場的時間點設計的不夠理想用戶也將感受到同樣的挫敗感。總的來說，照搬操作系統的慣例總沒錯，因為與用戶熟悉的轉場樣式大相徑庭很容易導致困惑感和挫敗感的產生。所以，不要在設計新轉場效果上猶豫不決；維持標准樣式即可。
總結
好的轉場效果對於用戶來說應該是幾乎不可見的。轉場幫助用戶理解他們試圖要看到的以及他們從哪裡而來，這一切應該快速且流暢。延遲或停頓損害了整體用戶體驗並且暗示用戶可能出錯了。當UI播放仿佛患上運動病，早就習慣了的流暢頁面切換突然靜止了一到兩秒，用戶會以為遇到了錯誤。這是我們理應避免的轉場效果。
本文編譯自：@財布當月光西皮地上霜，原文地址。