MATERIAL DESIGN:构建软件的物质世界

 

  编者按:Google推行的Material Design已经远远超出之前Android Design的格局,视觉标准化的背后,隐藏着Matias Durate和他的谷歌战队背后改变世界的心。如果你还在和隔壁桌的同事争论Material Design到底是不是扁平化的话,不妨看看Durate、Wiley和Jitkoff 的思维已经走到了多远的地方,看看Material Design 看似简单的界面背后那颗炽热的雄心。

  “将纸片以如此先进的方式呈现出来,这已经与魔法无异了。”

  在谈及Material Design的核心理念的时候,时任谷歌设计高级副总裁Matias Duarte如此说道。这套新的谷歌设计规范制定了统一的UI视觉设计和各元素运动的物理规则。当然,这套设计也有一点怪异。

  在创建这套规范的过程中,谷歌的设计团队觉得有必要创建一套系统而连贯的外观和统一的体验,让它可以在所有的产品中广泛地运用,希望它能应用到Android、Chrome OS 以及网页设计中去。Duarte领导的设计团队并没有单纯地创建一套色版然后写上一堆规范就了事儿,而是开始从一些最基本的问题开始重新思考。3年前,Duarte在发布Android 4.0的时候,叩问世界:“机器是否有灵魂?”3年后,Matias在发布Material Design和Android L之后又问了一句,“软件是如何构成的?”

  软件是如何构成的?

  物质与型态

  当谷歌搜索首席设计师Jon Wiley和同事Nicholas Jikoff面对Google Now中广泛运用的卡片式设计的时候,自然而然地延伸出这个问题:软件是如何构成的。当你滑开一个卡片的时候,自然而然会想,接下来会发生什么?

  “彩色的Logo会以更加多姿多彩的形式展现出来。”

  “这听起来像是一个毫无意义的一句话”,Duarte说道“但是它的确是一个极具生命力的思路。”这种设计思路引领设计团队以全新的视角来看到应用中的每一个视觉元素。比起讨论像素和层,设计团队更愿意以卡片为单位,将它们视作实体,思考软件的界面变化和交互过程。


  如果这些卡片都有着实体和它们自己的物理属性,那么就意味着这些卡片在运动的时候会相互影响,需要遵循一套物理规则。在这种设定之下,你就不能让它们随意地变化,就像你无法让物理世界中的实体随便变形一样。

  想象一下,如果有一种智能材料像纸一样简单,同时也可以根据触摸而改变形状,这让我们开始思考(这种物质会带来怎样的设计)。这就是Material Design。

  于是谷歌设计团队决定将这种隐喻注入设计,他们设计的界面元素都变成了一张张神奇的“纸片”。这样一来,不同的视觉元素都如同扁平的纸片叠加在一起,轻飘飘地浮动在背景之上,它们有着一致的阴影和一致的光源。当你滑动不同的层的时候,它们更多的是滑到屏幕以外,而不是消失。

  更明亮的色彩,更富有张力的排版布局,与具备物理属性的纸片结合在一起,为Material Design奠定了基础。刚刚发布的Android L中,鲜亮的色彩和无处不在的卡片足以展现Material Design的精巧设计,以及协调的美感。

  Wiley和Jitkoff说,Material Design的出现,与其说是谷歌在设计风向上的改变,不如说是谷歌设计哲学的进化。在2012到2013这两年间,Google曾经发起过一个“肯尼迪项目”,这个设计项目旨在全公司推行一套统一的设计过程。Material Design的出现,也推动谷歌的“肯尼迪项目”进入了下一个阶段。

  创意与约束

  在Duarte看来,Material Design“统一了思路”,也“绝对是一个制约因素”,但这种限制也使得设计更一致,更容易做出决策。举个例子吧,比如在一个APP中,设计一个卡片不停翻转来展示卡片背后的内容。在Material Design的中,却不能如此设计。因为在Material Design中,卡片是有着明确的物理属性,在这个空间中并没有空间供卡片进行翻转,也不会让它不停翻转呈现不同内容。

  Duarte说,通常我们对于物理实体总能轻松理解,但是软件设计通常会打破我们对于事物的认知和体验。Wiley认为,这种超出日常认知的设计会让人迟疑,就如同科幻电影中不遵循内在逻辑的设定一样。Duarte直指iOS的设计理念:“我不会(让UI元素)高速地穿过空间,不会让虚拟的边缘给你带来划破手掌的错觉。”

  “设计是在约束中寻找解决方案,”Duarte说道,“如果设计失去了约束就无法称之为设计了——没有约束的那是艺术。”

  谷歌的设计师依然拒绝为这种材料命名,因为没有名字的束缚它更具灵活性,也更具有神秘主义的色彩。的确,Material Design中的元素遵循一系列的物理规则,但是它们并不具有拟物化风格。它们如同纸片一样来回滑动,但是它们具有无与伦比的“魔力”。

  它们没有物理纸张的型态限制,一个转场动画就可以让它们自由伸张或者缩小。对于谷歌而言,这些动画非常重要,因为这可以让用户明白他们置身于一个APP中。Wiley认为,目前很多APP给人的感觉像是被跳跃剪辑的电影或者电视节目,让用户失去时间和空间的概念。在他看来,用户需要的APP更接近于舞台剧,剧情一幕幕地推进,舞台上的故事经过编排和转换,这非常重要。


  走向现实

  更重要的是,这种神奇的材料会在你需要的时候出现。Google针对Google Now这样的产品已经进行了多年的探究,并且它们现在已经成为了Material Design中重要的组成部分。Material Design的出现,并没有强行要求用户去管理数据,而是通过设计让用户去相信Google在对的时间给出对的内容。

  这就是为什么同时推出的可穿戴系统Android Wear,仅保留了与通知系统进行操作和回复的功能。对此问题,Android Wear平台的设计师 Alex Faaborg是如此应答的:“对于手表,你并不会花费大量时间与之进行交互,你只是想看一下消息并且用语音进行回复。这在设计理念上和Google Now基本一致,不过更加平台化而已。”

  要接受这样的设计,用户需要更加信任Google,不论是数据安全还是设计。Duarte坦言:“我们想找出最简单的解决方案,将作出最简单易用的设计置于首位。”


  野心:Parc 3.0

  Material Design的野心并不止于为网页和软件创建一致规范的外观和体验,甚至超过了Android L和Android Wear的布局,Google希望通过Material Design 强化人们的认知与计算机技术之间的联系。

  在Duarte看来,施乐Parc研究中心为我们带来的图形化界面,和可以点击拖拽的窗口设计,是极为重要的研究成果,但是它并非突破性的进展,因为它仅仅只是实体桌面的虚拟化设计,并没有“具备对象关系”。而苹果通过触摸技术做了具有类似意义的事情,将人们带入了触摸与移动软件元素的时代,它让用户和屏幕背后的虚拟世界通过触摸建立起了对象关系。

  如果说施乐Parc研究中心带来的施乐之星是Parc 1.0的话,那么iPhone的出现就是Parc 2.0了。现在,Google希望Material Design能成为Parc 3.0,开拓一个新时代。谷歌相信Material Design的设计语言能再次带着我们前进,这套设计语言中融入了触摸屏、手势操作、语音控制以及谷歌自有的智能算法以及更多的新技术。这些技术结合在一起,让我们的大脑明白软件的运作机制,具备跨设备的功能,让我们能够直观的解决问题。


  Material Design正是组织和容纳这一切的框架,只是刚刚诞生的它尚未成为施乐之星桌面系统和iPhone这样划时代的产品。但是将我们每天都要面对的或简单、或复杂的新技术合理整合起来确实非常重要。如果Google能够按部就班地将Material Design应用在Chrome OS、Android、网站等所有平台的话,那么用户就可以以在多平台之间无需调整进行切换了。

  目前,Material Design还是一个理念,在谷歌推出更多使用这一设计的软件之前,它依然会保持它神秘的一面。但是,正如Wiley所说的,它还处于起步阶段。接下来,谷歌要做的事情还有很多。

  “如果我们真的能用它替代现在的设计的话”,Duarte说:“那么未来就真的触手可及了。”

