這篇文章由江南大學(xué)設(shè)計學(xué)院研究生孫啟玉翻譯，主要談手機(jī)App中的轉(zhuǎn)場動效，強(qiáng)烈推薦原型設(shè)計師閱讀學(xué)習(xí)，體驗下動效的神奇妙用。

好文推薦：
還等什么！是時候來了解動態(tài)設(shè)計啦
超贊！高大上的動效設(shè)計方法及流程總結(jié)

設(shè)計師們喜歡追求細(xì)節(jié)的完美

他們把大量時間花在了像素級按鈕，表單樣式，設(shè)置類型以及如何讓那些圖標(biāo)變得漂亮和精致。

…但是關(guān)于如何設(shè)計銜接卻很少有人考慮。你點下按鈕表單就…出現(xiàn)了？你滑動刪除一個項目它就那么消失了?那也忒怪異忒不自然了。在真實世界里幾乎沒有效果，這好像是一個bug。

哦，好吧寶貝。你必須記住——它需要"滑入"。

怎樣？多快？反彈？漸入？靜態(tài)設(shè)計圖體現(xiàn)不出切換過程。

當(dāng)提到動畫和可愛的交互的時候，人們總是濫用"趣味性"這個詞。對這些人來說很炫酷，但是你猜怎么著？動效也可以有功能性作用，而不僅僅是個裝飾性的細(xì)節(jié)。

動效有一個被忽視了的維度——時間！一個看不見的組織將空間合在一起，要明白這點你不必精通數(shù)學(xué)。

讓我們看一些簡單的想法：緩沖

在傳統(tǒng)動效里，分解一個物體是如何從A點移動到B點的。它增加了運動的偏向并決定了其余幀如何排列。以這些25幀差值（中間點13幀在不同的位置）舉例：

看！你剛剛了解了緩沖。電腦很蠢并且只會線性的填補(bǔ)空白，但一位優(yōu)秀的動效設(shè)計師要花費大量的工作來讓它們更加完美。

動效都是關(guān)于時間。你可以設(shè)置不同的間距來獲得不同的結(jié)果。但這已足夠，這不是一個動效教程，重要的是讓你思考時間和空間的語言。

一些關(guān)于界面場景中動效的想法

正如我之前所說，動效有場景，它有助于用戶理解信息如何流動。

在列表中插入一個條目

比如說你正在盯著一張活動的列表并且你想讓它實現(xiàn)數(shù)據(jù)填充。如果你把它放在電腦上，它會看起來像這樣：

是不是有點太粗糙了…

讓它變得平滑只需要幾幀動效就好了。以上關(guān)于列表的動效是否給了你一些啟發(fā)？

要是添加一個新選項，列表首先要為選項騰出空間然后再由來自某個地方的新選項填進(jìn)去。要是想少點沖突，可通過漸進(jìn)和漸出狀態(tài)來緩和改變。它感覺更加自然，因為我們有空間的常識——模擬真實生活中物理運動規(guī)律。

再多一些：

深入到列表項中

有滑動進(jìn)入到一個項目的典型默認(rèn)模式。這是一個經(jīng)常使用的模式，但卻沒有太大的意義：

滑動的方向除了展示一個線性的視圖之外，沒有給你任何真正有用的線索。

增加更多細(xì)節(jié)，內(nèi)嵌到界面中如何？

如果操作目標(biāo)是深入并關(guān)注列表項，我們甚至可以將其他列表隱藏在一個視圖之內(nèi)。

面包屑導(dǎo)航是一種很容易迷失的方法。

而保持內(nèi)嵌的一個優(yōu)點無須二級頁面。你可以取消分層導(dǎo)航的顯示，因為用戶已經(jīng)看到了他們是如何達(dá)到那里的。

當(dāng)然，上面的想法并不適用于所有情況——但是這個觀點會引出更優(yōu)雅的解決方案來連接界面。

一個應(yīng)用案例——Thinglist

Thinglist，我和Kyle Bragger先生共同開發(fā)的一款Elepath產(chǎn)品，有一些相當(dāng)有趣的過渡界面融入其中。上面的例子演示了我們是如何展現(xiàn)新的漸入特征。

你應(yīng)該研究的過渡界面案例

不再一一列舉了…在天平的一端，有許多漂亮卻極其靜態(tài)的界面，在另一端則是被巧妙的動畫過度裝飾了的界面。

我馬上能列舉出的三個案例：

Clear：非常美觀的手勢驅(qū)動的動畫。

Willcall：一致的，動態(tài)的節(jié)奏，狀態(tài)間沒有生硬的過渡，愉快的使用體驗。

Facebook：不是非常的一致，但是對于吸引注意有一些不錯的解決方案。特別是…深入展示全屏照片的燈箱視圖和彈出的評論輸入視圖。

很多人不曾考慮過界面的時間維度，對我來說這太不可思議了，動效可以提供這么多的信息！難道是創(chuàng)建原型的工具對大多數(shù)設(shè)計師來說太復(fù)雜了？

原文地址：medium
譯者：孫啟玉

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】
 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊：網(wǎng)頁設(shè)計師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計指南http://hao.uisdc.com/ps/。
設(shè)計微博：擁有粉絲量63萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：