Material design分享

Google I/O 2014 &Material Design

Google I/O 2014 & Material Design
40张图片回顾Google I/O 2014

机器Price is right现场倒计时快进

Sundar Pichai登场——Android和Chrome部门的主管,大会主持

介绍安卓平台：30天活跃用户超过10亿，用户每天查看手机超过1000亿次

Pichai 宣布Android One计划，主要针对发展中国家市场。旨在通过广泛可
选择的部件，打造出高质量、低成本的智能手机。

发布L Developer开发包预览版。包含超过5000个API编程接口。

Matias Duarte谷歌的设计高级副总裁登场，介绍Android L

Android L，强调Material Design设计理念，旨在打造能让移动、桌面、网
页高度一致的平台

新的UI将拥有丰富的动效、生动的触控反馈。Polymer继续得到强化（前端
组件化）

Dave Burke登台介绍用户体验

开发者在开发新应用时，可选择一个被称为“Material”的主题。该主题支
持新的动画效果、实时3D阴影显示以及其他多项新功能

Dave Burke开始介绍新的强化的通知中心，通过下滑操作可以看到所有的通
知

介绍新的消息系统，如果有电话拨打进来，屏幕顶端会出现一个通知框。向
左右滑动手指可以忽略来电。这样尽量保证不打断用户的当前操作。

+ 程序员模式5分钟…
新的Android控制按钮变成了三角、圆、和矩形

L的开发包拥有一个新的运行环境（runtime），谷歌将其称为ART。
Android Runtime，其拥有一个新的应用碎片回收期，可以释放更多内存。

ART完全兼容64位；对图像提供更好的支持；新开发包包含了一个拓展包，
称为Android Extension Pack包含图形效果API，在几何着色、渲染等游戏性
方面提供支持

Pichai 介绍Android发展史，Android 1.0到4.4，每一版都有着巨大的进步

Pichai逐一介绍Android L的基础设计理念——前后文关联、语音支持、无缝
衔接、移动优先

工程部总监David Singleton登台介绍穿戴设备相关开发

通过LG G Watch智能手表展示Android Wear系统，手表通过振动提醒穿戴
着有消息、来电。用户可上下滑动屏幕来翻页通知内容。

语音控制：“OK，Google，等我到家后提醒我查收信件。”Android Wear
将会自动创建提示通知信息。

有来电时，可向上滑动手表屏幕，选择接电话或拒绝接听并反馈短信。

完整的Android Wear SDK将会发布。API与标准版Android API基本一致。
开发人员移植应用不存在难度。Moto 360 夏季末上市。

AndroidAuto系统，面向未来汽车市场。核心是导航，通讯和音乐。当
Android手机与AndroidAuto系统连接时，手机屏幕能投射到车载屏幕上。

Android Auto可以被看作是基于Android系统的车载GPS，但考虑到谷歌
Now自然语言搜索的强大性能，“人车对话”则达到了一个新的高度。

截至目前，超过40家汽车商已与谷歌就Android Auto展开合作。
Android Auto跟Android L一样会在今年稍后时候上市。

谷歌下一个发展重心是家庭客厅。Android TV将是一款平台产品。而不是
仅仅电视本身。Android TV是一套可用于电视机顶盒的系统，有相应SDK。

谷歌对它的重视程度不亚于智能手机和平板。Android TV的核心优势是搜索
（基于Google Now）

用户可以用Android Wear智能手表设备来控制Android TV。谷歌的所有平
台展现了前所未有的融合趋势。

和亚马逊的Fire TV一样，Android TV也是两用的平台：电视和游戏。Game
基于Android系统核心，TV基于Google Now搜索引擎，谷歌未来潜力无穷。

索尼、夏普、TP vision和飞利浦的2015高清（HD）及4K电视全部都将运行
Android TV

Chromecast(可以当做电视棒)迎来新功能：不需要处于同一个Wi-Fi网络下
也能进行视频投射。

谷歌公布了新投射功能Backdrop，通过该功能可以将地图、卫星图、街景照
投射到电视上，用户可以控制谁有权进行投射，以及什么内容可以被投射。

Pichai介绍了Andorid与Chrome OS的融合。Android手机用户，接近
Chromebook时，后者系统会自动解锁，远离Chromebook时，电脑会自动
锁屏。这一Demo让人想起了前几天iOS 8与Mac OS X的互动。

