2017 Material design 第二章第四節《Material的變化》

D27發表於2017-07-27

四、Material的變化(Transforming material)

Material能夠通過改變自己的形狀和尺寸來吸引使用者關注。

矩形的變化(Rectangular transformation)
不同時
同時

徑向變化(Radial transformation)
對稱和圓形

矩形的變化

Material物件的形狀(尺寸)上的變化並不是同時放大(或縮小),而是寬和高錯開放大(或縮小),同時分別應用緩動曲線效果。這些Material物件大小的縮放不單單隻考慮自身的變化,還需要綜合考慮它與周邊或者內部其他元素的關係,精心編排整一套的物件動效變化。

凡是出現在螢幕上關於material物件自身的變化都需要應用標準曲線的運動效果,比如下面的例子所示。

寬和高的變化
物件的寬、高變化可能同時發生變化,也可能不同時發生變化。

不同時發生變化的意思就是說寬和高不在同一時間開始放大(或縮小)。這種寬高變化方式適合涉及到多個物件變化或發生位置變化的情況。

不同時發生變化。如圖,當物件的尺寸放大時,該物件的寬在高之前一點開始發生變化。反之,當物件的尺寸縮小時,該物件的高在寬之前一點開始發生變化。
不同時發生變化。如圖,當物件的尺寸放大時,該物件的寬在高之前一點開始發生變化。反之,當物件的尺寸縮小時,該物件的高在寬之前一點開始發生變化。

同時發生變化的意思就是說寬和高在同一時間開始放大(或縮小)。這種寬高變化方式適合單個物件沿單一軸向變化的情況。

同時發生變化。寬和高同時發生變化的方式適合一些簡單的大小變化動效。這種方式下的運動持續時間應比寬高不同時發生變化方式下的要短。
同時發生變化。寬和高同時發生變化的方式適合一些簡單的大小變化動效。這種方式下的運動持續時間應比寬高不同時發生變化方式下的要短。

當物件寬、高的變化是不同時發生的方式,那該物件包含的元素(如文字或影象)的尺寸變化應該按照一個固定的寬高比而不是採取寬、高不同時發生變化的方式進行變化,否則就會顯得極其不自然。更多關於包含元素的物件該如何進行變化,請看 編排

如圖,內容中元素(比如全寬(full-width)圖片)尺寸變化按照一個固定的寬高比進行縮放,儘管元素的容器(比如大的卡片)尺寸變化採用的是寬、高不同時發生變化的方式。
如圖,內容中元素(比如全寬(full-width)圖片)尺寸變化按照一個固定的寬高比進行縮放,儘管元素的容器(比如大的卡片)尺寸變化採用的是寬、高不同時發生變化的方式。

如圖,容器中的內容如果是全出血(full-bleed)的(比如全出血的圖片),那麼這個全出血的內容應該跟隨其容器一樣採用寬、高同時發生變化的方式。
如圖,容器中的內容如果是全出血(full-bleed)的(比如全出血的圖片),那麼這個全出血的內容應該跟隨其容器一樣採用寬、高同時發生變化的方式。

徑向變化

徑向變化採用的是等比例(寬、高同時變化)的縮放方式,其變化來自使用者觸發。徑向變化一般用於圓形變化成其他圖形。

圖中圓形變化成矩形的動效應用的是徑向變化。
圖中圓形變化成矩形的動效應用的是徑向變化。

可行

如圖,徑向變化不適用於兩個矩形之間的變化。
如圖,徑向變化不適用於兩個矩形之間的變化。

不可行

徑向變化一定要等比例進行縮放,否則就會像圖中一樣奇怪。
徑向變化一定要等比例進行縮放,否則就會像圖中一樣奇怪。

不可行

不要使用複雜的圖形進行變化。
不要使用複雜的圖形進行變化。

不可行

以當前被觸發物件的中心位置為準開始變化。

如圖中案例,浮動按鈕(FAB)的中心沿著弧線向上移動逐漸變化成一張卡片(card);反之,卡片的中心沿著弧線向下移動逐漸變回浮動按鈕。
如圖中案例,浮動按鈕(FAB)的中心沿著弧線向上移動逐漸變化成一張卡片(card);反之,卡片的中心沿著弧線向下移動逐漸變回浮動按鈕。

如圖中案例,浮動按鈕保持中心點不變的情況下進行變化
如圖中案例,浮動按鈕保持中心點不變的情況下進行變化

合併與分裂

合併
Material物件可以與其他物件合併,也可以分裂出多個Material物件。當兩個物件合併的時候,它們相互接近,直到邊緣相遇、重疊,最後結束移動完成合並。

分裂
當material物件分裂出多個物件的時候,其中每個被分裂的物件只需要相互移動離開就能完成分裂。

投影
分裂出來的material物件的投影不會投射到其他物件的身上。

material物件的合併與分裂
material物件的合併與分裂

相關文章