从设计指南说起，详解MaterialDesign体系组件.doc

从设计指南说起，详解MaterialDesign体系组件 　　iOS 或 Material Design的设计指南，都是按照组件的属性来系统介绍。 　　一般把Control翻译成控件，把Component翻译成组件。通俗的解释说法就是组件为多个元素组合而成，控件为单一元素。但是Material Design把我所认为的控件和组件都合为一体，统称为组件。摊手。 　　 　　先看一张Material Design所有组件的思维导图： 　　 　　底部动作条 　　定义：一个从屏幕底部边缘向上滑出的一个面板，使用这种方式向用户呈现一组功能。 　　使用规则：底部动作条(Bottom Sheets)提供三个或三个以上的操作需要提供给用户选择、并且不需要对操作有额外解释的情景。如果只有两个或者更少的操作，或者需要详加描述的，可以考虑使用菜单(Menu)或者提示框替代。底部动作条可以是列表样式的也可以是宫格样式。 　　 　　底部动作条的内容：在一个标准的列表样式的底部动作条(Bottom Sheets)中，每一个操作应该有一句描述和一个左对齐的icon。如果需要的话，也可以使用分隔符对这些操作进行逻辑分组，也可以为分组添加标题或者副标题。一个可以滚动的宫格样式的底部动作条，可以用来包含标准的分享操作。 　　交互行为：显示底部动作条的时候，动画应该从屏幕底部边缘向上展开。根据上一步的内容，向用户展示用户上一步的操作之后能够继续操作的内容，并提供模态的选择。点击其他区域会使得底部动作条伴随下滑的动画关闭掉。如果这个窗口包含的操作超出了默认的显示区域，这个窗口需要可以滑动。 　　说明：底部动作条是一种模态形式之一。模态：模态的对话框需要用户必须选择一项操作后才会消失，比如Alert确认等；而非模态的对话框并不需要用户必须选择一项操作才会消失，比如页面上弹出的Toast提示。 　　按钮 　　定义：由文字和/或图标组成，按钮告知用户按下按钮后将进行的操作。我们可以把按钮理解为一个操作的触发器。 　　主要的按钮有三种: 　　悬浮响应按钮(Floating action button)， 点击后会产生墨水扩散效果的圆形按钮。 　　悬浮响应按钮是促进动作里的特殊类型。 是一个圆形的漂浮在界面之上的、拥有一系列特殊动作的按钮，这些动作通常和变换、启动、以及它本身的转换锚点相关。 　　 　　浮动按钮(Raised button)，常见的方形纸片按钮，和悬浮响应按钮相反。非悬浮，固定于一个位置。 点击后会产生墨水扩散效果。浮动按钮看起来像一张放在页面上的纸片，点击后会浮起来并表现出色彩。 　　浮动按钮使按钮在比较拥挤的界面上更清晰可见。能给大多数扁平的布局带来层次感。 　　 　　扁平按钮(Flat button)， 就是把文字用作按钮。点击后产生墨水扩散效果，和浮动按钮的区别是没有浮起的效果。尽量避免把他们作为纯粹装饰用的元素。按钮的设计应当和应用的颜色主题保持一致。 　　 　　扁平按钮一般用在警告框中，推荐居右对齐。一般右边放操作性的按钮，左边放取消按钮。如果用在卡片中，扁平按钮一般居左对齐，以增加按钮的曝光。不过，卡片有很多种不同的样式，设计师可以根据内容和上下文来安排扁平按钮的位置。只要保证在同一个产品中，卡片内的扁平按钮的位置统一就可以了。 　　按钮使用规则：按钮类型应该基于主按钮、屏幕上容器的数量以及整体布局来进行选择。 　　如果是非常重要而且应用广泛需要用上悬浮响应按钮。 　　基于放置按钮的容器以及屏幕上层次堆叠的数量来选择使用浮动按钮还是扁平按钮，避免过多的层叠。 　　一个容器应该只使用一种类型的按钮。 只在比较特殊的情况下（比如需要强调一个浮起的效果）才应该混合使用多种类型的按钮。 　　卡片 　　定义：是包含一组特定数据集的纸片，数据集含有各种相关信息，例如，关于单一主题的照片，文本，和链接。卡片通常是通往更详细复杂信息的入口。卡片有固定的宽度和可变的高度。最大高度限制于可适应平台上单一视图的内容，但如果需要它可以临时扩展（例如，显示评论栏）。类似分组的集合。 　　用途：卡片是用来显示由不同种类对象组成的内容的便捷途径。它们也适用于展示尺寸或操作相当不同的相似对象，像带有不同长度标题的照片。 　　显示这些内容时使用卡片布局： 　　作为一个集合，由多种数据类型组成（例如，卡片集包含照片，电影，文本，图像） 　　包含可变长度内容，例如评论 　　由富内容或互动操作组成，例如+1按钮，滑块，或评论 　　如果使用列表需要显示超过三行文本 　　如果使用网格列表需要显示更多文本来补充图像 　　 　　纸片 　　定义：Chips(我们暂时叫他纸片视图)是一种小块的用来呈现复杂实体的块，比如说日历的事件或联系人。它可以包含一张图片，一个短字符串(必要时可能被截取的字符串)