image.jpeg

五、组件

组件是 Material Design 区别于 iOS 等其他设计的重要标识，当我们看到 FAB 时我们就知道这是 Material Design；当我们看到底部栏的独特设计时我们也能知道这是 Material Design。想做一款原汁原味的 Material Design 就要了解组件的特征。让我们开始吧！

1. 悬浮球 FAB（Buttons: floating action button）

悬浮球可能是 Material Design 中最明显的标志了。一个圆圆的小球固定在屏幕的某个位置，它特别显眼，让你无法忽视它。同时它也是当前页面最重要的主线操作，比如在邮箱的页面中，FAB 很可能是发邮件的按钮。并且一个页面中只有一个 FAB，这让这个小球更加显眼了。
image.jpeg
△ FAB在APP的右下角位置并且常驻屏幕
image.jpeg
△ FAB是一个页面中最显眼的设计，但并不是每个页面都需要FAB
image.jpeg
FAB的尺寸
FAB 默认尺寸 (56 x 56dp) 和 Mini尺寸 (40 x 40dp)都可以选择，在不同的页面和不同的情况下我们可以使用不同大小的FAB。
可交互的FAB
FAB 可以是一个跳转走的功能，也可以是一个展开子菜单。这个有趣的交互是从Path应用中学到的：点击前是某个图标的样式，点击后 FAB本身变成了关闭按钮，而且会弹出2个以上的子菜单图标矩阵。
image.jpeg
△ 可交互的FAB
扩展形FAB
没错，这种悬浮按钮我们好像已经很熟悉了，可您可能不知道它也是 FAB！这种带文字异形并且不随屏幕滚动的按钮属于扩展形的 FAB。
image.jpeg
△ 扩展形FAB
image.jpeg
△ Reply的自定义FAB设计

2. 底部应用栏（App bars: bottom）

底部应用栏用于显示屏幕底部的导航和按键操作。底部应用栏比较类似 iOS设计中的 Tab栏，但是不同于Tab栏的是底部应用栏通常不会等分为几份，而是放置一些 FAB、导航等的功能性图标，并且讲究排版的节奏感。
image.jpeg
△ 底部应用栏
image.jpeg
△ 底部应用栏上的图标必须为2个以上（不算FAB）
底部应用栏的组成
底部应用栏由以下部分组成：①容器；②导航抽屉控制；③浮动操作按钮（FAB）；④动作图标；⑤更多菜单控件。
image.jpeg
△ 底部应用栏的组成
image.jpeg
△ 以FAB为中心的底部应用栏版式
image.jpeg
△ FAB侧对齐的底部应用栏版式
image.jpeg
△ 没有FAB的底部应用栏版式
image.jpeg
△ FAB和底部应用栏重叠的版式
image.jpeg
△ FAB插入设计的底部应用栏版式
image.jpeg
△ 错误的版式：FAB脱离底部应用栏并且占了多余的空间
底部应用栏的层级
底部应用栏的层级分为：①容器（0dp）；②底部信息栏（6dp）；③底部应用栏（8dp）；④浮动按钮（12dp）‘⑤页卡（16dp）。
image.jpeg
△ 底部应用栏的层级

3. 顶部应用栏（App bars: top）

顶部应用栏和我们 iOS 中所使用的导航栏很类似，但不完全一样。顶部应用栏中标题并非居中而是像报纸一样左对齐的，这是因为 Material Design 认为阅读应该如在报纸上一样按照从左到右的顺序排列。并且图标左侧最多可放置一个系统图标，右侧可放置多个系统图标。
image.jpeg
△ Material Design中的顶部应用栏
image.jpeg
△ 顶部栏可变为选择状态时的工具栏
顶部应用栏的组成
顶部应用栏所包含的组成部分：①顶部栏容器；②抽屉式导航图标（可选）；③ 标题（可选）；④系统图标（可选） ；⑤更多按钮（可选）。
image.jpeg
△ 顶部应用栏的组成
突出标题
顶部应用栏可改变高度以凸显标题（类似苹果的大标题设计）。同时这么做也可以让标题容纳更多的文字，比如新闻APP 就需要这个特性。
image.jpeg
△ 突出标题的设计
顶部应用栏可以嵌入图片
为了减少视觉层级，顶部应用栏中也可以嵌入图片来增强界面的整体感。图为一个使用了嵌入图片顶部栏的照片应用。
image.jpeg
△ 顶部应用栏嵌入图片的样式

