Material Design设计规范与符合MD设计风格的库、APP

以下内容采集自：优设网

Material Design概述

• Material Design 中文版

Material Design笔记与心得

摘录自：学霸的自学笔记！Material Design设计规范学习心得

　　不难看出制定Material Design规范的目的有如下三点：

• 统一约束第三方应用的设计与交互体验感受，降低用户学习使用成本；
• 统一跨平台的使用体验，降低用户跨平台学习使用成本；
• 提供规范统一的接口，降低开发者的设计成本。

---

　　所谓的设计规范，只是一本“考试大纲”，而不是“考试答案”。

　　完全按照规范，可以做到80-89分优良设计，却很难在符合自身应用的情况下做到令人惊艳的90分以上的设计，当然依照规范也很难设计出不及格的作品。

　　回到自身产品，作为一个大众化的工具型产品，直观与易用性是最重要的。如果设计规范中的某种设计适用到产品某项功能中非常合拍，那是非常好的选择。如果某种符合业务需求的简单设计不符合设计规范，但这种规范不影响用户理解使用，不遵循规范也未尝不可。为了降低用户的学习使用成本，让所有应用遵循设计规范显然是不现实的，但是我们的设计完全可以去借鉴当下使用广泛的应用，比如腾讯系、阿里系、360系的产品，他们广阔装机量培养的用户使用习惯是根深蒂固，很难被替代的。借鉴他们的某些操作最简单的达到我们的目的，不失为一种方式。

　　所有的设计都是为了辅助产品需求的实现，同时保证用户的优良体验。如果设计仅是为了符合规范，这也就失去设计本质的意义。

重磅教程！帮你全面彻底搞定Material design的学习笔记

• 点我跳转

图片

图片上的文字，需要淡淡的遮罩确保其可读性。深色的遮罩透明度在20%-40%之间，浅色的遮罩透明度在40%-60%之间。

对于带有文字的大幅图片，遮罩文字区域，不要遮住整张图片。

可以使用半透明的主色盖住图片。

文字排版

常用字号：

• 12sp 小字提示
• 14sp（桌面端13sp） 正文/按钮文字
• 16sp（桌面端15sp） 小标题
• 20sp Appbar文字
• 24sp 大标题
• 34sp/45sp/56sp/112sp 超大号文字

长篇幅正文，每行建议60字符（英文）左右。短文本，建议每行30字符（英文）左右。

布局

所有可操作元素最小点击区域尺寸：48dp X 48dp。

栅格系统的最小单位是8dp，一切距离、尺寸都应该是8dp的整数倍。以下是一些常见的尺寸与距离：

• 顶部状态栏高度：24dp
• Appbar最小高度：56dp
• 底部导航栏高度：48dp
• 悬浮按钮尺寸：56x56dp/40x40dp
• 用户头像尺寸：64x64dp/40x40dp
• 小图标点击区域：48x48dp
• 侧边抽屉到屏幕右边的距离：56dp
• 卡片间距：8dp
• 分隔线上下留白：8dp
• 大多元素的留白距离：16dp
• 屏幕左右对齐基线：16dp
• 文字左侧对齐基线：72dp

另外注意56dp这个数字，许多尺寸可变的控件，比如对话框、菜单等，宽度都可以按56的整数倍来设计。

还有非常多规范，不详细列举，遵循8dp栅格很容易找到适合的尺寸与距离。平板与PC上留白更多，距离与尺寸要相应增大。

组件

Bottom sheets

悬浮按钮

悬浮按钮有两种尺寸：56x56dp/40x40dp

卡片

卡片统一带有2dp的圆角。

在以下情况考虑使用卡片：

• 同时展现多种不同内容
• 卡片内容之间不需要进行比较
• 包含了长度不确定的内容，比如评论
• 包含丰富的内容与操作项，比如赞、滚动条、评论
• 本该是列表，但文字超过3行
• 本该是网格，但需要展现更多文字

卡片最多有两块操作区域。辅助操作区至多包含两个操作项，更多操作需要使用下拉菜单。其余部分都是主操作区。

Chips

Dialog

该跟上潮流了！一大波优质的Material Design资源免费下载

• 全部都是资源，请自行查阅。

超赞！谷歌设计师的Material Design实践心得

　　前不久，我们发布了Google I/O 2014 APP，源代码已经发布，诸位感兴趣的话，可以去Github看看我们是怎样在这个App中实现Material Design的功能和设计细节。在这篇文章中，我将分享一些我们对于Material Design的一些设计性思考。

　　每年Google I/O完了后，我们都会更新Google I/O相关的APP，我们做这个APP 有2个目的。第一，让那些在家看直播、甚至没有机会到现场的人更身临其境的了解Google I/O大会。第二，我们用Material Design的设计语言来诠释这款应用，并且提供了源码，可以作为demo，供开发人员参考。

　　这款应用采用了Material Design（ 官方文档中译版）的设计方法，功能实现上参考了 Android L Developer Preview（Android L开发者预览，须科学上网。），最后以合理、一致、可容性强的方式来展现内容。我们来看看这款应用的设计思路。

