男女成人秒免费试看久久_无码毛片免费自慰09_黄品汇mba旧版本_亚洲少妇与大狗性交对白_人妻无卡中文乱码在线_无码a级毛片免费视频内谢_午夜亚洲亚洲精品不卡_欧美成人在线观看_欧美日本韩国乱伦_十八禁观看污污污网站

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

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

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

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

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

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

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

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

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

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

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

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

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

3、利用層疊效果來展開目錄

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

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

一個卓越的動效可以使每一個組或元素有序的出現(xiàn)，并錯開層級逐個延遲展示出來。

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

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

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

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

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

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

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

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

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

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

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

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

一個優(yōu)秀的動效用文本來展示事件。

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

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

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

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

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

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

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

總結(jié)

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

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