4. 背板设计（Backdrop）

在应用引发的某个操作中，可设计背板来承载某些选项和辅助信息。背板的设计在 iOS 中比较类似 Action Sheet 但又更加个性化。
image.jpeg
△ 背板设计示例
背板设计的辅助控件
①背板设计隐藏时，后层控件可以提供有关前层的辅助信息。②背板设计激活时，后层会显示与前层相关的控件。这样可变的设计可以让用户更加方便地找到需要的功能。
image.jpeg
△ 背板设计的辅助控件
image.jpeg
△ Crane APP所使用的背板设计
image.jpeg
△ SHRINE所使用的背板设计使用了增强品牌感的直角

5. 横幅（Banner）

横幅可不光是广告哦，横幅是顶部栏下面的第一个凸显区域，显示突出的消息和相关的可选操作。它可以是一个对话，也可以是一个提示或者包含图形的设计。
image.jpeg
△ 横幅形式的对话框
image.jpeg
△ 如果搭配底部导航来设计，那么横幅可以直接置顶显示

6. 底部导航（Bottom navigation）

底部导航的设计和 iOS 类似，它也是将底部宽度等分为多个图标的点击区域，并且配以辅助文字信息方便用户理解图标背后的功能。底部导航是底部应用栏的一个有力补充。
image.jpeg
△ 底部导航的设计如同iOS中的Tab栏
image.jpeg
△ OWL APP中的个性化底部导航栏

7. 按钮（Buttons）

按钮是最常见的元素，在这里 Material Design 为我们提供了多种多样的按钮设计风格。由于不同的功能和环境，按钮可以使用：①纯文字按钮（这种按钮只有加粗带色彩的文字，可以理解为可点击的链接）；②线性按钮（这种按钮有一个线框来说明点击区域，比较不显眼）；③填充按钮（这种按钮较为明显）；④切换按钮（这种按钮使用率低于其他按钮形式）。
image.jpeg
△ 按钮的四种样式
image.jpeg
△ 和图像结合非常好的文字按钮
image.jpeg
△ 权重不会抢戏的线性按钮
image.jpeg
△ 使人有点击欲望的按钮
image.jpeg
△ 突出功能的切换按钮
image.jpeg
△ 按钮文字应该清晰简洁，不应该让人困惑

8. 卡片式设计（Cards）

卡片式设计同样是 Material Design 的显著标志。其实卡片式设计我们可以理解为一个小的单元，在这个单元里的信息逻辑关系更加紧密。如果一个单元的信息过多很容易让用户在阅读时发生串行现象，卡片式设计就能有效地规避这个问题。

卡片式设计的组成

卡片式设计包含以下组成部分：①容器卡容器。它容纳所有卡元素，容器的尺寸由元素占据的空间决定。②缩略图（可选）。缩略图可以放置头像、图标和logo。③标题文字（可选）。标题文字通常是卡片中最重要的标题，一般文字较大。④小标题（可选）。小标题可以放置文章署名或标记位置等信息。⑤多媒体（可选）。卡片可以包括各种媒体，包括照片和视频等。⑥辅助文字（可选）。通常是对于多媒体的描述信息。⑦按钮（可选）。8.图标（可选）。
image.jpeg
△ 卡片设计的组成
卡片设计的分割线
如果卡片中的内容元素不属于一个逻辑，那么可以使用一条分割线来分隔成两个区域。但是注意，分割线需要使用非常轻的颜色，并且左右不要通过去，以保证卡片的完整性。
image.jpeg
△ 卡片设计的分割线
image.jpeg
△ Owl的页卡设计

9. 纸片（chips）

纸片通常是输入框中多个元素的组合，纸片有选中态和交互态等丰富的交互。比如邮件添加邮件人的操作就是在一个输入框内添加一个纸片的操作，这样的纸片可以承载头像和文字双重信息。
image.jpeg
△ 纸片的应用
image.jpeg
△ 纸片的交互态
image.jpeg
△ Reply的纸片设计