时间: 2024-11-18 04:27:42

MATERIAL DESIGN:构建软件的物质世界的相关文章

使用 Sketch 和 Pixate 构建 Material Design 原型 - 第一部分

本文讲的是使用 Sketch 和 Pixate 构建 Material Design 原型 - 第一部分, 你是否曾经对某一款应用有过很棒的想法或者想向别人展示你的想法会带来改变?可是否又有以下限制令你止步? 没时间去开发款概念产品来证明自己 你对色调.布局和动画等等该如何展示没有把握 你是位应用开发者,想尝试但不知该如何设计 你是位应用设计师,想了解 Sketch 和 Pixate 在设计和构建原型的优势 你对 Material Design 能否提升你的应用没有把握但又想知道到底会变成怎样(

使用 Sketch 和 Pixate 构建 Material Design 原型 - 第二部分

本文讲的是使用 Sketch 和 Pixate 构建 Material Design 原型 - 第二部分, 在教程的 第一部分 我们制作了一个简单的登录界面并导出了所有资源. 在第二部分,我们打算继续在 Pixate 里创建一个原型.对于这一部分,你需要: Android 或者 IOS 设备(最好是 Android ).如果你能弄到屏幕尺寸是 1080 x 1920 的设备那更好了,但那不是必须的, Pixate 将为你缩放原型. Pixate Studio 下载 Pixate app 到你的 

使用 Sketch 和 Pixate 构建 Material Design 原型 - 第三部分

本文讲的是使用 Sketch 和 Pixate 构建 Material Design 原型 - 第三部分, 在本系列的 Part 2 我们已经将在 Sketch 中完成的作品导入到了 Pixate ,并且新建了一个简单的登陆原型. 最后在这个总结性的第三部分,我们将进一步深入,同时将会作出一个更细致的原型. 开始之前,你应该已经完成了 Part 1 andPart 2 , 如果没有的话,先去看看这两篇内容吧. 我已经上传了你在 Part 3 里所有需要的 Sketch 资源 , 你要做的就是将它

Android构建Material Design应用详解

长久以来.Android的UI并不算美观,以至于很多IT公司在进行界面设计的时候,为了保证双平台的统一性,强烈要求Android端的界面风格必须与iOS端一致,我认为这里非常不合理的,同一操作系统中各个应用之间的界面统一性要远比一个应用在双平台的界面统一性重要的多,只有这样,才能给使用者带来更好的用户体验.为了解决这个问题,Google公司在2014年IO大会上推出了一套全新的界面设计语言--Material Design(材料设计语言),这次Google在界面设计上确实下足了功夫,一个词,好看

MATERIAL DESIGN设计规范学习心得

  自学笔记就该这么做!今天分享@東門王三 同学关于Material Design的自学成果,他的学习笔记严谨有序,触类旁通,从Material Design到其他系统的设计规范都有所研究,还认真地做了思维导图,同学们可以边学习边借鉴他的自学方法,一举两得呦. 想读好书的同学,可直接到:设计师图书导航 挑选. @東門王三 :随着Android系统从Android 4.4逐步升级到Android L.Material Design作为Android Design演进的最新标准规范,也推出其完整的设

扁平化设计和MATERIAL DESIGN有什么不一样?

  两种相似的设计风格,一个基于另一个.一个是新热事物,另一个,有人猜测,已经以自己的方式成为一种时尚.一个是自发的--适应设计的趋势,另一个却是有目标--专用的设计指导规范. 你可能明白了扁平化与Material Design之间的冲突了. 但是,他们之间不同是什么呢,本质上是一个比另一个更好?在某些用途上更好?实际上,一些人想知道它们之间的差别有多大,让我们从最基本的开始:拟物化设计的身影出现在每一个身上. 拟物化设计 拟物化设计, 在这个背景下,设计是为了模拟真实的物理世界.通常,这需要设

帮你全面彻底搞定MATERIAL DESIGN的学习笔记

  这一年就快完了,你还没搞懂Material design吗?是嫌文档太长,还是觉得自己英文不好?都没关系,我们善良热情的@十萬個為什麽 帮同学们通读了一遍官方的设计指南,去糙取精,整理出这篇干货超多的学习笔记,打包票学完基本就掌握90%了,别错过咯! 自从Material design发布以来,可乐橙就在一直收集相关素材与资源,研究别人的作品.这套设计风格非常鲜明,带有浓郁的Google式严谨和理性哲学,深得我心.实际上,光是研究素材和别人作品,就能发现一些明显的规律,做出几分相似的设计.这

Google 设计师谈论 Material Design

扁平化设计是一个过度滥用的词汇,但是,它的风行反映了设计界的一种趋势,人们正在快速抛弃拟物化设计.有种观点是,在触控界面发展初期的时候,人 们需要熟悉感,而模仿现实的界面能够做到这一点.当人们已经习惯了触控界面之后,就不需要现实世界的隐喻了.因此,在软件设计上,我们应该追求更加电子化 的界面,不再被物理世界的规则所限制. 在这种情况下,Google 的 Material Design 似乎是逆势而行.它以现实世界的纸墨为隐喻,强调了阴影和层次,用动画效果代表现实的力反馈,试图把物理世界的规则带回

Material Design学习之 Button(详细分析,传说中的水滴动画)

转载请注明出处:王亟亟的大牛之路       上一篇大致介绍了Material Design的一些基本概念传送门:http://blog.csdn.net/ddwhan0123/article/details/50541561 这一片来具体学习下里面的内容,这篇分为两部分一部分是原理分析,一部分是代码分析. 先简要的介绍一些理论知识,顺便温顾下基础知识 按钮 按钮由文字和/或图标组成,文字及图标必须能让人轻易地和点击后展示的内容联系起来. 主要的按钮有三种: 悬浮响应按钮(Floating ac