谷歌用一段视频来展示公司产品对各行各界人士的深层影响。稍后话题转移
到了谷歌云计算平台。主讲人是技术平台高级副总裁Urs Hölzle。

摩尔定律与云的关系：计算引擎价格下降30-53%；云存储价格下降68%；
BigQuery价格下降85%；折扣是自动调整的。

出现闹事者大喊，“你在为一个杀人公司工作。”

谷歌发布Cloud Dataflow云数据分析工具。可帮助开发者创建数据管道，并
抓取任意大型数据集，以进行分析。

Ellie Powers介绍Google Play。Google Play为开发者提供了大量工具。

现场开始演示Google Fit平台。有点类似苹果的健康追踪平台，通过一系列
API来管理搜集自传感器、应用的健康数据。

Fit将所有的用户健身数据存储到一处。Google Fit有大量合作伙伴，包括阿
迪达斯和耐克

Pichai对大会进行了总结陈词。所有与会者都可以拿到LG G Watch或三星
Gear Live智能手表。

About Material Design
逆袭？Or 渣渣？

• 第一篇：介绍
• 第二篇：风格
• 第三篇：布局
• 第四篇：组件
• 第五篇：模式
• 第六篇：可用性

What is Material Design?
有形的有质量的
有真实动
效的
第一篇：介绍

Material-Design官方宣传视频

MaterialDesign目标
一种独一无二的底层系统，在这个系统的基础之上，构建跨平台和超越设备尺寸的
统一体验。遵循基本的移动设计定则，支持触摸、语音、鼠标、键盘等输入方式。

设计原则
Material is the metaphor
Bold, graphic, intentional Motion provides meaning
隐喻对象为自然材料醒目、图形化、有意为之动效要有意义

理解页面中的元素—界面是直观的

1、真实的
运动曲线
2、即时响
应的交互
4、令人愉
悦的细节
第二篇：动效@视觉、开发、交互
3、有意义
的转场

动效之前先理解Material
真实世界中的物体是有形的，有质量的，当受到外力作用时才能运动。因此，
物体不能突然开始或结束运动。突然开始运动或突然结束运动的动效是生硬
的，显得不自然，无法符合用户的预期，也无法取悦用户。

真实的运动曲线
动效设计的关键是保证物体运动的物理感，同时不牺牲物体运动的优雅感、
简约感、美感灵活的加速、温和的减速，这样的动效让用户感到自然且愉悦。

即时响应的交互状态
表面层反馈、物体本身反馈、径向反馈

①表面层反馈的最佳案例
根据所接收的输入时间，系统立即在人机交互的“接触点”做出视觉反馈，
以告知用户已经确认输入

②物体本身反馈的最佳案例
除了表面墨水式的动效反馈，物体本身也可以根据交互行为做出反应。物体
可以因触控或点击而上升，上升用来阐释物体的激活状态。

有意义的转场
动效设计不应该仅仅美丽，而且还应该具备功能性目的。

①视觉连贯性
进场元素：无论是新生成的元素，或者是变换进入屏幕的元素，设计者需着重笔墨介绍一番新进场的元素。
退场元素：指的是在新场景下不复存在的元素，退场元素必须温和、不突兀的退场。
共享元素：指的是从转场开始到转场结束都存在的元素，可以是一个图标，也可以是点击后放大的图像。

②富有层次的时间感
构建转场效果，要考虑哪些元素需要运动，运动的持续时间多久，从何时开始，何时结束。确保动
效能够表达出信息层级。这样用户便可知道哪些元素最为重要，并且创建视觉轨迹。

③编排一致
所有元素的运动路径必须富有运动感，并且要有序。通过有序的动效吸引用
户的注意。

令人愉悦的细节
在应用中大大小小的元素都可以进行动效设计，无论是细腻的图标小动效，
或是整体的关键性转场效果和交互动效。

是否是渣渣还要看
这么多动效？内存？耗电？
是否得到良好的优化是关键

1、颜色2、文字
4、图片
第三篇：风格@视觉
3、图标

1、UI中的色彩应用
MaterialDesign用色鲜亮欢快，完美搭配柔和的背景。取色灵感来自当代建
筑、路标、减速带、操场等。通过阴影和高光，带来一种惊喜和缤纷的色彩。

UI配色板
色板每一张均从基本颜色开始，然后逐渐扩充，创建出一套完整、可复用的
配色体系，可用于网页设计、安卓设计和iOS设计。

