Material Design

Material Design基礎

Material Design，中文名：材料設計語言，是由Google推出的全新的設計語言，谷歌表示，這種設計語言旨在爲手機、平板電腦、臺式機和「其餘平臺」提供更一致、更普遍的「外觀和感受」。

Material就像是理性空間和運動系統的統一理論，Material根植於現實觸覺，來源於對紙和油墨的研究，加上技術性的提高，也加入了更多難以想象的想像力。

以上是Google對Material Design的表述，大體能夠描述爲基於現實世界的紙和油墨，但並不侷限於這些元素在現實世界的表現。 在Material Design的設計思想裏，紙是全部元素的載體。可是和現實世界的紙不一樣的是：

• 紙能夠自由伸縮，還能夠改變形狀。
• 紙不會忽然出現，一般是以動畫形式出現，例如大小變換、滑動位移。
• 兩張紙的邊緣發生碰撞時會互相推進。
• 一張紙能夠分紅兩張紙，也能夠是多張紙合成一張紙。
• 紙不能從另外一張紙的中間穿過，可是能夠從其表面滑過。
• 紙的x、y軸尺寸是可變的，z軸則是固定爲1dp的厚度。

Material Design世界的紙

紙有固定的厚度，而且能夠從另外一張紙的表面滑過。說明Material Design是三維的，第三維即Z軸，表示紙距離屏幕的遠近，這個距離會影響紙的陰影，也決定紙與其餘紙在三維空間裏的先後關係。 手機屏幕是平面的，沒有第三個維度，那麼如何在屏幕上實現Z軸呢？使用傳統的虛化或遮擋（前面的紙會遮擋住後面的紙）、透視（距離屏幕表面更近的紙顯示更大）和陰影（距離屏幕更近的紙會投射出陰影）技術能夠實現。 將這些傳統的技術結合在一塊兒，你能清晰的看到兩張紙之間的距離與大小，並且瞭解一張紙在另外一張紙的前面。

在平面上實現三維空間

陰影是在光源的照射下產生的，Material Design世界中的陰影來自2個光源：主光源和環境光。舉個例子，你使用相機給別人拍照，相機的閃光燈就是主光源，周圍的其餘光源則是環境光。環境光在各個方向製造柔和的陰影，而主光源位於屏幕頂端的中心位置，投射明顯的陰影在紙的下方。這種對視覺細節的研究使陰影看上去更加真實。

Material Design世界的陰影

Material來源於對紙和油墨的研究，除了紙，墨水也是Material Design的一個關鍵要素。Material Design世界的墨水是指紙的顏色和紙上的文本，墨水沒有厚度，能夠在紙上隨意移動、放大或縮小、改變顏色或形狀。好比，一張照片能夠從略縮圖擴展爲原圖，還能夠查看照片細節。

Material Design世界的油墨

交互是應用程序設計中常常被忽略的部分，在用戶輕觸按鈕打開新頁面的過程當中，按鈕會放大、縮小或改變顏色？新頁面是滑入仍是從舊頁面放大？過去，輕觸事件經常是以改變背景顏色的形式反饋，在列表中輕觸一行時，背景色可能忽然從白色變成藍色。 Material Design的交互要求天然過渡，最典型的輕觸反饋就是以觸點爲中心的漣漪。就像是手指輕輕觸碰湖面後，看到水的波紋從指尖向外擴散開來的景色。另外，若是單獨的一張紙對輕觸做反饋，整張紙會升起來，就像是急切的想和手指相遇同樣。 Material Design中動畫首先要求流暢，其次是能根據狀況對動畫加速或減速，就像開車踩油門的時候，速度上升有一個過程。另外，目的也是動畫還有一個重點，動畫的目的不是讓用戶驚訝，也不是用來分散注意力，更不是爲了使應用更有趣。動畫的真正目的是讓用戶理解前一種狀態與後一種狀態之間是怎麼樣過渡的，這樣不只能引導用戶注意到關鍵的元素，還解釋了是什麼、在哪裏發生了變化。

• Material Design是一個統一的系統，它結合了理論、資源和工具來製做數字體驗。

創造一種視覺語言，將優秀設計的經典原則與技術和科學的創新和可能性結合起來。 容許在不一樣平臺和設備大小之間進行統一的體驗。

