谷歌material design pptUI 为什么这么美

Google I/O 2014发布了全新的设计语言Material Design(卡片式材料设计),它是迄今为止最受欢迎的视觉设计语言之一,利用了分层的卡片式设计、使用更多的空白和层次排版结构,经历了几年的迭代和提炼,来为手机、平板电脑、台式机和“其他平台”提供更一致、兼具外观和功能的“外观和感觉”。而且,不止于谷歌和安卓app。
事实上,多重层叠的概念并非谷歌首创,不过,谷歌对其进行了更深一层的开发——在触觉体验中渗入大胆活力的审美效果(本质设计)。那么,其实,Material Design真正的优势在哪呢?
首先,我们来具体了解一下Material Design:
Material Design突破了谷歌以往的所有设计,包括栅格、风格、布局等,谷歌将其特点概括为拟物和扁平的结合。和苹果以前的拟物设计并不尽相同,Material Design更关心系统反应的质感、层次、深度,和其他物体的叠放逻辑,比如打开页面时,新页面不是像以往那样直接跳转,而是从一个中心点扩展开来,并且利用原页面在底部的投影营造出立体空间感,告诉用户,页面从哪里来、到哪里去,形成一种操作逻辑。从某种程度上来说,Material Design更像是把交互界面变成了一张张有逻辑顺序的卡片纸。
Material诞生之初首先搭载的设备分别是Nexus 6智能手机和Nexus 9平板电脑,但后来延伸至其他所有设备,取得这样的效果都是因为它植根于几个原则:
1、原质化的视觉提示:设计结合实体物理属性,参照了纸质和墨水材料的元素。
2、图像式的、深思熟虑的:技术推动了视觉效果的变革,空间、尺度、色彩、图像、排版等元素组成层次结构明显的设计,一切都经过了慎密的考虑。
3、移动效果产生的意义:和物理世界接近的触感可以让用户更为自然、快速地理解和认知。
认识“原质化外观”:
如前文所提到的,其实这个新型的设计我们可以将其理解为“数字纸”,然后组成这个这个框架的元素就是一层层“卡纸”,系统运行时就像翻开一张张由一定逻辑组合的卡纸。而与真正卡纸不同的是,Material可以改变它们的形状和形式,比如拉伸和弯曲。
所解释的那样,设计本身相当于一个内容和信息的装载体。这个载体采用的是扁平化设计,但利用阴影展现出其层级形式就成为了与其他设计的区别特征,其他设计或者是采用渐变、纹理等形式来区别层次。例如以下这个APP的界面,用户进行最新的操作的菜单显示于顶层,历史操作路径则变成灰色外观处于底层。
在设计中建立起目录的功能和与内容的联系,不仅使得操作更接近物理真实,而且建立起一种深度,多种要素叠加起来就像是创造了一个三维的世界。
Material为响应式设计而生
分层式的设计根本上说是迎合了响应式设计的趋势——每考虑一个层级的设计,就要考虑所有元素之间应该如何自动关联。所以说,谷歌的扁平化并不只是把立体的设计效果压扁,事实上,Material的扁平化设计更是功能上的简化与重组。
谷歌当初推崇这套标准是因为,灵活的栅格设计能够保证布局的一致性、连接点之间内容的回流,以及由点到面的打开方式能够描述出APP的打开过程。
为了适应各种设备的屏幕和分辨率,在从点变成面的过程中,应用界面的连接点像素包括了480、600、840、960、和1600的像素梯度。这些参数给设计者在调整台式电脑、平板电脑和智能手机的界面时提供了一个尺寸的基准。
Material和其他移动界面设计趋势
越来越多的网站设计已在UI上走扁平式设计的路线,当谷歌创造了分层式界面连接时,其他系统也会加入到这场UI美学的变革当中。而Material Design为什么能够鹤立鸡群呢?
其实,Material Design也是借鉴了其他扁平化设计的概念以及新潮的技术,甚至有些人会职责谷歌的Material Design与扁平化设计模式Flat Design 2.0太过雷同。
在Material的扁平化设计中,它仍旧使用了分层元素来营造三维空间,而且实质上是设计师将以往被淘汰的设计技巧重新拿了回来。因为本质上来说,扁平化的概念最核心的地方就是:去掉冗余的装饰效果,即去掉多余的透视、纹理、渐变等等能做出3D效果的元素,让“信息”本身重新作为核心被凸显出来,并且在设计元素上强调抽象、极简、符号化。但Material的成功就在于化腐朽为神奇,它重拾这些技巧最大的不同是,将其用于提高系统的实用性,而非装饰性。
Material和其他设计模式最大的区别还在于,其配色方案已经最大限度地接近于扁平化设计美学。因为在扁平化设计中,配色是最重要的一环,它通常采用比其他风格更明亮更炫丽的颜色,而且还意味着更多的色调。其他设计最多只包含两三种主要颜色,但是扁平化设计中会平均使用六到八种颜色。谷歌的Material正是如此,对于不同的选项会配有不一样的颜色——明亮、绚丽、完全饱和的色调。
比如下图这个APP界面,所有元素组合起来(图片、标记、简要文字、层叠)就简单利落地展示了该应用要传达的信心。这就体现了Material Design并不是为了营造视觉冲击而堆叠这些图片、阴影效果,而是它本身是功能的一部分,能够辅助核心信息的突出。
如今,你似乎已经很难找到哪个界面不是由点到面,进而全屏显示的,这就是一个不可逆转额UI设计趋势。
分享到: ()如何理解 Google 的 Material Design 设计语言?
此问题的等同描述还可能是:如何评价 Google 的 Material DesignWe challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design.
按时间排序
第一眼看到,我就要用了
我的理解:界面上你能看到的除了内容(主要是文字和图片)以外别的每一个元素(导航栏、侧边栏、按钮、卡片等)都是一个matierial(材料)。MD强调不同的材料间要有层次,内容在卡片内显示。通过色彩、阴影和动画来体现层次。
来讲一些实战性较高的观点吧。在上个月,我们组内进行了安卓插值器动画的研究,其中有一个章节就是Material Design的分享,准备期将近一个月,系统地剖析了Material Design,所以对于Material Design有一些自己的见解。下面从两个方面来讲解下:Material Design(以下均简称“MD”)1. 首先是UI表现层不同于iOS UI,安卓UI在于图标表现方面青睐实心而非线性,青睐尖锐而非圆润,青睐统一色彩而非多彩。相对于iOS UI,安卓的MD设计更趋近于现实,即三维世界,而非扁平的二维。MD的设计体系,引进了Z轴的概念,也就是安卓MD具备层次美,Google相信:UI的美感不仅来源于界面的细节,更来自于层次。MD具备更强或者超强的规范性,由于DPI特性,安卓MD元素需要能被4整除(完美显示),距离需要为8dp的倍数(合理间距)。ps:怎么得出的推导过程,比较复杂,而且需要列表,故不展开。MD强调主功能区与二级功能区,二级功能区即我们平时常见的,置于页面左上角的汉堡式功能按键。2. MD另一个重要特性为:交互动效。因为你一旦采用MD的设计,那么你就需要考虑动效与动效实现(为什么一定要考虑,就好比买衣服却不给你手提袋一样,有缺失感不完美)。MD强调自然的动效,流畅且有活力,例如easing。easing表现出了自然界的动效美感,例如:仿真的回弹、缓动等(我之前发布过一则复杂动效还原,反馈不错,也获得了UI中国的首推,对动效有兴趣的同学可以前去学习下,标题是:天了噜 100%还原复杂交互动效)。除了easing,MD的更凸显:魔法纸片(1px投影的card流设计),魔法纸片是基于Z轴的设计语言,与底层越远,投影越轻;反之则越重。所以,MD尤其适合feed流、card流的产品设计形态。最后,MD还推出了水纹反馈,图标转场交互和大面积布局交替的展现,MD推崇能够帮助用户理解的交互形式。以上是我个人的一些见解,如有不对或不恰当的东方,希望大家指出。站酷、UI中国:EthankDesign
它是一种生活的还原,也是一种设计的语言。总之,它彰显了设计的魅力。
大家都在回答『What do you think of Material Design』我来回答 『How to fully understand and apply Material Design to your product』正好自己最近工作交接,把我收藏夹里关于 MD 的资料都梳理了一遍,分享给大家。Google 官方文档 我知道大家都『访问』过 Material Design 的文档,但是有没有一个页面不拉的通读一遍?有没有达到闭着眼睛丢链接的熟悉程度?如果你的产品要做 MD redesign,不要以二手信息作为起点,官方文档才能真正展示精髓。1.
Google 官方模板
这是我个人用的最多的一套 MD 素材,不过调色板里有些颜色 Google 后来更新过,需要对照一下 Guideline。使用 MD 的产品/设计概念首先你当然要下载所有 Google 原厂针对 MD 重设计过的 app,还有那些 Google Play 上编辑精选的 app,反复把玩,看完产品,再读读创作团队写的 case study,每个设计决策背后都会有一系列的逻辑作为支撑,学习他们思考的过程和决策的原因。知乎对 MD 有意思的探讨高喊谷人希的也有,闭着眼睛乱黑的也有,作为一个设计师,请独立思考独立判断。没错,Material Design 绝对是一套 World Class 级别的 Guideline, 你可以主观的评价它『好看』或者『丑』,但你不能否认 Google 从拉里佩奇开始由上至下的执行力,渗透到 Google 甚至之后 Alphabet 的每个产品里。就像 Spotify 的前 Design Lead
说的:Dear Google DesignersNO ONE has ever designed a digital identity at such a big scale. No one knows better than you. Keep on rocking!No one even remotely knows the implications and challenges of implementing a digital identity, not only across an internal team of ~60.000 employees but also across so many public touch points worldwide.So,好好向人家学习吧少年!Happy Designing~ 匡
多图渗入(上图:之前的 Google Now)(上图:之前的 Google Now)Material design(内部代号『量子纸』)是 Google 开发的设计语言并在 2014 年 6 月 25 日的 Google I/O 大会上推出,是基于首次在 Google Now 上面出现的『card motifs』(直译过来叫做『卡片式图案』) 扩展设计出来的。这种设计大量的增加了栅格化图层、响应式动画,以及一些赋予光影变化的变形、叠化、深度等效果。设计师 Matías Duarte 解释这种设计风格『我们不是在做真实的纸张,但是我们的虚拟设计元素却能智能的拓展和变形(大意就是各种设计元素并没有遵守拟物设计,但是却有一定的实体物理性质,可以理解为物理性质拟物)。真实物质是有物理表面和边缘的,接缝和阴影又能够揭示你触摸的是什么,Material 设计来源也就是这个道理』。Google 说他们这个设计语言思路是来源于纸和墨,所以充满了物质性。Material design 能在 Android 2.1 到 v7 中都能使用,2009 年以后出品的所有 Android 实体设备都可以。Material design 会用 Google 一贯以来的做法,通过网页端以及移动设备产品的扩张,来逐渐扩展影响力,Google 也发行了 Application programming interfaces (APIs) 给第三方开发者去了解和把他们的应用做成这种风格。在 2015 年,Material design 已经占领了大多数 Google Android 移动设备 APP 的界面了,包括 Gmail, YouTube, Google Drive, Google Docs, Sheets and Slides, Google Maps, Inbox, 还有所有 Google Play 旗下直属 App,以及 Chrome 浏览器和 Google Keep 外设,还包括了网页端一些应用界面,例如 Google Drive, Docs, Sheets, Slides and Inbox。Material design 的 UI 设计规范被称为『Polymer paper elements 叠纸元素』(暂且这么翻译),它包括『层叠元素库』,在浏览器中它会用一个『垫片』来显示网页端外加的 API 组件,表示它并不是该软件本身携带的控件。设计详解这一部分的内容是
中文版的部分摘要和总结,在此表示感谢。1.动画在真实世界里面,由于重力等有加速度存在的力场里面,物体运动速度大多数时候不是线性增加的,斜率改变也许更接近二次函数,所以在 Material 里面,动画首先要遵守『物理』,偶尔比如你要做出虚拟的上抛运动,这时候你的初速度要设定到最高才符合真实世界的规律。还有就是要考虑一下惯性,想象一下你要赋予这个物体的质量和初速度,有助于你做更好的动画。参考 同样的就是在真实世界里面你试着和水面互动,你会扔石头,或者用手指触摸水面,结果有不同但是效果是相近的,水面会泛起涟漪。在 Material 里面你点击设计交互元素产生的响应也应该和这个一样,产生『涟漪』,下一步也应该以你的点击的地方为中心打开一个新界面。对于转场,也是类似,永远想象观众在翻书,而不是看电影那样硬切。在元素变化不大的界面切换中,想象要新进来的元素、要走出去的元素、要保留的元素都是要沿着怎样的路线和动画去走,规划出来的东西都要井然有序,即便是要加入『物理』的动画了,也不可以乱了阵脚。以上的做好了的话大体能把 UI 动画做到 90 分,最后的 10 分就是来源于细节了。但是也要保证『简单却动人』,如果复杂又违和,宁可不要。2.样式大胆使用鲜艳的颜色,一般情况下饱和度达到色彩图中 500 为佳。糖果色和撞色也是 Material 的一个重要特色,选好两个对比强烈的颜色,各自选取三个饱和度纬度的颜色,这样就基本上把一个画面的主要颜色都定下来了(优秀的设计需要有一个强而有力的 VI 制定守则),其中一个色系作为强调色,在关键的控件设计上起到吸引视觉重视的作用,谨慎使用。(字号和透明度之间关系)(字号和透明度之间关系)(字号和行距关系)(字号和行距关系)(行文缩进注意事项)(行文缩进注意事项)从 Android 诞生伊始,全部 Google 平台中 Roboto 就是最标准的字体,在历次改版之后 Roboto 显得更加清晰特征明显了。比例一般都是按 12、14、16、20 和34 号的字体排版缩放,层级要非常清晰明了。在 Material 的设计标准里面还有一个更加进步的规则就是不同字号颜色以及间隔和换行都需要有部分修改,以防止对比度过大而引起注意力分散。对于阅读长度,『要得到良好的阅读效果,每行应当包含60个字符左右』。对于图标而言,整个设计里面有相对固定的栅格规范,圆角处理和避免过于锐利的直线角,还有就是在各种场合下都有很强的大小和颜色适配性。(这种阴影是不可取的)(这种阴影是不可取的)作为一套 UI,也要经常处理图像和设计元素的搭配。虽然图像本身的质量永远是处于不可控制的范畴,在可控的范围内(比如 APP 背景、登陆界面、专辑缩略图等),增强和周围图层及控件的关联度、巧妙使用遮罩都能让设计更具『人性化』。插画和摄影常常混搭,能加强戏剧性,但是非常避免只有照片甚至是只用图片库的图片。还有就是像素要满篇幅,留白处理会让其他设计和图片格格不入。分辨率也要保持足够大,不要随意添加滤镜,甚至不要加很强的灰色半透明,这些都是降低画面质感的行为。3.图层由于整个设计的本质是想模仿『纸墨』,所以在 Material Design 处处要遵守的就是印刷时代的栅格化设计,这样能最大化带来『纸质』体验(虽然我觉得这只是针对欧美印刷业)。图层之间有非常明确的相互关系,同级的『纸张』只能相互『推动』(并且永远保持一个『接缝』),不能忽然窜到别的层级的纸张上。另外『纸张』都是有弹性的,但是却有一定的阈值,设计的时候也同时考虑之前说的物理学原理。在 Material Design 中所有衬线都是有意义的不可以滥用,只是为了使得图层互相之间的逻辑非常严密。于是在有些界面不再有标题栏的时候,这些衬线就变成了非常重要的图层要素。每个 APP 独立性非常严谨,互相不能互窜图层。如果有 APP 本身包含多图层,那么会有一些控件是用于连接这些图层的,那么它将会一直浮现在所有图层之上。还有一些守则,比如系统的提示永远在图层最上面,这也是所谓的『深度』效果了,所有图层都有它在 3D 上的『深度』,在 Z 轴上有自己的位置,而每个图层上它们都有他们的阴影来暗示它们距离最下面的 Z 平面有多高(虽然我觉得有时候这个处理方法有点太过头了,尤其层高高的时候阴影简直吓人)。关于各种元素之间的间隙尺寸,Material Design 都有非常成熟的尺寸规定,水平和垂直部分都有。而所有这些被定死的尺寸以外,都是由内容和留白来占据的,这就是它灵活处理的部分了。即使在平板和 PC 上,也是同样的处理法则。遇到棘手的尺寸,就用倍数法则:这里要说到更深层次的东西,关于交互逻辑了。其实 UI 页面之间有三种联系:这里要说到更深层次的东西,关于交互逻辑了。其实 UI 页面之间有三种联系:一个屏幕完成所有事情,如计算器 App;同一个层页面但是不同 Bar 切换,比如拨号界面直接推拉出收藏夹这些;复杂应用,多层页面,数据较多,比如有分类功能的购物 App,包含预览功能的文件夹。这种已经非常接近不同 App 之间的逻辑了,但是又稍微不同;这时候你不仅要考虑单个页面设计了,要考虑整体的 UI 设计以及设计过程要保持头脑清醒(这时候你更像个导演或者建筑师,纯美工级别的请跳过以下内容……),首先出来的这个页面一定是用户最想看到了。而且你要做到不要混淆视觉,如果满屏幕都是导航栏将会使得用户非常迷茫(就像以前版本的 Android 打开 App 会出来一大堆的 Bar,极其丑陋),另外 Icon 设计的辨识度、能否清晰的表达出直接访问路径的内容,都是非常重要的。如果实在太多功能,先考虑精简,然后考虑平铺,再考虑侧滑,尽量少的让用户产生多余的使用步骤(当然如果你是在做 Motion 动画,这个观点也是值得采用的)。(网页端的边栏设计)(网页端的边栏设计)如果你的应用页面有大量同级的『纸张』,你可以加入边选栏或者侧边栏来管理这些复杂的 List,但是这是需要一点学习成本的,因为它们不是一打开就能看到。当然如果是在平板或者 PC 上看的话,可以做出一点小改变,比如工具栏可以长期在上面,而底栏未必出现。一般来说尺寸设计:(手机上)侧边导航栏宽度 = 屏幕宽度 - 应用栏高度;如果你的应用页面有大量同级的『纸张』,你可以加入边选栏或者侧边栏来管理这些复杂的 List,但是这是需要一点学习成本的,因为它们不是一打开就能看到。当然如果是在平板或者 PC 上看的话,可以做出一点小改变,比如工具栏可以长期在上面,而底栏未必出现。一般来说尺寸设计:(手机上)侧边导航栏宽度 = 屏幕宽度 - 应用栏高度;(在比较大的屏幕中,尽量不要频繁切换整个屏幕的界面,而是像下图示,两级页面都在一个屏幕上可以显示,这样可以使得逻辑清晰,不要让使用者迷路。)(在比较大的屏幕中,尽量不要频繁切换整个屏幕的界面,而是像下图示,两级页面都在一个屏幕上可以显示,这样可以使得逻辑清晰,不要让使用者迷路。)(另一种逻辑就是信息群,不要用分割线,而是多用卡片,这样平行关系更明确。如果要加入诸如工具栏等非平行关系的结构的话,利用浮动按钮和卡片让『越界』变得明显,如上图)(另一种逻辑就是信息群,不要用分割线,而是多用卡片,这样平行关系更明确。如果要加入诸如工具栏等非平行关系的结构的话,利用浮动按钮和卡片让『越界』变得明显,如上图)工具栏设计未必会限制得很死,有些情况它甚至能做出很大的变动,但是基本样式以及分级是务必十分明显的:当然,在 Material Design 里面其实这些工具栏也是有尺寸要求的,和之前的水平上的尺寸要求类似,工具栏和底栏边栏上,内容和空白可以自由去填补剩下没有硬性要求的部分:4.组件在点选一个项目的时候(比如一个人的联系方式),如果这个项目能操作的项目超过了 3 项,那么就务必要用到底部动作条这种『大工程』的控件了,普通的那种两个三个按钮的对话框没办法满足。当然也是有一定的尺寸标准的:按钮是 Material Design 里面的一个非常重要的部件,不可以把它当成纯装饰元素,当然按钮分为『圆形 Icon 式』FAB 和『有背景色 Raised /无背景色 Flat 文字的普通按钮』,虽然点击后都有涟漪效果,但是三者功能完全不一样:按钮是 Material Design 里面的一个非常重要的部件,不可以把它当成纯装饰元素,当然按钮分为『圆形 Icon 式』FAB 和『有背景色 Raised /无背景色 Flat 文字的普通按钮』,虽然点击后都有涟漪效果,但是三者功能完全不一样:这三者的选用一般是基于图层高低来确定的,还记得我之前的那个图吧?仔细想想你需要赋予这个按钮在哪个 3D 图层、有什么功能(要准备推拉和弹出一堆同一个图层信息的就用 FAB、连续一片的卡片式或者接缝式的图层上一般就用 Raised、一堆文字对话框伴随的一般就是 Flat),然后就你知道应该用什么按钮了。另外按钮的位置也是有尺寸标准:仔细想想你需要赋予这个按钮在哪个 3D 图层、有什么功能(要准备推拉和弹出一堆同一个图层信息的就用 FAB、连续一片的卡片式或者接缝式的图层上一般就用 Raised、一堆文字对话框伴随的一般就是 Flat),然后就你知道应该用什么按钮了。另外按钮的位置也是有尺寸标准:(这种情况只能用无背景文字按钮 Flat)(这种情况只能用无背景文字按钮 Flat)关于按钮的动作,在每一步上它的颜色都是不一样的,一般来说参数如下关于按钮的动作,在每一步上它的颜色都是不一样的,一般来说参数如下Raised Dark/Dark Color 最小宽度: 88 dp, 高度: 36 do 正常状态: Color 500, 覆盖状态: Color 600, 点击状态: Color 700,不可用状态: 10% #ccc遇到特殊页面,按钮的界限有点模糊,形状也可以有变化,但是响应面积依然要注意;遇到特殊页面,按钮的界限有点模糊,形状也可以有变化,但是响应面积依然要注意;在 Material Design 里面的下拉菜单有一个非常重要的注意点,就是不能把之前的图层切断,所以只能在边缘部分往下面展开,如上图;在 Material Design 里面的下拉菜单有一个非常重要的注意点,就是不能把之前的图层切断,所以只能在边缘部分往下面展开,如上图;下拉菜单也有几种,一种常规的就是什么都不显示,第二种就是有默认选项和下拉按钮,第三种是有默认值和下拉按钮而且还能自己编辑,他们也是有响应动作的。多种选项和下拉菜单连在一起的时候也有版式要求,如上图。下拉菜单也有几种,一种常规的就是什么都不显示,第二种就是有默认选项和下拉按钮,第三种是有默认值和下拉按钮而且还能自己编辑,他们也是有响应动作的。多种选项和下拉菜单连在一起的时候也有版式要求,如上图。和大家想象的不一样就是在 Materila 里面的卡片其实还是有小小的拟物化的,圆角和阴影是必备要素。卡片的内容类型都可以不一样,而且还能互动,例如添加评论点赞之类,但是不宜过多,表示出它的基本功能即可(控制在两项以内)。和大家想象的不一样就是在 Materila 里面的卡片其实还是有小小的拟物化的,圆角和阴影是必备要素。卡片的内容类型都可以不一样,而且还能互动,例如添加评论点赞之类,但是不宜过多,表示出它的基本功能即可(控制在两项以内)。网格设计展示图片和文字必须简洁明了,编排禁止混乱和滥用阴影。千万不要在图片下面加入分散注意力的部件,如下:在布局上,也是有一定讲究,比如:字体设计正文:14 sp 或 16 sp标题:24 sp 或更大扁平按钮:Roboto Medium, 14 sp, 10 sp 字间距移动设备上的卡片间距屏幕边界与卡片间留白:8 dp卡片间留白:8 dp内容留白16 dp和这种卡片有点类似的就是纸片。所谓纸片就是包含一张图片,一个短字符串(必要时可能被截取的字符串),或者是其它的一些与实体对象有关的简洁的信息的小卡片,如上图。这种提示框一般用于警告,偶尔用于输入 WIFI 密码之类的。之前在按钮里面有说过一下,其实和文本有点类似,也有标题和正文之类的。涉及到操作的时候,一般在固定高度的提示框里面,注意一下有滚动条时候,哪些元素是不能够和滚动条一起动的。这种提示框一般用于警告,偶尔用于输入 WIFI 密码之类的。之前在按钮里面有说过一下,其实和文本有点类似,也有标题和正文之类的。涉及到操作的时候,一般在固定高度的提示框里面,注意一下有滚动条时候,哪些元素是不能够和滚动条一起动的。分割线也是 Material 组成要素。不需要每次都处理成等屏宽,尤其是比较密集的时候,需要一些缩进留出空白,另外给点文字提示也有助于信息筛选:分割线也是 Material 组成要素。不需要每次都处理成等屏宽,尤其是比较密集的时候,需要一些缩进留出空白,另外给点文字提示也有助于信息筛选:网格一般用于存储同类内容,处理办法和卡片类似但是有点不同,比如它完全不需要拟物化的圆角和阴影。有时候你要在上面加入可用的控件和文字,那么处理方式和卡片基本一样。网格一般用于存储同类内容,处理办法和卡片类似但是有点不同,比如它完全不需要拟物化的圆角和阴影。有时候你要在上面加入可用的控件和文字,那么处理方式和卡片基本一样。Material 的列表控件里面,一般有非常明显的主次之分:Material 的列表控件里面,一般有非常明显的主次之分:每一类(比如图标)千万不要放在一起使用,比如头像和复选框,选择那个是首选哪个只是视觉辅助。比如下面这种排版,根据情况是头像重要还是选项重要,决定后,二选一:遇到折叠的时候,就按照分隔线情况处理。滑动式删除这种行为可以两边滑动都做到支持:遇到折叠的时候,就按照分隔线情况处理。滑动式删除这种行为可以两边滑动都做到支持:菜单设计一般在靠下面或者直接在上面出现,并且顶对齐原来的选框,然后比例也保持一致。多级菜单的时候也是一样的处理。动态上,还记得之前的中心点开吧?菜单设计一般在靠下面或者直接在上面出现,并且顶对齐原来的选框,然后比例也保持一致。多级菜单的时候也是一样的处理。动态上,还记得之前的中心点开吧?进度条有几种,包活线形的还有圆形的,以及确定的和不确定的。『要用户没有目标的白等是不道德的』有时候加载『实时』的消息,类似各种 SNS 的下拉刷新,需要一些比较有创意的加载方式,比如卡片底部 + 指示器;(这种加载办法比较传统)(这种加载办法比较传统)对于一些特殊的还带有数值和和缩略图的滑块,对于一些特殊的还带有数值和和缩略图的滑块,Snackbar,也可以理解为小型弹出框,屏幕上同时最多只能现实一个 Snackbar。还有一种类似的,胶囊状的提示框 Toast,不含操作也不能关闭。他们都有规定就是务必要非常简洁,不能出现过多两个控件、图标这种干扰,纯文字。也不能遮住界面元素,只能在底部出现。在普通场合,以及有栅格排列的界面中,副标题应该如上处理。在普通场合,以及有栅格排列的界面中,副标题应该如上处理。关于选择框和开关,除了和之前说的一样要涟漪等物理效果和满足版式要求以外,这里涟漪一般要扩大更大的范围。关于选择框和开关,除了和之前说的一样要涟漪等物理效果和满足版式要求以外,这里涟漪一般要扩大更大的范围。Tabs 是一种节省空间的做法, 并且可以便于空间分组管理。但是前提是,不能把它当成高级别的内容切换。放在地图上它就只能区别交通工具(所以它展开的起点终点会一直保持不变),但是绝对不能用来切换成设置,这样逻辑会变得很混乱:(这也是不可取的,因为 ALL 和 CAMERA 的关系会让人引起误会)(这也是不可取的,因为 ALL 和 CAMERA 的关系会让人引起误会)不同风格和样式的文字或者 Icon 也是不能放在同一行的 Tab 里面的。如果出现复杂的 Tabs 或者空间不够用,那可以加入滚动效果:不同风格和样式的文字或者 Icon 也是不能放在同一行的 Tab 里面的。如果出现复杂的 Tabs 或者空间不够用,那可以加入滚动效果:至于动画,参考之前的涟漪。至于动画,参考之前的涟漪。文本框基本没啥说的,就是一些样式而已。倒是在 Material Design 里面,出现了『隐藏』的小标志,你可以点击然后回到字符开头。这个很创新:提示的颜色在字数还有不同剩余的时候也有提示:工具提示只需要文字和必要信息即可,框也不需要多余的箭头。工具提示只需要文字和必要信息即可,框也不需要多余的箭头。5.部分交互模式选取工具:在选取文字后,弹出来的工具框必须全部大写。选取工具:在选取文字后,弹出来的工具框必须全部大写。手势是智能手机交互的最精髓,可以分为两大类,触发动作(比如轻触点击)和触发行为(比如双击放大、拖曳)。这部分没有什么设计要素要讲,基本上都是交互要素。关于圆形按钮 FAB 一直都是这个 Material 经常被人设计时候玩坏的点。除了同一个界面里面不要出现多个圆形按钮以外,就是种类也不能混淆。这种就是典型不同类的搭配会让人很不舒服。这种就是典型不同类的搭配会让人很不舒服。另外,有歧义的,有破坏性(比如剪切删除禁止之类)的 Icon 不适合做圆形按钮。还有始终要用圆形,禁止其他形状。也严禁过于拟物化:另外,有歧义的,有破坏性(比如剪切删除禁止之类)的 Icon 不适合做圆形按钮。还有始终要用圆形,禁止其他形状。也严禁过于拟物化:(无比滑稽的设计)(无比滑稽的设计)而且它的位置通常在接壤接缝处,不能孤魂野鬼的出现或者被干扰的状态下出现:关于设置,一般都会放在每个 App 中的工具栏中,而比较少使用『集中』在设置 App 中。还有一个容易经常被人混淆的就是什么叫设置?关于设置,一般都会放在每个 App 中的工具栏中,而比较少使用『集中』在设置 App 中。还有一个容易经常被人混淆的就是什么叫设置?这确实是一个用户偏好吗?信息和操作不是一个用户偏好。如果不是用户偏好,就不要把它当做一个设置。如果它是应用的静态信息(比如版本号、服务条款、开源证书),将它组织到一个帮助页面里。如果它是一个操作(比如刷新、切换账号),在你的应用的主要流程中为它找一个合适的位置。这个选项经常被用户更改吗?用户每次访问这个选项要多次操作会觉得负担重吗?如果是这样,不要把它作为一个设置。可以通过把它放在工具栏或者更多操作(action overflow)中,让这个控制更容易使用。只有少于20%的用户改变这个设置的值吗?如果是这样,不要将它作为一个设置。不管是新的还是本来就有的设置,都应该问这些同样的问题。对于已经存在的设置,最后一个问题应该多考虑一些:如果这个设置项被移除了,这会对那些不再能改变这一设置项的少数用户造成危害吗?如果会,或者你不清楚,那么合适的做法是将它作为一个设置项保留。其实即便你只是个做视觉的,也务必要注意这个问题,因为直接影响用户体验。图片的载入也有一些小细节值得考虑,其实可以从下面三个维度加载:(与视觉设计关系不大,暂且不详谈)图片的载入也有一些小细节值得考虑,其实可以从下面三个维度加载:(与视觉设计关系不大,暂且不详谈)一般来说搜索列出历史搜索、自动补全和附带语音功能能让搜索体验更美好。而开始输入后也要及时改变控件,比如『清除文本』这些。以上的界面为『持续性搜索』,下面这种叫做『可拓展搜索』(你可以理解为:本来主业是工具栏,偶尔客串当搜索框)。一般来说搜索列出历史搜索、自动补全和附带语音功能能让搜索体验更美好。而开始输入后也要及时改变控件,比如『清除文本』这些。以上的界面为『持续性搜索』,下面这种叫做『可拓展搜索』(你可以理解为:本来主业是工具栏,偶尔客串当搜索框)。6.可达性 | 普适性一个产品,如果对于任何人(无论能力)而言,都是非常容易掌握、理解并可以用之来完成他们的目标的话,那么这个产品就是『可达』的。其实这个再通俗说,比如你的用户是有身体机能障碍的,请问你如何改变设计?当然更多时候这一点更像是如何引导视觉走向,降低识别的错误(比方从像素大小和对比度以及 ICON 设计入手),还有就是减少学习成本。
欢迎给我的翻译拍砖
Material Design发布至今几近3个月,但现在谈论对其的理解似乎仍然有点早,毕竟连Android L都还没有正式发布。我尝试从『界面模型』的角度去谈论Material Design。文章的铺垫有点长,已经熟悉Material Design的读者可以跳过『有意义的动效』、『阴影与层次』、『Floating Action Button』3个小节。##材质设计Google刚发布Material Design的时候,很多人在讨论应该如何将这一种全新的设计风格翻译成中文。比较受欢迎的翻译有原质设计、要素设计、本质设计等等——人们强调了Material Design对事物本质的探求,并且认为Material Design不仅是指导了设计表现本身,还指导了较为宏观的设计理念。而当我们逐渐深入了解Material Design后,我们会发现其实最恰当的翻译可能就是最直观最简单的那个:材质设计。因为Material Design其实就是在设计一种材质——这种材质与其附加的元素构造了一个潜藏在玻璃板后面的微型世界。这种材质也许可以叫Magical Paper;它的附加元素则可以叫Magical Ink。纸和墨的隐喻在Material Design中贯穿始末,并且被赋予了带有魔法色彩的特性。The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.若要往深处探讨,我们得温习一下Material Design的一些特点。##有意义的动效Motion in the world of material design is not only beautiful, it builds meaning about the spatial relationships, functionality, and intention of the system.在Material Design的世界里,物体的运动曲线效仿了我们的现实世界,从而使得动画效果符合物理规律或者说人们的认知经验。突然开始运动或突然结束运动的动效显得生硬而不自然,背离了用户的预期,更无法取悦用户。有意义的动效不仅包括了力与运动的真实性,还包括触摸涟漪效果、连贯而富有层次的转场、令人愉悦的变换细节等等。##阴影与层次在Material Design中,应用界面的每一颗像素都是排列在轻薄的卡片上的。可见Android对卡片式设计爱得真切。其实在Material Design之前,卡片这一内容载体早已被广泛运用在Google自家的应用上了(尤其是Google Now)。卡片之间可以以接缝的形式组合(这样它们将一起移动),也可以有前后的层级关系(两者彼此独立地移动)。而阴影则是从视觉上表现层级关系的元素。阴影包括两层:顶部阴影是为了打造深度感,底部阴影是为了提升清晰度。在新的设计规范中,Google甚至给出了各种部件的5个层次的阴影设置数据。##Floating Action ButtonFAB(浮动操作按钮)对于Material Design来说就像是一首歌里面的Hook——它终将成为一个标志。浮动操作按钮在界面中通常是一个漂浮在顶层的小圆圈(因此会有非常张扬的外阴影),可以作为添加、编辑、喜欢、分享、搜索等按钮出现;它有自身独特的动态效果,比如变形、弹出、位移等等。相信很多人会想起Path的扇形菜单,不过,虽然它们很像,并且都很有趣,但是至少在设计理念上它们是两回事。##材质的性质关于Material Design更详细的描述,可以参阅Google的官方文档。接下来我们将继续讨论材质与其附加的元素。Magical Paper和Magical Ink并非官方的称呼。事实上,在官方的设计规范中我们甚至找不到对这种材质的称呼。The Verge称Google的设计师们一直都拒绝为这种虚拟材质命名——这个决定给予了他们更多的灵活性并且为其增添了一份神秘感。不过在访谈中,Matias Duarte(Android设计总监,曾主导设计WebOS)形容他们设计的材质时使用了一个非常贴切的词:Magical。先不论Magical Paper这个名字如何,为了便于指意我们暂且用着。从目前的设计规范中,我们大抵可以推断出Magical Paper的一些性质:Magical Paper是不透明的。这一点使得Android L明显区分于偏爱毛玻璃的iOS 7。Material Design使用了更接近生活经验的阴影来呈现层级关系。Magical Paper可用于打印并且能迅速抹去墨迹。内容(文字、图片、图标等)将打印在Magical Paper上,但随时会被抹去或替换。显然,真实的纸做不到这一点。Magical Paper能扩张也能收缩。也就是说,在二维空间中,Magical Paper能自由地伸缩。扩张能让一张Magical Paper出现,收缩能让一张Magical Paper消失。Magical Paper自身的运动符合牛顿第二运动定律。从最终效果来看,每一张Magical Paper的运动都会显得非常自然,例如随处可见的缓动效果。另外我们可以从触摸涟漪效果中了解Magical Ink:它能在Magical Paper上迅速扩散,而取决于『笔触』(程序的设定)的差异,它可能会蔓延到整张Magical Paper,也可能只是在作用点周围形成小小的涟漪。了解材质的性质能帮助我们更好地了解Material Design,就像了解人性能帮助我们更好地了解社会。不过可能Google自己也还没有非常充分地认识到Material Design需要什么样的材质,所以他们没有过多地强调材质本身(包括拒绝为其命名),而把更多的描述布置在材质的实际表现上。这兴许是个明智之举,因为可以预见到,Material Design还会经过长期的调整,而目前保守的设定能给予未来更大的自由度。尽管如此,我们仍能窥见Material Design在界面设计领域所作出的革新式突破。##玻璃后面是什么?第一次看到Material Design时,我有按捺不住的感动。上一次有同样的感觉是在2013年秋天的一个凌晨,当Apple推出iOS 7的时候。上一次,是因为我觉得自己看到了界面设计的未来;而这一次,是因为我觉得自己看到了界面设计的本源——以至于我突然发觉iOS 7是个半成品。iOS 7在视觉上有着质的突破,甚至可以说是iOS 7掀起了扁平化的潮流。记忆力不差的人应该都还能想起当时全民吐槽的壮观景象,当然也还会记得不久之后全民便开始黑转粉。不得不说,Apple是一家深谙时尚之道的公司,他们知道什么终将改变,而什么是应该至死不渝的。然而遗憾的是,iOS 7迈开的步子已经很大,导致还有一件非常重要的事情不得不被搁置到下一步(本来以为iOS 8会开始思考这个问题,可惜没有)。结果Google先做了。When you swiped one away, what was underneath?Google的设计团队在一次讨论中提到了这样一个问题:当你把一张卡片移走,下面是什么?这个问题帮助他们找到了一种全新的看待界面元素的角度,然后开始思考一个更为本质的问题:玻璃后面是什么?Material Design就是Matias Duarte的团队给出的回答。##建造一个模型Material Design的最动人之处其实不在于设计了一种虚拟材质,而在于依据该材质建造了一个模型,一个存在于手机玻璃面板乃至其他所有屏幕后面的模型。这是为什么我认为Android L要比iOS 7更加高明。要知道,iOS 7的核心是焕然一新的视觉元素,包括字体、色彩、图标、动画等等。细想之后你会发现,iOS 7的本质与其他操作系统并无不同,都是设法通过界面元素的视觉效果、交互细节来提升用户体验。这样似乎已经足够,毕竟不断地迭代能让最终的成果越来越细腻。但是我们常常忽略了一个问题,那就是用户与软件界面之间的隔阂。这种隔阂并非用户初次使用产品时难以避免的生疏感;这种隔阂无法通过用户学习或者功能可视化来消除;这种隔阂就像是人类与外星文明之间的尴尬处境——我即使认识你,也无法理解你。由于隔阂的存在,界面中发生的一切动作似乎都是难以预料的(Matias Duarte将其比喻成电影或电视里的镜头切换),用户所能做的往往只有被动地接受——这一状况太过普遍以至于没有人会为此抱怨。而Material Design试图赋予软件以完整的世界观来解决这个问题。在Material Design的模型里,软件的材质是Magical Paper;物体的运动符合一定的物理定律;每一个应用都有独立的空间并且与其他应用互不干涉;页面中发生的动作往往具有时间层次感;页面间的转场会有最大程度的连贯性(有点像Keynote里的Magic Move动效)——这些特征之间有机地结合,搭建起一个空旷却稳固的模型框架。往框架里填充细节(字体、色彩、版式等)将使得这个新生的模型不断生长。然而这个模型能给我们带来什么?人有建造模型的天赋;人总是试图通过建造模型去理解世界。哪怕是你学习踩自行车的时候,你也是在通过不断地试错来概括出最恰当的模型。其实现有的包括iOS 7在内的用户界面并非无法被概括成模型,问题只在于这些模型通常过于低级,无法满足日渐庞大而复杂的软件生态系统的要求。而Material Design的模型是空前的具体,能让用户更快地建造起一个软件的模型,从而『站在更高处』掌控整个软件。最直接的影响包括你总能知道自己是如何来到新的页面的,总不会在空间上迷失,总能知道永远不会发生违背模型的事情。而对于开发者来讲,倘若你的大脑已经建立起Material Design的模型,你在评判一个转场动画时,可能不再是『这个不符合Android设计规范的某某章的某某条』,而是『它看起来不对劲』。就如同人们看到一颗悬空的石头后的第一反应不是『这不符合万有引力定律』而是『咦,这有点奇怪』。这听上去特别有意思。##Material Design的未来目前Material Design还处于婴儿期,也就是说,Material Design的未来充满了未知。Google的设计美学在近几年日趋成熟,令人不得不刮目相待。但愿Google有足够的魄力去推动Material Design的成长。也许Material Design就是下一个施乐Parc。Google自家的一系列应用已经开始陆续换上Material Design的新装,包括Google Docs、Google+等。而Evernote似乎是第一个尝鲜的大牌第三方APP,虽然在风格上贯彻得并不彻底,但那个可爱的绿色FAB已经值得把玩了。--------------------------------------------------------------推荐观看The Verge对Matias Duarte的采访:
下面有7个短视频,时间大概为5-10分钟,分别从不同的角度谈了一下对material design的看法。然后在本文的后面,也准备了一篇文章,算是对视频内容的总结,所以也可以直接跳到后面看这篇文章。一、《物体的基本单位》
by 空夕Material design这样一种设计语言只是设计语言本身演化的一个阶段,我们可以看一看稍微长一些的历史,以及歪歪一下未来。二、《无限二维平面空间与窗口》
by 今敏由于界面本身可以当做是人观看软件世界的一个窗口,现在的material design对于的设计语言便是设计师对软件世界这么一个无限二维平面的思考。三、《信息的介质》by 平四Material design其实最牛逼的地方在于它取了一个牛逼的名字——“material”这么一个完全不指代任何具体事物的中立称呼,这套设计语言是对信息介质发展的一种思考。四、《平衡在具象和抽象之间》by 龙襄Material Design既是具象的,又是抽象的,具象在于动效,抽象在于样式,而更加重要的是,在二者之间获得一个平衡,达到人机合一。 五、《隐喻》by 晴苍设计是对符号系统加工的过程,面对陌生的事物的时候,需要使用隐喻的手法来帮助用户去理解,而当用户熟悉以后,原本需要隐喻的东西也可以去描绘以后更加陌生抽象的新事物。六、《抽象艺术》by 玥白Material design看似走向了抽象,但是艺术本身何曾不是如此——从古典写实绘画到现代抽象艺术,抽象并非没有意义,相反它可以包含更加纯粹的理念和表达。七、《感受的维度》by 方田界面能够给人一种感受,让你感觉到速度、空间感、时间变化、质感甚至是情绪等,这一次,material design从新的角度,表达了感受的不同维度。
过去 Google 的产品线,每一个都相当的独立,在产品的设计上反映得尤为明显,甚至不必看产品设计,只要看一下 Google 每款产品的 LOGO 都能发现许多不同风格的设计。这种混乱难以体现出 Google 的风格,如果 Google 的风格就是混乱和无序的话。2011 年,拉里·佩奇成为 Google CEO 之后,他管理公司的政策从过去的自由、放任,变为紧密、整合。在 Google 发展的早期,因为鼓励观点的碰撞,结果发展成一种不留情面的争论氛围,高管之间冲突不断,甚至会拒绝合作。佩奇决心要改变公司的氛围,2013 年 2 月,在纳帕山谷的卡内罗斯客栈酒店里,他对所有 Google 高管说,Google 要实现 10 倍的发展速度,要用全新的方法来解决问题,因此高管之间要学会合作。从现在开始,Google 要对争斗零容忍。除了 Google 不同产品线相互之间变得更加开放、合作外,佩奇还大胆改变 Google “以工程师为主导”的文化。2011 年,公司启动代号为的项目,召集公司里所有重要的设计师,重新设计 Google 里的每一项产品,寻找一种共同的设计语言。最终他们找到跨产品的设计是“卡片式设计”。不仅如此,2012 年,佩奇大胆地作出一项决定,让设计师参与到早期产品的设计开发中,这项产品是现在我们看到的 Google Now——一项典型采用卡片式设计的跨设备产品,从 Android 到 Chrome,它的表现都几乎一致。可以这么说,从 Google Now 上,Google 的设计师们通过整合 Google 现有的技术和能力,再加上对跨设备界面与交互思考,结合卡片式设计,终于设计出在不同设备上界面和体验都相对统一的产品。而现在这种跨界的设计经验,经过两年的努力,复用在一致饱受割裂、碎片化困扰的 Android 平台上。Android 一开始充满着旧 Google 时代的风格:自由、放任。开发者可以任意上传自己的应用,而不必通过审核;开发者可以随意按照自己的想法设计应用,Google 方面不予任何限制。可以说,Android 一开始就是一片 Google 开辟的荒地,他允许每个人都可以随意使用,结果是所有人都各行其是,让这块荒地乱糟糟的。直到 Android 4.0,从 Palm 跳槽到 Google 担任 Android 用户体验副总裁的马蒂亚斯·杜瓦迪(Matias Duarte)上任后,才真正提出设计指导。而 Google I/O 2014 上着重展示的 Material Design,以非常高调的方式,宣布了 Google Design 的存在:不欣赏设计,对设计毫无感觉的 Google 已是昨日。在发布会当时,Google 还上线名为 Google Design 的网站。从 Android 到衍生的 Android Wear、Auto 和 TV,Material Design 贯穿其中,成为沟通不同平台、设备的灵魂,让用户在不同平台上也有连贯的体验。为了维护这种一致性,Google 甚至不允许第三方修改 Android Wear、Auto 和 TV 的界面以及交互,十分强势。Material Design 不能简单地归纳为平面化设计(Flat Design)。实际上,Android 4.0 的设计风格,也不是纯粹的平面化设计,在经过仔细观察之下,我们可以看到 Android 4.0 在细节上并没有反对高光、阴影、纹理,换言之它并不反对立体感。不过,它也不能归类为拟物化设计,毕竟它所是用的图案、形状并非是对现实实体的模拟,而是按照自己对数字世界的理解,以色彩、图案、形状进行视觉信息上的划分。根据 Hi-iD 之前在中总结设计当中不同的层次,以 Google 过去各个产品而言,都充满了不同的花样和形式,但无法统一为一种风格。而现在,Material Design 则结合卡片式设计,又结合现实世界里纸张的隐喻,统一了 Google 在设计上的表达,从而展示出一种强烈的风格。这种风格不会因为我们使用 Android Wear 或 Android TV 等不同的设备,而感到不同。Hi-iD 说得好,“风格既是自我表达也是一种记名和品牌”。Material Design 在设计上并没有完全抛弃 Google 过去在设计上取得的成果。Material Design 和 Google 的标志一样,崇尚多彩,但它并不使用那种很艳丽的颜色,反而似乎是为了让图案变得沉稳,而有意令原本很晃眼的色彩混入一点点的灰色,让图案变得活泼之余,又不会因为过于艳丽而让人感觉到俗套和嬉皮。它也没有抛弃阴影,仔细观察 Android 4.0 的下拉菜单,我们可以看到底部和右侧有着淡淡的阴影。不过,比起过去的 Andorid Design 来说,Material Design 更有自己的目标,它不仅仅为了好看而已,它要让不同设备的屏幕上表现出一致、美观的视觉体验以及交互。根据 InfoQ 报道,2014 年 4 月 Accel Design 大会期间,提出,“作为一个概念,移动已死,它完蛋了。”他的意思是说,“将用于移动设备的应用程序作为单独的应用程序自行设计是一个错误的做法。”杜瓦迪说,“不应该为不同的屏幕规格创建不同的产品,而是使用一种统一的设计方法开发一款可以跨多种屏幕的产品:桌面、智能手机、车载解决方案、智能手表。当人们整天都在所有这些不同的屏幕之间切换时,他们应该能够继续使用一个特定的程序。这点不仅适用于产品的视觉外观,也适用于其功能集。如果一个人开发了一个打车应用程序,而它能在 7 英寸的屏幕上运行,但不能在 2 英寸的屏幕上运行,这是不行的。”为了统一跨设备间的界面和交互,让用户得到连贯的体验。Material Design 不再让像素处于同一个平面,而是让它们按照规则处于空间当中,具备不同的维度。按照 ,那就是让像素具备海拔高度,这样子的话,系统的不同层面的元素,都是有原则、可预测的,不让用户感到无所适从,也避免开发者担心因为不同的视觉风格而产生冲突。Material Design 还规范了 Android 的运动元素,让按钮的弹入弹出,卡片的滑入滑出以及从一个界面变化成另一个界面的方法(比如从介绍一首歌的界面到控制播放的界面),都是秩序的、深思熟虑过的。Wired 总结,Material Design 中只有在高亮动作以及改变交互状态时,才会使用运动元素来表示。对于现实世界中的隐喻,Material Design 更加倾向于用色彩来提示。现在我们按下屏幕当中的按钮时,可以看到按钮颜色迅速发生变化,向石头投入湖面一样,产生了一波涟漪。杜瓦迪这样设计是因为 Material Design 中的按钮都处于一个平面,不再突起,因此它必须采用和以往不同的表示方法,以表明自己已经被按下。Material Design 所展示的模板当中,最显眼的是它的小圆点。它的作用好像 iPhone 上的 Home 键,能成为当前界面上最主要的功能按钮(感谢 vevan 的提醒),又是视觉上有趣的点缀。然而,正如 Material Design 名字所暗示的,为了适应多尺寸的屏幕,杜瓦迪以及他的团队,寻求一种更加抽象的表达,一种存在屏幕里的显示“材料”。根据 ,杜瓦迪团队在面对 Google 产品里大量采用的卡片式设计时,灵感火花一闪:何不如这些“卡片”,想像成现实当中存在的,四处滑动的物体。如果这些卡片遵循物理世界里的法则,那么它就有自己的规矩,不见得每个人都能够任意使用,对于设计师来说“限制”是有必要的。在 Google 设计师的想象中,这种抽象的“材料”特性很像纸张,但它又做到现实当中纸张做不到的事情,比如变大变小。这赋予这种“材料”极大的灵活性,让它足以适应不同尺寸的屏幕。然而,对于 Google 来说,Material Design 还将扩展到 Google 其它产品当中去,让所有产品都烙印上浓浓的 Google 风格。对于杜瓦迪来说,从 Android 4.0 到 Material Design,体现了他身为设计师的素质和能力,而在这不同的经历当中,他的感受是,“打造 Ice Cream 时,我好似军舰上的一名上校,被叫去轮机舱,而这艘船即将在 30 分钟后转弯。创造 Material Design 就像指挥太平洋舰队的海军上将。我们要在一无所知的情况下作出决定,而船在 48 小时后启航。”至于 Material Design 本身,它是一个足以媲美苹果设计的一套设计框架。
已经有团队在 GitHub 上以协同的方式完成了完整的中文翻译:
Material design 正如火如荼的被讨论着。
google plus 正是Material design 代表之一。 卡片设计是一种可以“适应”多平台的设计模式。为什么提到
google plus,
Material design ?
继续往下看。首先注意到我前面说到了 “适应” 两个字。适应原本应该属于生物才有的特征。 现在你看到的所有生物都是碰巧具备适应能力被自然选择下来。再仔细留意, 你会发现UI设计进化史里 , “适应” 这个词被越来越多的提到。比如 :“响应式设计” , “容错设计” , “以人为本”
等等。 到了这里我猜你的反应是:
“坑我吧,哪里有提到适应”。好的,我继续解释。 这些设计模式无外乎赋予设计对象以或多或少的“感知力”。
感知力即感知环境的能力。 响应式设计不就是让模块感知到所处环境(浏览器)的宽度高度么,以这些为参数输入,再调整自身的布局属性来适应这个环境。除了感知大的环境,当然还得感知附近兄弟模块同胞的属性。 容错设计不就是赋予模块感知用户是否犯错的能力么。举个我最想说的例子:
tmall的首页导航。
细心的你一定会发现要激活导航 鼠标必须停留超过200ms以上。 同样的要关闭2级导航, 鼠标必须离开超过200ms以上。
这个设计核心是为了避免用户的误操作。 对于面积较大并以 mouseover 触发的模块,做点延时可以避免误操作。 多么贴心。
mouseover、 mouseout 作为输入变量, 200ms是内置逻辑。 是否显示或隐藏则为输出的结果。以人为本, 也就是用户中心。 大多数设计书描述都比较感性,充满人文关怀的味道。 但另外一个角度来看,也无外乎是赋予软件或多或少的感知力。 感知用户的情绪, 感知用户使用场景。当我们以用户为中心设计时,必然会考虑到场景,而且会持续的细分。 将各种可能、概率结合经验或数据排列。 最终的结果无外乎就是一系列的程序判断逻辑。
越是细腻的设计,其中隐含的逻辑也通常越多。
设计师其实很累: “ 因为老子除了要关心你是在地铁使用我家产品,还得考虑是不是边上厕所边用,嗯,还有你那无数种姿势”。过去很长一段时间内我们一直在用这种场景枚举再丰富逻辑的方式在做设计。 效果也是不错的 ,你要相信那些然你不知觉中内心温暖的应用。背后是一堆设计师在亢奋的跳舞。小结:适应的本质是 主体去适应环境。
适应环境的先决条件是 主体要具备一定的“智能”。 能够察觉环境的变化,并以变化为变量输入,经过内置逻辑判断,最终输出适当的决策。
作业:尝试用 具备感知力的 模块 来解释
Material design 。提示:Material design 里种种动效,强调了 “自然” 符合直觉。
要自然要符合直觉的前提是你的模块要学习用户所认知的自然是什么。设计模式就是一套逻辑, 这套逻辑判断输入,并给予合适的输出。我认为 Material design 并不是终点, 因为他依然是基于经验堆叠的产出。很好奇未来的界面会是什么样子, 或许未来不存在界面。
有的只是信息流与脑细胞的直接碰撞。最后,即便未来所有界面终将消失。 但是用户依然喜欢那些善解人意的设计。 时不时的来点关怀吧,设计师们!
从2014 Google I/O大会的发布来看,Material Design=“材料设计”的全新设计语言,这是谷歌为了解决碎片化问题的重要举措,将统一包括手机、 平板、笔记本以及网页端设计风格。谷歌将提供设计中正确的角度以及合适的阴影,并告诉如何搭配按钮、线条以及色彩等。“调色板”功能,可以帮助开发者自动配置图片颜色以匹配其UI界面,Material Design主题支持新的动画效果、实时3D阴影显示以及其他多项新功能,简约的按钮、圆润的应用图标以及全新的系统字体。从信息了解到,第一:谷歌为了统一手机、平板、笔记本以及网页端设计风格推出的一种设计语言,主要原因就是现在Android系统在比较碎片化,虽然Android在4.0推出了交互规范,但各个终端厂商都没有去遵守,各个终端厂商的交互完全不一致,导致用户学习成本很多,对Android的品牌推广也不利第二:谷歌将提供设计中正确的角度以及合适的阴影,并告诉如何搭配按钮、线条以及色彩等,从描述中来看,从角度、颜色色彩、按钮搭配都会提供,可以给设计师带来很大的工作简化,对刚入门的设计师来说,调试非常方便;第三:“调色板”功能,可以帮助开发者自动配置图片颜色以匹配其UI界面,如果在视觉不是特别要求高,程序员可能就可以搞定,但在另一个问题上来讲,各个厂商为了差异化,对UI视觉师的要求可能就越高了;第四:Material Design主题支持新的动画效果、实时3D阴影显示以及其他多项新功能,简约的按钮、圆润的应用图标以及全新的系统字体,在图形方面有很大改进,玩游戏、播放视频带来的体验会更加有趣,UI风格的改变,简约的按钮和圆润的应用图标,应该是往扁平化发展,简约的风格看来会越来越流行从Android的大版本演进来看,UI风格的变化,以及软件架构的变化,永远是占据着重要地位,Material Design设计语言的诞生也合乎情理
2008年,Steve Jobs站在巨大的投影墙前,拿起一个黑色的屏幕,他在上面轻轻一划,所有的元素随之舞动,真实世界的元素,书籍,唱片,日记本似乎被缩小进了那个小小放着荧光的黑匣子里。现在,我们说phone开创了移动互联网的新纪元,而它作为载体,也把拟物化这一设计风格推向了巅峰。
Jobs说,你想要书,它就是一本书,你想要听音乐,它就是黑胶唱片,这就是拟物化风格的基础,即真实的描摹世界。
话音犹存,而时间飞逝,转眼过了6年, Matias Duarte(google design vice president)在2014 io上发布了google 新的设计语言,Material Design 。Google雄心薄薄,希望能用这套新的设计语言统一所有的安卓系统,包括手机,电脑,平板以及车载和可穿戴设备。这套语言看上去比以往的任何时候都更加扁平,随处可见的大色块,细线条,抽象的描绘和流畅的动画。如果你刚从2008年乘坐时光机回来,可能会对这种新语言适应不良,但事实上,不仅是google,2010年伊始,flat ui就已经大行其道,微软发布的matro design,仅用字体,动画与色块来表明信息内容;之后的一年,2011年10月,google发布Android 4.0系统,采用了扁平化的设计风格,而到了2013年,一直坚守拟物化风格的IOS也放弃了原先的方案,jonathan Ive(Senior Vice President Design,Apple Inc)在ios7里面做了大刀阔斧的改革,以纯粹色彩,纤细字体和简洁线条的图标彻底告别了scott forstall 时代的的阴影和玻璃高光效果。同时大量运用毛玻璃,利用其透露出的朦胧光影来构成ios7扁平化的设计风格。
这一切,都似乎在表明,设计风格已经与拟物化越走越远了。但是,这一切是如何发生的?还是回到Material Design,我们来看看它究竟在传递什么信息。1、什么是Material Design?
从字面来说,就是材料设计。听上去像是一个工程研究的课题,事实上,除去视觉元素的更新,Material Design最大的意义是定义了交互方式应该遵循的规范。它在尽可能的还原人与现实世界交互的方式,遵循的是宏观低速状态下的牛顿力学定律,即我们每天生活的真实世界的物理定律,当一个物体在没有外力作用下,保持静止或匀速运动。
第一次,交互方式有了可遵循的规范,无论是事件的点击反馈,还是页面的切换,图片的翻转,都应该遵循力学定律。
这是更深层次的拟物化,即交互方式的拟物化。过去我们随处可见的混乱交互体验,突然消失的页面,凭空出现的警告,从四面八方涌入的元素,相互矛盾的阴影方向和高光效果等等,都将在Material Design中得到规范。
它们看似只是设计的一些小细节,但的确给用户造成了极大的干扰,因为用户无法预知,他的行为会产生什么后果。试想一下,如果你要走路,第一步在地球引力规范下,稳稳落在地面,第二步却像阿姆斯特朗踏上月球一样高高跳起,会是一种什么样的感觉。绝对会让人无从下脚。如果你身处的世界是这样无序和没有规律的,那么我们就无法积累经验,认识和理解世界。
反过来说,如果用户和设计师认为一定的交互行为必将导致相应的结果,那么就可以减少引导和降低误读。我们在做产品设计时,无法绕过一个问题就是用户引导,每个人心中都有一个哈姆雷特,如果你追踪用户行为路径,会发现不同用户的使用轨迹也是完全不同的。而这些轨迹,和设计师预先设计的往往出入甚大,也就照成了大量的误读,中断和干扰。将产品的意图准确的传递给用户,满足用户需求,是我们在设计产品时最重要的目标。作为设计师,某种意义上,我们的任务就是让世界看起来更加有序。2、Material Design的三原则
虽然Material Design在视觉上是高度抽象和扁平的,但目的却是要让用户相信,在此发生的一切行为和元素都是有例可循,有理可依的,即Matias Duarte所谓的“触觉现实”,有以下三条原则:1)事物实体的隐喻;首先要赋予虚拟物体真实的物理属性,如体积,重量,速度等,把客观世界的物理规律引入其中,来体现不同的触感反馈,并以此为基础帮助用户构建事物的意识。其中,方法的关键在于灵活运用材质,光效,表面触感和运动方式为用户提供视觉线索和使用体验,利用熟悉的万事万物,塑造用户在移动设备上共通的触觉体验心理模型。(更有意思的是,也许随着科技的发展,屏幕本身可以提供更丰富的触感体验。) 2)醒目,形象和深思熟虑;Material Design的设计语言,是对传统平面设计元素的提取和学习。通过对如字体,版式,网格体系,空间层次和比例配色等视觉元素的精雕细琢,为用户提供更加易读,醒目,生动形象的使用界面,即视觉引导操作。 3)动画效果指示意义:我们的视觉总会追随物体的运动轨迹,因此,动态事物可以有效的暗示,引导用户。通过动画效果的变化,把物体的状态以更加连续和连贯的方式呈现给用户,吸引用户的注意力,让用户充分理解物体的变化和意义。
Google雄心勃勃,希望用一套统一的经过实践验证的优秀设计准则,为安卓所有终端产品的用户提供一致的体验,安卓系统最受诟病的碎片化正在悄然发生改变。
此外,Material Design为设计师和开发者提供了异常丰富的内容,可以说是设计师进阶范本,作为移动产品设计一员的我们,除了关注视觉元素的变化,还要关注设计思潮的变化,并应用到我们的设计中去。交互层的拟物化,建立触觉现实,拓展了设计的维度和空间,必将影响深远。
这不是一个聊胜于无的“设计方向”,这是一个“有”远远胜于“无”的统一。如果说之前谷歌一直不重视设计,没能统一规则是错的话,那么这错误同时就是带来了安卓的广度,就像这些时间谷歌还不算强到有完全的话语权,实际上是谷歌这种吃大鱼的风范,决定了谷歌开始时还不能那样强势。为什么之前一直不,而现在才提出设计理念?设计这种东西,因为显得不那么实实在在,所以绝对是强者玩儿东西,这里强者指真的强和还不算真的强两种,对应苹果的现在和早期。material design第一次直接彰显了谷歌在安卓上的强势气焰。
周末仔细看了下 Google 发布的设计文档,也看了大家的回答,在这里聊聊我自己的解读和零散想法,以作补充。Material,新世界的光我们该如何理解 Material?拟物?扁平?还是从扁平往拟物的回望?不。或许我们需要跳出拟物和扁平,Material Design,这是另一个世界。回顾拟物和扁平,我认为它们仍然基于现实世界的纬度,前者是对现实世界的临摹,后者是抽象。对比拟物和「扁平」最有代表性的进化——iOS 6 到 iOS 7,我们都知道 iOS 7 减少了装饰、重新梳理空间层次、并建立了空间纵深。一言以蔽之,iOS 7 是对 iOS 之前已建立现实体验的抽象重塑,是 revolution。那么 Material Design 会在哪里?Material Design 是「神说,要有光」,就有了 material。它想做的或许比拟物和扁平更为本质,是 genesis。Material Design 是「神说,要有光」,就有了 material。它想做的或许比拟物和扁平更为本质,是 genesis。例证?Material Design 的视频说明一切,在新世界里,material 是万物之源。不模拟现实,但构建真实Google 从现实的物理世界中找到了一种「定律」,即我们所感知到的所有「触觉真实」,都是材质(material)的结果。材质即隐喻。如果我们能感知到这是一种 material,我们就会自然理解它是用来做什么的(affordance)。这里引用一段
在回答「认知科学和设计领域中的 Affordance 是什么?」的两段文字以作补充:Gibson 用来解释 Affordance 的例子是这样的:如果一块地表面接近水平(而不是倾斜的),接近平整的(而不是凸起或凹陷的),以及充分延伸的(与动物的尺寸相关),如果地表面的物质是 坚硬的(与动物的重量相关),我们可称它为基底、场地或地面,它是可以站上去的(stan-on-able),可让四足或两足动物保持竖直姿势,它是可以 行走(walk-on-able)和跑动(run-over-able)的,它不像水表面或沼泽表面之于一定重量的动物那样是可陷入的(sink- into-able)。《设计心理学》中说这个词的时候还是以实体产品(著名的诺曼门)为例,后来 Norman 在解释这个词时说当时应该称“感知到的 Affordance ”,比如一扇门需要设计成让人一看就明白怎么开的,那么这种开门方式(是推还是拉),这一种开的 Affordance 应该叫做可感知的 Affordance,实际上门即使用推打不开,它还是有可以推的 Affordance。在 Material Design 中,Google 认为我们可以通过光影(light)、表面(surface)和运动(motion)来传达材质隐喻,而这种隐喻本身,可以帮助我们认知对象是如何运作、如何操作。简单来说,material 并不源于对物理世界中的任何对象临摹或抽象,而是建立了一个新的世界观(材质即隐喻,material metaphor)。在这个「世界观」之下,再去创造形形色色的另一种「真实」,而我们与这种「真实」的沟通方式是——我们原始大脑业已建立的对材质触觉的认知。第三方 ROM,跟还是不跟?不管老罗如何吹嘘拟物的优秀,Material Design 的出现代表着这个星球最顶尖的两家科技公司都已经告别拟物设计。这给依赖于 Android 生态的第三方 ROM 们提了一个两难的问题,跟还是不跟?其实即便从当下来看,当用户从 Smartisan、Flyme、MIUI 等第三方 ROM 们精心打磨的桌面进入到一个应用时,那种戳穿魔术师戏法似的体验断层(第三方风格 → Android Design 或 iOS 风格)也仍然无法掩饰。无论这些 ROM 怎样在系统层面修改界面、重绘图标,大谈设计与情怀;也不管 Android Design 在中国普及如何缓慢,不得不承认的是,真正能对 Android 生态设计产生影响的只有 Google 自己(或许还有 Apple :P)。所以,Material Design 来了,而锤子们是继续坚守拟物,还是在 Material Design 下找到自己的表达? 跟,还是不跟,这都是一个问题。结语Google 说,Material Design 是一套跨平台和设备的 universal 设计语言。Universal 的野心在于,这是否意味着 Google 在尝试通过推广 Material Design 来逐渐塑造与物理世界平行的新的触觉真实——在手机、智能设备、可穿戴设备、TV等各种屏幕上的体验和认知。假如当人们习惯于 Material 在各种屏幕之上构建的「触觉真实」时,在未来的某一天,会不会又会出现对这些「触觉真实」的「二次拟物」?最后,说个猜想,如果 Material Design 提供的是一种类「世界观」,那如果用 Material Design 来制作游戏,会是怎样?
先说几句题外话。阳春白雪需要文人雅士才能欣赏得来,不过凡夫俗子也自有他们的审美趣味,但问题在于,普通老百姓之间的审美差异甚至还要大于不同阶层之间的审美差异——托尔斯泰那句“幸福的家庭都是相似的,但不幸的家庭各不相同”大概可以用来形容这个情况。所以,管它什么design推出来,都不能迎合所有人的品味。---------------------------------------------------我也试试分割线----------------------------------------------------Android design是第二个运用了扁平化设计理念的设计模型(第一个是WP),“强调内容”是从它开始几乎所有设计模型的统一理念。实际上,提供内容(信息、数据)正是Google绝对的强项,按理来说,扁平化设计本应由Google发扬光大,然而苹果却后来居上,为什么?因为Google比起苹果更加不注重展现内容的方式:Android design规定了应该有哪些控件、控件应该被摆在哪儿、各种控件应该多大,却没有指出它们如何引导内容的出现、强调与退出;遵循Android design的应用让用户从一个界面跳转到另一个界面,从一条讯息滑动到另一条讯息,但没有让用户产生“这个界面、讯息是这么来的”的感觉——它重视效率、结果,但忽视了方法、过程。我一直觉得,iOS 7的扁平化是走向了极端的扁平化,因为它彻底抛弃了阴影、光线、层次,现实生活中的物理法则不再适用于iOS和应用,这使它成为了一个独立的、别样的宇宙。得益于苹果优秀的界面、交互设计,这个崭新的宇宙丰富、圆满、和谐,绝大部分iOS用户适应它的规则都并不困难。然而,当我们掏出手机准备解锁时,当我们打开应用准备使用时,当我们按下按钮准备得到系统的反应时,我们所在的宇宙也正在和操作系统的宇宙联系,我们的大脑在新世界里遨游,但我们的身躯仍然在这个世界存在——这么说感觉很玄乎,但随便打开一个遵循了iOS 7设计风格的应用,你会发现它和现实世界是如此的迥异。适应新的法则不代表我们舍去了旧的法则,进入另一个世界不代表我们抛弃了与这个世界的联系。以前,拟物化设计使得两个世界基本相同,降低了人们从探索中获得的惊喜、乐趣,而扁平化设计又让两个世界截然不同,几乎切断了它们应有的联系——如果完美的设计是线段的中点,那么它们都偏向了两端。事实上,这就是乔布斯的人格特点:偏激、自我,他决定了苹果的文化也如他一般,喜爱极端(这句话中的形容词无明显贬义,但从讲大道理的角度来看,还是略微偏贬义)。伴随着L的发布,Material design也得以现身,它是Android design的延续、反思与升华,是完美设计的追求者。Google的文化有中国文化的影子,同样讲究兼容并包,不同之处在于它更加主动、开放。因此,Material design不愿意走极端,不追求线段两端小小的端点,而着眼于线段的中央部分——Google既要创造一个新的宇宙,又要建起一座座桥梁,让两个宇宙能够自由来往、相互影响,这是它的前任和竞争对手们都没能做到的。第一眼看上去,Material
design还是扁平化设计的一个子集,排版方案和色彩的选取使得整个界面都很平滑、整齐,但注意下方的+按钮与撤销操作的提示框,它们具有纯扁平化设计中不应该存在的阴影。但在现实生活中,如果要用一个物体挡住另一个物体,那么它们所在的层面一定是不同的,若光线投射下来,上方的物体在下面肯定会有阴影。从Google官方的层级展示图我们可以看到,这种设计完全符合现实世界的物理规则。(这里的图片和排名第一的答案是一样的)Material design大体上给人以扁平、注重内容的感觉,但局部又细腻地强调了与现实的联系,总体的观感不会因局部的不同而显得混乱,但逻辑却因为局部的点缀而更加合理、清晰。从上面那张图更能清楚地发现层次关系,同时展示了不同层级的独立扁平化。重新设计的图标在扁平、抽象的同时具备光线、阴影,象征着拟物与扁平两种设计风格的融合。这是从来不曾有人想到的设计方式:设计师把一张纸铺在桌子上,在它上面作画,然后再拿出一张纸,继续画,之后把它叠在第一张纸的上面,接着又拿出了一张纸……最后,设计师拿出了一个小圆盘,放在了一个两张纸交接的部位,把它们压得近乎扁平的同时,也让两者具有了异于层叠的新关系,同时还起到了画龙点睛的效果——这种设计方式的代表作品,正是运用了Material design的L界面。Android design中很重要的一个元素就是卡片,Google将每一个物体都抽象为一张卡片,像名片一样展示它的属性。在Material design中,由于卡片也是一张纸,因此它得到了保留,不过设计师将它“很明显”地提拔到了上层。卡片们彼此之间位于一个层面,但不存在联系,因而是零碎、分散开的。它们都各具特性:大小不一、颜色不同,各自均保持着扁平的特征,进一步强调了内容的差异,使得用户能很明显地察觉它们是不一样的。在“同”与“不同”的设计上,Material design作出了很好的典范。就“同”的方面来说,它在有联系的物体之间架起了桥梁:那个圆形按钮——若用户按下那个按钮,他会发现他的手指产生了一道圆形的涟漪,同时向两张纸扩散,就像现实生活中按压会使得纸变形、张开一样,这代表二者临近,即便属于不同层次,彼此仍然可以作用。而在“不同”之上,Material design毫不含糊地使用阴影、空白区分了没有联系的物体;除此之外,线条也被利用与分隔不同模块,就像两张纸并排放置一样,尽管位于一个层级,但没有桥梁,彼此无法通行。曾经的Android
design除了用于展示内容的卡片以外,布局、控件都没有与现实生活中的事物对应,因而高度抽象,逻辑难以理解。而Material
design中,纸张使得“一切”都变得熟悉起来:这就是两个世界联通的第一座桥梁,它的特殊之处在于,它能输送这个世界的理念与文化,因而能够渐渐包含、同化另一个世界。这里有一点需要强调,就是那“一切”二字,它并不指真正的一切——那是拟物化希望达到的最终效果,iOS6上的iBook一打开就是一个书架摆在用户面前,老罗为时钟应用里那个“打点计时器”的效果特意优化了许多次,拟物化从追求“外表”相似已然发展到了追求“使用方法”也相同,这是Google从来不愿意去尝试的。简单地说,Material design仅仅希望,内容的载体不会令人感到陌生。也就是说,那种“材料“能被人们想象出来,某些地方符合现实生活的规律,就足够了,不需要和现实一致。因此我们才能看到,在Material design中,光线与阴影并非随处可见,而层级本身是完全扁平的,不需要进行复杂的设计去实现磁带、唱片盒之类的效果。另一座桥梁则是动画。iOS的流畅、“如丝般顺滑”,很大程度上就源于精心设计的动画。iOS的动画过渡自然,比如iPad上四指捏合就能关闭应用。更重要的是,当你的手指缓慢地向内合拢时,你会发现关闭的画面是随你的动作同时进行的——这就好比大型游戏中CG实时渲染与预先制作的差别,在增强了代入感的同时,填满了用户小小的满足感,这才是“自然”的原因。除此以外,iOS的动画反馈十足,最典型的例子正是下拉回弹,那是在整个设计史上都能排进前十的产品,更为特殊的是,它的设计不对功能有任何实质上的变化,仅仅迎合了人们的心理,听上去微不足道,但用起来堪称完美。当然还有重要的一点,就是iOS的动画都是统一的:在Android平台上切换到微信时,微信是凭空出现的,什么动画也没有,而iOS上则始终会有放大出现的效果。Material design重视动画效果,从演示动画中,我们能够看到动画的广泛存在。动画的存在正是重视过程的体现:人们渴望知道事物从何而来,到哪儿去,以什么形式出现并以什么方式消逝,这是终极的哲学问题,也是每个人任何时候都会提出的问题,而恰到好处的动画能够帮助我们知晓答案。比如演示中,从音乐界面出现到音乐开始播放,动画让我们知道那一张张纸片是如何出现并具有层次关系的,让我们明白点击“播放”按钮之后音乐是如何出现并开始的。另一个例子是Material design在界面下拉到顶部时动画的设计:迥异于L之前出现一个细长的蓝色光圈之后快速消失的效果,新的方案是出现一个波纹动画,就像是在拉泡泡糖一样,你手指的方位是动画效果最明显的部位,富有弹性,活力十足。与按下按钮后产生波纹类似,墨的痕迹在此处一览无遗,那种渗在纸上而产生的通透感让纸变得柔软、轻盈,更加容易结合在一起。Matias Duarte说,他们希望从本质上思考移动界面设计的方式,去寻找甚至是发明最适合展现内容的“材料”,这是非常了不起的想法。人类最早大规模使用的内容载体是纸,而现在的Material design承载的正是纸与墨的精神;人们先有了无穷多的杂念或哲思,才要想到发明一种可以记录这一切的容器,而软件诞生了这么久,人们才开始去思考:把所有代码、软件界面都抽去以后,它们下面是什么,才开始寻找那种“材料”,这也许就是一个轮回。人类发明了纸之后才明白,信息的本质是“可以传播”的对象,那么也许等到Material design真正发现或发明了那种“材料”之后,我们也能够真正明白软件的本质。从现在的Material
design来看,Google这次伟大尝试的结果仍然处于雏形状态——它处处模仿纸张,也留意着大自然的物理规则,同时,我们怎么会知道软件的“材料”是什么呢?我们只能想象:它能变化、能移动,同时遵循着两个世界的法则,但连那法则我们都不明白应该写些什么内容。不过它的两座桥梁在做一些伟大的事情,那正是Material design前行的动力:它们不满足于就那么搭在两个宇宙的边缘,而是想要把另一个宇宙拉到这个宇宙中来,还要让那个宇宙也有一样的星辰大海、鸟语花香、人文社会。从另一个角度看,它们实际上可能不是桥梁,而是雄心勃勃的探索家,希望找到两个世界的相同之处,发掘共同的美好。真正完美的设计也许不是像iOS、WP那样开辟一个新的天地,而是从我们的世界中精挑细选,让它最美好的部分出现在我们眼前。不过,难道那不算一个新的世界?以上。
Microsoft:"我们不用阴影!"“YEAH!!( o? ω o? )y”(台下一片欢呼)Apple:"我们决定不再使用阴影。"“……那我们可怎么办啊”(台下一片唏嘘)Google:"ummmmm…………………………"“umm阴影这个东西还是,要用的吧?”"That's it!" (拍手)++它不过是又是另一个风格而已,哪里能写得出那么多东西来-~
已有帐号?
无法登录?
社交帐号登录

我要回帖

更多关于 material design lite 的文章

 

随机推荐