编者注： 当我们被国产纷繁复杂的 UI 设计和应用交互整得丈二和尚摸不着头脑之时，或许已经有人开始想念原生设计了。接下来，给诸位推荐的几款应用都是绝佳的 Material Design 的设计范本。赶紧下载这些应用，领略下「什么才是 Material Design」吧！
本文编译自
& Authority
，来源于。
在 2014 年之时，Material Design 首次亮相，它改变了 Android 设备的外观和交互方式。这套设计语言源于
自身，它的特点是将抽象图层，美观的过场动画，高反差的色调以及直觉的物理交互组合在一起。
如果正确把握这套设计语言，Material Design 就是清新，简洁和直观的象征。此外，它也给予了 Android 设备统一，协调的体验。在这篇里，我们将会看看 10 个不错的 Material Design 案例。无论你是一名寻找 UI 设计灵感的，还是想给自己的手机装满简洁干脆应用的用户，你一定能够从这里面寻找到灵感。
Matrand 也许只是一个随机数生成器，但是它出色的界面将自己从其他的同类应用中拔高了不少。
我们中的大多数并没有生成随机数的需求，但这并不妨碍我们欣赏这款应用的设计。这是一款极简抽象画风的应用，内部有大量留白和白绿色的组合。色子外观的 icon 非常适合来告诉用户这是一款什么样的应用。点击这个图标，驱动色子转动以生成随机数。
Phonograph Music Player
如它的名字一般，它和 Google Music 一样都是播放器，但它在抽象设计上似乎要比后者要看得更远。
这款应用将所有的 Material Design 收纳进一个小而扁平的图标里，随着用户点按而移动的交互界面——干净而迅速。
既然这是一款音乐应用，如果你有很多带有封面图片的音乐专辑，那么播放器上的图片看上去一定特别棒。如果你不喜欢它绿色的背景，你可以更换——主色和配色都可以。
Google Calendar
如果要找 Material Design 的身影，那么从 Google 官方应用中寻找是再正常不过的选择了。毕竟引入这套设计语言的是 Google 自己，而其中最符合这个设计的也许要属 Google Calendar——它集我们喜爱的所有新元素于一身。
对于初学者而言，Google 终于摆脱大多数日历应用所采用的传统的拟物设计风格，使用抽象的颜色图层作为实体计划表。我们已经不再被纸质的日程表所束缚了，那么为什么还要局限在日历拟物化的设计呢？
Google 的日历提供给你的是一个垂直的图层，并且将目前的日子放在页面的顶层。通过这样的方式，你只能看见即将到来的日子和事件，没有任何事件的日子将会被折叠起来。这种方式使得同一屏幕的时间线上能容纳更多事件，并且只展示给你有价值的日程。
交互层面的这一小点变化同时也使得用户处于体验的中心——UI 是为了用户方便而设计的。再加上一些滚动视差，你拥有了一款美观的应用。
Google+ 是另一款 Google 奠定自己设计原则的应用。无论是应用还是端，它们都通过将一张大图居中放在可以滚动的交互界面上，获得了不错的外观。贯穿整个应用的红白配色，单色图标，，美观的动画和滚动的交互方式（圆形的个人资料图标看上去棒极了）。
在用户数量上面，Google+ 相较其他的社交网络要少很多，但它在某些方面却是
难以企及的。
Bing Bong 是 Nickervision Studios 为数不多的一款，它从 Google Material Design 里汲取了很多设计元素。这个开发者的其他游戏还包括 Side Swip 和 Pivot，并且每一款外观都相似——采用扁平的几何图案和高反差的背景。简单的玩法对应的是简单的设计，且这三款游戏都能单手把玩。而 Bing Bong 是这三者之中最让人上瘾的。
Material Design 被应用在游戏上正好证明了 Google 的这套设计可以被用在各种应用之上。这也展示了并不是每一种小众的应用都必须是像素设计。要想从各种应用中脱颖而出，选择 Material Design 的设计风格是一种个性的方法
Material.cmiscm
它并不是一款应用，而是在一个——实际上，它都算不上一个网页，但它却完美地展示了Material Design「交互方式」的基本原则。
它有点像是奇怪的 UI 设计博物馆，当然它看上去很惊艳。同时，它也集各种优秀的设计元素于一身。绝对值得一看。
一款冥想类的应用拥有 Material Design 真是再合适不过了，这也许是在 Play Store 中，Headspace 有着最简洁图标的原因吧（图标为：在白色的背景中，单独的一个橙色的小点）。
进入应用中之后，它延续了灰白的背景和橙色的形状，你可以从下往上地滑动区域。应用中装饰用的大块卡通画也有些许 Material Design 的感觉。
Evernote 经常因为采用 Material Design 而受到表扬是有原因的。这款应用中贯穿着强烈而统一的颜色，而且功能设计上也很不错。图标很清楚有效地表明了是记文字功能，手写功能还是拍照笔记功能。
「大象」的图标简洁而优雅，无论是在哪一个上，这款应用都是经过深思熟虑地设计并实现的。
上有自己「Metro UI」的设计，但在 Android 却很好地运用了 Material Design 这个设计。Microsoft Health 实际上是 Play Store 里不错的一个范本。
这款应用是用来同步 Microsoft Band 记录的数据的。同步之后，数据被简洁地展示在一个垂直的表格里，表格的背景是标准的「微软蓝」，而栏目中白色图标代表的是你的运动情况。
无论点开哪一个栏目，它都能展开并显示你的数据状态。这套 UI 很适合浏览总体的运动情况，然后决定是否再进行更多的运动。这是一款好的应用设计的特点。
Nova Launcher
仅仅在以上这些应用中见到 Material Design 还是不过瘾？厌倦了 Galaxy 上的 TouchWiz UI？Nova 桌面给予你的主页一套与原生应用一致的外表，同时兼具个性化的功能，并且非常稳定和轻快。它也引进了一些美观的过场动画。
实际上，Nova 可以说是比 Google Now Launcher 要更好地融入了 Material Design 的元素——比如，图标更小，更多的自定义选项（如 Google 没有提供的旋转选项）。Google 在自己的领域被打败了。
再深入地探索，你也许想要给那些不协调的图标换个外观。Urmun 图标包是一个不错的选择，因为它完全符合「Material Design 图标」的定义。当然，这样的图标也需要同样出色的壁纸来搭配——比如 Facets。
如果你想看到更多的案例，倒是可以去
上关注 MaterialUp，它发布了很多不错的案例。
在 Play Store 里，从来缺少优秀的 Material Design 的设计案例，新手可以从中学到很多。其他的优秀案例还有 IF，Google Keep，Citymapper，Stitcher，甚至是 Play Store 本身。那么问题来了，你认为哪一款应用最具 Material Design 的神韵呢？专为0基础小白量身打造的UI设计入门课程（ps，ai软件＋图标技巧），在线学习2个月包教会（公开课3位师傅），拜师费1666，随到随学，可插班。咨询请加QQ群：
前两天Google 刚发布了新版Material Design 官方动效指南，今天 就给大家带来了中文版！全文包括三个部分：为什么说动效很重要？如何制作优秀的Material Design动效及转场动画，动效的意义。新鲜热辣收好不谢！
在Material design的世界中，动效用一种优雅、流动的方式来描述空间关系、功能、和意向。
为什么说动效很重要？
动效可以向我们展示一个App 是如何构成和用途。
动效可以做到：
不同视图之间的焦点引导。
当用户完成了一个手势后，提示用户将会发生什么
明确元素之间的层级和空间关系
当程序在后台运行时，分散用户的注意力（例如获取内容或载入下一个视图）
润色整个app：个性化、令人愉悦
如何制作材料设计的动效？
材料设计的运动吸取了一些真实世界的力学元素，例如重力和摩擦力。这些力反应的是，用户对屏幕操作的影响，以及这些元素是如何相互反馈的。
材料设计的运动具有以下几个特征：
1. 响应式的
材料设计的动效是充满活力的。它能迅速精确响应用户用户所触发的内容。
在移动设备上的长动画大约是300-400ms，短动画大概是150-200ms。过长的动画让人感觉迟钝，过短的动画让人觉得难以看明白。
用户触摸屏幕时，通过漪涟动画能使用户确认输入。卡片上升表示该卡片处于激活状态。
显示触发元件或动作和创建出的新的卡片之间的联系。
材料设计的动效通过模仿真实世界的力，而展现了自然的运动过程。
在真实的世界中，一个物体可以被重量、表面摩擦力影响很快的加速或减速。同样的，材料设计的动效也是不会发生突然停止，或者突然启动，都是会有一个加速度或者减速度。（红色没缓动，蓝色有缓动）
真实世界中的力，例如重力，能使一个元素沿曲线运动而非直线运动。
材料设计的动效转场是沿着一个弧线的。
3. 可察觉的
材料设计的动效是可以被周围环境察觉的，包括用户和周围其他的元素。它可以被物体吸引，并且恰当的回应用户的意图。
作为过渡元素，他们和他们周围元素的运动是精心安排的，可以通过这个过程看出他们之间的关系。
卡片可以推动其他卡片，让他们给自己让开路。
元素可能会吸引其他元素加入，当他们相互接近时合为一体。
4. 有引导意向的
材料设计的动效能使焦点在对的时间聚焦在对的点。
转场动画有助于引导用户进行下一步的交互。
运动可以传递不同的信号，例如，一个操作是否不可用。
动画能使用户关注特定对象。
如何设计一个好的转场动画？
好的动效设计应该遵从以下几点：
1. 动效是很快的
一个交互动作不应该让用户做不必要的等待。
正确：动画一定要快，用户无须等待动画完成。
错误：很多元素磨磨蹭蹭很慢的运动，令动画时长延长。
2. 动效是明确的
转场动画应该明确，简单，一致。应该避免一次有太多的元素动效。
由于动图太大，上传到网盘，麻烦大家查看：
正确：保持清晰的路径进入下一个视图，最好元件都编排成一个组。
由于动图太大已传，单击可见：
错误：多个元素移动到不同的方向或者交叉路径，会造成转场动画的混乱。
3. 动效是统一的
材料设计的动效是由速度、响应性、和意向所统一的。在App 中的任何自定义动效体验都应该贯穿整一个App。
即使这些app有着不同的功能，但是他们相似的动画体验让人感觉他们是有关联的。
动效的意义
动效的好处可以从以下两个例子中明显看出：其中一个app遵从这些模式，而另一个没有遵从。
正确：在转场的过程总，用户被引导到了下一个视图。表层的转场清晰的传达出层级关系。loading的过程在后台进行，以减少延迟时间。
错误：转场的发生点没有一个清晰的焦点，所以看不出来新的页面和旧的页面之间的联系。没有感觉到有任何层级的关系，loading用一个转圈的半圆表现太明显了，令人感到延迟感。
原文地址：
文章来源：
转载请注明： &
学UI就上学UI网！越努力，越幸运！
“学UI网 ”最值得关注的UI学习平台！ 每天发布高质量的设计教程和分享设计经验，服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课（），给大家提供更多免费学习的机会。想成为设计师的你快来关注吧！
【特色推荐】
海量APP截图，让你灵感爆发！国内最好的APP截图站。
同一个APP，IOS和安卓截图对比分析，并且提供5种以上尺寸的APP截图打包下载，真贴心。
专为UI设计学习者打造的资源＋学习，双用途的网址导航站。亲爱的，你收藏了吗？
【学UI网 原创文章 投稿邮箱：，也可以找各个群的管理】
你可能喜欢的：&&&&Material Design中文版.pdf
&Material Design中文版.pdf
Android L 最新开发语言 Material Design 中文版 pdf 文档
若举报审核通过，可奖励20下载分
被举报人：
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
VIP下载&&免积分60元/年（1200次）
您可能还需要
Q.为什么我点的下载下不了，但积分却被扣了
A. 由于下载人数众多，下载服务器做了并发的限制。若发现下载不了，请稍后再试，多次下载是不会重复扣分的。
Q.我的积分不多了，如何获取积分？
A. 获得积分，详细见。
完成任务获取积分。
论坛可用分兑换下载积分。
第一次绑定手机，将获得5个C币，C币可。
关注并绑定CSDNID，送10个下载分
下载资源意味着您已经同意遵守以下协议
资源的所有权益归上传用户所有
未经权益所有人同意，不得将资源中的内容挪作商业或盈利用途
CSDN下载频道仅提供交流平台，并不能对任何下载资源负责
下载资源中如有侵权或不适当内容，
本站不保证本站提供的资源的准确性，安全性和完整性，同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
移动开发下载排行
您当前C币：0&&&可兑换 0 下载积分
兑换下载分:&
消耗C币:0&
立即兑换&&
兑换成功你当前的下载分为 。前去下载资源
你下载资源过于频繁，请输入验证码
如何快速获得积分？
你已经下载过该资源，再次下载不需要扣除积分
Material Design中文版.pdf
所需积分：3
剩余积分：0
扫描微信二维码精彩活动、课程更新抢先知
VIP会员，免积分下载
会员到期时间：日
剩余下载次数：1000
Material Design中文版.pdf
剩余次数：&&&&有效期截止到：
你还不是VIP会员VIP会员享免积分 . 专属通道极速下载
VIP下载次数已满VIP会员享免积分 . 专属通道极速下载，请继续开通VIP会员
你的VIP会员已过期VIP会员享免积分 . 专属通道极速下载，请继续开通VIP会员当前位置：
《Material Design》中文版
用户还喜欢
夜正浓，黑沉的夜幕无星无月，一片萧瑟肃杀。一栋奢华的别墅内。偌大的卧室中，传来阵阵暧昧的呻吟。大床上纠缠着两个赤裸的身体。一双雪白的美腿如水蛭般紧紧圈住男人的腰间，随着激烈的动作晃动。“啊……恩……老……
吕鹤松，是隋炀帝杨广的御用酿酒师，他酿的酒正是历史上另一个暴君商纣王酒池中的东西，也就是传说中的玫瑰红！隋炀帝被吕鹤松的玫瑰红迷得如痴如醉，自从享用到了玫瑰红之后，他就没再喝过别的酒。吕鹤松之所以备受……
少年陈龙，身负天星眷顾，掌握无上星力，拥如花美眷，取天道而代之！
病毒感染了无数的人，让他们成为了怪物！到处吃人，感染更多的人，而主角是个奇葩，变异的病毒让他成为了吃僵尸的人！
“啦啦啦啦啦啦啦~~啦啦啦啦啦啦啦~~~”大海真是可以让人感到安心，感到宁静，蓝蓝的海水，平静的海面，偶尔航过几条渔轮，太阳快落山了，红彤彤的半边天，近处还有几只海鸥飞过，太美妙了。很迷人。宣萱是第一……
《Material Design》中文版
（6人评分）
分&&&&类：
作&&&&者：
字&&&&数：0
点&&&&击：12.0万
授权方：授权作品，不得转载
标&&&&签：
目录(662章)
壕，余额不足了
呜~月票不足
呜~你还没有月票
网易公司版权所有©
网易邮箱登录
其他帐号登录：
在客户端“资讯”首页刷新后,即可阅读此内容。
在客户端“书籍”首页刷新后，即可阅读此书籍。
还差两步，你就能在客户端上阅读此内容。
排序保存成功！Material Design 中文版 色彩_materialdesign吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0可签7级以上的吧50个
本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：327贴子：
Material Design 中文版 色彩
色彩色彩从当代建筑、路标、人行横道以及运动场馆中获取灵感，由此引发出大胆的颜色表达激活了色彩，与单调乏味的周边环境形成鲜明的对比。强调大胆的阴影和高光。引出意想不到且充满活力的颜色。色样 - 0.13 MB(.zip)UI调色板调色板以一些基础色为基准，通过填充光谱来为Android、Web和iOS环境提供一套完整可用的颜色。基础色的饱和度是500。
UI颜色使用选择你的调色板限制颜色的数量，在众多基础色中选出三个色度以及一个强调色。强调色用于后背，可有可无。 为灰色的文字、图标和分隔线加上alpha值为了有效地传达信息的视觉层次，应该使用深浅不同的文本。对于白色背景上的文字，标准alpha值为87%（#000000）。视觉层次偏低的次要文字，应该使用54%（＃000000）的alpha值。而像正文和标签中用于提示用户的文字，视觉层次更低，应该使用26%（#000000）的alpha值。其它元素，如图标和分隔线，也应该具有黑色的alpha值，而不是实心颜色，以确保他们能适应任何颜色的背景。对于彩色背景上白色或黑色文字，可以通过表格中的调色板找到合适的色彩对比度和alpha值。我们十分鼓励在UI中的大块区域内使用醒目的颜色。UI中不同的元素适合主题中不同的色彩。工具栏和大色块适合使用饱和度500的基础色，这也是你应用的主要颜色。状态栏适合使用更深一些的饱和度700的基础色。 强调色鲜艳的强调色用于你的主要操作按钮以及组件，如开关或滑片。左对齐的部分图标或章节标题也可以使用强调色。 备用强调色如果你的强调色相对于背景色太深或者太浅，默认的做法是选择一个更浅或者更深的备用颜色。如果你的强调色无法正常显示，那么在白色背景上会使用饱和度500的基础色。如果背景色就是饱和度500的基础色，那么会使用100%的白色或者54%的黑色。主题主题是对应用提供一致性色调的方法。样式指定了表面的亮度、阴影的层次和字体元素的适当不透明度。为了提高应用间的一致性，提供两种主题选择：浅色深色主题 - 1.3 MB(.ai)
贴吧热议榜
使用签名档&&
保存至快速回贴