【产品思考】Material Design与物理特性
=Material Design的定义=
从字面上的意义来看,“material”代表物质和材料,非常直白的表达了Material Design的设计原则:将设计元素与现实世界中的实际物体进行关联,让用户在认知和操作上更加轻松。
=与扁平化的区别=
2013年苹果推出iOS 7的时候,扁平化就被认为是从拟物化这个极端直接跨向了另一个极端。
当极端的扁平化(特别是Metro UI)在电子屏幕上呈现信息时,仿佛整个界面就只剩下色块和文字,以至于应有的信息层级也因扁平化而减弱了。
如何在扁平化的基础上向用户展现信息层级,是Material Design想要解决问题的初衷。
于是谷歌在扁平化的基础上保留了物理世界的阴影和动作,相当于一种强调物理特性的扁平化设计,而阴影、动画、颜色则是体现物理特性的三种方式。
Material Design与拟物化、扁平化之间的关系可以通过下边的图示来体现:
=卡片纸和阴影=
在Material Design中,阴影是突出层级关系的最重要的一环。
例如谷歌之前推出的卡片纸,将现实世界中纸张的物理特性挪进电子屏幕里,把信息内容呈现在虚拟的卡片上,并根据卡片的层级关系显示不同的投影。
同时,根据卡片纸可以裁剪和拼贴的特点在不同大小和分辨率的屏幕进行组合显示,也是利用了现实世界中纸张的物理特性。
=过场动画=
以往受限于硬件的性能问题,过场动画一般只是简单的展现页面间跳转,即通过X轴与Y轴的参数变化来实现过场动画。
从iOS 7开始,过场动画更多的强调在Z轴上的参数变化,以此展现页面的层级关系。例如在桌面点击应用图标时,应用界面从图标中心点扩散延伸至全屏。
Material Design则更加强调Z轴参数的变化,特别是大部分谷歌原生APP都运用了这种过场动画来告诉用户界面从哪里来到哪里去。同时这些动画也被赋予了现实世界中的物理特性,就好像UI元素拥有重力和弹性。
具体的过场动画示例可以参考下边的文章:
http://digi.163.com/14/1001/08/A7F6TFEV00162OUT.html
=大面积色块=
以往的Android总是使用黑灰色作为主色调,给人科技和冰冷的感觉,容易让普通用户产生距离感,难以与现实世界中的事物产生联系。
Material Design开始采用了相反的做法,在用户界面采用了大面积、饱和度高、亮度适中的色块来突出主要内容,让界面的主次感更加突出,也让界面重新拥有了时尚和活力。
=未来的发展可能=
Material Design还包括其他很多种的设计特点,例如FAB按钮、无边框按钮和聚焦大图,阴影、动画、色块只是其中用于与现实进行联系的三种形式。
事实上谷歌也一直在寻找一种Universal Language,可以普遍适用于不同的操作平台上,例如谷歌网页、Android系统和Chrome OS。Material Design作为一种设计风格的尝试,未来还会有很多发展的可能,目前也算作是一种可以与扁平化相比对的设计风格。
从字面上的意义来看,“material”代表物质和材料,非常直白的表达了Material Design的设计原则:将设计元素与现实世界中的实际物体进行关联,让用户在认知和操作上更加轻松。
=与扁平化的区别=
2013年苹果推出iOS 7的时候,扁平化就被认为是从拟物化这个极端直接跨向了另一个极端。
当极端的扁平化(特别是Metro UI)在电子屏幕上呈现信息时,仿佛整个界面就只剩下色块和文字,以至于应有的信息层级也因扁平化而减弱了。
如何在扁平化的基础上向用户展现信息层级,是Material Design想要解决问题的初衷。
于是谷歌在扁平化的基础上保留了物理世界的阴影和动作,相当于一种强调物理特性的扁平化设计,而阴影、动画、颜色则是体现物理特性的三种方式。
Material Design与拟物化、扁平化之间的关系可以通过下边的图示来体现:
![]() |
=卡片纸和阴影=
在Material Design中,阴影是突出层级关系的最重要的一环。
例如谷歌之前推出的卡片纸,将现实世界中纸张的物理特性挪进电子屏幕里,把信息内容呈现在虚拟的卡片上,并根据卡片的层级关系显示不同的投影。
![]() |
![]() |
同时,根据卡片纸可以裁剪和拼贴的特点在不同大小和分辨率的屏幕进行组合显示,也是利用了现实世界中纸张的物理特性。
![]() |
=过场动画=
以往受限于硬件的性能问题,过场动画一般只是简单的展现页面间跳转,即通过X轴与Y轴的参数变化来实现过场动画。
从iOS 7开始,过场动画更多的强调在Z轴上的参数变化,以此展现页面的层级关系。例如在桌面点击应用图标时,应用界面从图标中心点扩散延伸至全屏。
Material Design则更加强调Z轴参数的变化,特别是大部分谷歌原生APP都运用了这种过场动画来告诉用户界面从哪里来到哪里去。同时这些动画也被赋予了现实世界中的物理特性,就好像UI元素拥有重力和弹性。
具体的过场动画示例可以参考下边的文章:
http://digi.163.com/14/1001/08/A7F6TFEV00162OUT.html
=大面积色块=
以往的Android总是使用黑灰色作为主色调,给人科技和冰冷的感觉,容易让普通用户产生距离感,难以与现实世界中的事物产生联系。
Material Design开始采用了相反的做法,在用户界面采用了大面积、饱和度高、亮度适中的色块来突出主要内容,让界面的主次感更加突出,也让界面重新拥有了时尚和活力。
![]() |
=未来的发展可能=
Material Design还包括其他很多种的设计特点,例如FAB按钮、无边框按钮和聚焦大图,阴影、动画、色块只是其中用于与现实进行联系的三种形式。
事实上谷歌也一直在寻找一种Universal Language,可以普遍适用于不同的操作平台上,例如谷歌网页、Android系统和Chrome OS。Material Design作为一种设计风格的尝试,未来还会有很多发展的可能,目前也算作是一种可以与扁平化相比对的设计风格。
-
惜知猫 赞了这篇日记 2015-03-21 13:48:42