Material Design开发文章系列3:Material Design Check List

zhanliquan 9年前

----------------------------系列文章概要---------------------------------------

Material Design出现之后国外网站上出现和很多关于Material Design的设计与开发文章，有很多是重复的，google官方博客将这些文章搜集整理成了几篇比较经典的文章，我认为对于开发者来讲，只需要知道其中三篇就能掌握绝大多数知识了。这三篇文章的原文地址分别是（当然KX上网是必须的）：

http://android-developers.blogspot.hk/2014/10/appcompat-v21-material-design-for-pre.html

http://android-developers.blogspot.hk/2014/10/implementing-material-design-in-your.html

http://android-developers.blogspot.hk/2014/10/material-design-on-android-checklist.html

还好这三篇文章都被翻译了出来，而且还算是比较优质的翻译。后两篇主要从整体设计介绍了一个标准的Material Design的App应该遵循哪些设计标准，并告诉你如何在你的代码中实现，并介绍了如何向前兼容。其实后两篇在整体结构上是差不多的，只是在Implementing material design in your Android app中，侧重的是Material Design的设计标准，而Material Design on Android Checklist则侧重的是实现细节和注意事项。

其余两篇译文文非别是：

Material Design开发文章系列1：AppCompat V21：将 Materia Design 兼容到于5.0之前的设备

Material Design开发文章系列2：在你的App中实现Material Design

 

正文

《Material Design开发文章系列-3: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.

</blockquote>


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

 

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

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


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


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

Primary and accent colors.

</blockquote>

 

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

</blockquote>



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设计资源，可以参考油Tube视频：https://www.油Tube.com/playlist?list=PLOU2XLYxmsIJFcNKpAV9B_aQmz2h68fw_

更多的开发者资源，可以参考文档：http://developer.android.com/training/material/index.html

 

示例集合

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

 

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

 

 

https://github.com/dexafree/MaterialList

 

https://github.com/gabrielemariotti/cardslib


 

FAB

https://github.com/FaizMalkani/FloatingActionButton（无图）

https://github.com/futuresimple/android-floating-action-button

 

https://github.com/telly/FloatingAction

 

https://github.com/makovkastar/FloatingActionButton

 

 

Menu & Drawer

 

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

 

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

 

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


https://github.com/ikimuhendis/LDrawer


Ripple


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

 

https://github.com/traex/RippleEffect


https://github.com/siriscac/RippleView

 

Transition

https://github.com/saulmm/android_L_preview_example(图太大)

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

 

Vector

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

 

Dialog


https://github.com/drakeet/MaterialDialog

 

https://github.com/r0adkll/PostOffice

 

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