亚洲欧美日韩综合系列在线_91精品人妻一区二区_欧美大肥婆一级特大AA片_九色91视频免费观看_亚洲综合国产精品_av中文字幕在线不卡_久久精品色综合网_看黄色视频的软件_无卡无码高清中文字幕码2024_亚洲欧美日韩天堂网

讓我們來(lái)看一些UI動(dòng)畫從優(yōu)秀到卓越的例子，隨著一點(diǎn)點(diǎn)的調(diào)整，你可以用動(dòng)畫來(lái)提升你的UI水平。

交互表現(xiàn)了狀態(tài)的連續(xù)性，明確公共元素之間的關(guān)系，并且將用戶的注意力引導(dǎo)到他們應(yīng)該注意的和操作的地方上。

這些動(dòng)畫，遵循了Material Motion的指導(dǎo)原則、IBM的動(dòng)畫原則和UX運(yùn)動(dòng)理念。（ Material Motion, IBM’s Animation Principles, and The UX in Motion Manifesto.）

1、使標(biāo)簽的內(nèi)容滑動(dòng)起來(lái)

左側(cè)的標(biāo)簽下面的內(nèi)容淡入淡出，右側(cè)的可以隨標(biāo)簽共同滑動(dòng)

一個(gè)優(yōu)秀的標(biāo)簽切換動(dòng)效，淡化一個(gè)標(biāo)簽下的內(nèi)容，過渡到另一個(gè)標(biāo)簽下的內(nèi)容。

一個(gè)卓越的標(biāo)簽切換動(dòng)效，通過多個(gè)標(biāo)簽下的內(nèi)容進(jìn)行移動(dòng)，來(lái)強(qiáng)調(diào)標(biāo)簽轉(zhuǎn)換的連續(xù)性。

當(dāng)你設(shè)計(jì)可交互的選項(xiàng)卡式標(biāo)簽，或者彈出式的菜單時(shí)，請(qǐng)嘗試將下級(jí)內(nèi)容與上級(jí)主操作相關(guān)聯(lián)。通過這種方式，你不僅可以保證動(dòng)效中內(nèi)容的可見性，還可以將元素運(yùn)動(dòng)的起止位置用動(dòng)效表示出來(lái)。制作時(shí)，記得添加一個(gè)滑動(dòng)手勢(shì)，讓內(nèi)容從一個(gè)頁(yè)面順滑的過渡到另一個(gè)頁(yè)面。

2、鏈接卡片內(nèi)的共享元素

左側(cè)的卡片展開時(shí)向上彈出一個(gè)新的頁(yè)面。右側(cè)的卡片內(nèi)容擴(kuò)展并填充屏幕。

一個(gè)優(yōu)秀的卡片切換動(dòng)效，使用向左或向上滑動(dòng)的過渡來(lái)打開卡片，展示詳細(xì)信息。

一個(gè)卓越的卡片切換動(dòng)效，通過展開卡片的共享內(nèi)容來(lái)建立兩個(gè)頁(yè)面的緊密的聯(lián)系。

當(dāng)在設(shè)計(jì)不同狀態(tài)之間進(jìn)行動(dòng)畫時(shí)，請(qǐng)注意它們之間是否有共享元素并將它們連接起來(lái)。使用invision studio時(shí)，在創(chuàng)建運(yùn)動(dòng)轉(zhuǎn)換時(shí)，在兩個(gè)鏈接屏幕之間重復(fù)的組件會(huì)自動(dòng)連接。這使原型動(dòng)畫變得輕而易舉。

3、利用層疊效果來(lái)展開目錄

左側(cè)的卡片通過滑動(dòng)和淡入來(lái)切換目錄。右側(cè)的卡片具有相同的動(dòng)畫，并且卡片層疊的出現(xiàn)延遲。

一個(gè)優(yōu)秀的動(dòng)效進(jìn)入下級(jí)頁(yè)面時(shí)，通過屏幕的位置和不透明度變化來(lái)過渡。

一個(gè)卓越的動(dòng)效可以使每一個(gè)組或元素有序的出現(xiàn)，并錯(cuò)開層級(jí)逐個(gè)延遲展示出來(lái)。