• 材料是比喻

例如現實的照明顯示接縫，分隔空間，指示移動部件。

基於對紙和墨水的研究的啓發而創建在觸覺的現實基礎上，而技術上的進步釋放了想象的空間。

• 大膽，圖形，想象力

基於打印的設計的基本元素——排版、網格、空間、比例、顏色和圖像的使用——指導視覺處理。這些元素遠遠超過了眼睛的視覺。它們建立層次、意義和焦點。深思熟慮的顏色選擇、邊緣到邊緣的圖像、大規模的字體設計和有意的白色空間，創造了一個大膽而生動的界面，讓用戶沉浸在體驗中。 對用戶操做的強調使核心功能當即變得明顯，併爲用戶提供了路徑。

• 有意義的運動

運動是有意義的，也是適當的，它有助於集中注意力和保持連續性。反饋微妙而清晰。過渡有效而連貫。

• 空間環境

全部的物質對象都有x，y和z維。 全部的物體都有一個z軸的位置。 主要的燈光會產生方向性的陰影，而周圍的光線會產生柔和的陰影。

• 特性

物質具備某些不可改變的特性和固有的行爲。

物理屬性

1.材料有不一樣的x和y尺寸和均勻的厚度(z)。
2.材料投下陰影。陰影在物質元素之間的相對海拔(z位置)天然產生。
3.內容以任何形狀和顏色顯示在材料上。內容不會增長材料的厚度。
4.內容能夠獨立於材料，但在材料的範圍內是儘可展現有限的。
5.材料是實體。輸入事件不能經過材料。
6.多重物質元素不能同時在空間中佔據相同的位置。
7.材料不能經過其餘材料。
例如，一層材料在改變高度時不能經過另外一層材料。

形變

1.材料能夠改變形狀。
2.物質在它的平面上拉伸和收縮。
3.不要彎曲或摺疊。
4.材料能夠鏈接在一塊兒，成爲一層材料。
5.當分裂時，物質能夠治癒。
例如，若是你把一塊材料從一塊材料中移走，那麼材料的薄片就會變成一整張紙。

動態

1.物質能夠自發產生或銷燬於空間中的任何地方。
2.材料能夠沿着任何軸移動。
3.z軸運動一般是用戶與材料交互的結果。

• 海拔和陰影

在物理世界中，物體能夠被堆疊或粘在一塊兒，但不能經過彼此。物體也會投射陰影，反射光線。 材料設計反映了這些品質，造成了一種對用戶來講很熟悉的空間模型，而且能夠在應用中一致地應用。

海拔

從一個表面到另外一個表面，一個元素的高度代表了表面和它的陰影的深度之間的距離。
1.靜態海拔
全部的物質元素都有靜止的高度。雖然組件在不一樣的應用程序之間有着一致的靜態高度，但它們在不一樣平臺和設備上可能有不一樣的靜態高度。
2.動態的高度補償
動態海拔偏移量是一個構件相對於靜止狀態的目標提高。

• 陰影

陰影爲物體的深度和方向運動提供了重要的視覺線索。它們是惟一的視覺線索，指示出物體表面之間的距離。物體的高度決定了它的影子的外觀。

Material Design設計技巧

不少人覺得作個應用程序很簡單，因此描述需求的時候及其模糊，本身都不知道要作的東西的具體功能，結果項目作出來跟本身想的徹底不同。項目上線的時候漏洞百出，反覆修修補補解決不了問題，後面直接報廢重作。
在開始開發一個新應用時，最麻煩的就是需求改來改去。因此首先須要列出要實現功能的表單，而後連續劃掉不重要的項目，直到表單中只剩下核心功能，這樣能確保應用的特徵和功能點。新應用能夠在後續版本中添加其餘功能，可是不能一開始就實現全部的功能，開發進度到一半纔開始核心功能。
在應用程序開發之初，有沒有想過，用戶爲何要使用你的應用程序呢？試着回答「用戶爲何要用這個應用」，答案中不能包含「和」、「或」等鏈接詞，並且不能有第二句，好比「用戶用這個應用快速地發送郵件」。若是你能回答出這個問題，說明你準備好了。
一個關於郵件的應用中，查看郵件也是這個應用的一個重要功能，但最重要的是發送郵件，這就明確了應用的首屏就能夠發送郵件，或者是經過懸浮按鈕來實現。儘管一個應用的功能越多對用戶有吸引力，好比，應用能夠識別附件中的發票文件，你仍須要把最重要的事作好，畢竟沒人會爲了識別發票而使用這個應用。

