Material Design說明

原文連接: Material Design

引言

　　咱們挑戰自我，爲用戶創造了一種視覺語言，綜合了好設計的經典原則，革新以及科技的可能性。這就是material design。這份說明是一個動態的文檔，會隨着咱們持續開發material design的原則和特性而更新。

內容

• 目標

• 原則

目標

　　創造一種視覺語言，綜合良好設計的經典原則，革新以及科技的可能性。

　　開發一個單一的底層系統，提供跨平臺和設備尺寸的統一體驗。移動性是根本，但觸摸，語音，鼠標和鍵盤都是第一層級的輸入方法。

原則

• Material 是一種隱喻

　　Material的隱喻是關於合理化的空間和系統化的操做的統一理論。 Material紮根於可知覺的現實中，受到對紙和墨的研究的啓發，然而在技術上是先進的，同時對想象的魔力開放。

　　Material的表面和邊緣提供了立足於現實的視覺線索。對熟悉的觸覺屬性的使用，幫助用戶快速理解功能可見性。然而Material的靈活性還創造了一種新的功能可見性，超越了物理世界已存在的那些，同時又沒有打破物理法則。

　　光線，表面和運動的基調是傳達物體如何移動、交互、在空間中存在及其相互關係的關鍵。現實風格的光線顯示出縫隙，區分開空間，指示出可活動的部件。

• 大膽的，形象的和故意的

　　基於印刷體的設計排版的基礎元素，如網格，空間，比例，顏色和由意象引導的視覺處理，這些元素所能作到的遠遠不止愉悅眼球。它們創造了層級，意蘊和焦點。深思熟慮的顏色選擇，邊緣間的意象，大比例的排版和有意的留白創造了一種大膽而形象的界面，讓用戶沉浸於使用體驗之中。

　　對用戶行爲的強調使得核心功能馬上可見，爲用戶提供了路標。

• 動做提供了意義

　　動做尊重和強化用戶做爲主要移動者的地位。最初的用戶行爲是開始動做的轉折點，轉變着整個設計。

　　全部的行爲都在單一環境中發生。客體在不打斷用戶體驗的持續性的狀況下呈現給用戶，即便它們在轉換和重組。

　　動做是有意義的和合理的，爲集中注意力和維持持續性服務。反饋是微妙但清晰的。轉換是有效而連貫的。

什麼是Material？ —— 環境

內容

• 3維世界

• 光線和陰影

3維世界

　　Material環境是一個3維空間，這意味着全部的客體都有x、y和z軸的尺度。z軸與顯示平面正交，正的z軸方向向觀察者處延伸。每一片Material佔據z軸上的一個單一位置，並有一個標準的1dp厚度。

　　在網頁上，z軸是用來分層而不是透視。3維世界是經過操縱y軸而模仿出來的。

光線和陰影

　　在Material環境中，虛擬的光線照亮了整個場景。關鍵的光線創造出有向的陰影，同時環繞的光線創造出全角度的柔和陰影。

　　在Material環境中，陰影是由兩種光源投射出來的。在Android開發中，當z軸上不一樣位置的material擋住光源時，會產生陰影。在網頁上，陰影僅經過操縱y軸位置描繪出來。下面的例子顯示了一張高度爲6dp的卡片產生的陰影。

什麼是Material？ —— Material的性質

　　Material擁有特定的不可變特性和內在的行爲。理解這些特質會幫助你用與Material設計相一致的方式來操控Material。

內容

• 物理屬性

• Material的轉換

• Material的移動

物理屬性

　　Material有不一樣的x和y軸尺寸(用dp衡量)，和統一的厚度(1dp)。

• Material的高度和寬度能夠不等。

• Material的高度應該始終是1dp。

　　Material會投射陰影。

　　陰影是由Material元素之間的高度差(z軸)天然的形成的。

• 陰影描述了Material元素間的相對高度。

• 永遠不要經過給Material着色來近似估計陰影。

　　內容在Material上顯示，能夠是任何形狀或顏色。內容不會給Material增長額外的厚度。

• Material能夠顯示任何形狀和顏色。

　　內容能夠獨立於Material運做，但被限制在Material的邊界以內。

• 內容的行爲能夠不依賴Material的行爲。

　　Material是立體的。

　　輸入事件不能穿過Material。

• 輸入事件只會影響前臺Material。

• 輸入事件沒法穿過Material。

　　多個Material元素不能同時佔據空間中的同一點。

• 使用高度來區分不一樣的Material元素是一種防止多個Material元素佔據空間中同一點的方法。

• 多個Material元素沒法同時佔據空間中的同一個點。

　　Material不能穿過另外一個Material。

　　例如，當改變高度時，一片Material不能穿過另外一片Material。

• Material不能越過另外一個Material。

Material的轉換

　　Material能夠改變形狀。

• Material能夠改變形狀。

　　Material能夠沿着它所在的平面變大或縮小。

