Material Design時代

yangxi_001發表於2016-01-30

由於本文引用了大量官方文件、圖片資源，以及開源社群的Lib和相關圖片資源，因此在轉載的時候，務必註明來源，如果使用資源請註明資源的出處，尊重版權，尊重別人的勞動成果，謝謝！

關於Material Design的開源庫，本人已經在GitHub上建立了一個專案MaterialDesignCenter，用於收集Material Design的相關資源,會不定時更新，大家可以star或者提交自己的MaterialDesign的資源，歡迎fork和star。

Material Design

官方Material Design詳細介紹文件：http://www.google.com/design/spec/material-design/introduction.html

Material Design是Android 5.0系統的重頭戲，並在以後App中將成為一種設計標準，而且隨著已支援Android 5.0 Lollipop的Nexus 6的開售，Google希望開發者更快的支援Material Design，連續發了3篇文章，來幫助開發者如何在自己的App 中實現Material Design。並表示：expect Winter 2014 to be a big quarter for design on Android.

目前使用過的Material Design 的Google App有 Google Play，Inbox（相當的酷炫，大家可以申請Invite，當然也可以通過已經拿到Invite的朋友幫忙啟用），顯然Material Design是必然的趨勢，Google Play上越來越多的應用開始支援Material Design，因此我覺得寫這樣一篇文章也變得迫不及待。

官方Blog關於Material Design的專題文章一共有三篇：

AppCompat v21 — Material Design for Pre-Lollipop Devices!

Implementing material design in your Android app

Material Design on Android Checklist

因為第一篇已經在剛發出的時候翻譯過了：AppCompat V21：將 Materia Design 相容到5.0之前的裝置，現在我們要介紹的是後兩篇文章，後兩篇主要從整體設計介紹了一個標準的Material Design的App應該遵循哪些設計標準，並告訴你如何在你的程式碼中實現，並介紹瞭如何向前相容。其實後兩篇在整體結構上是差不多的，只是在Implementing material design in your Android app中，側重的是Material Design的設計標準，而Material Design on Android Checklist則側重的是實現細節和注意事項，重點強調的部分為Signature element，實現部分為InCode。

儘管每一篇文章經過了仔細的斟酌和措辭，但還是覺得有一些設計方面的專業詞彙表達的不是很好。針對文章翻譯，如果有更好的建議，歡迎提出。除了翻譯外，該篇文章還有一部分重要的內容，就是收集了關於Material Design的資源和GitHub上一些關於Material Design的開源庫，讓大家更快更好的在自己的App中，應用Material Design。廢話不多說，上正文。

在你的App中實現Material Design

Material design 是一種達到視覺化，互動性，動效以及多螢幕適應的全面設計。Android 5.0 Lollipop和已經更新的support libraries將會幫助你構建Material UI。這裡提供了一些API和Widget幫助你實現MaterialDesign設計。

一、Tangible Surfaces 有型的外觀

UI由數字化的紙墨構成。表層和它帶有的陰影為應用提供了視覺化的效果。你可以觸控並觀察他的運動，這個數字化的設計具有移動，擴張，或者轉換的能力，幫助你建立靈活的UI。

1.1 Shadows

表面的位置和深度導致了在亮度和陰影方面的微弱變化。新的elevation 屬性允許你在Z軸上指定View的位置，然後框架會為該View底部的items加上實時的動態陰影。你可以在佈局中明確的以dp為單位設定它的高度。

<ImageView …
       android:elevation="8dp" />

你也可以在程式碼中通過getElevation()/setElevation()設定。陰影是新增到輪廓上的，預設來自背景。比如，你可以設定一個圓形的drawable作為floating action button的背景。它會自動轉化成適當的陰影。如果你需要手指去控制一個View的陰影，可以設定一個ViewOutlineProvider，它允許你在getOutline()中提供一個自定義的Outline.

1.2 Cards

對於建立帶有不同資訊內容的碎片，Cards是一種常見的模式。supportV7下的CardView可以幫助你方便的實現，並提供了輪廓和陰影。

