Material Design设计指南整理（三）

本来应该接着讲动画的部分，但是简书好像不能上传gif图，就不能很好地表现动画了，然后网上又已经有大神将动画这一部分翻译成中文了，点击此处可以查看。下面我整理的内容是关于控件部分。没有按照官方文档的顺序，而是按照相关性将其进行分组。

目录

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

1. 底部导航栏和标签

• 底部导航栏介绍

1）底部导航栏主要是用于移动端，数量一般为3-5个，可以在应用中的任何地方随时切换，因此一般只用于顶级的视图，这些视图应该有足够的重要性并且有直接访问的需求。如果导航的分类少于3个，可以考虑使用标签代替（下面会讲到），如果多于5个，可以考虑用侧边导航代替（下一章节会讲到）
2）底部导航栏用于打开相关的视图，不要用于打开菜单或者其他弹出窗口。
3）上滑和下滑屏幕时，底部导航会自动隐藏和出现，另外，视图之间切换时，最好不要使用左右滑动的动画，会带来困惑。比如你从第一个视图切换到第二个视图看起来很正常，但是从第一个视图直接切换到第四个视图时，如果只向左滑动一次，与心理预期不符，如果快速滑动三次，看起来会不舒服。一般使用交叉渐变即可。
4）底部导航栏的高度如下图所示

• 标签介绍

1）标签能够在一个较高的层级上对信息进行组织，能够用于不同的视图，不同的数据集，不同的功能集之间的切换。但是不要把标签用于一些普通页面之间的跳转，应该用于不同的内容组之间的导航。
2）标签数量较少时是固定的，数量较多时可以滚动查看。另外，标签默认是可以用手势左右切换的，因此不要包含一些也可以左右切换的元素，比如一些信息可以通过左右滑动来删除，在这种情况下很容易误操作。
3）标签的内容的范围并不完全一致，例如可以有一个标签是全部，一个标签是热门，一个标签是精选，但是都应该在一个大的类型之下。

• 底部导航和标签的对比
  1）首先，底部导航和标签最好不要同时使用，因为那样上下组合的可能性有很多，用户比较容易感到混乱。如果需要多级导航，可以考虑其他的组合方式，这一部分在下一章会介绍。
  2）数量上，官方文档对底部导航栏做了明确的建议，一般在3-5个，但对标签没有明确规定。虽然在底部导航介绍时建议说是2-3个，但是由于标签支持滚动，数目上并没有什么限制。
  3）功能上，底部导航用于最顶部的导航，不同分类之间有相同的重要性，分类界限也比较明确。标签可以用于导航和分类，分类之间相对来说随意一点，不要是最顶部的层次，也不用有相同的重要性，适用范围更广一些。
  4）操作上，底部导航栏一般不支持手势左右切换，标签栏支持。两者都可以从应用的任何地方直接切换，前提是标签栏不是包含在某个视图之内。

2. 底部动作条、菜单和对话框

• 底部动作条介绍

  
  两种类型，模态（左），固定（右）
  

  1）底部动作条可以分为两种，一种称为模态，是暂时性的，主要展示的是与其他应用相关的操作，另一种称为固定，与应用结合在一起，提供一些辅助的信息。前者是高于当前页面的内容的，后者于当前页面位于同一高度，或者说内嵌于页面之内。在桌面端或者平板端，空间比较充裕，这时可以使用对话框或者菜单代替底部动作条。
  2）固定的底部动作条除了直接提供辅助信息，也可以不脱离本应用而显示其他应用内的信息。
  3）模态的底部动作条出现时，页面中的其他区域会暗下来，以突出该动作条。模态动作条中主要是与当前内容相关各种操作，像分享，发邮件，在其他应用中打开等。可以使用列表或者网格的形式进行展示，并有意识地突出某些功能。
  4）从底部动作条跳到别的应用后，不能返回到该应用的上一级，只能原路回到底部动作条。但是可以通过以下方法改变，比如在跳转的时候就直接打开新的应用，而不是该应用内的某一层，也可以在跳转之后的界面中，点击其他功能，像首页等，回到上一级。
  5）模态动作条有四种方式可以关闭，一是下滑，二是点击上面的关闭按钮，三是点击其他变暗的区域，四是直接按手机上的返回键。

