Google Material Design 正體中文版

逼真的動畫效果

理解物件的實體形式幫助我們了解如何熟練地運用它,觀察物件的移動則可以辨別它的輕重、彈性與大小。Material Design中動畫效果不只是增加美麗的效果,它更建立了空間關係、功能顯示和系統意向的意義。

質量與重量

就物理性而言所有物體都有質量且只在受到外力時移動。因此,物體並不會突然地移動或停止,突然移動或停止以及瞬間改變方向的動畫效果看起來並不符合自然規則,對使用者來說這樣的效果是不符合期待且造成令人不愉快的混亂。

最佳實例

Material Design中動畫重要的關鍵是保留其物理性感受,且不會失去優雅、簡約、美麗的特性,以及無縫式使用者經驗設計魅力。下列設計準則將以動畫效果展示上述概念。

這麼做吧

即時加速與溫和減速的動作讓人覺得自然與討喜。

千萬不要這麼做

線性移動會讓人覺得機械化。在物體進行曲線移動的開始或結束時驟然改變速度,表示物體快速地啟動或停止,那並不符合真實情況。

特例:進退場

當物體進場時,確保他以最高速度進入。這模擬了自然的動作,一個人並非在進入我們的視野時才開始移動步伐,而是在進入我們的視野前就已經邁步前進。相同地,當物體退場時,請保持它的速度,這樣的作法會比降低速度退場好。從容地進場和緩速退場會讓使用者的注意力集中在動畫效果中,但大多數情況下,這並不是我們要的結果。

這麼做吧

以高速進退場。這顆球以高速進退場時,會給人有自信的感覺。

千萬不要這麼做

進場時加快速度或退場時減速,不要用不必要的速度變化來分散使用者的注意力。

做些調整

不是所有的物體都以同樣的方式移動,較輕較小的物體有可能會在更短時間內加速或減速,因為他們的質量較小,且需要較少的外力去達成加減速的結果。較重較大的物體可能需要更多的時間到達最高速或者停止移動 。想想該如何套用這些界面元素到你的應用程式中,同時思考要如何呈現這些動畫效果。

翻譯:Charlene