<!-- wp:quote -->
<blockquote class="wp-block-quote"><p > 本文转载于优设网 </p><cite > 原文地址:https://www.uisdc.com/comprehensive-material-design-note</cite></blockquote>
<!-- /wp:quote -->

<!-- wp:image {"id":120268} -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/comprehensive-material-design-note-1.jpg" alt="comprehensive-material-design-note-1" class="wp-image-120268"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 编者按:这一年就快完了,你还没搞懂 Material design 吗?是嫌文档太长,还是觉得自己英文不好?都没关系,我们善良热情的 < a target="_blank" href="http://weibo.com/greenzorro"rel="noreferrer noopener">@十萬個為什麽 </a>  帮同学们通读了一遍官方的设计指南,去糙取精,整理出这篇干货超多的学习笔记,打包票学完基本就掌握 90% 了,别错过咯!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> 自从 Material design 发布以来,可乐橙就在一直收集相关素材与资源,研究别人的作品。这套设计风格非常鲜明,带有浓郁的 Google 式严谨和理性哲学,深得我心。实际上,光是研究素材和别人作品,就能发现一些明显的规律,做出几分相似的设计。这样半吊子的状态一直保持到现在,最近有时间通读一遍官方的设计指南,终于有了深入的理解。在朋友的项目(<a target="_blank" href="http://lydiabox.com/" rel="noreferrer noopener">http://lydiabox.com</a>)中实践了一番,虽然很抱歉拿朋友开刀,不过他对整体效果似乎还算满意。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-1.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Material design 的设计规范细致入微,需要消化好一阵子。越读越感受到它的妙处,假如每个细节都严格遵照 Material design 的思想来设计,哪怕你不是设计人员,你的产品也一定不会难用和难看。当然,作为设计师,要求就更高了。设计文档本身,就提供了一种很好的方式,帮你从各个角度思考和构建自己产品的规范。但在这之前,先要好好整理一下学习笔记。要打破规矩,必先掌握规矩。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> 由于只是笔记,我会写得尽量简单。并且省略掉一些可乐橙认为设计师都已经掌握的信息。想要深入了解 Material design,还是建议有空通读一遍官方文档。不过,牢记以下要点,基本能做到 90% 了。实际上,Google 官方的应用也有不遵照规范的地方,不能太拘泥于条条框框。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4 id="toc_0"><strong > 一、核心思想 </strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Material design 的核心思想,就是把物理世界的体验带进屏幕。去掉现实中的杂质和随机性,保留其最原始纯净的形态、空间关系、变化与过渡,配合虚拟世界的灵活特性,还原最贴近真实的体验,达到简洁与直观的效果。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-2.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Material design 是最重视跨平台体验的一套设计语言。由于规范严格细致,保证它在各个平台使用体验高度一致。不过目前还只有 Google 自家的服务这么做,毕竟其他平台有自己的规范与风格。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4 id="toc_1"><strong > 二、材质与空间 </strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong > 材质 </strong></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/b-1.gif" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Material design 中,最重要的信息载体就是魔法纸片。纸片层叠、合并、分离,拥有现实中的厚度、惯性和反馈,同时拥有液体的一些特性,能够自由伸展变形。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> 这些是纸片的魔法特性,真实纸片所不具备的能力:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li > 纸片可以伸缩、改变形状 </li><li > 纸片变形时可以裁剪内容,比如纸片缩小时,内容大小不变,而是隐藏超出部分 </li><li > 多张纸片可以拼接成一张 </li><li > 一张纸片可以分裂成多张 </li><li > 纸片可以在任何位置凭空出现 </li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p> 不过,魔法纸片有些效果是禁止的:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li > 一项操作不能同时触发两张纸片的反馈 </li><li > 层叠的纸片,海报高度不能相同 </li><li > 纸片不能互相穿透 </li><li > 纸片不能弯折 </li><li > 纸片不能产生透视,必须平行于屏幕 </li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p><strong > 空间 </strong></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-3.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Material design 引入了 z 轴的概念,z 轴垂直于屏幕,用来表现元素的层叠关系。z 值(海拔高度)越高,元素离界面底层(水平面)越远,投影越重。这里有一个前提,所有的元素的厚度都是 1dp。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> 所有元素都有默认的海拔高度,对它进行操作会抬升它的海拔高度,操作结束后,它应该落回默认海拔高度。同一种元素,同样的操作,抬升的高度是一致的。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> 注意:这不止是设计中的概念,开发人员确实可以通过一个值来控制元素的海拔高度和投影。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4 id="toc_4"><strong > 三、动画 </strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Material design 重视动画效果,它反复强调一点:动画不只是装饰,它有含义,能表达元素、界面之间的关系,具备功能上的作用。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>easing</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/b-2.gif" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 动画要贴近真实世界,就要重视 easing。物理世界中的运动和变化都是有加速和减速过程的,忽然开始、忽然停止的匀速动画显得机械而不真实。考虑动画的 easing,要先考虑它在现实世界中的运动规律。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong > 水波反馈 </strong></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/b-3.gif" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/b-4.gif" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/b-5.gif" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 所有可点击的元素,都应该有这样的反馈效果。通过这个动画,将点击的位置与所操作的元素关联起来,体现了 Material design 动画的功能性。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong > 转场效果 </strong></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/b-6.gif" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 通过过渡动画,表达界面之间的空间与层级关系,并且跨界面传递信息。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/b-7.gif" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 从父界面进入子界面,需要抬升子元素的海拔高度,并展开至整个屏幕,反之亦然。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/b-8.gif" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 多个相似元素,动画的设计要有先后次序,起到引导视线的作用。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/b-9.gif" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 相似元素的运动,要符合统一的规律。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong > 细节动画 </strong></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/b-10.gif" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 通过图标的变化和一些细节来达到令人愉悦的效果。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4 id="toc_9"><strong > 四、颜色 </strong></h4>
<!-- /wp:heading -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-4.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-5.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 颜色不宜过多。选取一种主色、一种辅助色(非必需),在此基础上进行明度、饱和度变化,构成配色方案。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-6.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-7.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Appbar 背景使用主色,状态栏背景使用深一级的主色或 20% 透明度的纯黑。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-8.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-9.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 小面积需要高亮显示的地方使用辅助色。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> 其余颜色通过纯黑 #000000 与纯白 #ffffff 的透明度变化来展现(包括图标和分隔线),而且透明度限定了几个值。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-10.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-11.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 黑色:[87% 普通文字] [54% 减淡文字] [26% 禁用状态 / 提示文字] [12% 分隔线]<br > 白色:[100% 普通文字] [70% 减淡文字] [30% 禁用状态 / 提示文字] [12% 分隔线]</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> 延伸阅读:<a target="_blank" href="http://www.uisdc.com/3-websites-design-online"rel="noreferrer noopener">《超方便!Material Design 专用在线配色工具》</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4 id="toc_10"><strong > 五、图标 </strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong > 桌面图标 </strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> 桌面图标尺寸是 48dp X 48dp。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":120190} -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/QQ20141228165008.png" alt="QQ20141228165008" class="wp-image-120190"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 桌面图标建议模仿现实中的折纸效果,通过扁平色彩表现空间和光影。注意避免以下问题:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li > 不要给彩色元素加投影 </li><li > 层叠不要超过两层 </li><li > 折角不要放在左上角 </li><li > 带投影的元素要完整展现,不能被图标边缘裁剪 </li><li > 如果有折痕,放在图片中央,并且最多只有一条 </li><li > 带折叠效果的图标,表面不要有图案 </li><li > 不能透视、弯曲 </li></ul>
<!-- /wp:list -->

