Google Material Design

Posted by liveipool on February 14, 2017

Google Material Design

用了一些根据Google Material Design原则设计的前端库,在这里仔细了解下Material Design。

MD 的目标

创建一个视觉语言,将良好的、经典的设计原则与技术和科学的创新和可能性相结合。开发一个底层系统,允许跨平台和不同大小设备的统一体验。移动规则是基本的,但触摸,语音,鼠标和键盘都是第一类输入方法。

也就是说:

Material Design是一门跨设备的用户界面视觉设计语言,从可穿戴设备到智能手机、平板电脑、台式机和电视。Material Design尝试为触屏设备提供更加流畅的移动体验,同时也会考虑基于鼠标和键盘的设备。

三个原则

Material is the metaphor(比喻、隐喻)

材料比喻是合理化空间和运动系统的统一理论。该材料基于触觉现实,灵感来自纸和墨水的研究。材料的表面和边缘提供了在现实中接地的视觉提示,使用熟悉的触觉属性有助于用户快速了解容差。材料的灵活性创造了新的能力,并且不破坏物理学的规则。
光效、表面质感、运动感这三点是解释物体运动规律、交互方式、空间关系的关键。真实的光效可以解释物体之间的交合关系、空间关系,以及单个物体的运动。

Bold, graphic, intentional(鲜明、形象、深思熟虑)

新的视觉语言,在基本元素的处理上,借鉴了传统的印刷设计——排版、网格、空间、比例、配色、图像使用——这些基础的平面设计规范。在这些设计基础上下功夫,不但可以愉悦用户,而且能够构建出视觉层级、视觉意义以及视觉聚焦。精心选择色彩、图像、选择合乎比例的字体、留白,力求构建出鲜明、形象的用户界面,让用户沉浸其中。

Material Design 设计语言强调根据用户行为凸显核心功能,进而为用户提供操作指引

Motion provides meaning(有意义的动画效果)

动画效果(简称动效)可以有效地暗示、指引用户。动效的设计要根据用户行为而定,能够改变整体设计的触感。

动效应当在独立的场景呈现。通过动效,让物体的变化以更连续、更平滑的方式呈现给用户,让用户能够充分知晓所发生的变化

关于 Material Design 的一些独到之处

  • Material 环境是一个三维的空间,这意味着每个对象都有 x , y , z 三维坐标属性,z 轴垂直于显示平面,并延伸向用户视角,每个 material 元素在 z 轴上占据一定的位置并且有一个 1dp 厚度的标准。 在网页上,z 轴被用来分层而不是为了视角。3D 空间通过操纵 y 轴进行仿真。
  • 光影关系(Light and shadow) 在 material 环境中,虚拟的光线照射使场景中的对象投射出阴影,主光源投射出一个定向的阴影,而环境光从各个角度投射出连贯又柔和的阴影。从而可以增加纵深感。
  • 材料拥有确定不变的特性和固定的行为。了解这些特性将有助于你在一定程度上熟悉材料,这与 Material Design 的构想是一致的。
  • 在 material design 设计规范中,动作不止是呈现着它美丽的一面,它还意味着在空间中的关系、功能以及在整个系统中的趋势。
  • 物理世界中物体拥有质量,所以只有当施加给它们力量的时候才会移动,因此物体没法在瞬间开始或者结束动作。动画突然开始或者停止,或者在运动时突兀的变化方向,都会使用户感到意外和不和谐的干扰。
  • 响应式交互:接收到输入事件,如点击屏幕,系统会立即在交互的触点上绘制出一个可视化的图形让用户感知到:如在点击屏幕时、使用麦克风时,或者键盘输入时,会出现类似于墨水扩散那样的视觉效果形状。
  • 对于普通用户来说,是关注一个应用本身、还是更关注这个应用的元素从 A 点到 B 点转变的过程,这种选择往往有些难。谨慎编排的动画可以在有多步操作的过程中有效地引导用户的注意力;在版面变化或元素重组时避免造成困惑;提高用户体验的整体美感。动画设计不仅应当优美,更应当服务于功能。

为什么 Material Design 在国内没有被大量推行?

在看到这个问题时还觉得挺有意思,但知乎上的回答都是又尖锐又脏字横行,真是醉了。
但还是有人说出了很关键的一点,我觉得,就是在中国,在用户层面听说过Material Design的人真是少之又少,并且ios占领着大量的市场,大部分用户较为习惯的是ios设计风格。因此国内的大厂可能不太愿意去冒险尝试将风格改为MD,因此,MD在国内暂时还难以被大量推行。

一些基于Material Design 原则的前端库

  • Materialize
  • Material Design for Bootstrap:是一款Bootstrap3的主题,能够让你在前端直接使用 Material Design。虽然Bootstrap并不是基于Material Design的,但可以使用这个,类似于Bootstrap。
  • Angular Material:AngularJS的专用Material Design工具包。
  • FUSE: An AngularJS Material Design Template。

赞赏码.jpeg