• Material盡能沿其所在平面變大或縮小 。

　　Material永遠不會彎曲或摺疊。

• Material永遠不彎曲或摺疊。

　　多片Material能夠合併到一塊兒變成一片Material。

• 多片Material能夠合併成一片。

　　當分割時，Material能夠恢復。例如，若是你去掉一片Material中的一部分，該片Material會再次變成一整片。

• Material能夠分割和從新恢復完整。

Material的移動

　　Material能夠自發的在環境中的任何地方產生或者銷燬。

• Material能夠自發的產生或者銷燬。

　　Material能夠沿着任何軸移動。

• Material能夠沿着不一樣的軸移動。

　　z軸的運動典型來講是用戶和Material交互的結果。

• z軸的運動由用戶交互引發。

什麼是Material？ —— 高度和陰影

　　在Material Design中的客體擁有和物理世界中的客體相似的性質。在物理世界中，物體能夠堆疊或者粘貼到另外一個物體上，但不能穿過別的物體。物體能夠投射陰影和反射光線。

　　這些性質組成了用戶熟悉的空間模型，能夠跨不一樣應用一致的使用。高度和陰影的概念能夠鞏固這一空間模型。

內容

• 高度(Android)

• 陰影

• 物體間關係

高度(Android)

　　高度是指相對深度，或者沿z軸的兩個表面之間的距離。

說明：

• 高度的計量單位和x、y軸一致，典型來講是用密度無關像素(dp)。由於Material元素擁有厚度(全部的Material都是1dp厚)，高度的測量方法是從一個表面的頂部到另外一個表面的頂部。

• 子對象的高度是相對於父對象的高度來講的。

靜止高度

　　全部的Material對象，不論其尺寸是多少，都有一個靜止高度，或者說不變的默認高度。若是一個對象的高度被改變了，它應該儘快地會到其默認高度。

組件高度

• 組件類型的靜止高度應該是跨應用一致的(例如，FAB的高度不該該在一個應用中是6dp而在另外一箇中是16dp)。

• 組件在不一樣的平臺中能夠有不一樣的靜止高度，這依賴於環境深度(例如，電視比手機或電腦的深度大)。

響應深度和動態深度偏移

　　有些組件類型擁有響應高度，意味着在響應用戶輸入(例如觸摸或按下)或系統事件時，它們的高度會改變。這些高度的改變經過動態高度偏移一致的實現。

　　動態高度偏移是組件移動的目標高度，相對於組件的靜態狀態來計算。它保證了對不一樣的操做和組件類型，高度的變化是一致的。例如，全部按下時會擡高的組件，相對於它們的靜態高度來講都會有一樣的高度變化。

　　一旦輸入事件完成或被取消，組件會回到它的靜態高度。

避免高度干擾

　　擁有響應高度的組件，當它在靜態高度和動態高度偏移之間移動時，可能會遭遇其它的組件。由於其它的Material不能穿過其它的Material，組件應該避免以任何方式干擾其它組件，不管是針對單個組件來講仍是使用整個應用的佈局。

　　在組件水平上，組件能夠在它們引起干擾以前移動或者被移除。例如，一個浮動操做按鈕(FAB)能夠在用戶選取一張卡片時消失或者移動到屏幕後，或者在snackbar出現時移開。

　　在佈局水平上，設計你的應用佈局，讓發生干擾的機會最小。例如，將FAB放置在卡片流的旁邊，這樣當用戶視圖挑選一張卡片時，浮動操做按鈕不會干擾。

• 24dp: Dialog, Picker;

• 16dp: Nav drawer, Right drawer, Modal bottom sheet;

• 12dp: Floating action button(FAB-pressed);

• 9dp: Sub menu(+1dp for each sub menu);

• 8dp: Menu, Card(picked up state), Raised button(pressed state);

• 6dp: Floating action button(FAB-resting elevation), Snackbar;

• 4dp: App Bar;

• 3dp: Refresh indicator, Quick entry/Search bar(scrolled state);

• 2dp: Card(resting elevation), Raised button(resting elevation), Quick entry/Search bar(resting elevation);

• 1dp:Switch.

陰影

　　陰影提供了關於物體深度和有向移動的重要視覺線索。它們是不一樣表面間全部間距的惟一視覺線索。一個物體的高度決定了它的陰影。

• 沒有陰影，沒法代表FAB(floating action button)同背景的表面是分隔開的。

• 銳利的陰影代表FAB和藍色的薄片是單獨的元素。然而，它們的陰影如此相似，這意味着它們有一樣的高度。

• 更柔和，更大的陰影代表FAB的高度比擁有銳利影子的藍色薄片高。

　　對於動做，陰影提供了有用的線索，來代表物體的移動方向，以及表面間的距離是增長了仍是減小了。

• 沒有陰影來代表高度，沒法肯定方塊是增長了尺寸仍是增長了高度。