<!-- wp:image {"id":120191} -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/QQ20141228165131.png" alt="QQ20141228165131" class="wp-image-120191"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 常规形状可以遵循几套固定栅格设计。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong > 小图标 </strong></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-18.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 优先使用 material design 默认图标。设计小图标时,使用最简练的图形来表达,图形不要带空间感。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":120267} -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/icon-framework.png" alt="icon framework" class="wp-image-120267"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 小图标尺寸是 24dp X 24dp。图形限制在中央 20dp X 20dp 区域内。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":120065} -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-21.png" alt="a-21" class="wp-image-120065"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 小图标同样有栅格系统。线条、空隙尽量保持 2dp 宽,圆角半径 2dp。特殊情况相应调整。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-22.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-23.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 小图标的颜色使用纯黑与纯白,通过透明度调整:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> 黑色:[54% 正常状态] [26% 禁用状态]<br > 白色:[100% 正常状态] [30% 禁用状态]</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4 id="toc_13"><strong > 六、图片 </strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong > 选用图片 </strong></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-24.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-25.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 描述具体事物,优先使用照片。然后可以考虑使用插画。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong > 图片上的文字 </strong></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-26.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 图片上的文字,需要淡淡的遮罩确保其可读性。深色的遮罩透明度在 20%-40% 之间,浅色的遮罩透明度在 40%-60% 之间。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-27.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 对于带有文字的大幅图片,遮罩文字区域,不要遮住整张图片。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-28.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 可以使用半透明的主色盖住图片。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong > 提取颜色 </strong></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-29.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Android L 可以从图片中提取主色,运用在其他 UI 元素上。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong > 图片加载过程 </strong></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-30.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 图片的加载过程非常讲究,透明度、曝光度、饱和度 3 个指标依次变化,效果相当细腻。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/b-11.gif" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":4} -->
<h4 id="toc_18"><strong > 七、文字 </strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong > 字体 </strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> 英文字体使用 Roboto,中文字体使用 Noto。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-31.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Roboto 有 6 种字重:Thin、Light、Regular、Medium、Bold 和 Black。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-32.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Noto 有 7 种字重:Thin, Light、DemiLight、Regular、Medium、Bold 和 Black。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong > 文字排版 </strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> 常用字号:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>12sp 小字提示 </li><li>14sp(桌面端 13sp) 正文 / 按钮文字 </li><li>16sp(桌面端 15sp) 小标题 </li><li>20sp Appbar 文字 </li><li>24sp 大标题 </li><li>34sp/45sp/56sp/112sp 超大号文字 </li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p> 长篇幅正文,每行建议 60 字符(英文)左右。短文本,建议每行 30 字符(英文)左右。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4 id="toc_21"><strong > 八、布局 </strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p> 所有可操作元素最小点击区域尺寸:48dp X 48dp。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> 栅格系统的最小单位是 8dp,一切距离、尺寸都应该是 8dp 的整数倍。以下是一些常见的尺寸与距离:</p>
<!-- /wp:paragraph -->

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

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-33.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 另外注意 56dp 这个数字,许多尺寸可变的控件,比如对话框、菜单等,宽度都可以按 56 的整数倍来设计。</p>
<!-- /wp:paragraph -->

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

