如何理(qian)解(xian)Google的material design?

最近在看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的。(之所以这么说,是因为我还没有掌握,后面的内容看了一遍,但基本上没记住什么东西%>_<%。后续在工作过程中,牢记这三点原则,再翻看具体的内容,应该会有更深入的理解。)

以上内容是我个人较为浅显的理解,欢迎指教。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,802评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,109评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,683评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,458评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,452评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,505评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,901评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,550评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,763评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,556评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,629评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,330评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,898评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,897评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,140评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,807评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,339评论 2 342

推荐阅读更多精彩内容