• 菜单介绍

  
  
  

  1）菜单有多种形式，不仅仅是右上角的三个点，也可以是应用内的其他位置，用于提供多个选择，选项与当前内容密切相关。如果没有可用的选择，则菜单不可使用，如果内容改变，菜单的选项也会动态改变。菜单是临时的，一般每个选项占一行，
  2）菜单可能有类似导航的跳转功能，但不要使用作为主要的导航方式，菜单选项太多时支持滚动操作。
  3）桌面端的菜单可以多级嵌套，同时桌面的空间较大，菜单上可以附有快捷键等帮助信息，另外菜单选项的顺序，可以是静态的，此时尽可能把常用的放在前面，也可以是动态的，此时最前面的最近使用。
  4）移动端的菜单相对桌面端比较简单，可以用于应用内做一些快速地选择。使用时要注意的是弹出菜单的位置和默认选项的选择。一般是垂直于相关的输入区，并且是合在一起，默认的选项直接显示在输入区域中。另外，如果输入区是独占一行的，菜单应该保持左对齐，不管用户在哪里点击触发该菜单。

• 对话框介绍

1）对话框一般是用来通知用户，或者做出请求。包括几种不同类型：简单对话框、确认对话框、全屏对话框。出现时其他区域会变暗并不能操作，直到对话框消失，有较大的干扰性，因此应尽量控制对话框的使用。
2）不能在对话框中包含对话框。如果内容较多，可以使用全屏对话框，而且在全屏对话框时，运行弹出新的对话框，因为这样不会增加z轴上的视觉干扰。
3）对话框一般不能滚动，如果实在需要的话，要在滚动时固定标题或者固定下方的操作按钮。

4）简单对话框没有取消和确定等按钮，直接对内容进行选择，内容可以包含图标，多行文字。确认对话框需要用户在选择之后点击确认按钮或者取消按钮，意味着如果你选择之后没有确认，是不会自动保存的。

左：简单对话框 右：确认对话框
5）全屏对话框一般只用于移动端，毕竟其他设备的空间比较充足。全屏对话框需要注意的是，内容是不会实时保存的，在右上角会有一个保存按钮，点击之后才能生效。左上角是关闭按钮，如果已经填入东西，关闭时需要弹出一个确认框，如果没有填入东西，就直接退出即可。

• 三者比较
  1）干扰性：菜单的干扰性是最小的，其次是底部动作条和对话框。所以可以根据内容的重要性以及出现频率要决定使用什么控件。
  2）功能性：三者的功能有一定的区别的，底部动作条多用于与其他应用的链接，或者获取其他应用的信息作为补充。菜单是针对页面内元素的直接操作或选择，相比底部动作条中的操作，是比较轻量的。对话框的选择功能与菜单类似，但是一般是比较重要的选择，而且显示的信息比较丰富，可以包含图标，菜单一般是简单的一行文字。另外对话框的提醒功能和确认功能是菜单所没有的。

3. snackbars、toasts和警告框

在谷歌官方文档里，警告框是对话框中的一类，不过我个人觉得与snackbars和toasts具有可比性，所以拿出来放到了这里。另外，snackbars和toasts是两种通知信息的显示方式，暂时没发现比较好的翻译，是那种只能意会不能言传的感觉，所以这里就直接使用英文了。

• 警告框介绍
  1）警告框用于告知用户一些紧急的情况，让用户了解当前状况，并提供一些可以选择的操作，比如用户要删除东西，就要提醒用户说，“现在要删除东西了，你可以选择取消，也可以选择继续删除”之类的。
  2）大部分警告框没有标题，就是一句简单的话加上两个可选操作，要保证操作的表述是清晰的，不要用“是”“否”，而要使用“删除”“取消”等意义比较明确的。
  3）如果需要较多的解释内容，则要使用标题，标题要简单明了地表现问题，正文是必要的一些解释，并适当注意表达的语气。

  
  
