Material Design 概念,環境和基本屬性,materialdesign
Material Design 概念,環境和基本屬性Material Design是隨Android 5.0推出的一種設計概念, 涉及到了跨平台和裝置的視覺,動態,互動設計等方面. 設計概念Material Design的靈感來自於對紙和墨水的研究,基於觸覺現實感.並且它還在繼續地發展擴充,有很大的想象空間.基於現實,讓材料的表面和邊緣提供視覺線索. 熟悉的觸覺屬性可以協助使用者快速地明白正在發生什麼.光,表面和運動的一些基本規則是很關鍵性的因素,它們可以傳達物體在空間如何存在,運動和互動.運動是很關鍵的因素,可以吸引注意力和保持連續性. 反饋需要微小但是清晰, 轉換需要有效率但是還要保持連貫. Material EnvironmentMaterial環境是一個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