Material Design说明

原文连接: Material Design

引言

　　咱们挑战自我，为用户创造了一种视觉语言，综合了好设计的经典原则，革新以及科技的可能性。这就是material design。这份说明是一个动态的文档，会随着咱们持续开发material design的原则和特性而更新。

内容

• 目标

• 原则

目标

　　创造一种视觉语言，综合良好设计的经典原则，革新以及科技的可能性。

　　开发一个单一的底层系统，提供跨平台和设备尺寸的统一体验。移动性是根本，但触摸，语音，鼠标和键盘都是第一层级的输入方法。

原则

• Material 是一种隐喻

　　Material的隐喻是关于合理化的空间和系统化的操做的统一理论。 Material扎根于可知觉的现实中，受到对纸和墨的研究的启发，然而在技术上是先进的，同时对想象的魔力开放。

　　Material的表面和边缘提供了立足于现实的视觉线索。对熟悉的触觉属性的使用，帮助用户快速理解功能可见性。然而Material的灵活性还创造了一种新的功能可见性，超越了物理世界已存在的那些，同时又没有打破物理法则。

　　光线，表面和运动的基调是传达物体如何移动、交互、在空间中存在及其相互关系的关键。现实风格的光线显示出缝隙，区分开空间，指示出可活动的部件。

• 大胆的，形象的和故意的

　　基于印刷体的设计排版的基础元素，如网格，空间，比例，颜色和由意象引导的视觉处理，这些元素所能作到的远远不止愉悦眼球。它们创造了层级，意蕴和焦点。深思熟虑的颜色选择，边缘间的意象，大比例的排版和有意的留白创造了一种大胆而形象的界面，让用户沉浸于使用体验之中。

　　对用户行为的强调使得核心功能马上可见，为用户提供了路标。

• 动做提供了意义

　　动做尊重和强化用户做为主要移动者的地位。最初的用户行为是开始动做的转折点，转变着整个设计。

　　全部的行为都在单一环境中发生。客体在不打断用户体验的持续性的状况下呈现给用户，即便它们在转换和重组。

　　动做是有意义的和合理的，为集中注意力和维持持续性服务。反馈是微妙但清晰的。转换是有效而连贯的。

什么是Material？ —— 环境

内容

• 3维世界

• 光线和阴影

3维世界

　　Material环境是一个3维空间，这意味着全部的客体都有x、y和z轴的尺度。z轴与显示平面正交，正的z轴方向向观察者处延伸。每一片Material占据z轴上的一个单一位置，并有一个标准的1dp厚度。

　　在网页上，z轴是用来分层而不是透视。3维世界是经过操纵y轴而模仿出来的。

光线和阴影

　　在Material环境中，虚拟的光线照亮了整个场景。关键的光线创造出有向的阴影，同时环绕的光线创造出全角度的柔和阴影。

　　在Material环境中，阴影是由两种光源投射出来的。在Android开发中，当z轴上不一样位置的material挡住光源时，会产生阴影。在网页上，阴影仅经过操纵y轴位置描绘出来。下面的例子显示了一张高度为6dp的卡片产生的阴影。

什么是Material？ —— Material的性质

　　Material拥有特定的不可变特性和内在的行为。理解这些特质会帮助你用与Material设计相一致的方式来操控Material。

内容

• 物理属性

• Material的转换

• Material的移动

物理属性

　　Material有不一样的x和y轴尺寸(用dp衡量)，和统一的厚度(1dp)。

• Material的高度和宽度能够不等。

• Material的高度应该始终是1dp。

　　Material会投射阴影。

　　阴影是由Material元素之间的高度差(z轴)天然的形成的。

• 阴影描述了Material元素间的相对高度。

• 永远不要经过给Material着色来近似估计阴影。

　　内容在Material上显示，能够是任何形状或颜色。内容不会给Material增长额外的厚度。

• Material能够显示任何形状和颜色。

　　内容能够独立于Material运做，但被限制在Material的边界以内。

• 内容的行为能够不依赖Material的行为。

　　Material是立体的。

　　输入事件不能穿过Material。

• 输入事件只会影响前台Material。

• 输入事件没法穿过Material。

　　多个Material元素不能同时占据空间中的同一点。

• 使用高度来区分不一样的Material元素是一种防止多个Material元素占据空间中同一点的方法。

• 多个Material元素没法同时占据空间中的同一个点。

　　Material不能穿过另外一个Material。

　　例如，当改变高度时，一片Material不能穿过另外一片Material。

• Material不能越过另外一个Material。

Material的转换

　　Material能够改变形状。

• Material能够改变形状。

　　Material能够沿着它所在的平面变大或缩小。

