从计划指南提及，详解Material Design系统组件

iOS 或 Material Design的计划指南，都是凭证组件的属性来体系先容。

一样平常把Control翻译成控件，把Component翻译成组件。普通的表明说法就是组件为多个元素组合而成，控件为单一元素。可是Material Design把我以是为的控件和组件都合为一体，统称为组件。摊手。

先看一张Material Design全部组件的思想导图：

界说：一个从屏幕底部边沿向上滑出的一个面板，行使这种方法向用户泛起一构成果。

行使法则：底部举措条(Bottom Sheets)提供三个或三个以上的操纵必要提供应用户选择、而且不必要对操纵有特殊表明的景象。假如只有两个可能更少的操纵，可能必要详加描写的，可以思量行使菜单(Menu)可能提醒框更换。底部举措条可所以列表样式的也可所以宫格样式。

底部举措条的内容：在一个尺度的列表样式的底部举措条(Bottom Sheets)中，每一个操纵应该有一句描写和一个左对齐的icon。假如必要的话，也可以行使脱离符对这些操纵举办逻辑分组，也可觉得分组添加问题可能副问题。一个可以转动的宫格样式的底部举措条，可以用来包括尺度的分享操纵。

交互举动：表现底部举措条的时辰，动画应该从屏幕底部边沿向上睁开。按照上一步的内容，向用户展收?户上一步的操纵之后可以或许继承操纵的内容，并提供模态的选择。点击其他地区会使得底部举措条陪伴下滑的动画封锁掉。假如这个窗口包括的操纵超出了默认的表现地区，这个窗口必要可以滑动。

声名：底部举措条是一种模态情势之一。模态：模态的对话框必要用户必需选择一项操纵后才会消散，好比Alert确认等；而非模态的对话框并不必要用户必需选择一项操纵才会消散，好比页面上弹出的Toast提醒。

界说：由笔墨和/或图标构成，按钮奉告用户按下按钮后将举办的操纵。我们可以把按钮领略为一个操纵的触发器。

首要的按钮有三种:

悬浮相应按钮(Floating action button)， 点击后会发生墨水扩散结果的圆形按钮。

悬浮相应按钮是促举办动里的非凡范例。 是一个圆形的漂流在界面之上的、拥有一系列非凡举措的按钮，这些举措凡是和调动、启动、以及它自己的转换锚点相干。

浮动按钮(Raised button)，常见的方形纸片按钮，和悬浮相应按钮相反。非悬浮，牢靠于一个位置。 点击后会发生墨水扩散结果。浮动按钮看起来像一张放在页面上的纸片，点击后会浮起来并示意精彩彩。

浮动按钮使按钮在较量拥挤的界面上更清楚可见。能给大大都扁平的机关带来条理感。

扁平按钮(Flat button)， 就是把笔墨用作按钮。点击后发生墨水扩散结果，和浮动按钮的区别是没有浮起的结果。只管停止把他们作为纯粹装饰用的元素。按钮的计划该当和应用的颜色主题保持同等。

扁平按钮一样平常用在告诫框中，保举居右对齐。一样平常右边放操纵性的按钮，左边放打消按钮。假如用在卡片中，扁平按钮一样平常居左对齐，以增进按钮的曝光。不外，卡片有许多种差异的样式，计划师可以按照内容和上下文来布置扁平按钮的位置。只要担保在统一个产物中，卡片内的扁平按钮的位置同一就可以了。

按钮行使法则：按钮范例应该基于主按钮、屏幕上容器的数目以及整体机关来举办选择。

界说：是包括一组特定命据集的纸片，数据集含有各类相干信息，譬喻，关于单一主题的照片，文本，和链接。卡片凡是是通往更具体伟大信息的进口。卡片有牢靠的宽度和可变的高度。最大高度限定于可顺应平台上单一视图的内容，但假如必要它可以姑且扩展（譬喻，表现评述栏）。相同分组的荟萃。

用途：卡片是用来表现由差异种类工具构成的内容的便捷途径。它们也合用于展示尺寸或操纵相等差异的相似工具，像带有差异长度问题的照片。

表现这些内容时行使卡片机关：

界说：Chips(我们暂且叫他纸片视图)是一种小块的用来泛起伟大实体的块，好比说日历的变乱或接洽人。它可以包括一张图片，一个短字符串(须要时也许被截取的字符串)，可能是其余的一些与实体工具有关的简捷的信息。Chips可以很是利便的通过托拽来操纵。通过按压举措可以触发悬浮卡片(可能是全屏视图)中的Chip对应实体的视图，可能是弹出与Chip实体相干的操纵菜单。

接洽人的纸片视图用于泛起接洽人的信息。当用户在输入框(收件人一栏)中输入一个接洽人的名字时，接洽人纸片视图就会被触发，用于展示接洽人的地点以供用户举办选择。并且接洽人的纸片可以被直接添加到收件人一栏中去。

接洽人的纸片视图首要用于辅佐用户高效的选择正确的收件人。

界说：用于提醒用户作一些抉择，可能是完成某个使命时必要的一些其余特另外信息。 提醒框可所以用一种 打消/确定 的简朴应答模式，也可所以自界说机关的伟大模式，好比说一些文本配置可能是文本输入 。

用途：提醒框最典范的应用场景是提醒用户去做一个些被布置好的抉择 ，而这些抉择也许是当前使命的一部门可能是前至前提。 提醒框可以用于奉告用户详细的题目以便他们浸染重要的抉择(起到一个确认浸染)，可能是用于表明接下来的举措的重要性及效果(起到一个警示浸染)。

提醒框的内容是变革多样的。可是凡是环境下由文本 和(或) 其余UI元素构成的，而且首要是用于聚焦于某个使命可能是某个步调。

MD类型把告诫框分成两种：有问题的和没有问题的。

问题：首要是用于简朴描写下选择范例。它是可选的。

内容：首要是描写要作出一个什么样的抉择 。

变乱：首要是应承用户通过确认一个详细操纵来继承下一步勾当。

交互举动：触摸提醒框表面的地区可以封锁提醒框。

界说：首要用于打点和脱离列表和页面机关内的内容，以便让内容天生更好的视觉结果及空间感。示例中泛起的脱离线是一种弱法则，弱到不会去打搅到用户对内容的存眷。

当在列表中没有像头像可能是图标之类的元素时，单靠空格并不敷以用于区分每个数据项。这种环境下行使一个等屏宽(full-bleed)的脱离线就会辅佐区别开每个数据项目，使其余看起来更独立和更有韵味。

支解线的范例：

1.等屏宽脱离线：等屏宽脱离线或以用于脱离列表中的每个数据项可能是页面机关中的差异范例的内容。

2.内凹脱离线：在有头像可能是图标元素，而且有要害字的问题列中，我们可以行使内凹脱离线。

3.子问题和脱离线：在行使脱离的子问题时，可以将脱离线置于子问题之上，可以增强子问题与内容关联度。

界说：网格是一种尺度列表视图的可选组件。

用法：网格列表最适实用于同类数据（homogeneous data type），典范的如图片，而且对可视化领略（visual comprehension ）和相似数据范例的区别举办了优化。

（编辑：湖南网）

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