10. 对话框（Dialogs）

对话框是移动端交互中很重要的一环。Material Design 提供了丰富的对话框形式来供我们使用。我们知道对话框可以分为模态对话框和非模态对话框，主要区别是模态对话框需要和人交互，非模态更多是显示提示信息。我们目前介绍的对话框属于模态对话框，稍后介绍的 snackbar 则属于非模态对话框。
image.jpeg
△ 左图为警告对话框，右侧为简单对话框
image.jpeg
△ 左侧为确认对话框，右侧为全屏对话框
image.jpeg
△ 在用户选择前，禁掉确认功能防止用户点击

11. 分割线（Dividers）

分割线在我们设计界面中非常常见。信息的分割按照轻重依次是：面的分割、线的分割、留白的分割。用以区分一个面中不同功能或者不同逻辑的分割线非常常用。那分割线有哪些呢？
全出血分割线和插入式分割线
左图为全出血分割线，右图为插入式分割线。全出血分割线给人的感受是信息完全独立，而插入式分割线更方便我们阅读并准确找到当前阅读的位置。
image.jpeg
△ 全出血分割线和插入式分割线
居中分割线和标题分割线
如果信息阅读曲线沿中心进行，那我们可以给用户提供居中分割线保证阅读顺序。如果信息需要标题进行区分，同样可以使用带小号标题的标题分割线。
image.jpeg
△ 居中分割线和标题分割线
image.jpeg
△ Owl界面中的分割线

12. 抽屉式导航（Navigation drawer）

抽屉式导航我最早是在苹果平台的应用Path 看到的，那时大概是2011年。Path 不仅设计出来了抽屉式导航，甚至还有 FAB。很多产品经理都很青睐这款产品，但遗憾的是2018年 Path 关闭了服务。虽然 Path 的火爆使得很多 iOS应用使用了抽屉式导航的交互，但是苹果并不建议开发者使用这种交互形式。因为抽屉式导航和 Tab栏比较而言 Tab栏的用户触发率更高，而抽屉式导航需要点击两次才能触发某个功能，层级较深。但是 Material Design 很青睐这种交互形式，并鼓励设计师在底部应用栏增加一个导航图标，点击激活抽屉式导航。
image.jpeg
△ 抽屉式导航
抽屉式导航的组成
①容器（可选）；②头部（可选），通常为用户个人信息；③分割线（可选）；④选中态；⑤选中态的文本；⑥没有激活的文本；⑦小标题；⑧ 底层界面（不可操作）。
image.jpeg
△ 抽屉式导航的组成

13. 页卡（Tabs）

页卡常见于顶部应用栏，作为应用栏的一部分存在。一般由2-3个页卡组成。当我们点击其中一个页卡时，应用栏下方跳转对应内容。
image.jpeg
△ 页卡
image.jpeg
△ 当页卡过多时可以使用滚动形页卡

14. 文字输入框（Text fields）

用户需要输入文本信息时会使用到文字输入框。文字输入框的样式 Material Design 也做了漂亮的样式供我们参考。
image.jpeg
△ 文本输入框
image.jpeg
△ 图1为填充形输入框 图2为线框输入框
image.jpeg
△ Rally的填充形输入框

15. 图片组（Image lists）

如果我们构建一个如朋友圈或者相册的界面，那么我们应该如何排列一组图片呢？怎么样排列才能够让用户感觉有秩序感并且友好呢？

△ 图片组
image.jpeg
图片组的四种形式
正常图片组：正常图片组的每张图片大小一样，间距统一并且通常会窄一些，给人秩序感和统一感。这种图片组的形式要求图片源显示出来是统一大小的。
排版图片组：有一点像微软Metro的排版，图片按照栅格分割，最大尺寸的图片等于四个小图拼起的高宽，宽尺寸的图片宽度等于两个小片的宽度相加。
照片墙图片组：照片墙图片组结构比较松散，适合图像尺寸不均等的内容展示，效果如同家居中的照片墙。
瀑布流图片组：这个大家应该比较熟悉了，有点像国内的花瓣瀑布流，图片宽度全部相等，由于高度不等会展现出如同瀑布一样的形式。
image.jpeg
△ 排版图片组示例
image.jpeg
△ 瀑布流图片组示例