• snackbars介绍
  1）snackbars是用户在完成某个操作之后出现的反馈，显示与该操作相关的信息，并提供一些操作，比如撤回，这些操作应该还有其他入口，以备用户事后操作。
  2）snackbars的高度与浮动按钮一样，位于绝大多数应用内的元素之上，但是在对话框、底部动作条之下。因为和浮动按钮高度一样，所以当浮动按钮也位于屏幕底部时，要避免发生碰撞。
  3）一次只能显示一个snackbars。一般从屏幕底部升起，一段时间会自动消失，也可以通过手势滑动使其消失，或者是用户切换到一个别的页面。
  4）snackbars上不能使用图标按钮，只能使用文字按钮。只能包含一个操作，如果需要两个，则要考虑使用其他控件。

• toasts介绍
  文档中关于toasts的介绍很少，对安卓开发有了解的人应该比较清楚。与snackbars的作用一样，都是在操作之后提供反馈，不过toasts更简洁，没有操作按钮，不能通过手势移除，只能等时间到了自动消失。显示框的大小与内容相适应，不会占据一整行。一般也是从底部弹出。

  
  

• 三者比较
  1）警告框用于在执行重要的操作之间的询问和确认，有很大的干扰性，一般只用于不可恢复或者有较大破坏性的操作上。如果该操作可以撤销，尽量使用snackbars，因为不会对用户造成太大的干扰，破坏用户体验。
  2）snackbars和toasts两者都是用于操作后反馈，如果该操作的重要性不大，或者说不太需要撤回等操作，则考虑使用toasts，同样是因为对用户干扰较少。

4. 按钮

材质化设计中按钮的特点是点击之后会有墨水散开的效果。按钮可以是文字、图像、或者两者合在一起，按钮的类型有很多，下面会一一介绍。

三种最主要的按钮

1）平面按钮
平面按钮直接“印”在材质上，一般是单纯的文字，按住时会填充上背景颜色。主要用于工具栏、对话框以及嵌入内容之中，嵌入时要留有一定的边距以保证可点击。

2）上浮按钮
上浮按钮浮于材质之上，为扁平布局增加了一些立体感，并且在大量的信息中突显出来。一般是矩形。

3）浮动按钮
浮动按钮是页面中最重要的操作的承载，每个页面只能有一个浮动按钮，但并不是每个页面都需要。值得注意的是，浮动按钮表示的操作一般不要是破坏性或者是消极的，避免用户做出错误的操作。
在同一个应用中，浮动按钮的位置最好保持相对固定，避免视图切换时带来不适。
浮动按钮有多种变化形式，可以垂直弹出多个二级操作，可以水平展开成工具栏，也可以打开一个新的页面。

4）脚注型按钮
是平面按钮的一种特殊用法，一般固定于屏幕或者操作窗口的底部，类似于脚注的位置。

5）下拉按钮
一般有三种类似，如下图所示：

左边为不同的下拉按钮，与简单的菜单选项差不多。中间称为分节下拉按钮，点击操作图标可以激活该操作，点击下拉图标可以更改操作的种类。右边的是可编辑按钮，用于桌面端比较多，可以直接输入，也可以在下拉菜单中选择。
6）开关按钮
一般是一组类似的开关按钮放在一起，可以是相互排斥的，只能选其一，也可以是不排斥的，可以叠加在一起。经常用于桌面端，移动端也有，但一般不是一组出现，而是单个，比如点赞、标记等功能中使用的按钮。

不同的按钮类型用法不同，有三个因素需要重点考虑，一是该操作的重要性，即按钮应该多突出，二是屏幕上页面的数量，是否可以再增加z轴的深度，三是屏幕布局，按钮的出现会不会和其他控件冲突。

控件这一部分我分了有八组，剩下四组明天再继续。