原文链接: Material Design

引言

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

内容

目标

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

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

原则

  • Material 是一种隐喻

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

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

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

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

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

  对用户行为的强调使得核心功能立刻可见,为用户提供了路标。

  • 动作提供了意义

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

  所有的行为都在单一环境中发生。客体在不打断用户体验的持续性的情况下呈现给用户,即使它们在转换和重组。

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

什么是Material? —— 环境

内容

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有不同的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)

  高度是指相对深度,或者沿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指的是状态间的转换。因此,缓入指的是进入一个状态的动作,而缓出指的是离开一个状态的动作。

做出调整

  不是所有的物体都用同样的方式移动。更轻和更小的物体可能会移动得更快,因为它们需要的力较小,而大和重的物体可能需要更长的时间去加速。

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

05-11 05:15