說到流動，大家一定想到的是水，隨著移動設備硬件的升級，越來越多的App和Rom得以擁有了流水般的動效。那今天創(chuàng)新互聯(lián)就來聊一聊移動的動效設計——流動之美。

首先，為什么要有動效?

　　產(chǎn)品設計師經(jīng)常說的一個詞叫“情感化設計”，我們設計了漂亮的界面，整理了清晰的邏輯，除了這兩樣之外，我們還需要動效來把這些漂亮的設計銜接起來，界面、交互、動效構成了情感化設計的三大載體。

　　“界面跳轉太生硬了”“軟件卡死了嗎?”“菜單在哪”… 大家在移動產(chǎn)品設計中一定都經(jīng)歷過這樣的問題，動效幫助我們很好的解決這些問題，同時又帶來了新的幫助。

我整理為如下6大作用：

1 過渡流暢

　　過渡流暢是我們對于動效的認識里對容易想到也最被認可的一點，通過界面及其元素的出現(xiàn)和消失，以及大小、位置和透明度的變化，使用戶和產(chǎn)品的交互過程更流暢。在AppFlow中，頁面的滑動、元素的出現(xiàn)整個操作如水般流暢。

2 高效反饋

　　高效反饋可以說是移動應用最原始的需求，其通過動效讓用戶了解程序當前狀態(tài)，同時對用戶操作(平移、放大、縮小、刪除)做出及時反饋。譬如說在用戶點擊下載按鈕后，我們需要給用戶展示程序當前的狀態(tài)(未下載-下載中-下載完成)，如果我們不把反饋給用戶，用戶可能就覺得“手機卡死了嗎?”，同樣的對平移、放大等操作，及時友好的反饋也是必要的。

3 引導作用

　　移動應用不比PC應用，移動應用可用的空間就屏幕那么大點兒，很多功能的入口可能都是隱藏的，此時動效的作用就來了。其通過動效對功能的方向、位置、喚出操作、路徑等進行暗示和指導，以便用戶在有限的移動屏幕內(nèi)發(fā)現(xiàn)更多功能。譬如說，iOS7鎖屏界面的動效提示用戶向右滑動;百度手機輸入法的熊頭菜單滾動提示用戶翻頁;微信的朋友圈引導用戶一步一步操作。

4 層級展現(xiàn)

　　隨著移動應用越來越復雜，承載的功能越來越多，原來的三層結構原則已經(jīng)不能完全適用，合理清晰的結構層級對用戶理解應用和使用應用有著至關重要的作用。具體的方式為：通過焦點縮放、覆蓋、滑出等動效幫助用戶構建空間感受。就像iOS7一樣，通過動效上來構建了整個系統(tǒng)的空間結構，Appflow的頁面跳轉也是同樣的道理。

5 增強操縱

　　一些動效通過動效對現(xiàn)實世界的模擬并且不需要任何提示，迎合用戶的意識認知。使產(chǎn)品的交互方式更接近真實世界。用戶通過對現(xiàn)實世界的認知來理解動效，增強了用戶對應用的操縱感和帶入感。像Paper的設計，可以讓用戶感覺到紙面的翻動，再如iOS中刪除的動效，一陣霧霾散去。

6 創(chuàng)新體驗

　　隨著大家對設計越來越重視，大家的體驗越來越趨于統(tǒng)一水平范圍內(nèi)的時候，體驗的差異化就越來越小。那在可用性良好的前提下，通過細節(jié)設計和交互方式創(chuàng)新為產(chǎn)品增加亮點，可以帶來更驚喜的體驗和表達產(chǎn)品的氣質(zhì)與態(tài)度(X格)。注意，是可用性良好哦。最近出現(xiàn)的Facebook Paper的亮點就不少。

　　說到動效，就一定要說時間，動效對于某些等待頁面的體驗提升是尤為重要的，下面我們來看看那些等的設計：

　　關于等待的討巧設計我們主要有下面幾種方式：

1 界面先行

　　界面先行就是在業(yè)務動作未真實完成之前，界面先進入到完成/進行狀態(tài)，以弱化用戶的等待和煩躁。譬如說發(fā)短信，編輯短信后點擊發(fā)送后，短信內(nèi)容會直接進入到對面界面中，事實上短信并沒有發(fā)送完成，這便是典型的界面先行。再如某些進度條，點擊下載后，界面會先很快的走一部分，然后再慢慢的進行，那前面走的一部分也屬于動效。再如你看視頻時點擊收藏、瀏覽器中加載網(wǎng)頁的進度條，這都是界面先行的典型應用。

2 資源代替

