超實用的動效設計入門小手冊

　　最近幾年UI設計領域最大的變化便是越來越強調用戶體驗設計，而在Web或者App中使用動效也就成了一大趨勢。這種趨勢是如此強烈，以至于我看到越來越多的應用中所使用的那些動效已經(jīng)不再是為了提升用戶體驗，而更多是為了強調動效本身了。

　　設計師 Pasquale D’Silva 在 Web Direction South 大會上曾這樣說過：好的動效應該是隱形的。(作為用戶的)你不應該注意到你正在看一個動效。

　　這是一個非常棒的動效設計建議，甚至可以說是原則。作為這些Web或者App的設計和開發(fā)者，在我們設計和開發(fā)動效之前，首先應該明確什么才是正確的動效：動效應該是以提高可用性為前提，并且以令人覺得自然，含蓄的方式提供有效用戶反饋的一種機制。

　　了解動效

　　優(yōu)秀的動效往往會被無視，而糟糕的動效卻迫使用戶去注意界面，而非內(nèi)容本身。用戶都是帶著明確的目的來使用你的網(wǎng)站或者App的：買一件東西、學習新的知識、發(fā)現(xiàn)新音樂、或者僅僅是尋找最近的吃飯地點。他們不會只為了把玩你精心設計的界面而來，實際上，用戶根本不在意界面設計而只關心能否在你這兒方便地達到他們的目的。優(yōu)秀的動效應該對用戶的點擊或手勢給予恰當?shù)姆答?，使用戶能夠非常方便地按照自己的意愿去掌控應用的行為，從而增強應用的使用體驗。

　　基本動效

　　我們平時在Web或App中看到的動效其實都是由一些最基本的動效組合而成的，這些基本動效包括：移動(Translate)，旋轉(Rotate)，縮放(Scale)。在一些動效設計工具的幫助下，一般你只需要設置它的起點和終點，并告訴它你想要什么類型的動效，設計工具便會根據(jù)你的這些設置去渲染出整個動效。

　　移動 — Translate

　　移動，顧名思義就是將一個物體從位置A移動到位置B，這是最常見的一種動效，像滑動，彈跳，振動這些動效中都能看到。

　　旋轉 – Rotate 通過改變物體的角度，產(chǎn)生旋轉的效果。在頁面加載，或點擊某個按鈕觸發(fā)一個較長時間操作時，經(jīng)常使用到的Loading效果或一些菜單圖標的變換都會使用旋轉動效。

　　縮放 – Scale 縮放在App應用中被廣泛地使用，如點擊一個App圖標，打開App全屏界面時，以及通過點擊一張縮略圖查看具體內(nèi)容時。

　　動效曲線自然界大部分物體的運動都不是線性的，而是按照物理規(guī)律呈曲線性運動的。通俗點來說，就是動效的響應變化與執(zhí)行動效的物體本身質量有關。優(yōu)秀的動效應該反映真實的物理現(xiàn)象，如果你想表現(xiàn)的對象是一個沉甸甸的物體，那么他們的起始動畫響應/參數(shù)的變化會比較慢。反之，物體如果是輕巧的，那么其起始動畫響應/參數(shù)的變化會比較快。

　　你也可以在easings.net中查看所有的動效曲線，獲取它們對應的CSS，JS代碼，并在你的項目中使用。

　　屬性變換

　　屬性變換是非常常見的一種動效。比如可以通過改變透明度來實現(xiàn)淡入/淡出效果等。同時你還可以改變對象的大小，顏色，位置等幾乎所有屬性來體現(xiàn)動畫效果。

　　注意下面這個動效的底部的菜單欄，當他的高度減小的同時，他的透明度也相應地降低，從而產(chǎn)生出一種折疊的效果。

　　組合動效

　　在大多數(shù)場景中，我們需要同時使用2種以上的動效，將它們有效地組合在一起，以達到更好的效果。另外你仍需要讓你的動效遵循普遍的物理規(guī)律，這樣才能使它們更容易被用戶接受。

　　動效不應該太慢

　　我認為理想的動效時長應該在0.5-1秒之間,當你設計淡入淡出，滑動，縮放等動效時都應將時長控制在這個范圍內(nèi)。如果動效時長設置得太短，會讓人看不清效果，甚至更糟的是給用戶造成壓迫感。反過來如果動效持續(xù)時間過長，又會使人感覺無聊，特別是當用戶在使用App的過程中，反復看到同一動效的時候。

　　動效的開發(fā)

　　很多設計人員往往會遇到這樣的困擾，他們看到的最終產(chǎn)品中出現(xiàn)的動效與他們在設計階段定義的有很大出入。那是因為，雖然作為設計師，可以定義非?？犰诺膭有В捎诩夹g或成本上的限制，有些動效往往由于開發(fā)代價過高而被擯棄了。所以作為設計師，你可能需要同時理解如何設計動效，以及動效背后所使用的技術。這會幫助我們在整個項目的設計階段就能作出明智的取舍，從而節(jié)省大量的開發(fā)成本。

　　動效制作工具

　　目前有一些非常流行的動效設計工具，它們基于不同的技術，也有各自的特點。你可以從中選擇你最喜歡的來使用。

　　Framer

　　Framer是一個基于JavaScript的原型設計工具,并且它是一個開源項目。Framer有以下一些特點：支持手勢、動效、狀態(tài)、基于網(wǎng)頁、容易實現(xiàn)、可在任何設備上瀏覽。如果你很精通Javascript，那么這個工具應該會適合你。

　　Principle Principle 可能是所有動效工具中最簡單易用的。你只需要設置屏幕A和屏幕B，Principle就能自動地產(chǎn)生這兩個屏幕之間的過渡動效。當然，你也可以通過設置不同的時間和動效曲線，來調整動效。Principle是一個桌面應用，它的界面和Sketch非常像，另外，你可以方便地將Sketch中的設計直接拷貝到Principle中使用。

　　Flinto Flinto 和Principle一樣，也非常簡單易用。特別的是，它提供了一個[Skech插件] ，能夠直接將你Sketch中的Artbords和3D transform導出到Flinto中。

　　Pixate Pixate 是一個Web App，能夠幫助你快速地制作原型。與Flinto或者Marvel不同，你可以區(qū)分層(layers)和嵌入的交互，如拖拽，點擊，雙擊等。制作出來的原型保存在Web上，你可以使用一個iOS app來預覽原型的效果。

　　Origami Origami是一款免費的Quartz Composer的插件，Origami使QC的界面變得更加友好，更加適合進行移動App的界面設計。從2013年5月開始，F(xiàn)acebook的產(chǎn)品設計師們就開始開發(fā)這款QC插件。Origami的開發(fā)過程與Paper一同進行，隨著Paper的功能越來越復雜，Origami也變得越來越強大，Paper上的每個動畫效果都是由設計師首先在Origami上制作成型后，再由iOS工程師編寫的。

　　After Effects

　　After Effect簡稱稱AE，是adobe公司開發(fā)的一個動效設計軟件。對于那些不碰代碼的純設計師來說是非常理想的動畫設計工具。在Dribbble上有很多使用AE制作的優(yōu)秀動效作品。相比其他工具，AE是一個比較傳統(tǒng)的工具，使用禎和層來定義動畫。作為Adobe的產(chǎn)品，它的很多功能和Photoshop很像， 但針對動效有很多附加功能。