Material Design 概念,環境和基本屬性
Material Design是隨Android 5.0推出的一種設計概念, 涉及到了跨平臺和裝置的視覺,動態,互動設計等方面.
設計概念
Material Design的靈感來自於對紙和墨水的研究,基於觸覺現實感.並且它還在繼續地發展擴充,有很大的想象空間.
基於現實,讓材料的表面和邊緣提供視覺線索. 熟悉的觸覺屬性可以幫助使用者快速地明白正在發生什麼.
光,表面和運動的一些基本規則是很關鍵性的因素,它們可以傳達物體在空間如何存在,運動和互動.
運動是很關鍵的因素,可以吸引注意力和保持連續性. 反饋需要微小但是清晰, 轉換需要有效率但是還要保持連貫.
Material Environment
Material環境是一個3D環境:
新新增的Z軸垂直於手機平面,指向螢幕正面之外(指向使用者).
每一片材料都佔據了Z軸上的一個地方,預設有1dp的厚度.
光和影
在material環境中是有光照的,主要的光線建立了有方向的影子,同時環境光創造了全方向的軟陰影.
Material properties
物理屬性:
材料有各種X和Y軸尺寸(dp單位), 但是有統一的Z軸尺寸,也就是厚度,都是1dp.
材料會投出影子. 影子是由於材料元素之間Z軸的相對位置自然導致的. 不要給相同Z軸位置的材料元素之間加上影子,這樣會導致誤解.
材料可以展示shape和colour的內容,各種影像視訊, 內容不會給材料增加厚度.
內容的行為是與材料獨立的,但是它不能超出材料的邊界. 比如內容可以在材料限定的框裡獨立運動和縮放.
材料是實心的(solid). 輸入事件不能穿過材料去影響下層的材料.
多種材料元素不能同時佔據同一維度空間,可以改變它們的高度.
材料不能穿過其他材料,因為它們都被認為是實心的.
材料轉換:
材料可以改變形狀,大小,但是它的生長和縮小都只能侷限在它的平面.
材料不能彎曲或者摺疊.
多片材料可以組合到一起變成一片材料.
材料也可以分割,再合成一片等等.
材料的運動:
材料可以自然地生成或者銷燬.(縮放動畫).
材料可以以任意的軸向運動.(比如任意軸旋轉).
Z軸向的運動通常是因為使用者和材料的互動.
3D空間中的物體
Material Design中的物體和真實世界的物體有類似的特質.
在真實的物理世界中,物體可以堆積或者附著在一起,但是不能穿過去, 物體也會投射出影子,發射光線.
這些特性組成了一個使用者熟悉的空間模型,可以跨應用一致應用.
Elevation (Android)
高度(Elevation)指的是兩個表面之間的Z軸相對距離. child的高度是相對於它的parent的.
高度測量的單位和X軸Y軸相同,通常用dp. (density-independent pixels).
由於材料有一個標準的1dp厚度,所有的高度都是測量兩個表面頂部之間的距離.
Resting elevation: 靜止高度
每一個材料物體都有一個靜止高度(預設高度), 稱作resting elevation.
物體的預設高度一般是不會改變的,即便要改變自己的高度,也應該儘快回到自己的預設高度.
比如一個材料,正常的高度是2dp,當它被點選時,它的高度變為6dp,當點選結束,它應該回到預設的2dp.
一個元件的預設高度在各個app中應該是一致的.
但是跨平臺的情況,高度可以不同,比如,TV比移動和PC端的深度更大.
Responsive elevation and dynamic elevation offsets
響應式的高度和動態高度偏移
一些元件型別有響應式的高度,也即,有的元件會用高度變化來響應使用者的輸入(比如,正常,獲得焦點,點選)或者系統的事件. 這些高度變化用動態高度偏移來統一實現.
動態高度偏移(Dynamic elevation offsets)是元件相對於它的靜止高度來說,要移動的目標高度(goal elevation). 它們保證了無論動作和元件型別, 高度變化是一致的. 比如,所有在點選時需要提高高度的元件,它們提高的程度是相等的.
比如,雖然floating action button的靜止高度比其他button高,但是它點選後也是跟其他button一樣在自身的靜止高度上提高6dp (Dynamic elevation offset).
一旦輸入事件完成或者取消,元件都會回到自己的靜止高度.
有用的Shadow
陰影提供了非常重要的視覺線索,顯示出物件的深度和有方向的運動.
它們是唯一可以顯示介面之間分離程度的視覺線索.
(如果沒有陰影,就顯示不出來floating action bar和下方介面是分離的).
一個物件的高度決定了它的陰影.
更模糊的陰影一般顯示出了更高的高度.
運動過程中,陰影也可以為我們提供運動方向的線索,各個表面之間的距離到底是增大還是縮小.
有陰影的變化,我們能判斷出有高度的變化.
高度高的物體投射出更大更模糊的陰影.
如果陰影沒有變化而大小變化,說明是物體被放大了(尺寸改變),而不是高度變化了.
Object relationships: 物體關係
物體的繼承關係
你在一個應用中如何組織物體或者物體的集合,決定了它們相對於彼此如何運動.
物體可以獨立運動,也可以被它們繼承關係中更高階的物體所限制.
所有的物體都處在一個繼承體系中,有著parent-child的關係,一個元素可以是另一個元素的child,也可以是系統的child.
Parent-child規範:
(1)每一個物件都有一個parent;
(2)每一個物件都可以有若干個children;
(3)child繼承了parent的轉變屬性,比如位置,縮放,旋轉和高度.(parent移動的時候上面的child也一起動);
(4)兄弟(siblings)指在繼承體系中處於同一級的物件.
幾個特例:
Items parented to the root, 比如基本UI元素, 運動是和其他元素獨立的.
比如, floating action bar不隨著內容滾動.
還有其他元素包括: 應用的邊界導航抽屜選單; action bar, Dialogs.
互動:
物體在繼承體系中的parent-child地位決定了它們之間如何互動.
比如:
1.children和parent之間的z軸距離是最小的,其他不在這個繼承體系中的物件是不能介入到parent和children之間的.
2.在一個滾動的card集合中,所有的card都是兄弟,所以它們一起運動,它們的運動由它們的容器(集合物件)控制.
高度:
物體的高度取決於你想表達的內容體系,也取決於一個物件是否需要獨立於其他物件來運動.
參考資料:
Material Design: http://www.google.com/design/spec/material-design/introduction.html