16. 滑块（Sliders）

如果我们在设计某个音乐类的 APP 或者视频APP 的时候，音量或者其他设置都需要一个滑块方便用户进行调节。那么调节的功能就可以使用滑块来隐喻。
image.jpeg
△ 音量滑块

17. 选择器（Selection controls）

选择器在网页和移动端程序中都很常见。在苹果设备中我们很少看到单选框、复选框等选择器，转而使用按钮和 Action Sheet 来代替这些不太好点击的选择器。但是 Material Design 仍然认为选择器在移动端也是可行的，并给出了相应的规范。
image.jpeg
△ 选择器

18. 底部提示栏（Snackbars）

我们在一些不希望被打扰的界面中（比如游戏、视频、阅读类应用等）经常会出现一些提示信息，这些信息如果用警告对话框弹在游戏前并必须我们点击确认，那我们会怎么样？骂人对不对。所以我们需要一个对用户不那么打搅、并且信息无需确认操作的信息提示工具栏，那么就是底部提示栏了。
image.jpeg
△ Snackbars

19. 状态指引（Progress indicators）

某个进程加载内容时，需要让用户感知到这个状态。Material Design 给我们提供了一个类似跑马灯的动画。这样不仅可以传递状态，并且不占用多余的空间。
image.jpeg
△ 状态指引
image.jpeg

六、排版

Material Design 支持了不同屏幕的分辨率，主流的可以使用不同的切图来区分，而很多不是很主流的机型就不能靠切图来一一适配了，只能使用诸如响应式布局等形式。在前面的文章我介绍过栅格系统（Grid Design），在安卓适配中因为响应式布局需要缩放内容的缘故，所以我们需要在排版中考虑栅格系统。

1. 响应式布局

Material Design 也意识到了安卓屏幕分辨率太多的这种情况，它的解决思路是使用如网页中响应式布局的做法，根据屏幕进行等比例的缩小或放大。为了保证缩放的显示效果，Material Design 要求我们在设计之初就使用栅格系统（Grid Design），这样可以更有效地进行响应式布局。
image.jpeg
△ 栅格系统三要素：①列（Columns）②水槽（Gutters）③边距（Margins）
列（Columns）
列建立的时候要考虑整体的宽度，然后进行整除。然后我们做界面的时候可以和列对齐，就达到了所有宽度都是倍数或有联系的效果了。在平面设计中，栅格系统是为了让界面更有秩序感，而在UI设计中，除了视觉的要求还有来自自适应需要整除元素的要求。
image.jpeg
△ 在360dp宽度的手机设备中，使用4个列
image.jpeg
△ 而在600dp宽度的平板电脑中，通过响应式使用8个列
水槽（Gutters）
水槽是用来区别内容的，被作为列之间的留白使用的。在响应式布局中，列的宽度是不变的，然而水槽的宽度是可变的。
image.jpeg
△ 在宽度为360dp的手机界面中使用16dp的水槽
image.jpeg
△ 而在600dp宽度的平板设备中使用26dp的水槽
边距
边距是栅格和屏幕之间的距离，在不同的屏幕上我们可以根据手指点击方便程度给予不同的边距当做安全距离，同时也可以解决列和水槽无法被整除的一些情况。
image.jpeg
△ 在360dp的手机设备上使用了16dp的边距
image.jpeg
△ 在600dp的平板电脑设备上使用了24dp的边距

2. 可自定义栅格系统

我们设计的界面由于内在的逻辑关系需要，不能直接套用很多固定的栅格系统版式。那么可以根据需求进行自定义栅格系统。比如信息间的水槽就要考虑信息之间的逻辑关系。所以不要死板地使用栅格系统，根据自己的需要去自定义才是好的设计。
image.jpeg
△ 为了让用户感知图像是紧密相关的，这个案例中网格使用了8dp水槽
image.jpeg
△ 为了让用户认为专辑是各个独立的，这里使用了较大的32dp水槽来创建列之间的分隔
image.jpeg
△ 错误案例：这里使用了太大的水槽，使界面显得分裂
image.jpeg
△ 在不同设备中的栅格系统建议
image.jpeg
△ 在苹果产品平台中的栅格系统建议
image.jpeg