• Material尽能沿其所在平面变大或缩小 。

　　Material永远不会弯曲或折叠。

• Material永远不弯曲或折叠。

　　多片Material能够合并到一块儿变成一片Material。

• 多片Material能够合并成一片。

　　当分割时，Material能够恢复。例如，若是你去掉一片Material中的一部分，该片Material会再次变成一整片。

• Material能够分割和从新恢复完整。

Material的移动

　　Material能够自发的在环境中的任何地方产生或者销毁。

• Material能够自发的产生或者销毁。

　　Material能够沿着任何轴移动。

• Material能够沿着不一样的轴移动。

　　z轴的运动典型来讲是用户和Material交互的结果。

• z轴的运动由用户交互引发。

什么是Material？ —— 高度和阴影

　　在Material Design中的客体拥有和物理世界中的客体相似的性质。在物理世界中，物体能够堆叠或者粘贴到另外一个物体上，但不能穿过别的物体。物体能够投射阴影和反射光线。

　　这些性质组成了用户熟悉的空间模型，能够跨不一样应用一致的使用。高度和阴影的概念能够巩固这一空间模型。

内容

• 高度(Android)

• 阴影

• 物体间关系

高度(Android)

　　高度是指相对深度，或者沿z轴的两个表面之间的距离。

说明：

• 高度的计量单位和x、y轴一致，典型来讲是用密度无关像素(dp)。由于Material元素拥有厚度(全部的Material都是1dp厚)，高度的测量方法是从一个表面的顶部到另外一个表面的顶部。

• 子对象的高度是相对于父对象的高度来讲的。

静止高度

　　全部的Material对象，不论其尺寸是多少，都有一个静止高度，或者说不变的默认高度。若是一个对象的高度被改变了，它应该尽快地会到其默认高度。

组件高度

• 组件类型的静止高度应该是跨应用一致的(例如，FAB的高度不该该在一个应用中是6dp而在另外一个中是16dp)。

• 组件在不一样的平台中能够有不一样的静止高度，这依赖于环境深度(例如，电视比手机或电脑的深度大)。

响应深度和动态深度偏移

　　有些组件类型拥有响应高度，意味着在响应用户输入(例如触摸或按下)或系统事件时，它们的高度会改变。这些高度的改变经过动态高度偏移一致的实现。

　　动态高度偏移是组件移动的目标高度，相对于组件的静态状态来计算。它保证了对不一样的操做和组件类型，高度的变化是一致的。例如，全部按下时会抬高的组件，相对于它们的静态高度来讲都会有一样的高度变化。

　　一旦输入事件完成或被取消，组件会回到它的静态高度。

避免高度干扰

　　拥有响应高度的组件，当它在静态高度和动态高度偏移之间移动时，可能会遭遇其它的组件。由于其它的Material不能穿过其它的Material，组件应该避免以任何方式干扰其它组件，不管是针对单个组件来讲仍是使用整个应用的布局。

　　在组件水平上，组件能够在它们引起干扰以前移动或者被移除。例如，一个浮动操做按钮(FAB)能够在用户选取一张卡片时消失或者移动到屏幕后，或者在snackbar出现时移开。

　　在布局水平上，设计你的应用布局，让发生干扰的机会最小。例如，将FAB放置在卡片流的旁边，这样当用户视图挑选一张卡片时，浮动操做按钮不会干扰。

• 24dp: Dialog, Picker;

• 16dp: Nav drawer, Right drawer, Modal bottom sheet;

• 12dp: Floating action button(FAB-pressed);

• 9dp: Sub menu(+1dp for each sub menu);

• 8dp: Menu, Card(picked up state), Raised button(pressed state);

• 6dp: Floating action button(FAB-resting elevation), Snackbar;

• 4dp: App Bar;

• 3dp: Refresh indicator, Quick entry/Search bar(scrolled state);

• 2dp: Card(resting elevation), Raised button(resting elevation), Quick entry/Search bar(resting elevation);

• 1dp:Switch.

阴影

　　阴影提供了关于物体深度和有向移动的重要视觉线索。它们是不一样表面间全部间距的惟一视觉线索。一个物体的高度决定了它的阴影。

• 没有阴影，没法代表FAB(floating action button)同背景的表面是分隔开的。

• 锐利的阴影代表FAB和蓝色的薄片是单独的元素。然而，它们的阴影如此相似，这意味着它们有一样的高度。

• 更柔和，更大的阴影代表FAB的高度比拥有锐利影子的蓝色薄片高。

　　对于动做，阴影提供了有用的线索，来代表物体的移动方向，以及表面间的距离是增长了仍是减小了。

• 没有阴影来代表高度，没法肯定方块是增长了尺寸仍是增长了高度。