<android.support.v7.widget.CardView
      android:layout_width="match_parent"
      android:layout_height="wrap_content">
      <!-- Your card content -->
 
</android.support.v7.widget.CardView>

CardView繼承自FrameLayout並提供了預設的elevation 和圓角，使得cards在不同的平臺間保持一致。你也可以通過cardElevation和cardCornerRadius屬性自定義它們的值。注意，Cards不是唯一實現維度效果的方式，你應該警惕過度的使用Cards:http://www.google.com/design/spec/components/cards.html#cards-usage

二、Print-like Design 列印式風格

Material利用了經典的列印設計，使內容前部和中心的佈局變得整潔和簡約。刻意大膽的顏色選擇，刻意的空白，美觀的印刷風格和強烈的格子線條為你建立一種有層次有意義有焦點的效果。

2.1 Typography 活字印刷

Android 5.0更新了Roboto樣式，不論多大的text，展示起來都會美觀和簡潔。新增了一種新的中等高度屬性(android:fontFamily=”sans-serif-medium”) 和新的AppAppearance樣式為了平衡內容密度和閱讀的舒適感,實現了推薦的列印式縮放的。比如你可以簡單的通過 android:textAppearance=”@android:style/TextAppearance.Material.Title” 設定 “Title”風格。在舊的版本中可以使用AppCompat support library的樣式： “@style/TextAppearance.AppCompat.Title”.

2.2 Color

調色盤為你的應用帶來了品牌營銷和個性化，通過以下屬性可以方便的控制UI的著色：

主調色彩：主調色彩是用於應用品牌推廣的色彩。作為action bar的背景色最近的任務title和其它邊緣效果。

強調色彩：鮮明的擴充套件了主調色彩。應用於框架的控制。比如EditText，Switch

主調的暗色： Darker作為主調色彩的加深，應用於狀態列 status bar.

更多用於控制色彩的屬性，可以參考：colorControlNormal.colorControlActivated.colorControlHighlight, colorButtonNormal, colorSwitchThumbNormal, colorEdgeEffect, statusBarColor and navigationBarColor.

AppCompat 為以上功能提供了大量的子集，允許你為Lollipop之前的系統控制色彩。

2.3 Dynamic color 動態的色彩

Material Design 鼓勵動態色彩的使用，特別是當你擁有豐富的iamge的時候。新的Palette的support library 支援從圖片中抽取一小部分的色彩去設計你的UI。創造出一種更逼真的體驗。你也可以新增動靜的結合效果，比如前部的text color的變化，如下兩種TextView部分色彩的切換：

三、Authentic Motion 真實的動效

有型的表面不應該像電影中的跳躍式的切換，它們的移動應該幫助引導使用者的焦點，建立控制元件關係以及保持連貫性。Meterial 響應觸控事件去確認你的互動，所有的變化會從你的Touch點輻射開來。所有的運動都是有意義並且友好的，有助於使用者更好的理解。

3.1 Activity + Fragment切換

通過宣告“shared elements” ，在兩種狀態之間你可以建立一個平滑的切換，
album_grid.xml

<ImageView
      …
      android:transitionName="@string/transition_album_cover" />

album_details.xml

<ImageView
      …
      android:transitionName="@string/transition_album_cover" />

AlbumActivity.java

Intent intent = new Intent();
String transitionName = getString(R.string.transition_album_cover);
…
ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(activity,
                                albumCoverImageView,   // The view which starts the transition
                                transitionName    // The transitionName of the view we’re transitioning to
                                );
ActivityCompat.startActivity(activity, intent, options.toBundle());

這裡我們在兩個不同的螢幕間定義了相同的transitionName 。當你啟動一個新的Activity，它的切換將會自動的動畫起來。對於進入和退出的元素，你可以自由編排。

3.2 Ripples（漣漪）

Materials以一種潑墨的漣漪的方式響應使用者的觸控事件。你可以通過使用或者繼承Theme.Material主題，即可達到這種預設的效果。你可以通過簡單的封裝將這種ripple效果新增到自己的drawables上。自定義View應該使用 View#drawableHotspotChanged 回撥方法把touch的位置傳播到它們的drawables上，以便ripple可以知道起始點。

