這周為大家?guī)硪黄嘘P(guān)動效使用場景的心得體會。
以前說到動效可能大家更多會覺得是一直視覺上華而不實的小把戲，但是隨著技術(shù)和用戶體驗研究的發(fā)展成熟饿肺，動效已經(jīng)日趨走向功能性和實用性了，好的動效可以讓產(chǎn)品更加生動，而且讓用戶更加真切的感受到互動匿又。
接下來我會列舉幾個典型的動效應(yīng)用場景來和大家聊聊到底動效是怎么從功能層面和情感層面提升產(chǎn)品質(zhì)量的。
1.系統(tǒng)狀態(tài)
多數(shù)App和服務(wù)器交互的過程需要花些時間建蹄，這時候UI是不會變化的碌更，比如下載數(shù)據(jù)，計算等等洞慎。這時候你舉要讓用戶知道app并沒有掛掉痛单，只是正在后臺處理某些工作。一些視覺上的進(jìn)度標(biāo)識可以讓用戶感知到這個過程劲腿，從而有種“掌控”這個App的感覺旭绒。
加載
這個幾乎是避免不了的，一個有創(chuàng)意的動效當(dāng)然解決不了等待的問題焦人，但是它一定可以讓等待變得不那么枯燥挥吵。研究結(jié)果表明好的加載動效可以有效減少用戶在這個過程中的流失率，同時用戶對產(chǎn)品的好感度會顯著上升花椭。
下拉刷新
這個也是很多App會用到動效的場景忽匈，這個動效同樣也是解決等待的問題，創(chuàng)意矿辽、有趣也是這個場景的核心脉幢，值得注意的是這個動畫一定要適配整個App的風(fēng)格，如果UI是極簡線條風(fēng)格嗦锐，那這個動畫也應(yīng)該一樣嫌松。
提醒
因為動的東西天生會更加吸引注意力，所以重要的提醒做成動效往往會收獲更多的用戶好評奕污，同時動效也可以減少文字說明和介紹萎羔。
2. 導(dǎo)航和過場
最基礎(chǔ)的動效應(yīng)用就是過場了，產(chǎn)品使用動效幫助用戶注意到不同頁面的功能轉(zhuǎn)換和布局變化碳默，這樣比直接跳轉(zhuǎn)要更加連貫贾陷，邏輯和視覺上不會丟失焦點缘眶。“漢堡”菜單就是個經(jīng)典案例
上下文信息傳遞
信息傳達(dá)的準(zhǔn)確和平順與否總是考量用戶體驗的重要標(biāo)準(zhǔn)之一髓废。設(shè)計師一般用動效來引導(dǎo)用戶的視覺焦點過渡的新的頁面巷懈，從而把上下文串聯(lián)起來，幫助用戶更好的理解整個流程慌洪。
元素間的視覺層級和關(guān)系
相比于靜態(tài)元素顶燕，動畫可以更好的詮釋各個元素之間的關(guān)系以及他們之間是怎么樣互動的。下面這個案例就能清晰的看出菜單展開和關(guān)閉對各個元素產(chǎn)生的影響冈爹，展開時菜單高亮涌攻，其他元素會變暗弱化，并且位置隨之下移频伤；關(guān)閉時其他元素又會恢復(fù)原始狀態(tài)恳谎。
功能改變
在某些場景下，設(shè)計師會被迫在同一個元素上通過動效表達(dá)不同的功能憋肖，通常是在移動設(shè)備上因為空間受限而采取的辦法因痛。播放和暫停可能是最常見的多狀態(tài)例子岸更。
這種動效展示了元素狀態(tài)隨用戶操作而變化婚肆。下面這個例子，當(dāng)用戶點擊按鈕坐慰，“+”會變成“鉛筆”，同時彈出幾個小一點的按鈕用僧，這樣就暗示用戶“鉛筆”是主要的添加方式结胀，其他小的則是次要的。這個小細(xì)節(jié)可以讓用戶直觀感受到按鈕功能的變化责循，避免跳轉(zhuǎn)帶來的不確定性糟港。
3. 視覺反饋
視覺反饋可以說是最基本但是最關(guān)鍵的用戶體驗要素之一。用戶通過反饋來感受每次交互的成功與否院仿，同時這些感覺會積累成為一種對于產(chǎn)品的把控感秸抚，而這種把控感很大程度上決定了產(chǎn)品的總體體驗。
感知
雖然隔著屏幕玻璃歹垫，但是UI元素要讓用戶感覺是真的可以觸及的剥汤。真實世界中點按不同鈕按會帶來不同的反饋，這些反饋的細(xì)節(jié)構(gòu)成了我們對這個按鈕質(zhì)量的感受排惨。在虛擬世界中吭敢，這種感受也同樣成立，動效可以很好的彌補這方面的體驗暮芭。
操作結(jié)果的可視化
動效可以從讓用戶的操作獲得更好的結(jié)果反饋鹿驼，從而讓用戶獲得一種愉悅感欲低。下圖這個例子里面，打鉤的動效讓用戶感覺自己的支付成功畜晰，好像小時候做題正確的時候老師在卷面上批改的過程砾莱，讓人有成就感。
小結(jié)
動效是一種非常優(yōu)雅凄鼻，細(xì)致的利器腊瑟，可以直擊用戶體驗的核心，在產(chǎn)品UI越來越同質(zhì)化的今天野宜，讓你脫穎而出扫步，在用戶心里快速占據(jù)一席之地。當(dāng)然匈子，好的動效需要不斷打磨調(diào)校河胎，每一幀的完美可以讓產(chǎn)品展示出一種工匠氣質(zhì)。