选择配色合理的配色版
在第一张色板中选主色，色调限制在3种之内。在第二张色板中选择一种强调
色。

大胆使用主色
鼓励在较大块区块用色，不同区块使用色板的不同颜色。工具栏，以及较为
大块的区域，采用了500蓝这种主色。而状态栏采用了700蓝，比主色稍深。

强调色
靓丽的强调色可被用来当做按钮和控件，例如开关和滑块。左对齐的选项
（或是图标，或是标题）也可以采用强调色。

调整强调色
如果强调色过暗或过淡，可以调整强调色的明暗。如果强调色不起作用，可以在白色背
景上使用主色500蓝，如果背景色是主色500蓝，可以尝试使用透明度100%的白色，
或者54%的黑色。

色彩主题
确定色彩主题能让应用的视觉保持一致。色彩样式风格决定了物体表面墨水
效果的明暗度，阴影的强度。这里建议两种风格的色彩主题：明亮、深邃

文本、图标、分割线要设置透明度
为了打造更高效的信息层级，文本要使用不同色调。其他元素，比如说文字、
图标和分割线，也应该设置透明度，效果要比纯色好

2、字体—Roboto
Ice Cream Sandwich发布后
Roboto成为了安卓的标准字体。在
这次版本迭代中，Roboto稍微进行
了修改，以便适应更广泛的平台，
修改后的字体稍微变宽、变圆了一
点，可读性和明晰感得以提高。

关于dp、sp、dpi、ppi、px
1、屏幕像素密度（dpi）不等于分辨率（VGA）不等于密度独立像素(dp)
屏幕像素密度（dpi）=分辨率/屏幕尺寸
标准：160dpi屏幕上1dp=1px
换算公式：px= dp*dpi/160
sp：衡量文字大小的单位，dp：衡量非文字大小的单位，换算公式相同
举例：240dpi的屏幕上，1dp=1.5px

关于dpi、ppi、dp、sp、px
为什么如此麻烦？——安卓屏幕碎片化使然

字体比例和基本样式
如果界面中的字体样式和字体尺寸
种类过多，版式布局会被破坏。
最基本字体样式中字体比例应该是
12，14，16，20，34(sp)

字体比例和基本样式
Display字体Headline字体Title字体

基本色/色彩对照
如果字体颜色和背景色相近或相同
很难以阅读。缺少对比的文本可读
性很差。尤其是在深色背景中。
文本的对比率应该维持在最小的
4.5:1 (根据亮度luminance values
计算)，这时灵活性最高。. 对比率
为7:1时，可读性最佳。
下图的选色考虑到了对比率，同时
兼顾非典型情况下的可读性。

基本色/色彩对照

行高
行高要根据样式中不同的尺寸和字
重而分别设置，从而提高可读性，
合理设置间隔。只有Body，
Subhead，Headline，以及稍小的
Display样式中采用自动换行。其他
字体样式保持单行。

文字换行
不应该：1.短语2.凹进3.凹进4孤立5凹进6.连字符

每行平均字符长度
“好的阅读体验，每行大约60个字符。恰当字符数量是提高可读性的关键。

是否是渣渣还要看
这么理想的排版，好控制吗？

3、图标规范
图标必须简约、富有现代感、友好，有时候要让人感到惊奇。必须在形式上
极简，回归到最本质的形式诠释理念。确保小尺寸情况下的可读性和明晰性。

多使用几何形状、通过网格设计
形状鲜明，多多采用几何形状
绘制图标时，要灵活运用图标网格，基于网格绘制比例和关键部分。

使用圆角
在矩形和正方形中广泛使用圆角。避免突兀和锯齿感，线图标的圆角要稍微
分明一些。不同的系统图标尺寸需要不同的圆角，从而优化觉一致性。

一致性—尽可能使用系统图标
在不同的应用中，尽可能使用系统图标保证一致性。（左边√ 右边×）

应用中的图标
应用中的图标建议大小为24dp

4、图像设计原则
图像样式风格应该是可读、令人愉悦、真实。要强调出实体感、材质感、深
度感、令人惊喜的用色，以及上下文连贯。

图像如何选择
使用和人物相关的图片、和信息相关的图片、超出预期但密切联系的图片

图像如何使用
描述情景；大胆整合色彩、内容、图像；用图像提高信息表达力；少用图库