<ripple
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:color="@color/accent_dark">
      <item>
          <shape
               android:shape="oval">
              <solid android:color="?android:colorAccent" />
          </shape>
     </item>
</ripple>

3.3 StateListAnimator

Materials 也響應了使用者抬起手指的操作。類似磁鐵吸引的效果。你可以通過tranlationZ屬性實現。它類似於elevation屬性，但主要是用於時間較短，轉瞬即逝的效果，比如 Z = elevation + translationZ。這個新的stateListAnimator 屬性允許你在使用者touch的時候簡單的在translationZ上動畫。button預設會有這種效果。

layout/your_layout.xml

<ImageButton …
      android:stateListAnimator="@anim/raise" />

anim/raise.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true" android:state_pressed="true">
         <objectAnimator
                android:duration="@android:integer/config_shortAnimTime"
                android:propertyName="translationZ"
                android:valueTo="@dimen/touch_raise"
                android:valueType="floatType" />
    </item>
    <item>
        <objectAnimator
                android:duration="@android:integer/config_shortAnimTime"
                android:propertyName="translationZ"
                android:valueTo="0dp"
                android:valueType="floatType" />
    </item>
</selector>

3.4 Reveal

material 過渡效果中的一個標誌是通過延伸一個圓形的皮膚來展示新的內容。增強了作為所有轉換起點的觸控點, 它是迅速向外擴散的. 你可以使用下面的Animator來實現：

Animator reveal = ViewAnimationUtils.createCircularReveal(
viewToReveal, // The new View to reveal
centerX,      // x co-ordinate to start the mask from
centerY,      // y co-ordinate to start the mask from
startRadius,  // radius of the starting mask
endRadius);   // radius of the final mask
reveal.start();

3.4 Interpolators 插值器

運動應該是慎重的，平滑且精確的。而不是簡單的漸入漸出。在 Material Design中，物件更傾向於快速的並舒適的啟動。通過下面的示例可以看到，在將要到達終點前的那段位置花費了更少的時間。總的來說，使用者不會等待較長時間，運動的負面效果就變得最小化了。有一種新的插值器，可以達到這種效果https://developer.android.com/reference/android/R.interpolator.html?utm_campaign=L-Developer-launch#fast_out_slow_in

對於進入和退出螢幕效果，請分別參考： linear-out-slow-in 和 fast-out-linear-in interpolators respectively.

四、Adaptive Design (and UI Patterns)

material 最終的核心概念是建立一種自適應於不同大小形狀裝置的設計，從手錶到TV。自適應設計技術幫助我們實現了不同的裝置但相同的底層系統體現為不同的View。每個View對那個裝置來說，都是量身定做的。色彩，圖片，層次，空間的相對關係都保持不變。material design 系統提供了便利的元件和模式幫你構建一個如此有擴充套件性的設計

Toolbar

與Actionbar很類似，但是更加方便，不同於標準的Action bar，toolBar就像View層級中的任何一個東西。因此你可以在任何地方進行放置，與其它的View交錯，移動，對滑動事件的響應等等。你可以通過呼叫Activity,setActionBar()方法把ToolBar作為你的Activity的ActionBar.

在這個例子中，藍色的toolbar是一個可擴充套件高度，覆蓋在螢幕內容上側並且提供了導航按鈕。注意：在這個列表和細節中，使用的ToolBar超過了2個。

Material Design 讓你的應用具有可理解，美觀，逼真的動效及自適應的能力。希望你可以遵從這些設計原則並通過上述提供的new API和一些相容庫幫助你的App實現Material Design。

————————————————————————————————————————————-

第二篇：Material Design Check List

主要從細節實現方面提醒你應該如何更好的實現Material Design，標註Signature element為強調部分，標註InCode的為實現方式。

