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

首先，為什么要有動(dòng)效?

　　產(chǎn)品設(shè)計(jì)師經(jīng)常說(shuō)的一個(gè)詞叫“情感化設(shè)計(jì)”，我們?cè)O(shè)計(jì)了漂亮的界面，整理了清晰的邏輯，除了這兩樣之外，我們還需要?jiǎng)有?lái)把這些漂亮的設(shè)計(jì)銜接起來(lái)，界面、交互、動(dòng)效構(gòu)成了情感化設(shè)計(jì)的三大載體。

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

我整理為如下6大作用：

1 過(guò)渡流暢

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

2 高效反饋

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

3 引導(dǎo)作用

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

4 層級(jí)展現(xiàn)

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

5 增強(qiáng)操縱

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

6 創(chuàng)新體驗(yàn)

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

　　說(shuō)到動(dòng)效，就一定要說(shuō)時(shí)間，動(dòng)效對(duì)于某些等待頁(yè)面的體驗(yàn)提升是尤為重要的，下面我們來(lái)看看那些等的設(shè)計(jì)：

　　關(guān)于等待的討巧設(shè)計(jì)我們主要有下面幾種方式：

1 界面先行

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

2 資源代替

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

3 趣味吸引

　　這種方法由來(lái)已久，通過(guò)有趣的內(nèi)容來(lái)分散用戶的注意力來(lái)降低時(shí)間感受。就像某款qipai應(yīng)用的加載動(dòng)畫(huà)是一點(diǎn)點(diǎn)褪去兔女郎的衣服，沒(méi)有哪個(gè)男(diao)人(si)不看吧?

那什么樣的動(dòng)效設(shè)計(jì)是好的呢?

　　下面我總結(jié)了一些注意的點(diǎn)，供小伙伴們來(lái)參考或回顧自己的設(shè)計(jì)：

1 恰到好處，不過(guò)度設(shè)計(jì)

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

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

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

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

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

3 自然，基本符合現(xiàn)實(shí)運(yùn)動(dòng)規(guī)律

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

4 整體編排，循序教育

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

　　關(guān)于1個(gè)好的歡迎頁(yè)面，好的歡迎頁(yè)面就像一扇門(mén)，可以提高用戶的期望值，同時(shí)也能塑造用戶對(duì)于你這個(gè)應(yīng)用的第一感受，試想一下，你看到了一個(gè)特別“落魄”的啟動(dòng)畫(huà)面，你對(duì)這個(gè)應(yīng)用還有什么期望嗎?

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

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

　　說(shuō)了這么多，一起來(lái)回顧一下整篇文章所講：

　　首先我們提出了動(dòng)效的6個(gè)作用，分別是：

　　反饋、層級(jí)、引導(dǎo)，過(guò)渡、操縱、創(chuàng)新

　　然后，我列舉了三種具體的等待設(shè)計(jì)：

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

　　最后，我提出了四大注意供小伙伴來(lái)回顧設(shè)計(jì)：、

　　分別是三不(不卡不閃不跳)三不要(不增加操作、不阻礙用戶、不超過(guò)時(shí)限)自然(基本符合常識(shí)規(guī)律)126(1個(gè)歡迎頁(yè)面+2個(gè)細(xì)節(jié)設(shè)計(jì)+6個(gè)告知?jiǎng)有?

　　很多小伙伴說(shuō)，你這說(shuō)了半天，也沒(méi)說(shuō)流動(dòng)之美美在哪啊。那我想說(shuō)，美的東西產(chǎn)生必定會(huì)經(jīng)歷一個(gè)美的過(guò)程，對(duì)于設(shè)計(jì)師來(lái)說(shuō)，這個(gè)過(guò)程不就是美的嗎?好吧，對(duì)于交互設(shè)計(jì)師來(lái)說(shuō)。

　　最后呢，動(dòng)效和微動(dòng)效一定會(huì)成為未來(lái)幾年大部分App的標(biāo)配內(nèi)容。

本文標(biāo)題：流動(dòng)之美！探討一下移動(dòng)動(dòng)效設(shè)計(jì)
鏈接分享：http://www.rwnh.cn/news/160323.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、Google、外貿(mào)建站、自適應(yīng)網(wǎng)站、關(guān)鍵詞優(yōu)化、品牌網(wǎng)站設(shè)計(jì)

廣告

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