图像设计原则
图像要有视觉焦点。可以是图像中的某个元素，也可以是整体协调的构图。

图像设计原则
构建故事性。图像要能讲述出富有沉浸性的故事，同时能够提示上下文

Hero图像指的是在界面中具
有支配地位的图像，例如屏幕
顶部的Banner。主要用来吸
引用户，提供和上下文相关的
内容，加强品牌效应。
Feature图像指的是不同布局
中，最显著、最能吸引注意力
的图像。
Integrated hero images 往往能
够起到协调作用，将布局中不
同内容协调一致。但是此类图
像不是主要的视觉焦点
两种Hero图像

第四篇：布局@交互、视觉
原则多借鉴印刷
排版设计
为了适应
跨平台展示
M-Design是基于
Paper特性的设计，
多有元素都用
Paper承载

为什么用paper做隐喻？——深入人心、跨文化、易理解

理解界面中的元素——Z轴空间
模型：各元素不是在一个平面上，而是分布在Z轴上

Paper分割形式：Seams（接缝）、Steps（层次）
Seam：当两个P公
用一个边时出现。
Seam连接的两个P
同时移动。
Step：当两个P不
在同一个Z轴层次
上时出现。有step
的两个P不同时移
动。

Paper Toolbars
定义：一个用于展示
操作（Actions）的小
纸条。
操作分布在P的左右
两边
跟导航相关的操作
（如抽屉按钮、返回
箭头）放在左边
作用于当前页面的操
作放在右边

Toolbars样式1
Toolbar和底层Paper以Step隔开，底层Paper可以在ToolBar下面滑动。

Toolbars样式2
Toolbar和底层Paper以Seam隔开，底层Paper滑动时Seam变成Step。

Toolbars样式3
Toolbar可以一直保持Seam状态，但必须随着下方Paper一起滑动。

Toolbars样式4
下面Paper可以覆盖Toolbar

Toolbars样式5
Toolbar有标准高度，但可以调整高度，调整后Actions可以固定在上或下

Floating Actions 悬浮按钮1
悬浮按钮是从Paper Toolbar分离出来的。它是你希望用户对此页面进行的操
作。悬浮按钮可以跨越Step，但此悬浮按钮必须属于产生该Step的Paper。

Floating Actions 悬浮按钮2
悬浮按钮也可以跨越Seam，但它必须同时属于产生该Seam的两个Paper。
但要注意，一定不要为了装饰而添加Seam。

其实表达了一个含义：
同一层用线分割，不同层用阴影

阴影的表达——更细致的阴影
阴影包含两个层：Top层呈现距离；Bottom层呈现清晰度

阴影的表达——推荐值
不同大小阴影的设置

L 强化了阴影和高光的表现
“扁平”之后对阴影的态度怎样？

基线网格（Baseline GridS）
所有内容在8dp网格中，模块一般用4dp网格对齐（手机、平板、桌面相同）

间距和重要尺寸（部分）
1. 24dp 2. 56dp 3. 48dp 4. 72dp 5. 8dp（省略平板、桌面）

重要比例
页面布局适当运用比例。2:3、3:4、1:1、4:3、3:2、16:9（省略平板、桌面）

可点区域尺寸
头像40dp，icon24dp。点击区域不小于48dp，且点击区域不可重叠。

APP页面结构
APP bar/Toolbar、内容区、Bottom bar、左导航、右导航

App Bar Structure
APP bar就是4.0版本中的Action bar。用于标品牌标签branding, 导航
navigation, 搜索search, 操作actions。“左边导航，又边操作”

App Bar 规范

侧导航Side Vav
侧导航里面的内容必须是“导航或身份相关”的，且重要程度相对较低。
侧导航宽度=设备屏幕宽度-APP bar高度(默认)

不久前，Google+更新，去掉了Drawer导航，于是有人大
呼风靡一时的抽屉导航将被遗弃

Tabs or Drawer？——三道杠何去何从
使用Tabs：
1、如果你希望用户频繁切换页面。
2、你的APP中高层级页面较少。（tabs选项不能太多）
3、你希望这几个可切换的页面都获得用户的关注。
使用Navigation drawer：
1、你的页面中高层级页面比较多。（超过6个）
2、你想在App内非直接相关的页面中快速跳转。
3、APP层级比较深，你想快速返回APP顶层。
4、你想减少用户对一些不常用操作的注意和访问。