• 當物體高度增長時，陰影變得更柔和，面積增大；反之，陰影會變得銳利，面積縮小。

• 一致的陰影幫助用戶理解，物體是在改變形狀而不是改變高度。

物體間關係

物體層級

　　在一個應用中，你組織物體或物體集合的方式決定了它們之間如何互相移動。物體能夠獨立於其它物體移動，也能夠被高層級的物體約束着移動。

　　全部物體都是一個用父子關係來描述的層級中的一部分。每個這些關係中的「兒子」都是它的「父」元素的從屬元素。物體能夠是系統或者其它物體的子元素。

　　父子關係的特性：

• 每個物體都有一個父元素。

• 每個物體能夠有多個子元素。

• 子元素繼承父元素變化的屬性，例如位置，旋轉，縮放和高度。

例外

　　父元素是根元素的項目，例如主要的UI元素，會獨立於其餘物體移動。例如，FAB不會隨着內容滾動。其它元素包括：

• 應用的側邊導航抽屜。

• 狀態欄。

• 對話框。

交互

　　物體之間如何交互是由它們在父子層級中的位置決定的。

　　例如：

• 子元素同它們的父元素間有最小的z軸間距，其它物體不能插入到父子之間。

• 在滾動的卡片集中，卡片之間是同級的，因此它們串聯在一塊兒移動。它們都是控制其動做的卡片集的子元素。

高度

　　你如何決定物體的高度——它們在z軸上的位置——取決於你想表達的內容的層級，以及該物體是否須要獨立於其它物體運動。

• 看成爲其父元素的薄片滾動時，凸起的按鈕（它的子元素）隨之一塊兒滾動到屏幕外。

• 當卡片集滾動到屏幕外，它的子卡片隨之一塊兒滾動到屏幕外。但FAB保留在原位置由於它的父元素沒有滾動。

動畫——真實的動做

　　正如物體的陰影代表了它可能具備的行爲，觀察一個物體移動能夠發現它的輕重，是靈活仍是僵硬，以及大小。在Material Design的世界，動做美妙而流暢地表現了空間關係，功能性以及意圖。

內容

• 質量和重量

質量和重量

　　在物理世界，要移動物體，必須給它施加力的做用。力的強度和持續時間決定了物體能多快地加速，減速或者改變方向。即便最忽然的中止和啓動都不是瞬時的，由於物體加快或者放慢速度都須要時間。所以，當動畫忽然的開始，結束或者改變方向，它們會顯得不天然。

　　在Materiald Design中的動做應該包含人們熟知的，真實世界中物體的行爲，同時又不犧牲優雅，簡潔和美觀。

天然的加速和減速

　　在動畫的持續時間中，加速和減速的變化應該是平滑的。

　　若是爲了特定目的要讓一個物體吸引注意力，或者給動畫增長特性，就讓它開始和結束時速度的變化多樣化。

• 不對稱的加速和減速創造出更天然，更讓人愉快的動做。

　　當加速或減速是不平滑的，移動會顯得很機械。速度或者方向上忽然的改變是不和諧和引人注目的。

• 避免線性地移動。

進入和退出

　　物體速度和方向的變化會引發用戶的注意。

　　當物體進入和退出邊框時，它速度的改變暗示了它將會移動的距離。例如，當退出時減速會引發注意，並代表物體將會停在框架的邊緣。

　　在轉換期間，特別要考慮的是，進入和退出的哪一部分應該獲得最大的關注。

• 球速度的改變強調了它到達和離開其靜止位置。當球以近似常量的速度進入和退出框架時，注意力是最小化的。

• 進入時加速，退出時減速，會吸引不想要的關注，擾亂用戶。

關於easing這一律念

　　在談及時間曲線時，理解所用的定義是很重要的。「緩入」和「緩出」的概念在傳統動畫和UX動畫中都用到了，取決於上下文，這些概念有相對的意義。

傳統動畫

　　傳統動畫經過繪製關鍵姿態來表現一系列的動做。在這一上下文中，緩出指的是離開一個姿態的動做，緩入指的是進入一個姿態的動做。

　　現代動畫工具用「關鍵幀」來描述這些關鍵姿態，在這個上下文中，緩入和緩出指的是引入和引出一個關鍵幀的動做。

UX動畫

　　在UX的語境中，easing指的是狀態間的轉換。所以，緩入指的是進入一個狀態的動做，而緩出指的是離開一個狀態的動做。

作出調整

　　不是全部的物體都用一樣的方式移動。更輕和更小的物體可能會移動得更快，由於它們須要的力較小，而大和重的物體可能須要更長的時間去加速。

　　使用曲線型的動做，避免線性的空間路徑。找出你的物體最適合的動做特質，而後相應地描繪它們的動做。曲線表明了在一個特定取值範圍內隨時間的變化。找出符合你所描述的動做的特性的曲線。