Material Design 设计思想

Material Design 为一种设计UI的思路,由Google推出,看了之后觉得此UI用户体验不错,特自行总结一小下。

Materail基本原则

  1. Material Design 仅仅只是一个设计原则。只要按照设计原则的实现都可以称自己有Material思想在里面。
  2. 跨平台之间,跨不同的设备之间,可以统一设计标准。
  3. 以自然科学为设计思想,比如物理学,光学等等,接近人本身对事物的感知。
  4. 实现设计的思路主要是以颜色,大小,边缘,规模,空间关系等等,通过在视觉效果上的绝佳配合来指引用户,为用户提供前进路线。
  5. 设计时,应该有一些想象中的环境,做为你设计元素的容器其约束。一个运动只发生在一个对应的环境。
  6. UI设计上的运动需要保持连贯性
  7. 不为用户的输入类型评级:所有的输入是第一级别。包括、鼠标、触控、感应、声音等等任何输入。

当然目前Material设计思想并不是100%合理,目前的一些规范还在持续修改中。建议如果是设计UI的话,不要太死板100%去参照原则。想想之前的Metro,则出的时候也很炫,但最终普及的程序也不咋样。

上面说到设计理念上有一条是跨不同设备,个人认为只是设计理念上的跨设备,而不是实现上的跨设备,比如在一些规范方面也有定义一些间距大小,排列组合等,各种设计规范如Logo,图标的设计规范等都有。对于设计师来说并不是说出一个psd就可用在所有端,对于程序员来说也并不是说一套代码各端通用。但设计上的理念一致,可以减少很多不同之处的处理。

从目前来看,考虑到的设备有电脑、笔记本、手机、平板、手表、电视、车载。如果有其它的设备应该也可以适用。现在自家的应用应该就是Android5,Chrome OS,以及一些官方的手机APP。

设计原理

总的来说,Material设计取材于大自然,对于设计里面的元素讲究一个“遵循自然法则”。让用户体验也接近于“自然”,学习成本达到最低。

Material是以一个三维世界的设计思想构造的,和以前平面设计的思想不同,之前平面设计时只x,y轴,使用Material设计时要考虑一条z轴,这点很不好理解,尤其对web设计者而言。官方给出的解释是Z轴在web里面表示分层(z-index)

设计时要考虑光照与阴影的情况,由于是一个3d的世界,所以有光照就会有阴影。一般会有单个光源,多个光源等情况,阴影会随着光源与运动变换。

3D特性

和普通设计思想最大的区别就是,在Material的世界里,元素是立体的,除了有宽度和高度外,还有厚度(参考大自然)。对于一些三维的设计来说,有个参考,但我们大多数用的软件(特别是Web)UI都是平面的,特别是网页来说,要怎么把厚度表达出来呢?

当然上面是平面化的3D规范,Material 对实际的 3D 的 UI 规范也做了相应规范,但接触的少,就没关注了,有兴趣做3D的UI的同学可以自己去看Material 3D的相关规范。

运动

总的一条,考虑自然运动。比如上抛,下落,滑动时要想像一下,给的力度有多大,元素的重量,大小等,要接近自然。

层过渡

两个视觉的过渡应该清晰、光滑,看上去毫不费力,这样的话视觉会自然的跟着焦点走。

新的层的创建过程要有一个介绍性的过渡过程,不要“闪现”出来,旧的元素也可以慢慢过渡至不显示,过渡过程时有“过渡元素”

  1. 从用户输入的地方开始过渡
  2. 视觉切换时使用过渡连接,不能“闪”
  3. 过渡过程要符合物理运动定理,比如匀速,加速等,有规律的
  4. 过渡过程应该有序,不要太随意分散,避免空间冲突重叠
  5. 避免线性空间路径,除非运动限制为一个轴或向/从一个点与其他元素。
  6. 避免较深的元素运动,最好只运动最上面层上的元素
  7. 运动不是一个元素的事,利用界面上的其它元素的位置尺寸关系,一起动起来,看起来才能匀称无缝
  8. icon 变化的时候最好有个形状变化的过程

其它

当然内容有点多,本人太懒,不可能全部写完,Material Design规范还定义了颜色,图标,Layout等等相当多的规范,而且还提供了最佳体验一些建议的值及DEMO等。

更多

对于组件的设计,也有很详细的标准。由于内容太多所以不具体说明了,可以去网页上参考,这里只整理个列表