相关阅读：从设计指南说起，详解Material Design体系组件(上)
Material Design所有组件的思维导图：
分割线
定义：主要用于管理和分隔列表和页面布局内的内容，以便让内容生成更好的视觉效果及空间感。示例中呈现的分隔线是一种弱规则，弱到不会去打扰到用户对内容的关注。
当在列表中没有像头像或者是图标之类的元素时，单靠空格并不足以用于区分每个数据项。这种情况下使用一个等屏宽(full-bleed)的分隔线就会帮助区别开每个数据项目，使其它看起来更独立和更有韵味。
分割线的类型：
1.等屏宽分隔线：等屏宽分隔线或以用于分隔列表中的每个数据项或者是页面布局中的不同类型的内容。
2.内凹分隔线：在有头像或者是图标元素，并且有关键字的标题列中，我们可以使用内凹分隔线。
3.子标题和分隔线：在使用分隔的子标题时，可以将分隔线置于子标题之上，可以加强子标题与内容关联度。
网格
定义：网格是一种标准列表视图的可选组件。
用法：网格列表最适合用于同类数据（homogeneous data type），典型的如图片，并且对可视化理解（visual comprehension ）和相似数据类型的区别进行了优化。
如果卡片中的文本需要与其他主要内容有着足够显著的区别，可以考虑使用一个容器，比如列表（Lists）或者卡片（Cards）。这样可以优化文本显示、增强阅读理解的便利性；列表，增强阅读理解的便利性，尤其是在比较一组具有多种数据类型的数据时；卡片，用于不同格式的内容，比如带有不同长度标题的图片;用于不同类内容的数据集合中，比如具有图片、视频和图书的混合式数据集。
列表最适合应用于显示同类的数据类型或者数据类型组（homogeneous data type or sets of data types），比如图片和文本，目标是区分多个数据类型数据或单一类型的数据特性，使得理解起来更加简单。
如果有超过三行的文本需要在列表中显示，换用卡片（cards）代替。
如果内容的主要区别来源于图片，换用网格列表（grid list）。
交互行为：
-
滚动（列表只支持垂直滚动）
-
在列表中，每个列表的滑动（swipe）动作应当是一致的。
-
在操作正确时，可以被选中并且在列表中可以手动改变顺序。
-
列表可以通过数据、文件大小、字母顺序或者其它参数来编程改变其
顺序或者实现过滤。
列表控制
定义：对列表进行操作控制的组件。
列表控制分为如下两种类型:
-
状态/主操作(包括文本字符串)
-
次要操作/信息
状态和主操作放在标题列表的左边。在这里，列表里面的文本内容也被认为是主操作的操作目标的一部分。
次要操作以及信息应该放在标题的右边，次要操作通常要和主要操作分开单独可点击，因为越来越多的用户希望每个图标都能触发一个动作。
列表控制的类型
复选框(Checkbox)：既可以被定义成是主操作也可以是次要操作。
类型：状态/主操作；次要操作/信息
单独可点击
开关
类型：次要操作/信息
单独可点击
重新排序
类型：次要动作
通常都是单独可点击，视当前列表所处的模式而定。
该动作允许用户给列表中项通过拖动变换位置。通常，这个按钮出现在列表编辑的模式下。
展开/折叠
类型：次要动作
单独可点击
垂直展开或者折叠列表来显示或者隐藏当前列表
Leave Behinds
类型: 其他
Leave-behind 是在当某一项列表被滑开之后的操作提示。Leave-behind可以被转换成一项操作。
无论从哪个方向滑动列表，都会出现操作图标。滑动了之后，操作图标就会居中显示于列表空白处。
查看更多
类型: 主要操作（连同行内其他内容）
非单独可点击
点击之后跳转到与当前列表相关详细信息的页面，通常这都是一个新的页面或者面板。
选中
类型: 状态
非单选
仅适用于菜单。用来表示当前列表是否通过不同的操作之后被选中。
菜单
用法：菜单是临时的一张纸（paper），由按钮（button）、动作（action）、点（pointer）或者包含至少两个菜单项的其他控件触发。
每一个菜单项是一个离散的选项或者动作，并且能够影响到应用、视图或者视图中选中的按钮。
触发按钮或者控件的标签（label）可以简明准确的反映出菜单中包含的菜单项。菜单栏通常使用一个单词作为标签，像“文件”、“格式”、“编辑”和“视图”，然后其他内容或许有更冗长的标签。
菜单显示一组一致的菜单项，每个菜单项可以基于应用的当前状态来使能。
交互行为：菜单出现在所有的应用内部的UI元素之上。通过点击菜单以外的部分或者点击触发按钮，可以让菜单消失。通常，选中一个菜单项后菜单也会消失。一个特例是当菜单允许多选时，比如使用复选标记。
说明：将动作菜单项显示为禁用状态，而不是移除它们，这样可以让用户知道在正确条件下它们是存在的。比如，当没有重做任务时禁用重做（Redo）动作。当内容被选中后，剪切（Cut）和复制（Copy）动作可用
原文始发于微信公众号（吴轶）：从设计指南说起，详解Material Design体系组件(中)
评论0