2017 Material design 第二章第六節《富有創造性的定製方案》

D27發表於2019-02-19

六、富有創造性的定製方案(Creative customization)

動效可以應用於不同的物件尺寸和不同的環境,這有助於設計美感和功能的統一。

icon的型別
系統icons可以有雙重功能。

產品icons應該設計得精緻、美觀。

Icons

系統icons
一個系統icon也許存在雙重功能。舉個例子,一個選單icon可以平滑地變化到一個返回icon,反之亦然。這種雙重功能間的變化動效有利於告訴使用者當前按鈕的功能。

如圖,選單icon和返回icon間相互變化說明兩個icon間相互聯絡。當一個icon被觸發,就會使另一個icon出現。
如圖,選單icon和返回icon間相互變化說明兩個icon間相互聯絡。當一個icon被觸發,就會使另一個icon出現。

跟上圖一樣,開始icon和暫退icon間相互變化說明兩個icon間相互聯絡。當一個icon被觸發,就會使另一個icon出現。
跟上圖一樣,開始icon和暫退icon間相互變化說明兩個icon間相互聯絡。當一個icon被觸發,就會使另一個icon出現。

如圖,當按下浮動按鈕(FAB),加號標誌變化成了鉛筆標誌。這表明當前鉛筆是主要的建立方法。
如圖,當按下浮動按鈕(FAB),加號標誌變化成了鉛筆標誌。這表明當前鉛筆是主要的建立方法。

產品icon
當使用者開啟應用時看到的應該是設計精緻、活潑的產品icon動效。

如圖,當使用者第一次開啟收件箱應用的時候會展示其icon動效,展示完成後會提示使用者登陸。
如圖,當使用者第一次開啟收件箱應用的時候會展示其icon動效,展示完成後會提示使用者登陸。

如圖,當日歷應用的使用者日曆資料第一次被載入的時候會展示其icon動效。
如圖,當日歷應用的使用者日曆資料第一次被載入的時候會展示其icon動效。

如圖,當使用者第一次開啟照片應用的時候會展示其icon動效。
如圖,當使用者第一次開啟照片應用的時候會展示其icon動效。

如圖,當使用者第一次開啟Gmail應用的時候會展示其icon動效,展示完成後會提示使用者登陸。
如圖,當使用者第一次開啟Gmail應用的時候會展示其icon動效,展示完成後會提示使用者登陸。

插圖

一些影像和插畫的小動畫能夠給使用者帶來愉悅的視覺體驗。

如圖,當應用出現意外錯誤的時候,可以使用這些小動畫,它能夠取悅使用者並以此減緩使用者的焦慮。
如圖,當應用出現意外錯誤的時候,可以使用這些小動畫,它能夠取悅使用者並以此減緩使用者的焦慮。

如圖,該應用正在為使用者規劃目標。在等待規劃的頁面上有個自行車的小動畫,這個動畫不僅能夠愉悅使用者還能減輕使用者因等待而產生的焦慮感。
如圖,該應用正在為使用者規劃目標。在等待規劃的頁面上有個自行車的小動畫,這個動畫不僅能夠愉悅使用者還能減輕使用者因等待而產生的焦慮感。

如圖,當使用者完成個人目標的時候出現動畫獎勵。這樣做能為產品帶來更深層次的使用者體驗。
如圖,當使用者完成個人目標的時候出現動畫獎勵。這樣做能為產品帶來更深層次的使用者體驗。

如圖,動畫作為一種令人印象深刻的教育方式,能夠幫助使用者去學習產品的新功能。
如圖,動畫作為一種令人印象深刻的教育方式,能夠幫助使用者去學習產品的新功能。

相關文章