Google郵箱應用Inbox by Gmail

有時候，應用由於有多個核心功能而致使錯綜複雜，很差分離或需求失控。這種狀況下須要幫用戶理清思路，有目的地拆分功能。在早期的Android中，相冊和相機屬於同一個應用，部分手機廠商將二者分開並定製了一些其它功能，後來Google也將二者分離，用戶使用相冊應用查看照片、使用相機應用拍攝照片。
移動應用只能使用小屏幕來承載，而你常常須要傳遞不少信息，可是用戶只會頻繁、快速地看一眼應用。這意味着用戶看到的摘要信息必須簡單明瞭，儘可能使用短文本，讓用戶清楚地明白按鈕要表達的動做。好比，使用「保存修改」而不是「肯定」，這樣按鈕的功能就顯而易見了。
用戶對第一次使用的應用有較高的要求，因此應用的核心功能必需明確、顯著。例如，打開備忘錄應用，看到一個大大的加號圖標，直接就猜到這是一個新建備忘項的按鈕。簡單按下新建按鈕的真正意義在於新建的同時顯示了用戶未曾關注的信息，好比建立時間、用戶位置等。當備忘項保存後，應用能掃描關鍵詞，並作一些有用的事情，好比將備忘項中的時間添加至鬧鐘應用。這些都是在新建備忘項之初，用戶不須要考慮的。
若是應用提供了照片濾鏡的功能，不要簡單的顯示「增強對比」、「去掉紅色通道」等這些圖像處理的技術名詞，最好直接顯示預覽縮略圖，讓用戶能夠直觀的看處處理效果。當用戶將新聞列表滾動到底部時，應用要自動獲取下一組新聞。這些簡單的特性能讓用戶感受到增長了主控性。

Google照片應用

應用須要適應用戶，適應用戶不只是說要根據用戶設備來調整應用，還包括考慮用戶的使用習慣。最簡單的適應用戶的方式就是爲用戶提供個性化的設置。例如，一個閱讀應用，在夜間閱讀時，有的用戶喜歡黑底白字，還有的用戶喜歡白底黑字，這時就須要注意提供這些個性化需求。
有時候，產品經理或其餘人員會要求應用啓動時人工延遲兩秒，以顯示全屏的廣告推廣圖。若是你的競爭對手的應用在幾百毫秒內就能夠打開，試問用戶會選擇哪一個？用戶每次看到應用的真正內容以前都要人工延遲一會，也不怪用戶會改換其餘應用了。 最後還有一招，就是記住，即便用戶犯錯了，也永遠是對的。用戶清楚本身進行的是「刪除」操做，不用每次都提醒「你肯定要刪除嗎？」，不要爲了不用戶犯錯而使功能變得難以使用。應用要讓用戶能簡單的進行撤銷，使功能的使用更簡單，並以此來鼓勵用戶大膽探索你的應用。固然，若是撤銷某個操做是不可能的，那最好仍是提供一下確認對話框。

Google記事和清單應用Keep

Material Design之Motion

在Material Design中，運動被用來描述空間的關係，功能，流動美的意圖。

運動的做用

• 引導佈局中的焦點軌跡
• 引導用戶的手勢操做
• 展現元素之間的層次結構和空間關係
• 分散在幕後的事情(好比抓取內容或加載下一個視圖)
• 提高用戶體驗

如何運動

物質環境從現實世界的力量中汲取靈感，好比重力和摩擦力。這些力量反映在用戶輸入影響屏幕上的元素以及元素如何相互做用的方式上。

1.響應

快速響應用戶輸入，準確地響應用戶的觸發

2.天然

天然運動的靈感來自於現實世界中的力學

3.意識

材料能夠感知周圍的環境，包括用戶和周圍的其餘材料。它能夠被元素吸引，並對用戶的意圖做出適當的響應。

