“固然勾當有著如斯龐大的潛力,但它能夠是一切設想學科中最不被懂得的。”谷歌資料設想團隊的勾當設想師Jonas Naimark寫道。

喬納斯(Jonas)辯稱,固然動畫有助于使UI更具表現力和易于操縱,但它是UI設想家屬的新成員之一。良多設想師以為勾當設想太龐雜或底子不曉得若何挑選適合的表現結果,輕易致使紊亂。

為了贊助順遂的將動畫融入UI任務中,咱們在Dribbble上發明了五個超卓的例子,能夠作為開導:

案例一

谷歌翻譯
By Pendar Yousefi

Google翻譯團隊正在盡力經由進程顯現中性性別單詞和短語的男性和女性翻譯來削減其翻譯中的性別成見。
為了贊助展現這些翻譯而不會操縱戶感應不知所措,設想團隊操縱簡略的動畫來一次將您的注重力集合在一條信息上。
比方,當您輸出要翻譯的短語時,文本字段堅持松散。輸出完短語后,該框將主動睜開以顯現翻譯。

案例二

注書頁面

By Mari Kostrova

該動畫在堅持品牌抽象的同時,給客戶頁面增添了一些想入非非的感受。對須要注冊帳戶的用戶來講,漁夫在等候釣到魚時仿佛在瞌睡。可是,若是您挑選操縱現有帳戶登錄,則漁夫會展現他捕獲的魚,是以站起來變得很高。

案例三

航班值機界面

By 尾大的小馬_Chi7 Ma

在此航班值機界面中增添動畫會增添可托度和高興度。當您單擊航班時,您會看到機票信息和飛機在天上飛的圖形。當您單擊以挑選坐位時,您將被帶到阿誰飛機上,使休會更實在。

案例四

下載動畫

By Pedro Aquino

此微交互操縱舉措為視覺結果不佳的舉措(下載文件)增添視覺樂趣,而后贊助您跟蹤進度。單擊下載按鈕時,圓形箭頭圖標會向前和向后挪動,顯現下載狀況。實現后,該圓圈將落入新按鈕,您能夠翻開該文件。

案例五

資金展現

By tubik

色采和動畫用于使該估算操縱加倍層次分明,更容易于懂得。餅圖是按照每一小我停止色采編碼的,當您單擊餅圖時,它會改變為包羅不異色采的條形圖,并且會更深切地研討每一小我的收入。