• 点我跳转

配色

　　在Material Design中，UI配色提倡一种主色，一种互补色。区域较大部分的色彩采用主色的500色调，区域较小的部分例如状态栏采用深一点的色调，例如，700。

　　互补色需要巧妙运用，用来吸引用户对关键性元素的注意。温和的主色，搭配以稍微明亮的互补色，让应用看起来大胆、充满色彩感，凸显内容。

令人愉悦的细节

　　在涟漪效果样式上，我们采取了两种，一种是裁剪过得涟漪效果，一种未裁剪，同时确保可以定制涟漪的颜色，以便在不同的背景色下保证涟漪的可见（但是不要太明显，隐隐若现最好，比如：Light ripples ，Dark ripples）

　　我们使用了Android L开发者预览文档中一系列新的API方法：

• View.setOutline和 setClipToOutline 用来裁剪涟漪效果，以及动态阴影渲染
• android:stateListAnimator 用来实现当手指按压按钮式，按钮的悬浮效果（其实是增加投影造成的视觉欺骗）
• RippleDrawable 用来实现按压时所呈现的匀墨反馈效果
• ViewAnimationUtils.createCircularReveal 用来显示蓝/白背景
• AnimatedStateListDrawable 用来定义关键帧动画，从而改变图标状态（从“+”号变成“对勾”）

---

　　最终的结果是整款应用看起来非常美丽，且具有愉悦性，我们很满意。希望你能从我们应用的开发和设计中汲取到经验。

超全面总结！深聊Material Design引领的设计趋势

　　在iOS7的设计里，我们已经看到了这样的影子。最典型的便是“返回”按钮只有箭头和文案，去掉了原本的按钮质感。Material Design的action bar也同样采用了这样的设计，直接用icon来表达按钮功能。尤其是Material的键盘设计风格，最早对键盘风格进行极简设计的是微软的Windows Phone，Android和iOS相继跟进。而这次Material走得更极端，把键盘的按钮边框全部去掉，只保留了英文字母的按钮。我们不能说这样的设计一定是好的，这样的设计可能让用户对点击的精准度无法更快地判断，缺乏安全感。好处是在屏幕不大的手机上，去掉边框的拥挤感会给字母更大的空间。

　　另外，无边框按钮的设计也体现在提示框的按钮上。

　　如何让无边框的按钮区别于内容文字，这需要设计师除了考虑配色外，还需要考虑按钮出现的场景，对设计师的在应用场景的解读上也是一个挑战。

• 点我跳转

学霸的自学笔记！Material Design设计规范学习心得

• 点我跳转

Material Design库

MD登录

• 点我跳转MaterialLogin

MD对角线布局

• 点我跳转Diagonal Layout

MD按钮介绍

• 点我跳转MaterialTapTargetPrompt

MD弧度布局

• 点我跳转ArcLayout

MaterialSheetFab

• 点我跳转MaterialSheetFab

MD标签云

• 点我跳转MaterialChipsInput

MD自定义动画

　　一个可以按照自定义轨迹动画的库。

new ExpectAnim()

                .expect(avatar)
                .toBe(
                        bottomOfParent().withMarginDp(16),
                        leftOfParent().withMarginDp(16),
                        width(40).toDp().keepRatio()
                )

                .expect(name)
                .toBe(
                        toRightOf(avatar).withMarginDp(16),
                        sameCenterVerticalAs(avatar),
                        toHaveTextColor(Color.WHITE)
                )

                .expect(subname)
                .toBe(
                        toRightOf(name).withMarginDp(5),
                        sameCenterVerticalAs(name),
                        toHaveTextColor(Color.WHITE)
                )

                .expect(follow)
                .toBe(
                        rightOfParent().withMarginDp(4),
                        bottomOfParent().withMarginDp(12),
                        toHaveBackgroundAlpha(0f)
                )

                .expect(message)
                .toBe(
                        aboveOf(follow).withMarginDp(4),
                        rightOfParent().withMarginDp(4),
                        toHaveBackgroundAlpha(0f)
                )

                .expect(bottomLayout)
                .toBe(
                        atItsOriginalPosition()
                )

                .expect(content)
                .toBe(
                        atItsOriginalPosition(),
                        visible()
                )

                .toAnimation()
                .setDuration(1500)

                .start();

• 点我跳转ExpectAnim

paper-onboarding-android

• 点我跳转paper-onboarding-android

MD时间线

• 点我跳转Steppers

MD风格APP

　　以下是基于Material Design开发的APP。

豆芽

　　开源的 Material Design 豆瓣客户端（A Material Design app for douban.com）

• 点我跳转Douya

云阅

　　一款基于网易云音乐UI，使用Gank.Io及豆瓣api开发的符合Google Material Design的Android客户端。项目采取的是MVVM-DataBinding架构开发，现主要包括：干货区、电影区和书籍区三个子模块。DIY网易云音乐原来是如此Cool~

• 点我跳转CloudReader

KickMaterial

• 点我跳转kickmaterial

Plaid

• 点我跳转Plaid

附录

• 最近这个超火！23个Facebook Paper中的设计细节