从设计指南说起，详解Material Design体系组件

如果卡片中的文本需要与其他主要内容有着足够显著的区别，可以考虑使用一个容器，比如列表（Lists）或者卡片（Cards）。这样可以优化文本显示、增强阅读理解的便利性；列表，增强阅读理解的便利性，尤其是在比较一组具有多种数据类型的数据时；卡片，用于不同格式的内容，比如带有不同长度标题的图片;用于不同类内容的数据集合中，比如具有图片、视频和图书的混合式数据集。

定义：列表作为一个单一的连续元素来以垂直排列的方式显示多行条目。

列表最适合应用于显示同类的数据类型或者数据类型组（homogeneous data type or sets of data types），比如图片和文本，目标是区分多个数据类型数据或单一类型的数据特性，使得理解起来更加简单。

如果有超过三行的文本需要在列表中显示，换用卡片（cards）代替。

如果内容的主要区别来源于图片，换用网格列表（grid list）。

交互行为：

定义：对列表进行操作控制的组件。

列表控制分为如下两种:

状态和主操作放在标题列表的左边。在这里，列表里面的文本内容也被认为是主操作的操作目标的一部分。

次要操作以及信息应该放在标题的右边，次要操作通常要和主要操作分开单独可点击，因为越来越多的用户希望每个图标都能触发一个动作。

复选框(Checkbox)：既可以被定义成是主操作也可以是次要操作。

类型：状态/主操作；次要操作/信息

单独可点击

开关

类型：次要操作/信息

单独可点击

重新排序

类型：次要动作

通常都是单独可点击，视当前列表所处的模式而定。

该动作允许用户给列表中项通过拖动变换位置。通常，这个按钮出现在列表编辑的模式下。

展开/折叠

类型：次要动作

单独可点击

垂直展开或者折叠列表来显示或者隐藏当前列表

Leave Behinds

类型: 其他

Leave-behind 是在当某一项列表被滑开之后的操作提示。Leave-behind可以被转换成一项操作。

无论从哪个方向滑动列表，都会出现操作图标。滑动了之后，操作图标就会居中显示于列表空白处。

查看更多

类型: 主要操作（连同行内其他内容）

非单独可点击

点击之后跳转到与当前列表相关详细信息的页面，通常这都是一个新的页面或者面板。

选中

类型: 状态

非单独可点击

仅适用于菜单。用来表示当前列表是否通过不同的操作之后被选中。

用法：菜单是临时的一张纸（paper），由按钮（button）、动作（action）、点（pointer）或者包含至少两个菜单项的其他控件触发。

每一个菜单项是一个离散的选项或者动作，并且能够影响到应用、视图或者视图中选中的按钮。

触发按钮或者控件的标签（label）可以简明准确的反映出菜单中包含的菜单项。菜单栏通常使用一个单词作为标签，像“文件”、“格式”、“编辑”和“视图”，然后其他内容或许有更冗长的标签。

菜单显示一组一致的菜单项，每个菜单项可以基于应用的当前状态来使能。

交互行为：菜单出现在所有的应用内部的UI元素之上。通过点击菜单以外的部分或者点击触发按钮，可以让菜单消失。通常，选中一个菜单项后菜单也会消失。一个特例是当菜单允许多选时，比如使用复选标记。

说明：将动作菜单项显示为禁用状态，而不是移除它们，这样可以让用户知道在正确条件下它们是存在的。比如，当没有重做任务时禁用重做（Redo）动作。当内容被选中后，剪切（Cut）和复制（Copy）动作可用

定义：在刷新加载或者提交内容时，需要一个时间过度，在做这个过程中需要一个进度和动态的设计。

尽可能地减少视觉上的变化，尽量使应用加载过程令人愉快。每次操作只能由一个活动指示器呈现，例如，对于刷新操作，不能即用刷新条，又用动态圆圈来指示。

指示器的类型有两种：线形进度指示器和圆形进度指示器。可以使用其中任何一项来指示确定性和不确定性的操作。

在操作中，对于完成部分不确定的情况下，用户需要等待一定的时间，无需告知后用户台的情况以及所需时间，这时可以使用不确定的指示器。

线形进度条：应该放置在页眉或某块区域的边缘。线形进度指示器应始终从0％到100％显示，绝不能从高到低反着来。如果一个队列里有多个正在进行的操作，使用一个进度指示器来指示整体的所需要等待的时间。

圆形进度指示器：

（编辑：济南站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!