這是一個翻譯系列,原文是谷歌18年所出的材料設計指南(文末有鏈接),強大的材料設計將帶我們一起深入了解UI設計中的所有規范。每周會更新數篇,一共百余篇,歡迎關注哦。

 

目錄

用法
轉換
狀態
主題

 

用法

動畫反映了圖標的動作,并增加了優雅和愉悅感

每個圖標動畫都與其視覺設計和執行動作相一致。

 

轉換

轉換將動畫圖標的兩個視覺狀態連接起來。兩個圖標之間的轉換過渡表示它們已有關聯,按下一個圖標可激活另一個圖標。

轉換表明了兩個圖標間的關聯性

 

轉換用于圖標間的切換,比如開關狀態

 

強調

動畫圖標轉換可根據優先強調的等級來選擇使用簡單還是復雜的動效。

  1. 不突出的圖標使用簡單通用的動效
  2. app中的重要圖標可以使用復雜的動效來強調

 

簡單

在不需要強調的圖標上使用通用的動效。淡入淡出、縮放或旋轉都是圖標間轉換的簡單方式。

 

復雜

細膩的動效能吸引注意并給重點圖標增添趣味。

 

當功能比樣式重要時,使用簡單圖標轉換。圖標退出時使用簡單淡出,進入時使用淡入,按比例細微擴大

 

細膩的圖標轉換用于重要的UI元素,例如音樂app中的控件

 

時長

圖標動畫越復雜,持續的時間就應該越長,以避免產生倉促感。為了在應用程序中保持一致性,應對類似復雜程度的圖標使用相同的時長。大部分圖標適合以下三組推薦時長:

  1. 簡單圖標動效:100ms
  2. 一般圖標動效:200ms
  3. 復雜圖標動效:500ms
  1. 簡單:100ms
  2. 一般:200ms
  3. 復雜:500ms

 

交錯延時

圖標集可以使用交錯延時來表現進入的流動性。它們從左到右推動,給人一種前進感。

應用欄的圖標從左到右使用交錯延時的方式進入。

 

狀態

圖標動畫可以用來強調狀態變化。

圖標使用動畫來表示它們因被選中而改變了狀態。

 

主題

動畫應該反映主題風格。

這些圖標動畫的靈感來源于品牌logo和加載狀態動畫。

  1. 圖標動畫
  2. logo動畫
  3. 加載動畫

 

原文地址:Material Design

譯者:招財魚

 

轉載請注明:學UI網 » Material Design Animated icons 動畫圖標

登錄收藏
 
你可能喜歡的:
【面試題】喵街tab商城頁改版總結【面試題】喵街tab商城頁改版總結
Material Design States 狀態Material Design States 狀態
Material Design Selection 選擇Material Design Selection 選擇
從「科學方法」到「設計實踐」 – 云產品設計師會夢見服務器么?從「科學方法」到「設計實踐」 – 云產品設計師會夢見服務器么?
異常場景怎么處理?異常場景怎么處理?
UI設計交接給開發之后看起來更糟的7個原因,以及為什么這可能是你的錯UI設計交接給開發之后看起來更糟的7個原因,以及為什么這可能是你的錯
如何設計好一款APP的首頁?如何設計好一款APP的首頁?
B端品牌如何面向C端用戶B端品牌如何面向C端用戶
如何搭建一個易學性高可用性強的功能框架?如何搭建一個易學性高可用性強的功能框架?
盤點 | 4個成為標桿的超強體驗設計盤點 | 4個成為標桿的超強體驗設計
?
京东方a股票