<!-- wp:heading {"level":4} -->
<h4 id="toc_22"><strong > 九、组件 </strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong>Bottom sheets</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-34.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-35.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 通常以列表形式出现,支持上下滚动。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-36.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-37.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-38.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 也可以是网格式的。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-39.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><strong>Buttons</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-40.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-41.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-42.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 按钮分为悬浮按钮、凸起按钮和扁平按钮 3 种。重要性如下递减:</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-43.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 最重要且随处用到的操作,建议使用悬浮按钮。信息较多时,选用凸起按钮可以有效突出重要操作,但注意纸片不要叠太多层。扁平按钮适合用在简单的界面,例如对话框中。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> 使用悬浮按钮要遵循以下规则:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li > 建议只用一个悬浮按钮 </li><li > 悬浮按钮可以贴在纸片边缘或者接缝处,但不要贴在对话框、侧边抽屉和菜单的边缘 </li><li > 悬浮按钮不能被其他元素盖住,也不能挡住其他按钮 </li><li > 列表滚动至底部时,悬浮按钮应该隐藏,防止它挡住列表项 </li><li > 悬浮按钮的位置不能随意摆放,可以贴着左右两边的对齐基线 </li></ul>
<!-- /wp:list -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-44.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 悬浮按钮通常触发正向的操作,添加、创建、收藏之类。不能触发负面、破坏性或不重要的操作,也不应该有数字角标。下图就是悬浮按钮的错误使用:</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-45.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 悬浮按钮有两种尺寸:56x56dp/40x40dp</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Cards</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-46.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-47.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 即使在同一个列表中,卡片的内容和布局方式也可以不一样。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-48.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 卡片统一带有 2dp 的圆角。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> 在以下情况考虑使用卡片:</p>
<!-- /wp:paragraph -->

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

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-49.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 卡片最多有两块操作区域。辅助操作区至多包含两个操作项,更多操作需要使用下拉菜单。其余部分都是主操作区。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Chips</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-50.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-51.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 狭小空间内表现复杂信息的一个组件,比如日期、联系人选择器。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Dialogs</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-52.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 对话框包含标题、内容和操作项。点击对话框外的区域,不会关闭对话框。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-53.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 通常情况,避免出现滚动条。空间不足时允许滚动,滚动条建议默认显示。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-54.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 对话框中,取消类操作项放在左边,引起变化的操作项放在右边。要写明操作项的具体效果,不要只写 “是” 和 “否”。标题文字要明确,即使不读正文内容也能知道在干什么,标题不要用 “确定吗” 这样的含糊措辞。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-55.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 在对话框中改变内容,不会提交数据,点击确定后,才会发生变化。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> 对话框上方不能再层叠对话框。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-56.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 还有一种简易对话框,不带操作项。点击列表内容触发相应操作,并关闭对话框。点击简易对话框外面,对话框会关闭,操作取消。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-57.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-58.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 对话框可以是全屏式的,全屏对话框上方可以再层叠对话框。左图是一个普通界面,其中的任何改动立即生效。右图是全屏对话框,其中任何改动,要点击保存后才生效,点击 X 取消。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> 全屏对话框右上角的操作项,可以是诸如保存、发送、添加、分享、更新、创建之类的操作,不要使用完成、OK、关闭这样的含糊措辞。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> 只有必填项都填了,右上角的操作项才变为可点击状态。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> 内容发生了改变,点左上角的 X,需要有个确认对话框,提示是否忽略修改。内容没有发生改变,点左上角的 X,直接退出全屏对话框。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-59.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 对话框的四周留白比较大,通常是 24dp。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Dividers</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-60.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 列表中有头像、图片等元素时,使用内嵌分隔线,左端与文字对齐。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-61.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 没有头像、图标等元素时,需要用通栏分隔线。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-62.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 图片本身就起到划定区域的作用,相册列表不需要分隔线。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-63.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 谨慎使用分隔线,留白和小标题也能起到分隔作用。能用留白的地方,优先使用留白。分隔线的层级高于留白。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-64.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 通栏分隔线的层级高于内嵌分隔线。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Grids</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-65.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-66.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 网格由单元格构成,单元格中的瓦片用来承载内容。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-67.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 瓦片可以横跨多个单元格。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-68.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 瓦片包含主操作区和副操作区,副操作区的位置可以在上下左右 4 个角落。在同一个网格中,主、副操作区的内容与位置要保持一致。两者的操作都应该直接生效,不能触发菜单。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> 网格只能垂直滚动。单个瓦片不支持滑动手势,也不鼓励使用拖放操作。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> 网格中的单元格间距是 2dp 或 8dp。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Lists</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-69.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-70.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 列表由行构成,行内包含瓦片。如果列表项内容文字超过 3 行,请改用卡片。如果列表项的主要区别在于图片,请改用网格。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-71.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 列表包含主操作区与副操作区。副操作区位于列表右侧,其余都是主操作区。在同一个列表中,主、副操作区的内容与位置要保持一致。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-72.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 在同一个列表中,滑动手势操作保持一致。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-73.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 主操作区与副操作区的图标或图形元素是列表控制项,列表的控制项可以是勾选框、开关、拖动排序、展开 / 收起等操作,也可以包含快捷键提示、二级菜单等提示信息。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Menus</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-74.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 顺序固定的菜单,操作频繁的选项放在上面。顺序可变的菜单,可以把之前用过的选项排在前面,动态排序。菜单尽量不要超过 2 级。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-75.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 当前不可用的选项要显示出来,让用户知道在特定条件可以触发这些操作。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-76.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 菜单原地展开,盖住当前选项,当前选项应该成为菜单的第一项。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-77.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-78.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 菜单的当前选项,始终与当前选项水平对齐。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-79.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 靠近屏幕边缘时,位置可适当错开。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-80.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 菜单过长时,需要显示滚动条。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-81.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 菜单从当前选项固定位置展开,不要跟随点击位置改变。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-82.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 菜单到上下留出 8dp 距离。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Pickers</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-83.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-84.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 日期和时间选择器是固定组件,在小屏幕设备中,通常以对话框形式展现。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Progress & activity</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/b-12.gif" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 线形进度条只出现在纸片的边缘。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/b-13.gif" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 环形进度条也分时间已知和时间未知两种。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/b-14.gif" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 环形进度条可以用在悬浮按钮上。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/b-15.gif" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 加载详细信息时,也可以使用进度条。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/b-16.gif" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 下拉刷新的动画比较特殊,列表不动,出现一张带有环形进度条的纸片。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Sliders</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-85.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 滑块左右两边可以放置图标。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-86.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 或是可编辑文本框。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-87.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 非连续的滑块,需要标出具体数值。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Snackbars & toasts</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-88.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Snackbars 至多包含一个操作项,不能包含图标。不能出现一个以上的 Snackbars。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Snackbars 在移动设备上,出现在底部。在 PC 上,应该悬浮在屏幕左下角。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-89.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 不一定要用户响应的提示,可以使用 Snackbars。非常重要的提示,必须用户来决定的,应该用对话框。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-90.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Snackbars 不能遮挡住悬浮按钮,悬浮按钮要上移让出位置。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-91.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Snackbars 的留白比较大,24dp。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-92.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>toasts 和 Snackbars 类似,样式和位置可以自定义,建议遵循 Snackbars 的规则设计。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Subheaders</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-93.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 小标题是列表或网格中的特殊瓦片,描述列表内容的分类、排序等信息。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-94.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 滚动时,如果列表较长,小标题会固定在顶部,直到下一个小标题将它顶上去。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-95.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 存在浮动按钮时,小标题要让出位置,与文字对齐。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Switches</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-96.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 必须所有选项保持可见时,才用 Radio button。不然可以使用下拉菜单,节省空间。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-97.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 在同一个列表中有多项开关,建议使用 Checkbox。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-98.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 单个开关项建议使用 Switch。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 id="toc_38">Tabs</h3>
<!-- /wp:heading -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-99.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>tab 只用来展现不同类型的内容,不能当导航菜单使用。tab 至少 2 项,至多 6 项。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-100.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 超出 6 项,tab 需要变为滚动式,左右翻页。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-101.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>tab 文字要显示完整,字号保持一致,不能折行,文字与图标不能混用。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>tab 选中项的下划线高度是 2dp。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Text fields</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-102.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 简单一根横线就能代表输入框,可以带图标。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-103.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 激活状态和错误状态,横线的宽度变为 2dp,颜色改变。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-104.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 输入框点击区域高度至少 48dp,但横线并不在点击区域的底部,还有 8dp 距离。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-105.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 输入框提示文字,可以在输入内容后,缩小停留在输入框左上角。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-106.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 整个点击区域增高,提示文字也是点击区域的一部分。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-107.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 通栏输入框是没有横线的,这种情况下通常有分隔线将输入框隔开。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-108.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-109.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 右下角可以加入字数统计。字数统计不要默认显示,字数接近上限时再显示出来。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-110.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 通栏输入框也可以有字数统计,单行的字数统计显示在同一行右侧。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-111.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-112.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 错误提示显示在输入框的左下方。默认提示文本可以转换为错误提示。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-113.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 字数限制与错误提示都会使点击区域增高。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-114.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 同时有多个输入框错误时,顶部要有一个全局的错误提示。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-115.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-116.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 输入框尽量带有自动补全功能。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Tooltips</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-117.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 提示只用在小图标上,文字不需要提示。鼠标悬停、获得焦点、手指长按都可以触发提示。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-118.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 上图是错误例子。提示不能包含富文本,不需要三角箭头。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-119.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-120.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 触摸提示(左)和鼠标提示(右)的尺寸是不同的,背景都带有 90% 的透明度。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Navigation drawer</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-121.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 侧边抽屉从左侧滑出,占据整个屏幕高度,遵循普通列表的布局规则。手机端的侧边抽屉距离屏幕右侧 56dp。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-122.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-123.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 侧边抽屉支持滚动。如果内容过长,设置和帮助反馈可以固定在底部。抽屉收起时,会保留之前的滚动位置。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-124.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 列表较短不需要滚动时,设置和帮助反馈跟随在列表后面。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4 id="toc_42"><strong > 十、设置界面 </strong></h4>
<!-- /wp:heading -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-125.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-126.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 设置和帮助反馈通常放在侧边抽屉中。如果没有侧边抽屉,则放在 Appbar 的下拉菜单底部。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> 设置界面只能包含设置项,诸如关于、反馈之类的界面,入口应该放在其他地方。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-127.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 设置项使用通栏分隔线来分组。7 项以下不必分组。如果某项独立一组,考虑把它放在顶部(重要)或放在底部的 “其他” 一栏中(不重要)。设置项较多时尝试合并,比如把两个相关的勾选项合并成一个多选项。设置项非常多时,使用子界面。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4 id="toc_43"><strong > 十一、易用性 </strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong > 无障碍设计 </strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>material design 很重视用户的广度,应该尽量照顾到残障人士的体验。设计时考虑以下使用场景:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li > 没有声音 </li><li > 没有色彩 </li><li > 手机开启了高对比度模式 </li><li > 手机画面放大 </li><li > 没有视觉信息,使用屏幕阅读器 </li><li > 只能通过语音控制 </li><li > 以上多项结合 </li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p> 并注意以下问题:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li > 无鼠标、纯键盘操作。鼠标悬停显示信息,也要通过其他方式展现。</li><li > 考虑大字号情况下的使用体验。</li><li > 不要只通过颜色表达某些信息。</li><li > 音频信息也要提供文字或其他视觉呈现。</li><li > 为图片和视频提供备用的文字信息。</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p><strong > 本地化 </strong></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/a-128.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p> 为阿拉伯语、希伯来语、波斯语用户设计相反的界面,他们的书写和阅读习惯是从右到左的。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4 id="toc_46"><strong > 十二、资源(需要科学上网)</strong></h4>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li><a target="_blank" href="http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0B08MbvYZK1iNT0dFWFBjdTNKaXM/color_swatches.zip"rel="noreferrer noopener"> 配色方案 </a></li><li><a target="_blank"href="http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7V2s1ay1rTmM0dG8/Layout_Mobile_Whiteframe.ai"rel="noreferrer noopener"> 界面模板:手机 </a></li><li><a target="_blank"href="http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7U2hHWS1kS1JjT0k/Layout_Tablet_Whiteframe.ai"rel="noreferrer noopener"> 界面模板:平板 </a></li><li><a target="_blank"href="http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7UHpjdlh5bUd6Z2c/Layout_Desktop_Whiteframe.ai"rel="noreferrer noopener"> 界面模板:桌面 </a></li><li><a target="_blank"href="http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7SUJUS0dQVktmSXc/whiteframes.ai"rel="noreferrer noopener"> 界面模板:线框图 </a></li><li><a target="_blank"href="http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0B08MbvYZK1iNZGNoWmJqVEhQYTQ/RobotoTTF.zip"rel="noreferrer noopener"> 英文字体 Roboto</a></li><li><a target="_blank"href="http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0B6VCDMjD5_VAbXZ5WWxPRDhSVUU/RobotoSpecimenBooklet.pdf"rel="noreferrer noopener">Roboto 介绍 </a></li><li><a target="_blank"href="http://www.google.com/get/noto/pkgs/NotoSansCJKSC-hinted.zip"rel="noreferrer noopener"> 中文字体 Noto</a></li><li><a target="_blank"href="http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7MGtzS0lpeFZUYmc/stickersheet_general.psd"rel="noreferrer noopener"> 组件集 psd</a></li><li><a target="_blank"href="http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7WDR5Q25OcXVuU28/stickersheet_general.ai"rel="noreferrer noopener"> 组件集 ai</a></li><li><a target="_blank"href="http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7Q3FVZ0FnM18yTHM/stickersheet_general.sketch"rel="noreferrer noopener"> 组件集 sketch</a></li><li><a target="_blank"href="http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0B08MbvYZK1iNUzJ4c1VXWDYzbTA/material-design-icons-1.0.1.zip"rel="noreferrer noopener"> 系统图标 </a></li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p> 精华资源两波:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li><a target="_blank" href="http://www.uisdc.com/material-design-freebie"rel="noreferrer noopener">《新鲜热辣!一组实用的 Material Design 风格素材!》</a></li><li><a target="_blank"href="http://www.uisdc.com/high-quality-material-design-resource"rel="noreferrer noopener">《该跟上潮流了!一大波优质的 MATERIAL DESIGN 资源免费下载》</a></li></ol>
<!-- /wp:list -->