因為使用者將很快使用Android5.0系統了，而且也會慢慢習慣Material Design的app，比如Gmail的未來替代者inbox，Google Play Tumblr等，因此Google為了開發者能夠更快的支援Material Design的app以及Android 5.0，連續推出了3篇文章。在下面這篇文章中，Google為我們提供了一個表單，這個表單列出了Material Design應該具備的一些風格。你在實現Material Design的時候，可以參照下面的表單。整個表單根據Material Design的4個關鍵方面分為4個部分。下面我們就介紹一下整個表單內容。如果你使用了以下中的幾個模組，特別是標註為signature elements的元素，並遵循傳統的Android設計最佳實踐，那麼你已經朝著迷人的Material Design設計邁進了。

Tangible Surfaces 有形的外觀

UI由不同層次的表層組成，每層的下面附有陰影。

Signature element: 陰影

陰影用於和前部的元素互動，幫助聚焦和建立層級效果。

In Code:在5.0系統裡，這樣的陰影效果直接由屬性：android:elevation 和 android:translationZ 提供，而在之前的版本，陰影通常由PNG圖片資源來實現。

Surfaces and layering.

陰影和表層被用於連貫和結構性的情景中。每一個陰影標示著一個新的表層，這些表層的構建需要細心和深思熟慮。一個螢幕中通常擁有2到10個表層，避免太多的內嵌層。可滑動的內容滑動到螢幕的邊界或者另一個表層後面的時候鑄造了一層覆蓋在另一個表層上的陰影。永遠不要剪裁一個可見邊界的元素這樣會導致一種沒有邊界的感覺。換句話說，你應該很少滑動表層上的內容，而是滑動整個表層。

In Code: 在使用ListView和ScrollView的時候，使用 android:clipToPadding=false 來避免邊界的剪裁。

表層應該是簡單，而且是純色的背景。

A Bold、Print-Like Aesthetic 一種加粗，列印風格的審美

你所展示的內容來自於一種經典的列印模式，重點在於色彩的使用，有語境的圖片和結構性的空白區域。

Primary and accent colors.

Signature element: 主調色彩和強調色彩

在顏色層面背景和關鍵的元件上，使用了一種主調色彩和一種強調色彩，比如text和checkbox。這種強調色彩和基調色彩形成了鮮明的對比，比如一個app可以使用一種深藍色作為基調顏色，而把霓虹色作為強調的顏色。

這種強調的色彩是極其鮮明的，通常用於關鍵的元件上，引起使用者的注意，比如一個floating button，selected tab 或表格區域。

In code: 通過在你的主題中設定 android:colorPrimary and android:colorAccent屬性（如果使用appCompat，不用再去設定“android”字首了），AppCompat將會自動的為那些text，checkbox和一些在L之前的元件著色。

Signature element:透明的狀態列

在5.0系統上，status bar會被填充匹配app的基調，或者當前螢幕的內容的色彩。對於全屏填充的Image效果，status bar可以是透明的。

可以通過在你的主題中設定android:colorPrimaryDark 或者 android:statusBarColor或者呼叫Window.setStatusBarColor來實現。

icon/photos/images和其它前部元素的表層會被“墨水”著色。它們不需要陰影也不用使用梯度效果。

顏色可以從圖片中抽取用於適配在表層的UI元素。

InCode: 通過Palette support library來實現。

Signature element: 使用material design的icon

icons 的使用請遵從 system icon guidelines，標準的icons請使用material design的icon，（這個已經在GitHub中開源）

嚮導：http://www.google.com/design/spec/style/icons.html#icons-system-icons

資源：http://www.google.com/design/spec/resources/sticker-sheets.html#sticker-sheets-components

照片通常是沉浸並且是全屏的，比如，對於詳情的介面，使用一種邊緣到邊緣的模式，甚至可以出現在app bar或者 status bar的底部。

In code: 新的 Toolbar widget 可以是透明的並且直接放在你的佈局中，對於status bar的問題,看以參考在Stack Overflow 上的相關問題：

http://stackoverflow.com/questions/26440879/how-do-i-use-drawerlayout-to-display-over-the-actionbar-toolbar-and-under-the-st/26440880

Signature element: 適當的尺寸