第五篇：组件@交互、开发、视觉
BottomSheets
底部列表
18种组件
Buttons
按钮
Cards
卡片
Chips
信息片段
Dialogs
对话框
Dividers
分割线
Grids
网格
Lists
列表
List controls
操作列表
Menus
菜单
Progress and Activities Sliders
Snackbars and Toasts Subheaders Switches Tabs
Text fields Tool tips

About
Material Design Components：Card

Card官方定义
A card is a piece of paper that contains a unique data set of related,
heterogeneous information, for example, a photo, text, and link all about
a single subject. Cards typically are an entry point to more complex and
detailed information. Cards have a constant width and variable height.
The maximum height is limited to what can fit within a single view on a
platform, but it can temporarily expand as needed (for example, to display
a comment field). Cards do not flip to reveal information on their back.
卡片是一张包含了特定相关数据和多种信息（例如一些和某个物品相关的照
片、文字、连接）的纸片（Paper）。卡片通常是一些更复杂更详细信息的
入口。卡片通常有一个恒定的宽度和可变的高度。通常把所处平台单屏的高
度作为卡片最大高速限制，但在需要的时候可以临时扩展高度（如展示评论
区）。轻点卡片不显示卡片背面的信息。（点击卡片进入更多信息页面）

不建议Card翻转
上图是Samuel Couto 在Dribbble上发表的作品。曾引发对Card特征的讨论（有观点
认为现实中的Card可以翻面、可以折叠、可以展开、可以将很多卡片堆起来节省空间）

Cards使用规范
Card通常包含一些内容集合：清单+操作、图片+文案+操作、图片+文案等
规范：展示不同类型的内容，或展示同类型但尺寸或操作差别较大的内容。

什么时候不用Cards
快速浏览列表用于展示没有太多按钮的同质内容。如果用Card会阻碍用户快
速浏览。右图图片是轻量的且尺寸一致，没必要用Card

Cards类型1
整个Card都是操作响应区域。Card内容包含富媒体和文字信息。

Cards类型2
分为两个响应区域。内容包含可选的头部、富媒体、文字信息、其他操作

Cards类型3
3个响应区域。内容包含可选的头部、富媒体、文字信息、其他操作

Cards类型4
多个响应区域。内容包含可选的头部、富媒体、其他操作

Cards使用2dp圆角
卡片都有圆角，没有圆角是瓦片（win8）。卡片可以有多个操作，瓦片只能
不超过2个。

其实我想说
我不是win8也不是ios，虽然跟他们都很像！

Bottom sheets
用于展示3个以上无需解释的操作。从底部向上升起。可用列表、网格形式。
材质：Paper

Button
Floating Action Button材质：Paper Raised Button材质：Paper Flat Button材质：ink
使用原则：FAB非常重要、普遍存在RB/FB 不允许层上加层，根据情况选择

讨论：哪种是符合规范的？
Raised Button用于扁平层，强调页面中的操作
Flat Button是为了避免出现多余的层（不能多于两层）

特殊Button： Persistent footer buttons 常驻底部按钮
常驻底部按钮：如果你的页面中需要持续存在的按钮，请首先考虑FAB。但如果这个操作不是鼓励
用户马上操作，但又必须持续存在时，可以用常驻底部按钮。注意：一定不要用RaisedButton。

Chips信息片段
包含少量信息的入口，如日历事件、联系人等。
和Card的区别是，信息更少、不包含更多操作、支持自由拖拽等

对话框（Dialogs）
用于提醒、确认、选择。包含标题（必要的时候才有）、对话内容、操作。
积极、进入下一步的操作放在右边（也有可能是带有破坏性的操作如删除、移除等），消极、回到
原页面的操作放在左侧。

对话框中的Button
水平排列Button和垂直排列Button。对话框使用Flat Button。

左手还是右手？
为什么标题和操作都要左对齐？求破

分割线（ Dividers ）
单个页面中没有图标等可以帮助定位的元素，且间距不足以区分上下两部分
内容时，可以使用分割线。

分割线类型
全出血（Full-Bleed）分割线和插入式（Inset）分割线。当页面中存在辅助
定位的元素时不需要使用全出血分割线。

分割线和副标题关系
当页面中有副标题的时,在副标题上部使用分割线；网格列表自然形成分割的，
不需再用分割线。

温馨提示
接下来是两种列表，注意和Card区别

