動(dòng)態(tài)效果顯然已經(jīng)成為移動(dòng)互聯(lián)網(wǎng)產(chǎn)品的新趨勢(shì)，如何設(shè)計(jì)出有趣、有吸引力的動(dòng)態(tài)效果成為設(shè)計(jì)師的新課題。不同的產(chǎn)品適合不同類(lèi)型的動(dòng)態(tài)效果。有些產(chǎn)品適合酷炫的動(dòng)態(tài)效果，有些則不適合。切記不要把動(dòng)態(tài)效果設(shè)計(jì)成華而不實(shí)的花哨，而是作為增強(qiáng)用戶(hù)體驗(yàn)的新方式。移動(dòng)互聯(lián)網(wǎng)時(shí)代已經(jīng)到來(lái)，應(yīng)用就像天上的星星，應(yīng)用不計(jì)其數(shù)。
一、APP動(dòng)效的外在美一、APP動(dòng)態(tài)效果的外在美
首先，動(dòng)態(tài)效果需要生動(dòng)有趣，不僅要有好看的外觀(guān)，還要有流暢的體驗(yàn)。要做到這一點(diǎn)，就要給動(dòng)態(tài)效果注入活力。有以下幾種方法:
1.1模擬慣性
現(xiàn)實(shí)中物體的運(yùn)動(dòng)是有慣性的。比如公交車(chē)突然剎車(chē)，乘客會(huì)突然向前摔倒。仔細(xì)觀(guān)察以下三種運(yùn)動(dòng)效果后，圖像會(huì)在變化結(jié)束時(shí)“超出”一點(diǎn)點(diǎn)(放大、縮小、翻轉(zhuǎn))，然后立即“反彈”。這種處理方式使整個(gè)運(yùn)動(dòng)效果充滿(mǎn)活力和趣味性。
1.2模擬重力
和慣性一樣，引力是一種真實(shí)的現(xiàn)象。沒(méi)有向上的支撐，所有物體都會(huì)掉下來(lái)，比如倒垃圾。一般APP刪卡的動(dòng)態(tài)效果是橫向滑動(dòng)直到消失，但后面的動(dòng)態(tài)效果增加了重力效果。也就是卡片水平滑動(dòng)的時(shí)候，也是翻轉(zhuǎn)落下，就像現(xiàn)實(shí)中把垃圾倒進(jìn)垃圾桶一樣。不僅使整個(gè)動(dòng)態(tài)效果生動(dòng)有趣，還方便用戶(hù)理解操作的含義。
1.3均勻變速
一個(gè)優(yōu)秀的動(dòng)態(tài)效果肯定不會(huì)勻速運(yùn)動(dòng)。勻速運(yùn)動(dòng)的物體看起來(lái)很僵硬，僵硬，就像機(jī)器人一樣。為了讓一個(gè)圖像運(yùn)動(dòng)得轟轟烈烈，就要“設(shè)計(jì)”它運(yùn)動(dòng)的速度。仔細(xì)觀(guān)察下圖所示的動(dòng)態(tài)效果。雖然界面中不同元素的移動(dòng)速度不同，但它們的移動(dòng)都遵循一定的原則，其中之一就是勻速變化，所以要記得“快起床”。也就是說(shuō)，運(yùn)動(dòng)中的界面元素的初速度應(yīng)該為0，應(yīng)該開(kāi)始勻速運(yùn)動(dòng)，但在運(yùn)動(dòng)結(jié)束時(shí)可以突然停止。
1.4碎片運(yùn)動(dòng)
讓一個(gè)應(yīng)用程序充滿(mǎn)個(gè)性的好方法就是給它添加酷炫的動(dòng)態(tài)效果，而讓一個(gè)動(dòng)態(tài)效果酷炫的常用方法就是碎片運(yùn)動(dòng)。簡(jiǎn)單來(lái)說(shuō)就是把界面里的圖像拆成碎片，然后讓它們異步移動(dòng)，利用時(shí)間間隔和速度變化產(chǎn)生酷炫效果。就像下面的動(dòng)態(tài)效果一樣，圖像中不同的元素有節(jié)奏的呈現(xiàn)，利用時(shí)間差來(lái)營(yíng)造效果。
二、APP動(dòng)態(tài)效果的內(nèi)在美
真正優(yōu)秀的動(dòng)態(tài)效果，不僅僅是一個(gè)外形美觀(guān)的花瓶，還具有優(yōu)化互動(dòng)、增強(qiáng)體驗(yàn)的功能。下面總結(jié)三種動(dòng)態(tài)效果的“內(nèi)在美”，即引導(dǎo)、簡(jiǎn)化、強(qiáng)化反饋。
2.1引導(dǎo)
圖形界面難以理解和抽象，增強(qiáng)引導(dǎo)是降低軟件操作難度、提高用戶(hù)體驗(yàn)的好方法。
2.1.1動(dòng)態(tài)聚焦
通過(guò)動(dòng)態(tài)處理引導(dǎo)用戶(hù)將注意力集中在界面的關(guān)鍵部位，使體驗(yàn)更加流暢。青蛙能很快抓住移動(dòng)的物體，人眼也有類(lèi)似的特征。移動(dòng)的物體總是會(huì)引起潛意識(shí)的注意。如下圖所示，屏幕頂部的數(shù)字并不直接顯示一個(gè)數(shù)值，而是從0迅速增加到該數(shù)值，刻意表現(xiàn)出一種動(dòng)態(tài)效果，目的是吸引用戶(hù)的注意力和注意力。中國(guó)的支付寶錢(qián)包APP也利用了這樣的特效。
2.1.2示意性過(guò)渡
過(guò)渡效果是在界面的變化中加入平滑過(guò)渡，目的是引導(dǎo)用戶(hù)確切地了解發(fā)生了什么，而不會(huì)讓用戶(hù)感到不知所措。如下圖所示，添加卡片的過(guò)程模擬的很形象，讓用戶(hù)很容易理解發(fā)生了什么。試想一下，如果頁(yè)面沒(méi)有滑動(dòng)，而是直接生硬地跳下去，豈不是更糟糕？
2.1.3空間過(guò)渡
過(guò)渡效果是設(shè)計(jì)師關(guān)注的特殊效果，它的作用是引導(dǎo)用戶(hù)更好的理解頁(yè)面跳轉(zhuǎn)，知道自己在哪里。下圖所示的動(dòng)態(tài)效果是一個(gè)漂亮的過(guò)渡動(dòng)態(tài)效果。為了避免兩個(gè)頁(yè)面之間的跳轉(zhuǎn)過(guò)于生硬，采用動(dòng)態(tài)效果填充頁(yè)面跳轉(zhuǎn)的中間過(guò)程，使得體驗(yàn)更加流暢自然。
2.2簡(jiǎn)化
有時(shí)候好的設(shè)計(jì)就是好的簡(jiǎn)化。簡(jiǎn)化界面信息和交互級(jí)別，可以降低操作難度，提升用戶(hù)體驗(yàn)。
2.2.1隱藏二次操作項(xiàng)目
利用動(dòng)態(tài)效果，可以隱藏界面中的一些信息，隱藏的內(nèi)容經(jīng)過(guò)一些操作后會(huì)動(dòng)態(tài)展開(kāi)，從而達(dá)到簡(jiǎn)化初始界面，使界面簡(jiǎn)潔大氣的目的。
2.2.2按鈕激活
激活按鈕可以使界面的重要信息動(dòng)態(tài)地出現(xiàn)在同一個(gè)按鈕上，使用戶(hù)的眼睛緊緊盯著按鈕，減弱了跳頁(yè)帶來(lái)的干擾，使體驗(yàn)更加流暢。
2.3增強(qiáng)反饋
軟件的反饋對(duì)于改善體驗(yàn)非常重要，增強(qiáng)反饋可以起到更好的提示作用，讓體驗(yàn)過(guò)程更加輕松愉快。抖動(dòng)是增強(qiáng)反饋的方法之一。用動(dòng)態(tài)反饋代替圖形、文字的靜態(tài)提示更自然，更引人注目。下圖所示的動(dòng)態(tài)效果來(lái)自蘋(píng)果的Pages軟件。進(jìn)入編輯狀態(tài)后，被編輯對(duì)象進(jìn)入持續(xù)晃動(dòng)狀態(tài)，起到了很好的引導(dǎo)作用。
總結(jié)
動(dòng)態(tài)效果顯然已經(jīng)成為移動(dòng)互聯(lián)網(wǎng)產(chǎn)品的新趨勢(shì)，如何設(shè)計(jì)出有趣、有吸引力的動(dòng)態(tài)效果成為設(shè)計(jì)師的新課題。不同的產(chǎn)品適合不同類(lèi)型的動(dòng)態(tài)效果。有些產(chǎn)品適合酷炫的動(dòng)態(tài)效果，有些則不適合。切記不要把動(dòng)態(tài)效果設(shè)計(jì)成華而不實(shí)的花哨，而是作為增強(qiáng)用戶(hù)體驗(yàn)的新方式。
2021-04-14 10:43:25分類(lèi)：APP開(kāi)發(fā)
閱讀()