合適的地方，text內容，app titles,應該對齊3個keylines：

http://www.google.com/design/spec/layout/metrics-and-keylines.html#metrics-and-keylines-keylines-and-spacing

在手機上，那些 keylines 距離左邊是16dp和72dp，距離螢幕右邊緣是16dp。在平板上是24dp和80dp。

UI元素的對齊方式和大小應該根據一個8dp的網格。比如，app bar在手機上為56dp，在平板上是64dp。Padding和Margins可以使用像：8dp,16dp,24dp的值等等，更精確的text位置是使用一個4dp的網格

Keylines

Authentic Motion 真實的動效

在不同的app上下文和狀態下，動效可以提供一種視覺化和連貫的體驗。通過小規模的使用切換動畫可以增加一些情趣。而不是為了動效而動效。總的來說，UI和內容元素不會簡單的消失或者出現，它們會以動畫的方式移動入到一個單元或者單獨的出現。

Signature element: “hero”切換動畫

當你按下一個條目去看詳情的時候。這裡有個叫“hero”的切換動畫，它會移動並且縮放它所在的位置和詳情螢幕之間的條目。
InCode：在SDK中它被叫做 “shared element transitions” ，support版本的FragmentTransaction也支援了shared element support。

“Hero” Transiton

Signature element: Ripple effects

Ripple effects 為你按下條目的增加了反饋效果。

InCode：預設的 android:selectableItemBackground 和 android:selectableItemBackgroundBorderless 擁有這種效果，或者你可以使用RippleDrawable (<ripple>) 去自定義效果。在5.0之前的裝置上，ripples沒有這種預期的效果，因此，遵從預設的android:selectableItemBackground 行為。

Signature element: circular “reveal” animation.

UI元素可以通過一個圓形的”reveal”動畫出現。

InCode：檢視文件或者ViewAnimationUtils類。

Signature element:Vector動畫圖示

在更微妙更賞心悅目的情況下使用動畫，比如去轉換icon 的狀態和text的狀態。比如，一個“+”圖示可以變形為一個“x”標識，或者一個概述的圖示可以變成一個柵欄效果。

InCode：icon的變化可以通過AnimatedStateListDrawable 和相應的XML檔案來實現，你可以在Google I/O app原始碼中找到。它支援了動畫的vector圖示。

動畫和切換通常在300ms內。

交叉淡入淡出通常被平移和滑動切換代替：豎直的滑動產生的底部導航，水平滑動產生的側面導航。對於滑動的轉換，加速和微小的減速要好於簡單的線性移動。

可以參考：http://www.google.com/design/spec/animation/authentic-motion.html#

Adaptive Design（UI Patterns）

有型的外表，大膽的圖形設計，加上有意義的動畫效果帶來了一種連貫跨裝置的體驗，無論在手機，平板，筆記本，TV，可穿戴裝置，汽車上，等都有同樣的體驗效果。另外，下面的關鍵的UI 設計模式有助於在不同裝置之間建立一種連貫的體驗。

app使用了響應式設計，確保了在不同尺寸的螢幕和不同的方向上能夠適當的佈局。可以參考平板App樣式的清單表去優化那些面向平板的App.http://developer.android.com/distribute/essentials/quality/tablets.html

在material design中，詳情介面的切換通常都是“Hero”動畫的。在多皮膚佈局中，app可以使用多個toobar去代替一些下一步的相關操作。

Signature element: FAB

如果合適的話，App推薦floating action button作為一個螢幕上的關鍵操作。FAB是一個圓形外表，附帶有陰影，表面色彩採用亮色，強調色。它可以用於執行一些主要的操作，比如，傳送，撰寫，建立，新增，或者搜尋，大約8dp的elevation。通常懸浮在螢幕的右下角，或者邊界的中心位置。

The floating action button

App Bar

Signature element:

App使用了標準的Android App bar，這個App Bar沒有使用app圖示。顏色和印刷效果替代了品牌的推廣。這個App Bar帶有陰影，或者擁有一個帶有陰影的表層。通常App Bar 4dp elevation。