4.意向性

在正確的時間，運動指南中的有意材料將焦點放在正確的地點。

如何作到更好的連貫

成功的運動設計具備如下特色:
1.運動是快速
交互不該該讓用戶等待的時間超過必要的時間。
2.運動是清楚的
過渡應該是清晰、簡單和連貫的。他們應該避免作太多的事情。
3.運動要統一
物質元素的速度、響應能力和意圖是統一的。任何對應用程序的動做體驗的定製都應該在整個應用程序中保持一致。

合適的時長&天然的過分曲線

運動中的物質是響應性和天然性的。使用這些放鬆曲線和持續時間模式來建立平滑和一致的運動。

• 速度
  當元素在位置或狀態之間移動時，移動速度應該足夠快，不會致使等待，但速度足夠慢，能夠理解轉換。在用戶常常看到的狀況下，保持簡短的過渡。

• 動態的持續時間
  與其爲全部的動畫使用一個單一的持續時間，不如調整每一個持續時間來適應運動的距離，元素的速度和表面的變化。 離開屏幕的對象可能會有更短的持續時間，由於它們須要較少的關注。

• 通常時長設定
  移動端上常見的持續時間移動轉換一般發生在300毫秒左右，在這種差別的範圍內:大的、複雜的、全屏幕的轉換可能有更長的持續時間，超過400ms的過渡可能感受太慢。
  大屏幕上的大屏幕元素的距離較長，其峯值速度要高於在同一時間段內較短的距離。更大的屏幕應該有更長的時間，這樣移動的速度就不會太快。
  平板電腦的持續時間應該比移動設備長約30%。例如，在平板電腦上，300毫秒的移動時間將增長到390ms。
  可穿戴設備上的持續時間應該比移動設備短約30%。例如，在可穿戴設備上，300毫秒的移動續航時間是210ms。因爲材料必須在更大的設備上移動更大的距離，因此過渡的時間可能比小的設備要慢一些。
  桌面的動畫應該比他們的移動設備更快更簡單。這些動畫的效果應該是150毫秒到200毫秒。由於桌面轉換可能不那麼引人注目，因此它們應該當即響應，而且比移動設備更快。
  複雜的web轉換一般會致使掉幀(除非它們是爲GPU加速而構建的)。較短的持續時間將使這些不太明顯，由於動畫完成得更快。

• 天然緩和曲線

這些天然的放鬆曲線會影響一個元素的速度、不透明度和尺度。
在動畫的持續時間內，加速和減速的變化應該是平滑的，這樣運動纔不會顯得機械。
當加速度和減速不對稱地發生時，運動顯得更加天然和使人愉悅。

根據使用的平臺或軟件，能夠根據不一樣的平臺來命名不一樣的曲線。
這些指導方針將把它們稱爲標準、減速、加速和銳曲線。

標準曲線

標準曲線

標準曲線是最多見的曲線。
在屏幕上的位置之間，元素會迅速地加速和緩慢地減速。
它適用於不斷增加和收縮的材料，以及其餘的財產變化。

減速曲線

減速曲線

使用減速曲線，元素以全速進入屏幕，並緩慢減速到一個休息點。
在減速過程當中，元素能夠在大小(到100%)或不透明度(到100%)中進行擴展。
在某些狀況下，當元素以0%的不透明度進入屏幕時，它們可能會在進入時稍微縮小一些。

加速度曲線

加速度曲線

使用加速曲線元素以徹底速度離開屏幕。
在屏幕外，它們不會減速。
在動畫開始的時候，它們會加速，而且能夠縮小到任意大小(到0%)或者不透明度(到0%)。
在某些狀況下，當元素以0%的不透明度離開屏幕時，它們可能也會稍微放大或縮小。

鋒利的曲線

鋒利的曲線

使用鋒利的曲線，元素會迅速加速和減速。 它是由退出元素所使用的，這些元素可能在任什麼時候候返回到屏幕上。 元素能夠從屏幕上的起始點迅速加速，而後在對稱的曲線上迅速減速，而後在屏幕外的休息點迅速減速。 減速比標準曲線要快，由於它沒有沿着偏離屏幕的精確路徑。 元素能夠在任什麼時候候從那個點返回。