2017 Material design 第二章第五節《編排》

D27發表於2017-07-28

五、編排(Choreography)

Material的動效能夠吸引使用者注意力,引導使用者關注。

形狀變化
合理的編排設計整個動效中形狀變化過程。

徑向變化的反饋方式
當使用者觸發某個material物件之時,反饋以徑向變化的方式表現(就像水波一樣)。

連續性

仔細挑選變化中所涉及到的元素來進行變化,目的是變化期間使用者仍然能保持聚焦,不會因散亂而分散使用者的注意力。

內容中的所有元素在變化後可見
在變化過程中,那些需要使用者關注的元素需要一直保持可見。

複雜的變化過程中需要保持僅有一個元素是可見的。(見下文)

如圖,卡片(card)在擴大變化後仍保留了原本已有的元素可見,以及出現了其他的元素。
如圖,卡片(card)在擴大變化後仍保留了原本已有的元素可見,以及出現了其他的元素。

內容中很少或者沒有元素在變化後可見
如果一個內容在擴大變化之後,原本含有的元素中只有一個元素可見,那麼該元素將作為整個變化過程的焦點,並控制其他所有的元素進行變化。

非可見內容跟隨可見內容進行運動。
非可見內容跟隨可見內容進行運動。

如果一個內容在擴大變化之後,原本含有的元素中沒有一個元素可見,那麼那些所有淡入淡出的元素(變化後出現的元素)將跟隨著整個內容(面)作垂直運動。

非可見內容跟隨整個內容(面)做垂直運動。
非可見內容跟隨整個內容(面)做垂直運動。

整個內容在變化後不可見
如果在開始變化後整個內容(面)就已經不可見了,那麼就需要從螢幕的另一端出現一個新的內容(面)並建立新的焦點。

內容中多個元素在變化後可見
如果內容在變化的過程中有很多個元素保持可見,那麼其中只需要保持一個重要的元素可見即可。一些元素在變化的過程中需要消失,但一旦變化完成就會立馬出現,這樣做的原因是:如果有太多的元素在變化過程中都保持可見的話,那麼就會分散使用者的注意力。

只對最重要的元素可見,使之來引導使用者注意力。
只對最重要的元素可見,使之來引導使用者注意力。

可行

避免整個變化過程中失去視覺焦點,比如太多元素在變化過程可見或者各元素在變化過程中的運動路徑相互交叉。
避免整個變化過程中失去視覺焦點,比如太多元素在變化過程可見或者各元素在變化過程中的運動路徑相互交叉。

不可行

佈局意識
如果在變化完成後有一些元素沒有載入完成,那麼你需要預留足夠的空間讓這些元素載入完成後出現。這可以有效防止因元素突然出現導致佈局中不和諧的聲音,以及避免使用者觸發後因某些元素的突然消失令使用者感到失望。

留出足夠的空間給正在載入的元素,當元素一旦載入完成就能顯示。
留出足夠的空間給正在載入的元素,當元素一旦載入完成就能顯示。

可行

當元素載入完成再改變佈局令其出現,這種做法只會令使用者分心和失去視覺焦點。
當元素載入完成再改變佈局令其出現,這種做法只會令使用者分心和失去視覺焦點。

不可行

建立

新的material物件以及其內容都可以憑空出現(憑空被建立出來)。

建立一個新的material物件
使用者觸發某個頁面中的元素可能會建立出新的material物件。這個新的material物件一般以觸發點為基點,徑向或矩形縮放的方式出現。

如圖,當使用者觸發頁面中的元素,選單(menu)就會隨之出現。該選單跟頁面中的這個元素是相互關聯的關係。
如圖,當使用者觸發頁面中的元素,選單(menu)就會隨之出現。該選單跟頁面中的這個元素是相互關聯的關係。

可行

如圖,該選單出現的方式就好像跟使用者觸發的這個元素沒任何關係一樣。
如圖,該選單出現的方式就好像跟使用者觸發的這個元素沒任何關係一樣。

不可行

編排material物件
當我們同時建立多個material物件的時候,這些material物件應該陸續快速的出現。並且這些material物件的出現過程應該保持一條清晰、平滑的運動路徑以便於使用者聚焦。

如圖,列表中的元素有秩序地陸續出現。
如圖,列表中的元素有秩序地陸續出現。

可行

如圖,列表中的元素不應該全部一起出現。這樣會給人帶來壓迫感和失去視覺聚焦點。
如圖,列表中的元素不應該全部一起出現。這樣會給人帶來壓迫感和失去視覺聚焦點。

不可行

如圖,因為列表中的元素已經是錯開的出現,所以如果還要加以某種運動路徑在引導使用者視線的話,只會適得其反,令原本清晰的運動變得非常混亂。
如圖,因為列表中的元素已經是錯開的出現,所以如果還要加以某種運動路徑在引導使用者視線的話,只會適得其反,令原本清晰的運動變得非常混亂。

不可行

不要等一個元素出現完畢再出現下一個。每個元素出現的間隔最多不超過20ms。
不要等一個元素出現完畢再出現下一個。每個元素出現的間隔最多不超過20ms。

不可行

自動建立新的material物件
新的material物件可以不通過使用者觸發或者憑空就能出現,其出現的方式:使用簡練的淡入/出、位置以及尺寸的變化。

如圖,一個新的material物件以平滑、快速的運動方式憑空出現。
如圖,一個新的material物件以平滑、快速的運動方式憑空出現。

可行

在出現過程中使用了過多的動畫效果,這樣很容易分散使用者注意力。
在出現過程中使用了過多的動畫效果,這樣很容易分散使用者注意力。

不可行


徑向變化的反饋方式

使用徑向變化的反饋方式來提醒使用者是否觸發(輸入)。

使用者輸入
無論是滑鼠點選還是手指觸發,都是通過波紋(徑向變化)動效和觸發點的指示來告訴使用者輸入(觸發)事件被系統接收。

以觸發點為中點向外做波紋(徑向變化)動效。

以觸發點為中心向外做波紋(徑向變化)動效。
以觸發點為中心向外做波紋(徑向變化)動效。

如圖中案例,當使用者觸發“返回”鍵,整個導航欄的顏色以觸發點為中心向外擴散(波紋動效)改變顏色。
如圖中案例,當使用者觸發“返回”鍵,整個導航欄的顏色以觸發點為中心向外擴散(波紋動效)改變顏色。

如圖中案例,當使用者點選某張圖片,其餘圖片會以點選圖片為中心向外擴散淡出。
如圖中案例,當使用者點選某張圖片,其餘圖片會以點選圖片為中心向外擴散淡出。

相關文章