Grids 网格列表
网格列表不是用于风格布局的网格，是一种替代传统list列表的展示形式。常
用于展示同质化内容，尤其适合展示图片。

Grid列表的组成元素
可以是单独一张图片，图片+文字，图片+文字+icon

List列表
适合展示同质的数据或者以组为单位的数据，如图片和文字。这种方式适合
阅读和理解。

List列表构成
元素和操作优先级。重要的内容在左边，次重要内容放在右边。

List Controls控制列表
由状态/主要操作、单行文字、次要操作/次要信息构成

Card 、Grid列表、List列表
1、List列表展示同质且文字不超过两行的内容。
2、如果需要展示的文字超过3行，请使用Card，而不是用List列表。
3、如果展示内容是图文，且主要内容是图片，请使用Gird列表。
4、Card适合展示非同质内容或同质但尺寸差别较大的内容。

Control list类型1
Check box、Separate target、Switch、Reorder

Control list类型2
Expand&Collapse…Leave behinds、See more…

Menus菜单
Menu出现在调出菜单的元素的上方，当前选项出现在Menu的最上方。

Menus菜单如何对齐？
提问

Menus菜单如何对齐？
Menu和选项所处位置对齐，而不是和点击位置对齐。

Tabs
Tab用来切换APP不同功能模块或者一组内容集合。豌豆荚、360、淘宝都是在以上基
础上的调整。
Header元素：app bar、tab bar、inset search、page title

元素：app bar、tab bar、search 、inset search、page title、side Nav

Tabs-特性
Tab选项只能一排，切不超过6个。不能出现Tab嵌套Tab的场景。Tab可以用
文字或者用icon，但不能混搭。Tab有固定Tab和可滚动Tab两种。

Tabs bar类型
分类固定Tab和可滚动Tab。固定Tab数量不超过6个，平均分布。可滚动Tab
左侧留有空间，数量不超过6个。

Tabs文案规范
文案不能太长，如必需建议使用可滚动Tab。文字大小保持一致、不可折行、
不可截断、文字和icon不可混搭。

Floating action button悬浮按钮
FAB是一种Promoted Actions。用来承担页面中最重要或最想让用户点击的操作。每
个页面只能有一个FAB。两种尺寸，标准版和mini版，mini版只在和页面其他元素保持
视觉连续性的时候使用。

FAB什么时候使用？
FAB是是页面中最重要的操作。并不是所有页面都需要FAB：左图最重要的操
作是点击查看图片，不需要FAB；右图最重要的操作是添加文件，所以需要。

FAB放在何处？
可以基于页面分割线放在空白处，或附着在扩展的app bar上。

FAB不能这么放
FAB不能随便放在页面中；不能盖住tool bar上的操作；不能被toast盖住；
不能所有规操作都使用。

FAB不要这么用1
不要在页面中使用多个FAB
不要在对话框中使用FAB
不要在drawer中使用FAB
（drawer的作用是导航）
不要在overflow菜单中附
加FAB

FAB不要这么用2
不要把FAB当做Overflow菜单
用
不要在FAB里面加入和icon含
义不相关操作，不相关操作放
入Overflow菜单中。

FAB不要这么用3
FAB里面只能放积极、正向的操作、破坏性操作不要放在FAB里。FAB是圆形、
扁平的。不要使用异形或添加样式。

第六篇：模式@视觉、交互、开发
1
Slection
2
Gestures
5
Imagery
Treatment
4
Setting
3
Promotat-ed
action
6
Search

温馨提示
这部分是比较成熟的模式，浏览

模式一：文字选择
文字选择模式

14种常用手势
模式二：常用手势

模式三：Promotated action
前面已讲

模式四：图像处理
看视频

模式五：搜索1
点击搜索框—历史记录—联想—结果

模式五：搜索2
点击搜索图标—历史记录—联想—结果

模式：设置
全是字…

Accessibility
全是字…

吐槽时间
逆袭？Or 渣渣？

总结
理念能自圆其说、规范相对之前更完整。
尤其在导航、页面结构、组件使用上阐述比较清晰。
凡是过犹不及，动效太多会不会走向另一个极端、细节有待推敲

既不刻意拟物、又不过分扁平，一切为了真实
END
@王林UX
http://www.ryannote.com

Material design分享

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (6)

Similar to Material design分享

Similar to Material design分享 (20)

More from 麦哥UE

More from 麦哥UE (8)

Material design分享

Editor's Notes