Material Design设计指南整理（四）

接着上一篇继续讲控件

目录

1. 底部导航栏和标签
2. 底部动作条、菜单和对话框
3. snackbars、toasts和警告框
4. 按钮
5. 卡片、列表和网格列表
6. 步进器和二级标题
7. 文字域
8. 纸片、滑动条、进度条、工具栏、选择控制器

5. 卡片、列表和网格列表

• 卡片介绍
  卡片是材质化设计中一个特别的容器，可以包含多种类似多种尺寸的内容以及各种操作。多个卡片可以在同一个平面中以各种尺寸集合在一起。

  
  
  

  1）卡片非常适用于多样化内容的集合，可能非常灵活地适应。但是卡片会在一定程度上打断用户的视线，用户只能一个卡片一个卡片跳着看。
  2）卡片默认支持两种手势，一是左右滑动，二是长按激活，然后随意拖动排列顺序，所以如果不支持这些手势，比如一些有特定顺序的内容，则最好避免使用卡片，不然会对用户造成困扰。
  3）卡片虽然可以包含多种内容，但也要注意控制内容的量，对于卡片中较为重要的内容，应该在视觉层次上突显出来，文字、图片、按钮之间的优先级应该有所侧重。
  4）官方文档中说卡片不支持翻转并显示背后的东西，可以用展开列表替代，点击之后再原地展开而不是翻转。
  5）卡片本身不能滚动，但是卡片集合可以上下滚动。在桌面端可以例外。

官方文档中有不少卡片的例子，有兴趣的可以去看看。链接

• 列表介绍
  列表用于展示较为简单的数据，每一项独占一行。

  
  
  

  1）如果每一项的内容多于三行，可以考虑使用卡片。如果每一项的内容是方形的，比如图片，可以考虑使用网格列表。
  2）列表支持的手势和卡片一致，可以快速滑动和长按激活。
  3）列表上可以增加各种控制器，用于表示状态或者提供相应的操作。一般主要的控制器放在左边，次要的控制器放在右边。控制器有多选框、开关、重排、展开与折叠、

• 网格列表介绍
  网格列表多用于图片的展示，能够提高用户对内容在视觉上的理解。

  
  
  

  1）网格列表只允许上下滚动，因为左右滚动有阅读的感觉，在文字内容上比较合适，用于图片上会让用户感到不习惯。有一个例外，就是类似画廊的展示，一张张图左右切换。
  2）网格以图片展示为主，但是可以附加上一些文字和操作按钮作为次级元素。
  3）网格列表一般不支持长按激活的手势。

• 三者比较
  1）内容上，差别较为明显，简单地说，卡片用于图片加文字、列表用于文字、网格列表用于图片。
  2）卡片虽然万能，但是因为有阴影，间距较大等，会增加用户视觉负担，不够轻量。一般内容不是很复杂，可以使用网格或列表就不要使用卡片。

6. 步进器和二级标题

• 步进器介绍
  步进器是通过一系列有逻辑性的按数字顺序排列的步骤来展示一个完整的进程。某种程度上可以算作是一种导航。每个步骤完成之后，应该提供适当的反馈。

  
  
  

  1）不要在步骤中包含步骤，也不要将一个简单的任务刻意打断成多个步骤。
  2）步骤有四种类型，一是可编辑步骤，即每个步骤完成之后，在最终提交之间，可以多次进行修改；二是不可编辑步骤，即跟前面的相反，在该步骤保存之后不能更改；三是移动型步骤，即步进器在移动端上的形式，可以在左上角显示当前步骤，也可以在底部中间使用多个点来表示，也可以使用进度条；四是可选步骤，即该步骤可以跳过不做。

  
  移动型步骤
  3）在桌面端中，步进器一般为水平方向。在移动端一般为竖直方向。
  4）前面讲到的步骤的类型，从整个流程上来看，可编辑步骤可以称为非线性流程，不可编辑步骤可以称为线性流程。

• 二级标题介绍
  二级标题用于列表、网格、菜单中，对内容进行进一步的分类。当内容向上滚动时，如果还是属于当前二级标题的，则该标题应该固定显示在最上面。

  
  

7. 文字域

文字域除了支持文字的输入之外，还有其他多种功能，比如：字数统计、自动填充、搜索过滤、必填区域、密码输入。
1）点击文字区域会自动将光标置于其中并显示键盘，最好能根据输入的类型自动选择合适的键盘。比如数字键盘、中文键盘、英文键盘等。英文的话要注意自动首字母大写。
2）输入区域可以有提示文字，点击之后该文字可以消失，也可以缩小并移动到输入框上方。
3）输入可以是单行也可以是多行，单行时，长度超过输入框会自动向左移动，以保持光标总是位于最右边。多行时，长度超过输入框会自动跳转到新的一行。

8. 纸片、滑动条、进度条、工具栏、选择控制器

• 纸片介绍
  纸片，类似于一张小纸条，可以用较少的空间包含复杂的内容。最常用的是联系人纸片，在纸片中包含了联系人的信息。

  
  
  

  1）纸片可以通过点击查看更详细的内容，如果该可以删除，要在卡片上显示出删除按钮，一般放置在最右边。
  2）联系人纸片一般用于邮件或者短信等，用户输入一部分内容之后会自动出现相关的联系人，然后可以直接点击添加。联系人纸片能够让用户确认联系人的相关信息，保证发送给正确的人。

• 滑动条介绍
  滑动条可以通过滑动滑块来选择数值，适用于设置类的内容，比如音量、亮度等。
  1）滑动条两端可以有图标辅助显示，一般左边数值最小，右边数值最大。
  2）连续滑动条多用于不要求精确数值的地方，可以连续拖动，有时可以加上一个数值输入框。
  3）不连续滑动条用于要求较为精确数值的地方，比如10、20、30这样跳动，而不能选择中间的数，此时最好要能加上一个数字标签。

  
  
  

• 进度条介绍
  进度条用于显示当前活动的进展，可以是条状的，也可以是圆形的。
  进度条有两种类似，一种是确定进度条，能够正确反映操作的时间，另一种是不确定进度条，不能确定完成操作的时间，只是在不停地滚动。

• 工具栏介绍
  工具栏的位置高于当前内容，并提供一些针对当前内容的操作。一般位于左边或者右边，不被其他材质才截断，除非是暂时出现的，比如对话框等。

• 选择控制器介绍
  选择控制器比较常用的有三种：多选框、单选框和开关。
  需要注意的是开关的状态要明确，一般在两边加上说明文字，像“开”“关”等。单选框和开关的功能很相似，但是代表的意义并不一致，开关侧重于当前设置处于关闭或者开启的状态，而单选是一种选择，有没有选中，不管它本身的状态是怎样的。虽然结果可能一样，但是不要混用，以免造成用户困惑。