　　你是否還記得之前在PC端google圖片的時候，先加載出來的都是模糊的圖片，而后慢慢變清晰?那這種資源替換的方法在移動端的應用也是非常廣泛，通過先加載低質(zhì)量的圖片，而后加載清晰資源的方法。

3 趣味吸引

　　這種方法由來已久，通過有趣的內(nèi)容來分散用戶的注意力來降低時間感受。就像某款qipai應用的加載動畫是一點點褪去兔女郎的衣服，沒有哪個男(diao)人(si)不看吧?

那什么樣的動效設計是好的呢?

　　下面我總結了一些注意的點，供小伙伴們來參考或回顧自己的設計：

1 恰到好處，不過度設計

　　有小伙伴說了，這不廢話嗎，這句話是萬能的好嗎?既然說是廢話了，那我就舉一個廢話的例子：如果我要設計一個杯子用來喝水，那我只需要設計一個干凈素雅的玻璃杯就可以了，如果你設計的是一個非常漂亮的水晶杯，那觀摩和欣賞就成為了他最重要的功用。所以，過度設計有可能會讓用戶被迫忽略你本來要表達的內(nèi)容和作用。

　　廢話說完了，那這里有什么具體一點的規(guī)則嗎?我總結了3點：

　　1不增加操作 2不干擾用戶3不超過1秒(操作動效最優(yōu)區(qū)間0.5s-1s)

2 考量實現(xiàn)，平衡設備和方案

　　做設計的最終目的是實現(xiàn)，如果實現(xiàn)都是問題，那設計變縮水大半。在動效設計中，我們基本要做到三個不：不卡、不跳、不閃，只有滿足三個不，才能帶來正向體驗，如果卡頓，帶來的就是負向的體驗。所以我們要考量一下實現(xiàn)的程度和范圍，在某些設備和方案之間做平衡，作出優(yōu)秀且被大多數(shù)設備流暢運行的動效。

3 自然，基本符合現(xiàn)實運動規(guī)律

　　不同的動效節(jié)奏會給用戶帶來不同的感受，但運動規(guī)律應該遵循現(xiàn)實的運動規(guī)律和節(jié)奏，如下曲線中的先快后慢、先慢后快、勻速、自由落體等，基本都有現(xiàn)實的運動事件做參照。

4 整體編排，循序教育

　　在Altwwdc上，Ben Johnson說一個好的移動應用應該滿足“1個好的歡迎頁面+0-2個細節(jié)動效+不大于6個說明動效”這樣的一個公式。

　　關于1個好的歡迎頁面，好的歡迎頁面就像一扇門，可以提高用戶的期望值，同時也能塑造用戶對于你這個應用的第一感受，試想一下，你看到了一個特別“落魄”的啟動畫面，你對這個應用還有什么期望嗎?

　　關于0-2個細節(jié)動效，如果你的產(chǎn)品有能力也有資源，那最好設計一些令人愉悅的細節(jié)動畫，他基本可以在用戶發(fā)現(xiàn)的時候覺得你逼格滿滿。

　　關于6個說明性質(zhì)的動效，包括引導動畫，目的都是為了讓用戶學習如何使用這個應用，但是用戶統(tǒng)一時間內(nèi)學習能力是有限的，就好比說macbook的觸摸板首飾動作，一次性丟給你十幾個動作學習，你還覺得他特別好用嗎?所以這里的臨界值大約是6個，如果超過6個，呃，你的應用真難用。

　　說了這么多，一起來回顧一下整篇文章所講：

　　首先我們提出了動效的6個作用，分別是：

　　反饋、層級、引導，過渡、操縱、創(chuàng)新

　　然后，我列舉了三種具體的等待設計：

　　界面先行、資源替換、趣味吸引

　　最后，我提出了四大注意供小伙伴來回顧設計：、

　　分別是三不(不卡不閃不跳)三不要(不增加操作、不阻礙用戶、不超過時限)自然(基本符合常識規(guī)律)126(1個歡迎頁面+2個細節(jié)設計+6個告知動效)

　　很多小伙伴說，你這說了半天，也沒說流動之美美在哪啊。那我想說，美的東西產(chǎn)生必定會經(jīng)歷一個美的過程，對于設計師來說，這個過程不就是美的嗎?好吧，對于交互設計師來說。

　　最后呢，動效和微動效一定會成為未來幾年大部分App的標配內(nèi)容。

當前文章：流動之美！探討一下移動動效設計
文章源于：http://jinyejixie.com/news23/160323.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設計、手機網(wǎng)站建設、云服務器、網(wǎng)站營銷、動態(tài)網(wǎng)站、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)