InCode：在5.0中使用新的ToolBar Widget引入到View層級檢視中。AppCompat提供了相容的android.support.v7.widget.Toolbar來實現它。

app bar可能是標準高度的2到3倍，在滑動的時候，app bar可以恢復到正常高度。

app bar在有些情況下可以完全透明，可以在一個圖片之上附有text和操作，比如Google Play Newsstand 應用。http://www.google.com/design/spec/style/imagery.html#imagery-principles

App bar title 應該和第二條keyline對齊。

InCode：在使用Toobar widge的時候，請使用 android:contentInsetStart屬性。

在適當的時候，往下滑的時候，app bar可以滑出螢幕，為內容留下更多垂直方向的空間。往上滑動的時候，app bar可以恢復顯示。（這個式樣：quickReturn）

Tabs

Signature element:Tabs應該遵從最新的 material design 設計風格。在垂直方向沒有分割線，如果app使用了top-level的話，tab可以作為app bar的一部分。http://www.google.com/design/spec/components/tabs.html#tabs-usage

InCode: 可以參考在SDK中的示例 SlidingTabsBasic 或者Google I/O app source（My Schedule 部分）另外加上前兩天分享的 SlidingTabStrip

Tabs應該支援手勢滑動

InCode: 所有的Tabs應該使用support lib中的ViewPager 控制元件

在選中Tabs時，應該有一個前部顏色的變化或者使用強調色彩的顏色條。在tabs滑動的時候，這個線條應該平滑的響應。

抽屜導航

Signature element:

如果你的app使用了導航的Drawer，它也應該遵從最新的material design風格。drawer應該出現在app bar上面，也應該以半透明的方式出現在status bar後面。

InCode：使用support lib 中的DrawerLayout控制元件和上述談到的ToolBar 控制元件實現抽屜效果。在stack over flow中有相關的問題參考：

http://stackoverflow.com/questions/26440879/how-do-i-use-drawerlayout-to-display-over-the-actionbar-toolbar-and-under-the-st/26440880

Signature element:左上角圖示

在app bar最左邊的icon是一個抽屜的指示器。http://www.google.com/design/spec/layout/structure.html#structure-app-bar

app icon 在app bar中是不可見的。可選擇的，在早期版本中，如果app擁有一個抽屜，那麼最左邊的app icon會保留並且會變窄，比如在4.0中。

標準的抽屜：在手機上不要寬於320dp，在平板上不要寬於400dp,但是不要小於螢幕寬度 – 標準的toolbar高度，比如在Nexus5中：360dp – 56dp = 304dp

每一個抽屜條目的應該沿著grid網格，所有的行高為 48dp，上下8dp邊距。

Text 和 icon 應該沿著主線

越來越多的App來自google play生態系統將會更新到Material Design，預期2014冬季對於Android的設計來說是一個大的變更期。更多關於Material design設計資源，可以參考YouTube視訊：https://www.youtube.com/playlist?list=PLOU2XLYxmsIJFcNKpAV9B_aQmz2h68fw_

更多的開發者資源，可以參考文件：http://developer.android.com/training/material/index.html

以上全是理論知識，一個Material Design的App，應該遵循哪些標準，如果你已經瞭解了這些，那麼接下來就可以去實現它們了，很多拓荒者為我們提供了很多開源庫，大家可以直接用，但有些是向前相容的，有的是4.0以上的，大家使用的時候注意下。

Material Design開發資源

官方：

Material Design介紹：http://www.google.com/design/spec/material-design/introduction.html

設計資源：https://github.com/google/material-design-icons

App:Google 2014: https://github.com/google/iosched （下載地址：http://vdisk.weibo.com/s/av06eFs1kWSeE ,如果需要梯子去請求資料，資料夾下的另一個apk會幫到你）

視訊教程:

https://www.youtube.com/watch?v=97SWYiRtF0Y&feature=youtu.be

https://www.youtube.com/watch?v=S3H7nJ4QaD8

示例集合

https://github.com/rahulparsani/google-io-2014-compat