• 当物体高度增长时，阴影变得更柔和，面积增大；反之，阴影会变得锐利，面积缩小。

• 一致的阴影帮助用户理解，物体是在改变形状而不是改变高度。

物体间关系

物体层级

　　在一个应用中，你组织物体或物体集合的方式决定了它们之间如何互相移动。物体能够独立于其它物体移动，也能够被高层级的物体约束着移动。

　　全部物体都是一个用父子关系来描述的层级中的一部分。每个这些关系中的“儿子”都是它的“父”元素的从属元素。物体能够是系统或者其它物体的子元素。

　　父子关系的特性：

• 每个物体都有一个父元素。

• 每个物体能够有多个子元素。

• 子元素继承父元素变化的属性，例如位置，旋转，缩放和高度。

例外

　　父元素是根元素的项目，例如主要的UI元素，会独立于其余物体移动。例如，FAB不会随着内容滚动。其它元素包括：

• 应用的侧边导航抽屉。

• 状态栏。

• 对话框。

交互

　　物体之间如何交互是由它们在父子层级中的位置决定的。

　　例如：

• 子元素同它们的父元素间有最小的z轴间距，其它物体不能插入到父子之间。

• 在滚动的卡片集中，卡片之间是同级的，因此它们串联在一块儿移动。它们都是控制其动做的卡片集的子元素。

高度

　　你如何决定物体的高度——它们在z轴上的位置——取决于你想表达的内容的层级，以及该物体是否须要独立于其它物体运动。

• 看成为其父元素的薄片滚动时，凸起的按钮（它的子元素）随之一块儿滚动到屏幕外。

• 当卡片集滚动到屏幕外，它的子卡片随之一块儿滚动到屏幕外。但FAB保留在原位置由于它的父元素没有滚动。

动画——真实的动做

　　正如物体的阴影代表了它可能具备的行为，观察一个物体移动能够发现它的轻重，是灵活仍是僵硬，以及大小。在Material Design的世界，动做美妙而流畅地表现了空间关系，功能性以及意图。

内容

• 质量和重量

质量和重量

　　在物理世界，要移动物体，必须给它施加力的做用。力的强度和持续时间决定了物体能多快地加速，减速或者改变方向。即便最忽然的中止和启动都不是瞬时的，由于物体加快或者放慢速度都须要时间。所以，当动画忽然的开始，结束或者改变方向，它们会显得不天然。

　　在Materiald Design中的动做应该包含人们熟知的，真实世界中物体的行为，同时又不牺牲优雅，简洁和美观。

天然的加速和减速

　　在动画的持续时间中，加速和减速的变化应该是平滑的。

　　若是为了特定目的要让一个物体吸引注意力，或者给动画增长特性，就让它开始和结束时速度的变化多样化。

• 不对称的加速和减速创造出更天然，更让人愉快的动做。

　　当加速或减速是不平滑的，移动会显得很机械。速度或者方向上忽然的改变是不和谐和引人注目的。

• 避免线性地移动。

进入和退出

　　物体速度和方向的变化会引发用户的注意。

　　当物体进入和退出边框时，它速度的改变暗示了它将会移动的距离。例如，当退出时减速会引发注意，并代表物体将会停在框架的边缘。

　　在转换期间，特别要考虑的是，进入和退出的哪一部分应该获得最大的关注。

• 球速度的改变强调了它到达和离开其静止位置。当球以近似常量的速度进入和退出框架时，注意力是最小化的。

• 进入时加速，退出时减速，会吸引不想要的关注，扰乱用户。

关于easing这一律念

　　在谈及时间曲线时，理解所用的定义是很重要的。“缓入”和“缓出”的概念在传统动画和UX动画中都用到了，取决于上下文，这些概念有相对的意义。

传统动画

　　传统动画经过绘制关键姿态来表现一系列的动做。在这一上下文中，缓出指的是离开一个姿态的动做，缓入指的是进入一个姿态的动做。

　　现代动画工具用“关键帧”来描述这些关键姿态，在这个上下文中，缓入和缓出指的是引入和引出一个关键帧的动做。

UX动画

　　在UX的语境中，easing指的是状态间的转换。所以，缓入指的是进入一个状态的动做，而缓出指的是离开一个状态的动做。

作出调整

　　不是全部的物体都用一样的方式移动。更轻和更小的物体可能会移动得更快，由于它们须要的力较小，而大和重的物体可能须要更长的时间去加速。

　　使用曲线型的动做，避免线性的空间路径。找出你的物体最适合的动做特质，而后相应地描绘它们的动做。曲线表明了在一个特定取值范围内随时间的变化。找出符合你所描述的动做的特性的曲线。