最近在看Google家的material design,也就是android的官方设计规范。因为之前没有接触过设计规范这块,所以在一开始的时候基本上是一脸懵逼,看了很久才明白它到底在说什么。在这里,分享一下我对material design的学习和理解,希望能够帮助后来人。
首先,要明白两个问题,什么是设计规范?为什么有设计规范这个东西的存在?
设计规范是什么
每种系统都期望构建一个合理的虚拟世界运行机制,而设计规范就是这个世界运行的准则,让无数的应用可在虚拟世界中的合理运行,让用户在使用中可以清晰理解。
所以在material design的开篇中,便说:我们希望创造一种独一无二的底层系统,在这个系统的基础之上,构建跨平台和超越设备尺寸的统一体验。遵循基本的移动设计定则,同时支持触摸、语音、鼠标、键盘等输入方式。
规范存在的原因(或目的)
各种平台(iOS、Android、WP等)以及各类基于Android深度定制的ROM(miui、flyme、ColorOS等)都制定了相应的设计规范,而这么做的目的大概都是为了:
统一约束第三方应用的UI设计与交互设计,以便保证用户体验,同时降低用户学习使用成本;
统一跨平台的使用体验,降低用户跨平台学习使用成本;
提供规范统一的接口,降低开发者的设计成本。
这里多说一点,为什么Android会有各种设计规范,无法像iphone一样统一的设计规范。这是因为Android手机型号众多,机器性能层次不齐,可能看似优雅的交互动画,可能在低端机器上呈现的效果一塌糊涂。本来像水一样流畅的tab页间的滑动操作,在低端机器上体验感觉像泥石流一样。由此延伸下来便是,所谓的设计规范,只是一种指导建议。产品的可用性和易用性才是最重要的,设计层面的东西此时显得并不那么重要。
其次,要理解material design中的material到底是什么
material design,有人将它翻译为质感设计或是质料设计亦(也有人说是纸片设计)。相信你看完之后,完全不知道这个质料是个什么鬼。我在阅读了一些解读资料之后,更偏向将它翻译为“材料设计”。material就是所谓的材料,而这个材料是设计规范所构造的虚拟世界的基本元素。
官方自称material design的灵感是来自于纸片和油墨,而这个是信息时代之前主要的信息承载形式。所以这里的材料,实际上是在虚拟世界中的信息的承载形式(信息是需要展现在material上的)。同时,为了方便人们的认知,它也希望能够将现实世界搬到material的世界中(即三维世界),如同在概述中所言一般:实体的表面和边缘提供基于真实效果的视觉体验,熟悉的触感让用户可以快速地理解和认知。实体的多样性可以让我们呈现出更多反映真实世界的设计效果,但同时又绝不会脱离客观的物理规律。
最后,如何理解material design的整体内容
在material design的概述中,主要在阐述其设计原则:
Material is the metaphor(实体感就是隐喻)
谷歌认为现实世界中的材质触感是可以通过纸片的隐喻来表达,通过在设计上运用符合运动规律的动画交互、通过光影打造设计层次的关系可以创造全新的虚拟交互空间,并且这个空间是符合现实规律的。
Bold, graphic, intentional(鲜明、形象、深思熟虑)
在视觉上,谷歌不仅要求生动形象,更要求设计时要确认设计的目的,摒弃仅仅为了美观而设计,强调视觉设计要为用户使用提供指引,凸现页面当下的核心功能。(这一部分是借鉴了传统印刷设计的内容,个人还不是很理解其中深意。)
Motion provides meaning(有意义的动画效果)
交互动画的目的就是吸引用户的注意,表达当下页面发生的变化,同时和对视觉要求一样,一定要有意义。我看到最好的解读是这么说的:material design中无比强调了动效,因为在google这帮人看来,动效本身就是在信息的一部分。(如何理解这一点,想象一下,我们与其他人沟通的时候,除了语言、表情以外,还有肢体语言的存在,而肢体语言是沟通中很重要的一部分。)
这三条设计原则实际上就是理解整个material design的钥匙,文档后面的动画、设计、布局、组件等等所有的内容,都是在解读或印证这三条设计原则:material是这个三维世界的材料(信息承载的形式),这个材料的动画交互时符合运动规律的、它的视觉呈现是借助了光影来打造层级的关系。
所以,在阅读文档的内容,拿着这三条设计原则进行印证,应该是可以比较好理解并掌握material design的。(之所以这么说,是因为我还没有掌握,后面的内容看了一遍,但基本上没记住什么东西%>_<%。后续在工作过程中,牢记这三点原则,再翻看具体的内容,应该会有更深入的理解。)
以上内容是我个人较为浅显的理解,欢迎指教。