Android:Material Design on Android Checklist!

这篇文章主要从细节实现方面提醒你应该如何更好的实现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: 阴影

阴影用于和前部的元素交互，帮助聚焦和建立层级效果。

InCode:在5.0系统里，这样的阴影效果直接由属性：android:elevation 和 android:translationZ 提供，而在之前的版本，阴影通常由PNG图片资源来实现。

Surfaces and layering

阴影和表层被用于连贯和结构性的情景中。每一个阴影标示着一个新的表层，这些表层的构建需要细心和深思熟虑。一个屏幕中通常拥有2到10个表层，避免太多的内嵌层。可滑动的内容滑动到屏幕的边界或者另一个表层后面的时候铸造了一层覆盖在另一个表层上的阴影。永远不要剪裁一个可见边界的元素这样会导致一种没有边界的感觉。换句话说，你应该很少滑动表层上的内容，而是滑动整个表层。

InCode：在使用ListView和ScrollView的时候，使用 android:clipToPadding=false 来避免边界的剪裁。

表层应该是简单，而且是纯色的背景。

A Bold、Print-Like Aesthetic 一种加粗，打印风格的审美

你所展示的内容来自于一种经典的打印模式，重点在于色彩的使用，有语境的图片和结构性的空白区域。

Signature element: 主调色彩和强调色彩

在颜色层面背景和关键的组件上，使用了一种主调色彩和一种强调色彩，比如text和checkbox。这种强调色彩和基调色彩形成了鲜明的对比，比如一个app可以使用一种深蓝色作为基调颜色，而把霓虹色作为强调的颜色。

这种强调的色彩是极其鲜明的，通常用于关键的组件上，引起用户的注意，比如一个floating button，selected tab 或表格区域。

InCode：通过在你的主题中设置 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的底部。

InCode：新的 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的网格

Authentic Motion 真实的动效

在不同的app上下文和状态下，动效可以提供一种可视化和连贯的体验。通过小规模的使用切换动画可以增加一些情趣。而不是为了动效而动效。总的来说，UI和内容元素不会简单的消失或者出现，它们会以动画的方式移动入到一个单元或者单独的出现。

Signature element: “hero”切换动画

当你按下一个条目去看详情的时候。这里有个叫“hero”的切换动画，它会移动并且缩放它所在的位置和详情屏幕之间的条目。
InCode：在SDK中它被叫做 “shared element transitions” ，support版本的FragmentTransaction也支持了shared element support。

Signature element: Ripple effects

Ripple effects 为你按下条目的增加了反馈效果。
InCode：默认的 android:selectableItemBackground 和 android:selectableItemBackgroundBorderless 拥有这种效果，或者你可以使用RippleDrawable () 去自定义效果。在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。通常悬浮在屏幕的右下角，或者边界的中心位置。

Signature element:App Bar

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）

Signature element:Tabs

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

示例集合

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

2.https://github.com/romainguy/google-io-2014

3.https://github.com/dexafree/MaterialList

4.https://github.com/gabrielemariotti/cardslib

FAB

5.https://github.com/FaizMalkani/FloatingActionButton（无图）
6.https://github.com/futuresimple/android-floating-action-button

7.https://github.com/telly/FloatingAction

8.https://github.com/makovkastar/FloatingActionButton

9.https://github.com/flavienlaurent/tickplusdrawable

Menu & Drawer

10.https://github.com/markushi/android-ui

11.https://github.com/balysv/material-menu

12.https://github.com/saulmm/Android-Material-Example

13.https://github.com/ikimuhendis/LDrawer

Ripple

14.https://github.com/markushi/android-ui

15.https://github.com/traex/RippleEffect

16.https://github.com/siriscac/RippleView

Transition

17.https://github.com/saulmm/android_L_preview_example(无图)

18.https://github.com/andkulikov/transitions-everywhere

Vector

19.https://github.com/chiuki/animated-vector-drawable

Dialog

20.https://github.com/drakeet/MaterialDialog

21.https://github.com/r0adkll/PostOffice

22.https://github.com/lewisjdeane/L-Dialogs

MaterialEditText

23.https://github.com/rengwuxian/MaterialEditText

文章来源

http://www.androidchina.net/1311.html
http://www.androidchina.net/1381.html
http://blog.csdn.net/xushuaic/article/details/40627389