<!-- wp:heading {"level":4} -->
<h4 id="toc_47"><strong > 实践 </strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p> 最后,展示一下朋友的项目 —— 云集(<a target="_blank" href="http://lydiabox.com/" rel="noreferrer noopener">http://lydiabox.com</a>)的部分界面。这是一款浏览器,也是一个 html5 应用平台。功能结构不算复杂,但也有它的特殊性。非常适合用来理解 material design,并尝试做一些变通。</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/c-1.jpg" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/c-2.jpg" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/c-3.jpg" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/c-4.jpg" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/c-5.jpg" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://image.uisdc.com/wp-content/uploads/2014/12/c-6.jpg" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><strong>【加上这三篇,Material design 学习资料就够了!】</strong></p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><strong>Material design 到底有哪些过人之处?来这儿学习!</strong><br><a target="_blank" href="http://www.uisdc.com/material-design-trends"rel="noreferrer noopener">《超全面总结!深聊 MATERIAL DESIGN 引领的设计趋势》</a></p></blockquote>
<!-- /wp:quote -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><strong > 同样来自学霸的自学笔记,干货满满!</strong><br><a target="_blank" href="http://www.uisdc.com/material-design-learning-experience"rel="noreferrer noopener">《学霸的自学笔记!Material Design 设计规范学习心得》</a></p><p><strong > 谷歌自家设计师对它的看法与实践心得:</strong><br><a target="_blank"href="http://www.uisdc.com/material-design-google-io-app"rel="noreferrer noopener">《超赞!谷歌设计师的 Material Design 实践心得》</a></p></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p><strong > 原文地址:</strong><a target="_blank" href="http://colachan.com/post/3416"rel="noreferrer noopener">colachan</a><br><strong > 作者:</strong><a target="_blank"href="http://weibo.com/greenzorro"rel="noreferrer noopener">@十萬個為什麽 </a></p>
<!-- /wp:paragraph --><!-- wp:quote -->