要實(shí)現(xiàn)這種瀑布效果，請(qǐng)嘗試對(duì)每一個(gè)元素或每一個(gè)組進(jìn)行逐個(gè)延遲，保持相同的過度和持續(xù)時(shí)間，是他們的運(yùn)動(dòng)一致。盡管如此，不要每一個(gè)小元素都有不同的運(yùn)動(dòng)，將元素分組操作，才能展現(xiàn)好的效果。制作動(dòng)效不要拖沓，Google建議每組元素運(yùn)動(dòng)間隔不超過20毫秒。

4、讓新頁(yè)面的內(nèi)容將上級(jí)頁(yè)面的元素推出屏幕之外

左側(cè)新頁(yè)面展開時(shí)原有元素淡出。右側(cè)原有元素隨著新頁(yè)面的出現(xiàn)被推出屏幕之外。

一個(gè)優(yōu)秀的頁(yè)面切換只有元素的移動(dòng)和顯示。

一個(gè)卓越的頁(yè)面切換新元素出現(xiàn)時(shí)會(huì)影響原有的元素，產(chǎn)生移動(dòng)。

在設(shè)計(jì)過程中時(shí)刻注意元素和周圍環(huán)境之間的關(guān)系。這意味著新頁(yè)面的內(nèi)容可以將周圍的元素吸引或推出屏幕。

5、讓菜單按正確的運(yùn)動(dòng)軌跡出現(xiàn)在頁(yè)面中

左側(cè)的菜單從下面飛入。右側(cè)的菜單從觸發(fā)點(diǎn)的方向延展開來(lái)。

一個(gè)優(yōu)秀的菜單動(dòng)效，菜單是從觸發(fā)它的按鈕的方向出現(xiàn)。

一個(gè)卓越的菜單動(dòng)效，菜單是從觸發(fā)它的這一個(gè)點(diǎn)開始，慢慢的浮動(dòng)和延展開來(lái)。

6、使用按鈕來(lái)顯示不同的狀態(tài)

左側(cè)的按鈕用文本來(lái)顯示加載狀態(tài)。右側(cè)將按鈕自身延展成進(jìn)度條來(lái)顯示加載狀態(tài)。

一個(gè)優(yōu)秀的動(dòng)效用文本來(lái)展示事件。

一個(gè)卓越的動(dòng)效使用按鈕本身不同的狀態(tài)來(lái)展示事件。

嘗試使用按鈕本身的變化來(lái)提供重要的視覺反饋。例如，你可以用加載動(dòng)畫或誘導(dǎo)性動(dòng)畫來(lái)替代CTA按鈕?；蛘吣憧梢栽诒尘霸黾觿?dòng)效來(lái)展示過程。解決辦法取決于你，但都是是利用了用戶正在進(jìn)行操作但空間來(lái)進(jìn)行交互。如果你能用按鈕的顏色來(lái)定義成功狀態(tài)，那就更好了。

7、在重要的事情上拉回注意力

左側(cè)利用顏色和位置使元素突出。右側(cè)利用微妙的動(dòng)效吸引用戶的注意力。

一個(gè)優(yōu)秀的設(shè)計(jì)利用顏色、尺寸、位置來(lái)使用戶需要注意和操作的重要的信息突出。

一個(gè)卓越的設(shè)計(jì)利用動(dòng)效來(lái)吸引用戶進(jìn)行重要操作，而不是破壞設(shè)計(jì)。

當(dāng)用戶需要有重要操作時(shí)，嘗試用動(dòng)效來(lái)獲取他們的注意力。從一個(gè)微動(dòng)效開始著手，然后根據(jù)這個(gè)操作的重要性來(lái)增加動(dòng)效的強(qiáng)烈程度（變化尺寸、顏色和速度）。慎重的使用動(dòng)效，因?yàn)槭褂玫膭?dòng)效越多，它的重要性會(huì)越低，甚至?xí)蓴_用戶的注意力，適得其反。

總結(jié)

我希望當(dāng)你在想交互中增加動(dòng)效的時(shí)候，這些案例能幫助你作出更好的決定。挑選一款你喜歡使用的工具，我相信你會(huì)創(chuàng)造出更加出色的動(dòng)效。

我們需要利用動(dòng)效來(lái)展示不同狀態(tài)的變化，將注意力集中在必要的操作上，確定元素之間的關(guān)系，為我們的產(chǎn)品增加一些趣味性和識(shí)別性。遵循以上這些規(guī)則，我們將把動(dòng)效做到從優(yōu)秀到卓越。