10月25日深圳 10月23线上活动-9月24日已结束
阅读（40397）
加入人人都是产品经理【起点学院】产品经理实战训练营，BAT产品总监手把手带你学产品
Material Design
2011年，Gmail邮箱的按钮变得更加扁平化。2012年，Google引入分层的卡片设计，使用更多的空白和精心设计的层次排版结构。经历了几年的迭代和提炼，Google寻找到了一种可以贯通的理论体系，即把系统内的各种设计都规范成一种变形的纸片，并套用现实中纸墨的物理模型进行交互，这就是2014年Google I/O大会隆重发布的Material Design。
Material Design提出了平面像素的Z轴概念，通过纸片在物理世界中形态的抽象和提炼，定义了各种信息层级和常用状态的表达方式，并详细讲解了各个细节的处理方法，就像一本考试大纲，囊括了产品中常用的UI细节，甚至一些UX细节。这里并不赘述，想看详细的Design Guide请（要搬梯子），翻译版的。
如果说UX和UI的展现，是连接产品与用户的纽带，那么产品的UX以及UI应从产品的核心逻辑延展并且推演而来。如果说产品的核心逻辑或者技术的实现难易会成为设计展现的限制，那么UX和UI应是在各种限制下所权衡出的最优解。而Material Design则像是架桥说明或者权衡出的通用解，对于众多产品做以参考。
既然是通用大纲，那么抛开产品仅谈设计，难免会停留于“通用”层面，而利用Material Design进行实战的案例，网上也多是app的一些设计尝试。恰好在近期的工作学习中，接手一个响应式web站点的改版设计，笔者参考Material Design总结以下三点分享如何实现复杂响应式站点的Material Design。
一、清晰轻量的产品逻辑
奥卡姆剃须刀法则同样在产品架构设计中适用，越简单的架构越有利于产品的生长。清晰轻量的产品逻辑，会减少用户的负担感，从而提高交互上的效率和愉悦感。
分析Material Design，会发现Google归纳了两类复杂内容信息的层级关系，分别是Card和Tile（List 以及其他相似定义属于同类的内容信息层级），其他定义多用于UI结构及细节。其中，Google定义Card是一种多功能信息的聚合入口，信息层级应较高，体现在Z轴应高于其他信息，视觉上有阴影表现并加以圆角处理。而tile（或同类信息列表）则是（同类或相关）信息的模块展现，信息层级应较低，体现在Z轴应略低于其他信息，视觉上应无阴影表现不加圆角处理。其结果是从视觉层面让产品对象更高效、更简单，同时也更具物理世界的“真实感”。
最近接手的项目是的全站改版。Gekec（革客）是Geek和Maker交集，喜欢革新，喜欢技术范儿、新潮的科技消费品，喜欢自己动手创造产品，也就是这类人的聚集地，整个产品囊括电商、资讯（或h5宣传）、拆机、以及社区讨论等各种功能，改版前逻辑复杂，功能繁多。改版开始之初，笔者了解到革客群体时，便认为理性加浓重Geek味道的Google风格或许是最适合的视觉体系，然而复杂的产品逻辑不能给用户带来高效的交互体验和愉悦的使用感受，视觉上也并不能很好的通过Material Design推演并且变化，所以梳理出清晰、轻量且方便视觉统一的产品逻辑成为第一任务。
<的产品全功能在此并不赘述，Product Feature全部为达成宜家式的体验式设计，经过梳理可以归纳成三层，首层为体验层（多入口的首页封面）、第二层为货架层（包括商城模块、拆机模块、体验模块）、第三层为详细、操作层；
如上图，轻量的产品结构即可方便设计的推演。例如其中第一层可以通过H5灵活排版做产品全方位体验，第二层与第三层的关系即可利用Material Card和Tile表现。Card表达了全部信息的聚合和入口，tile则表现同类信息的罗列。从card跳转到最终页应有一种卡片展开的体验。
二、适宜UI推演的响应办法
在产品逻辑清晰简洁的基础上，一套适宜Material Design变化的全尺寸响应办法就成为复杂响应式网页设计的核心内容，响应办法能够直接决定功能模块的响应逻辑以及UI的变化。实际操作中，响应办法的确定主要就是确定栅格和占比。
网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。
在的项目中，经历产品功能模块的梳理，笔者使用了12栅格系统，目的是能够满足2、3、4、6的页面等分。注：具体栅格系统的建立应因产品和设计所决定，栅格系统并不是万能的，而确定的栅格系统可以为整个响应式设计做规范性参考。
如上文说，12栅格约束网页的内容区，而网页的内容往往并不占据屏幕的全部宽度，而是在两侧留有间隙，营造空间感。由于屏幕的限制，这种空间感在移动端设备显得更加重要，如图，然而强加固定的margin pixel会使得12栅格占比不定，难以控制设计效果。
所以占比应是12栅格宽度对应屏幕的比值，即：
12栅格宽度X占比=屏幕宽（临界点）
优秀而巧妙的占比确定可以让网页设计呈现在各个主流屏幕上均是100%像素。
这里简单解释一下，若一个200px宽的元素在1200px宽的屏幕上，其占比为16.67%，同样的逻辑，到1024px的屏幕上这个占比16.67%的元素即占据了170.67px，这样的情况下，某一个物理像素无法占据100%，在完美主义的设计师眼里，是无法接受的事情。而巧妙的占比，可以让元素在各个主流屏幕占据100%像素，完美展现设计意图。
临界点（breakpoint）是指响应式网页发生布局变化的关键点，如“当屏幕宽度小于480px时加载...样式，当宽度在480px- 600px之间时加载…样式”。响应式网页理论上有无数种尺寸，我们不可能也没有必要为每个尺寸都去做设计，需要做的是选定几个临界点做设计，在两个临界 点之间是延续上一个临界点的布局。
临界点确认总体目的就是为了保证页面在手机（屏幕很小）、平板（屏幕中等）、PC（屏幕大）上加载相应的样式，然而经验较少的设计师往往会苦恼一个问题，那就是高像素的手机屏幕和低像素的平板屏幕应如何处理。例如设计师会担心1080p的手机加载大屏幕页面，或者720p的平板加载小屏幕页面。
但需要注意的是，响应式网页不同于APP的屏幕适配。网页是沉浸于浏览器的产品，浏览器所启动的屏幕像素才可以被认为是临界点的参考点，为此，笔者做了一些测试，如下表，可以看出不少1080p手机在浏览器中仅启动360px，而神奇的ipad无论是不是retina屏幕，无论是不是mini，均显示px 。
从上表可以看出，许多担心其实并不需要。综上，在的项目中，笔者为达到多数主流屏幕100%像素的追求，即需达到内容区在主流屏幕临界点的占比可以被12等分，进而获得12栅格，即：
12的公倍数X占比=主流屏幕尺寸
项目中经历了一些测试和取舍，最终确定占比为93.75%，临界点为1280px、1024px、768px和320px。
1280px&=screen，占比93.75%，12栅格在典型屏（1280px）宽1200px；
1024px&=screen&1280px，占比93.75%，12栅格在典型屏（1024px）宽960px；
768px&=screen&1024px，占比93.75%，12栅格在典型屏（768px）宽700px；
320px&=screen&768px，占比93.75%，12栅格在典型屏（320px）宽300px；
如上图的占比划分，页面元素可以完成灵活、规范的响应。可以以此作为整个产品的响应办法，在此基础之上，可以对Material Design进行全面的推演。
三、精雕细琢的页面细节
如果说产品逻辑是整个网站的骨架，那么精雕细琢的页面细节则可以比喻为网站的气质灵魂。有轻量级的产品构架和明确灵活的响应式办法后，即可通过Material Design的官方说明进行全面设计。在Material Design的说明中，已经详细解释了各个状态的约束和细节，在此并不赘述，笔者仅挑选一些典型的细节。
1）css动画
Material Design中开篇第一章节便讲述了动画给用户的直观感受，说明感知一个物体有形的部分可以帮助用户理解如何去控制它。一些细节位置的动画能给用户体验上的惊喜。然而在web端实现动画效果并不像app里那样的容易，大量JS也会影响页面加载速度甚至影响页面其他代码。所以笔者选择利用CSS对页面一些细节加以动画效果。
A.点击按钮
Material Design给出了一种ripple button，抽象了人用手触碰卡片的涟漪效果，给用户一种全新的使用体验，欢迎来点击尝试。
简单的Description和一条横线，抽象了实体文字卡片的填写过程，可以帮助用户对输入区域有实体化的理解，欢迎来点击尝试。
2）文字样式
Material Design中强调“同时使用过多的字体尺寸和样式，可以轻易的毁掉布局”，并约束了常用的基本样式就是基于12sp、14sp、16sp、20sp的字体排版。
熟悉Android的朋友可能对sp的概念并不陌生，sp：Scale-independent pixels，它是安卓的字体单位，以160PPI屏幕为标准，当字体大小为 100%时， 1sp=1px；然而响应式的网页并不是安卓，网页更需要物理像素的尺寸约束，所以笔者在所划分的临界点计算了一下所测试屏幕的浏览器PPI，如下：
iphone5: 320x568px/4英寸/PPI=162.95
荣耀6：360x640px/5英寸/PPI=146.86
ipad：.9英寸/PPI=131.96
ipad mini：.9英寸/PPI=162.03
从上面的数据可以看出，大多浏览器启动像素所产生的PPI大约在160左右，所以某段文字在PC端约束的物理像素尺寸，直接同样尺寸应用于移动端时，应该也可以产生不错的体验效果，所以设计时可以直接将Material Design的字体sp尺寸转化为px来使用。的项目中，笔者只约束一套字体样式，在方便前端开发的同时，完成了不错的响应式效果。
Material Design Guide中给出了若干明亮鲜艳的颜色，并且指定了颜色的主要展现和层级变化，可供设计师选择。
在实际操作中，通过商品内容的分类，笔者直接选择Material Design中的颜色，作为每类商品的主要颜色，而在一些重要的操作入口，颜色应与主要颜色有明显区别。笔者应用色环在Material Design Color基础上，配合内容建立整个网站的颜色体系：
A.主体颜色以及层次根据内容确定，直接参考Material Design Color
B.应用色环分析整体补色间色
将所有主体颜色步在色环上，可以分析出补色位置应为上方红框位置，应用于有明显区别的重要入口，如“加入购物车”、“砸￥1元参与”，“结算”等等；而间色位置应为下方红框位置，应用于不明显的细节变化，如文字hover，文字链接等；
Material Design Guide中已经严格约束了各个元素状态下的间距，但为了满足全站响应式布局在主流屏幕展现，笔者仍然使用了8px原理对一些间距进行了调整；在很多设计师研究8px原理并进行设计的同时，笔者仍然需要强调，响应式web的设计应基于浏览器的像素尺寸，并不是基于ios和android的屏幕尺寸。具体可以参考上面已经分享的表格进行实验。
Material Design已经给出了详细的设计细节和原则，但不一定适合每一款产品，设计师需要弄清自身的产品是web还是app，逻辑是什么样，才可以进行细化的设计工作；深入了解产品逻辑的基础上，确定的一套响应办法和页面细节，能够保障设计的展现并带来不错设计效果。Material Design作为即苹果、微软之后最新推出的设计语言，充满了浓郁的Google风情，能够给用户提供新鲜的视觉体验，希望有越来越多的设计师会尝试用Material Design进行设计。
本文为作者 @投稿发布，转载请注明来源于人人都是产品经理并附带本文链接
分享到微信朋友圈
投稿、稿件问题联系Q：
人人都是产品经理社区（）是中国最大、最活跃、最具人气产品经理学习、交流、分享平台，微信公众号woshipm。成立5年以来举办线上活动500余场，线下活动数百场，覆盖北京、上海、广州、深圳、成都、杭州等30多个城市，在互联网业内得到了广泛关注和高度好评。社区目前拥有300万忠实粉丝，其中产品经理占比50万， 中国75%的产品经理都在这里。当主管 Google 搜索界面的设计师 Jon Wiley 看到 Google Now 的卡片式交互时，他忍不住问道，“当我滑动卡片的时候，他们下面是什么东西？” 这个听上去有些天真的问题启发了 Google 主管设计的副总裁 Matias Duarte，也为 Google 未来的设计标准打下了基础。
“卡片下面是什么？” Duarte 按照这个思路继续思考下去，卡片的材质是怎样的？卡片是什么颜色的？人们是怎样拿起卡片的？最终，Duarte 带领一群设计师按照这个方向探索，并将其称为 “Material Design”。
Duarte 的 Material Design 和苹果以前的拟物设计并不尽相同。拟物设计是尽力利用美工和交互在设计上模拟实物。而 Material Design 则更为抽象，它不关心实物是什么，只关心它的质感，层次，深度，和其他物体的叠放逻辑。从某种程度上来说，Material Design 更像是把交互界面变成了一张张的纸。因此，此前曾传出 Google 会将新的设计标准命名为（量子纸）。
具体的区别我们可以看上图。观察左上图我们可以发现，Material Design 的按键和内容的设计都是扁平的，然而它们的阴影却在提醒我们，这是一个 3 维空间，他们是有深度的，也可以产生重叠，覆盖等逻辑关系。它的阴影比苹果拟物化时代的高光阴影用的更轻，但比起现在的纯扁平设计又显得更拟物。
上图的右方则是一个简单的交互演示，这也显示了 Material Design 的交互并非是纯拟物的。按钮和显示框等可以产生伸长，放大，缩小的交互，这在交互逻辑上似乎和扁平设计更接近。
因此，Material Design 更像是拟物设计和扁平设计的结合。
尽管 Material Design 同时带有拟物化和扁平化的特征，Duarte 对苹果目前的扁平设计并不满意。他认为界面的交互应该是符合人类的习惯和期待的，“我们不会把一堆东西 “唰” 的甩给你，我们做的是遵循物理法则，却又在现实世界中不存在的交互”。想想在 iOS7 上打开任意一个应用后你看到的，你就懂他的意思了...
Duarte 强调交互设计要符合人的直觉，要好像一幕舞台剧一样，有铺垫有发展，而不能像跳帧的电影一样，从一幕 “唰” 的就跳到了下一幕。
同时，Duarte 极为赞扬当年施乐实验室发明的图形界面交互，认为它不仅是将虚拟的物体实体化了，更是明晰了计算机上的物体之间的逻辑。一个文件夹是包含了另一个文件夹，还是完全不同，里面有哪些类型的文件，网页浏览器在记事本的上面还是下面...苹果的手势操作也加深了人机交互的逻辑联系。而 Duarte 希望在 Google 以语音输入，算法等新的交互发生深化这种逻辑，让人类能够以一个模型理解计算机在做什么。
这不禁让我想到，Duarte 才是继承了乔老爷子的思想呀，怎么跑 Google 去了...
尽管 Duarte 已经胸有成竹，不过 Material Design 还是一个理念，具体何如需要等到 Google 推出更多基于 Material Design 的应用和页面我们才会知晓。原创文章，作者：甘源“看完这篇还不够？如果你也在创业，并且希望自己的项目被报道，请告诉我们！”
分享到甘源读者我的半径是3，过(-3,0)和(0，3)，请问我的心离原点多远？创业者们，如果你或你的朋友想被36氪报道，请狠戳这里&&&&
赞助商链接
传国际版和中国版 Google Play 服务年底并轨据开发者 @ Oasis Feng 消息，Google 计划在年底前彻底并轨国家和中国版的 Google Play 服务，解决普通 Android Wear 的应用无法兼容中国版的窘境。阿里巴巴准备收购优酷土豆据 Bloomberg 消息，阿里巴巴宣布不具约束力提议，将收购优酷土豆，建议以美股美国存托股票 26.60 美元的价格收购优酷土豆。截止到昨日收盘，优酷土豆的股价为美股 19.48 美元，市值 33.89 亿美元。如果按此价格计算，阿里将花费 46.27 亿美元收购优酷土豆（合一集团）。
Uber 将在苏格兰开始运营苏格兰最大城市格拉斯哥将会是 Uber 在苏格兰境内营业的首个城市。据悉，Uber 目前已经在英格兰的纽卡斯尔，伯明翰和利兹均开设了打车业务。本次在苏格兰的业务拓展被视为Uber对其在英国业务的延伸。与此同时， Uber 正陷入与英国出租车司机协会的纠纷之中。虚拟现实技术应用公司 8i 获得1350万美元A轮融资8i 成立于2014年，公司位于新西兰，洛杉矶，旧金山三地。8i致力于使虚拟现实技术更加人性化，目前该公司为 3D 内容创作者创建了一个分享平台，并将在洛杉矶为 3D 创作者开设一个免费的摄影棚支持其创作。本轮的投资公司包括：RRE Ventures, Founders Fund Science, Horizons Ventures, Samsung Ventures, Dolby Family Ventures, Bertelsmann Digital Media Investments, Sound Ventures, Signia Venture Partners, Inevitable Ventures, Freelands and Advancit Capital, Kevin Wall, Jeremy Stoppelman, John and Andrew Hendricks, End Cue and Kortschak Investments, Rothenberg Ventures 和 Boost VC。挪威支付科技公司 Zwipe
获得500万美元B轮投资Zwipe
2009，总部位于奥斯陆。该公司致力于通过指纹读取科技来鉴别信用卡支付真伪。Zwipe 在一年前与MasterCard
进行了商用指纹支付卡方面的合作。本次投资的公司为深圳高新企业光启科技，目前该集团拥有 Zwipe 20% 的期权，为其最大期权持有者。美国B2B平台Kinnek
获得2000万美元B轮融资Kinnek
成立于 2012
年，总部位于纽约。该公司为一家支持中小企业采购的商业平台。目前该平台上拥有 2000 个供应商和 20000 单商业交易。每星期的商业成交量可达到数百万美元。本次领投的公司为Thrive Capital，由AngelPad，Great Oaks Venture Capital , Matrix Partners, Naval Ravikant, Sierra Ventures和 Version One Ventures跟投。临床医疗公司Galera Therapeutics获得3700万美元B轮融资Galera Therapeutics成立于2009， 总部位于宾州莫尔文。该公司为一家临床医疗公司，主要是通过化疗救治口腔黏膜炎和颈部癌症。本次领投的公司为Novo Ventures，另外由New Enterprise Associates, Novartis Venture Fund (NVF), Correlation Ventures 和 Galera Angels跟投。国际足联倡导职业球队使用相同标准的状态追踪设备国际足联目前表示希望所有专业球队佩戴同样的信息追踪技术设备来检测球员的训练情况。国际足联称，规范化的状态追踪标准可以防止禁药的使用和及时的保护运动员，使球员在比赛中的身体状况在第一时间被场下的教练以及队医知晓。Google Express 总监离职原为 Wildfire 公司创始人的 Victoria Ransom 和Alain Chuard 夫妇在
Google 三年前收购Wildfire 后供职于 Google Express 部门直至近日离职。本次离职的 Ransom 是 Google Express 部门继 Tom Fallows和Sameer Samat 离开后，第三位出走的总监。目前，Google 方面已经确认了 Ransom 和 Chuard 的离职。有投行分析师称 iPhone 6s 销量不及预期据国外手机网站 phoneArena 报道，由于销量不及预期，美国苹果公司将 iPhone 6s 元器件订单削减了15%。这一消息来自美国投行太平洋皇冠证券公司 (Pacific Crest Securities) 的芯片分析师 John Vinh，他表示该公司目前判断苹果在今年第四季度将售出 6700 万部 iPhone 6s 和 iPhone 6s Plus，明显低于多数分析师给出的 7500 万部至 8000 万部的预期。基因测序公司 23andMe 获得 1.15 亿美元 E 轮融资23andMe 成立于2006年，公司总部位于加州芒廷维尤。该公司为一家基因测序公司，用户可以通过公司产品查询到用户的基因状况以及组新鲜的分析报告。之前该公司曾推出颇受欢迎的99美元基因检测服务。本次投资的公司保罗
Fidelity Management & Research Co. 、 Google Ventures，New Enterprise Associates ， Casdin Capital
和 WuXi Healthcare Ventures。据知情人称，目前该公司的市场估值为 11 亿美元。Uber 中国负责人柳甄称已组织力量反刷单昨日，Uber中国战略负责人柳甄出席了 2015 中国（四川）电子商务发展峰会开幕式，会后首度向《每日经济新闻》记者回应了刷单的问题，他认为刷单问题是任何 O2O 产业都会面临的调整，而且是全球性的问题，目前 Uber 已成立由硅谷工程师组成的反刷单小组。Adobe Flash 再爆安全漏洞，将影响所有版本在刚发布了例行安全更新后，Adobe Flash 又爆出一个危险漏洞，有研究称这个这个漏洞来自某网络间谍，意在政府、NATO 和媒体。这个漏洞会影响Windows、Mac 和 Linux 平台上的每一个版本，攻击者可借此“破坏和控制受影响的系统”。Adobe 表示暂无立即可用的更新，预计推出时间为下周。在此之前，担心安全的用户可考虑在不必要时卸载掉 Adobe Flash。苹果将 ResearchKit 用于自闭症，癫痫和黑色素瘤研究ResearchKit 为苹果推出的 一套帮助研究者推进科研成果的工具，研究者通过苹果的设备来收集科研对象在研究中的具体参数。本次合作研究的自闭病、癫痫和黑色素瘤分别来自于杜克大学、约翰o霍普金斯大学以及俄勒冈卫生科学大学的研究项目。Box Platform 上线，可被当作内容管理后台Box.net 推出了日前在某次大会上承诺的新产品 Box Platform，这款产品成为除 Box Proper 以外的第二个平台管理产品。与其它产品不同的是，开发者可以将 Box Platform 当作一个应用的内容管理后台，并且 Box Platform 在界面上有“隐身”功能，用户将会在不知不觉中使用它。Dropbox 推出 Paper 在线编写工具Dropbox Paper 为一款综合文档编辑平台。用户可以直接在浏览器上编写文字，另外该软件还包含图片添加和任务管理功能。与 Google Docs 和 Quip 相比，Paper目前的编写工具还笑对较少。据称， Paper 将会是 Google Docs 系列的有力竞争者。Yahoo 为 Android 版本推出新版邮件手机软件据悉，该重新设计的版本将包括智能搜索，联系人管理等功能。同时，本版本将首次整合 Yahoo Mail 与包括 Outlook， Hotmail以及
AOL Mail 在内的.第三方邮件服务。另外新推出的 Yahoo Account Key（Yahoo 账户密匙）将可以帮助用户通过手机短信验证码的方式登入邮箱。新版本将于今天在
Google Play 上发布。斯坦福大学、 Michael Bloomberg 投资
Y Combinator 孵化器内创业公司据消息称，斯坦福大学，Willett Advisors LLC，Michael Bloomberg 将以每个公司10万美元的方式投资 Y Combinator 孵化器内的创业公司。据了解，斯坦福大学和 Willett 此次的投资被视作一种为硅谷每年年轻的创业公司提供的指数基金。微软英特尔联合戴尔惠普联想发起“PC Does What” 广告宣传微软、英特尔、惠普、联想、戴尔日前共同发起了口号“PC Does What?”（PC能做什么）的广告宣传攻势，意在让潜在的计算机买家充分意识到现代化 PC 能够做的所有事情。广告将在10月19日开始在美国、中国投放。蚂蚁金服推出备付金透明监管项目蚂蚁金服对外宣布升级“互联网推进器”计划，正式开放蚂蚁金融云，同时，为了顺应新金融发展下监管方式的升级，蚂蚁金服还研发并推出了基于大数据的“备付金透明监管项目”，该平台7×24小时对监管部门开放。备付金透明监管项目实施后，人民银行在办公室就可以在线实时监测支付宝备付金的资金运行情况、备付金管理规范的执行情况，并可以抽取任一笔交易明细数据，去验证准确性、真实性。以往在线下可能需要几十日才能完成的监测任务，现在可以实时在线完成。此外，支付宝的内控制度等也能够被方便地查阅到。
为你推送和解读最前沿、最有料的科技创投资讯
36Kr股权投资
汇集行业内最优质创业项目的股权投资平台
聚集15家顶级投资机构的专业互联网融资平台
聚集全球最优秀的创业者，项目融资率接近97%，领跑行业
36氪为你推送和解读最前沿、最有料的科技创投资讯36Kr股权投资汇集行业内最优质创业项目的股权投资平台36kr融资聚集15家顶级投资机构的专业互联网融资平台氪空间聚集全球最优秀的创业者，项目融资率接近97%，领跑行业此问题的等同描述还可能是：如何评价 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.
终于有时间看Google的Material Design啦。认真读了一遍Google的设计介绍与文档：（各种案例请到网站去看，不一一贴图了）这里记录自己感兴趣的部分，并加入一些粗浅的注解。希望写的轻松一些。：）Google对Material Design的介绍是这样的：We 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.简单说，就是按照传统的理念来设计，与新的技术展现方式结合。再简单片面一点，就是界面设计与前端开发创新结合。这个思路并不算创新，苹果iOS7的扁平化和动效结合，思路是一样的。作为一个交互设计，我非常认同这样的思路。首先，界面设计趋势是简约，突显内容的价值，去修饰化。但是去除了过多的修饰，用户可能不适应，因为过于简约后可能会失真，也可能让用户在使用流程中迷失（界面指向性没有那么强了），所以前端开发动效就来拯救与弥补。我个人觉得这个趋势是对用户好的改变。关于设计准则，Google说了3个：1. Material is the metaphor喜欢这句描述：The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.简单理解，设计从传统来，但是技术的发挥可以为设计带来更多的可能性。一样，与以上总介绍的思路一致。Google还说了一个要求：The use of familiar tactile attributes helps users quickly understand affordances. Yet the flexibility of the material creates new affordances that supercede those in the physical world, without breaking the rules of physics.这要求不低。基本的本质形态设计来提供最基础最可靠的认知，但是又要能创造出新的设计形态来提供新的认知方式，新的认知方式还不能打破传统的本质形态。就像是：艺术源于生活，又要高于生活，但是又不能脱离生活……各位设计师朋友小心哇，以后设计总监和业务领导又有新的话语折磨你们了，这句比“不够大气、不够上流、不够高端”难多了…… 哈哈哈 lol2. Bold, graphic, intentionalThe foundational elements of print-based design—typography, grids, space, scale, color, and use of imagery—guide visual treatments. These elements do far more they create hierarchy, meaning, and focus. 这段写得挺基本。字体、空间、颜色、图片使用本来就不仅仅是直观的界面展现，它们还能表达信息架构、意义、帮助用户聚焦等。这个设计小伙伴们都知道……3. Motion provides meaningMotion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design. Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent.赞！动起来！后面我也会重点写动效这一块，因为这块有意思。设计现在应该让动效贯穿其中，整体的用户体验才会完整且精彩。然后看动效，Google讲了4点。1. Authentic MotionPerceiving an object's tangible form helps us understand how to manipulate it. Observing an object's motion tells us whether it is light or heavy, flexible or rigid, small or large. Motion in the world of material design is not only beautiful, it builds meaning about the spatial relationships, functionality, and intention of the system.动效的价值容易理解。用户看到物体的移动就容易懂得怎么去使用它，并能了解它的各种形态。动效不仅仅是好看或者炫，它能给用户体验带来真实价值。同意，动效的意义如果仅仅只是为了炫，就没有意义了。它必须与信息框架、视觉展现、流程设计等紧密结合，才能体现动效的价值。2. Responsive InteractionResponsive interaction builds trust with the user and engages them. When a user interacts with an app and beautiful yet perfectly logical things happen, the user feels satisfied—even delighted. It is thoughtful and purposeful, not random, and can be gently whimsical but never distracting. It encourages deeper exploration of an app: what will happen if I touch this? And then this?当动效是有逻辑的，用户会开心。动效不应该是随机发生、没有意义的。举个例子，在手机上，有6个大方块。例如以前的动效，是你用手指按住1个方块，那个方块就呈现选中态，一下就全亮起来。这是对的，符合设计的Feedback原则。现在Google想提高标准了，你用手指按住1个方块，你手指的按的区域先亮起来，然后那个区域再像烛光洒满屋子或者水漫过地板一样慢慢充满整个方块。自然、有逻辑、炫、好看。不过我认为要用对这个思路，还得用点心思去思考在这个动效过程中你要讲什么故事，不然价值体现不够。3. Meaningful TransitionsIt can sometimes be difficult for a user to know where to focus their attention in an app or how an app element got from point A to point B. Carefully choreographed motion design can effectively guide the user’s attention and focus through multiple steps of a
avoid confusion when layouts change or ele and improve the overall beauty of the experience. Motion design should not only be beautiful, but serve a functional purpose.这个常见，动效带领用户的注意力去理解流程。这个iOS早有了。拿起你的iPhone，在屏幕上选择一个App点击，App扩大占领整个屏幕的过程是从App本来在主页的位置发起的。所以用户能从整个动效知道，从哪儿来，到哪儿去。4. Delightful Details动效细节可以让用户惊喜。这个例子就举Path好早以前的快捷按钮吧，转来转去真可爱。后面的部分我略写，感觉比较正常。界面风格中颜色的部分，关注这句话：Color is inspired by bold color statements juxtaposed with muted environments, taking cues from contemporary architecture, road signs, pavement marking tape, and sports courts. Emphasize bold shadows and highlights. Introduce unexpected and vibrant colors.字体是Roboto，关注这句话：It is slightly wider and rounder, giving it greater clarity and making it more optimistic.图标部分关注这句话：The design of system icons is simple, modern, friendly, and sometimes quirky. Each icon is reduced to its minimal form, with every idea edited to its essence. The designs ensure readability and clarity even at small sizes.图标特别强调了一致性，在讽刺iOS嘛…… iOS也蛮一致的吧…… 嘿嘿图片使用的部分，关注一下准则：When using illustration and photography to enhance the user experience, choose images that express personal relevance, information and delight.特别关注这3点：1. Appreciation of context，理解背景2. Build narratives，讲故事3. Don't Over-Manipulate: maintain the original integrity of the image. Don’t apply heavy filters or gaussian blurs to imagery, especially when trying to hide degradation.保留图片原本的样子，不要过度使用滤镜…… 情何以堪…… 我是Instagram忠实用户，我不说话不说话……界面布局的准则：Material design utilizes fundamental tools that have come from the world of print design, like baseline grids and a common set of structural grids that works across various pages. The layout is designed to scale across different screen sizes and will help facilitate UI development and ultimately help you make scalable apps.讲得普通，比较有意思的是强调了设计过程中应该让界面适应多平台，并多配合设计开发环节。界面布局的纸质案例，浮动按钮看看例子就好啦。后面的Components、Patterns、Usability略过，讲得正常。最后赞一下Usability里的Accessibility部分，让设计充满对不方便人士的关怀。每个公司都在说自己有考虑，但是产品设计的时候有多少公司真正能做到并规范到设计文档？Google蛮用心的。最后感觉懂设计的前端开发小伙伴们大有前途啊！加油！谢谢阅读。Yoyo，德国达姆，日半夜1点半
&b&更新：&br&把Material Design 官方文档又完整地看了一遍，有了些新想法，建议阅读：）&br&&/b&&b&&a href=&/majiphoto/& class=&internal&&舞台上的戏法和天文里的科技：Material Design和iOS 7动效对比分析 - 表面 - 知乎专栏&/a&&br&&br&&br&&br&&br&原文：&br&&br&一、&/b&&br&&br&从苹果发布 iphone 那年开始，设计界就开始发明适合触摸时代的新材料，我们姑且称之为“数字纸”。顾名思义，它和印刷时代的纸张既有相似又有区别。&br&&br&回顾历史，这里面有数条线索。&br&&br&其一是手机系统。除了 iOS，早期还有WebOS。后者将程序视为卡片，将程序的多任务界面表述为扑克式的横向排列和抽拉。&br&&br&另外一条线索是 app&i&，&/i&Reeder&i&, &/i&Flipboard&i&, &/i&Paper for Facebook&i&, &/i&Medium 等等，延续至今。&br&&br&容易被人们遗忘和忽略的一条线索是，在 iPad 出现之后，平板杂志的出现为纸媒向数字媒体的转化提供了短时的兴奋剂，并为后来移动 UI 的发展提供了前期技术储备。&br&&br&我那会刚从某本杂志离职，在论坛上和人争论还未面世的 ipad，并宣告2010年将是数字杂志的出版元年。可以想象那时的集体气氛，在 iPad 面世之后，整个世界的杂志界如何陷入一种对于未来的谵妄狂想。&br&&br&我个人的兴奋点在于，触摸杂志的UI将会发生何种有趣的变化。&br&&br&我记得最早期的优秀杂志是《Popular Science》和《Wired》，前者将文本和图片置于不同图层，因此可以做相互运动。后者将纸张视为火车车厢一样连接和运动的纸的条幅，并以x 轴和 y 轴的不同方向来结构专题。页面依然是固定大小，也即卡片式的——当时国外的科技圈为了解释界面上的新变化，征引了用户界面先驱Jef Raskin 所定义的两种超文本模型：卷轴模式和卡片模式，并适用于不同手势。前者适合滚动（Scroll），后者适合滑动（Swape）。&br&&br&&img src=&/909d8e487fd753b866e1_b.jpg& data-rawwidth=&751& data-rawheight=&675& class=&origin_image zh-lightbox-thumb& width=&751& data-original=&/909d8e487fd753b866e1_r.jpg&&&br&后期的杂志我没太关注，但我还记得戈尔所做的那本环保杂志，Paper for facebook 如何深受其影响，以大小卡片来解决版块和文章的结构关系。&br&&br&回头看来，由印刷时代的经典媒介形式来推动移动UI的发展是颇富象征意义的。这里面承上启下的界碑是 Reeder，它是互联网时代的杂志：订阅、聚合、推送和时间线。&br&&br&&img src=&/a42e9da917e71d4100c4e_b.jpg& data-rawwidth=&600& data-rawheight=&800& class=&origin_image zh-lightbox-thumb& width=&600& data-original=&/a42e9da917e71d4100c4e_r.jpg&&&br&这是4年前（2010年）我所发的微博：&br&&br&&i&我建议所有做ipad杂志的都学习Reeder的纸张隐喻，质地和动画idea……我所谓纸张隐喻，是指内容切换如何利用纸张的物理特性，翻页早就过时了，应该在叠加、覆盖、抽拉、翻转这些纸与纸的关系中寻找适合触摸时代的设计语言。我能找到一堆国外案例，和他们相比，国内的微博客户端、周末画报、南方周末简直毫无设计思想。&/i&&br&&br&这是两年前我在知乎上回答问题(&a href=&/question//answer/& class=&internal&&iOS 系统的拟物化设计存在哪些问题？为什么有一些人会批评？&/a&)的一段话:&br&&br&&i&问题是虚拟界面的设计所面对的原生材料是什么？它存在吗？更为本质的设计可能不在于外观，而在于组织和交流信息的逻辑形式，或者说交互。暂以一例说明，Reeder式纸张隐喻的巧妙在于，不是模拟纸张的样式和材质，而是模拟纸张的叠加、覆盖、抽拉等空间关系，如此，纸张的裂口和阴影是必要的拟物设计，它产生的虚拟逻辑更有效果地区别和组织信息。这些结合着信息形式的拟物深刻的影响了后来者，比如Safari。&/i&&br&&br&我们看到，Snow Leopard里的 Safari如何借鉴使用了纸张的叠加关系， 并在 Jony Ive 的推动下在 iOS7上遍地开花。&br&&br&前段日子，被 LG 收购的 WebOS 团队将他们秘密研制的新系统 Mochi 开源，我们因此看到，Reeder 的纸张隐喻如何在纸张的裂口和抽拉关系上继续启发着操作系统。（早期 Reeder 设计找不到图，可以借用 Mochi 的图来理解纸张的裂口）&br&&br&&img src=&/ba18f954e85e179329fe_b.jpg& data-rawwidth=&1024& data-rawheight=&768& class=&origin_image zh-lightbox-thumb& width=&1024& data-original=&/ba18f954e85e179329fe_r.jpg&&&br&而他们又是如何继承卡片式设计并结合纸张的物理性质（折角），在多任务交互上再次演进。&br&&br&&a class=&video-box& href=&/v_show/id_XNjU3MDczMTIw& target=&_blank&&
&img class=&thumbnail& src=&/2C6EAB9DBBECFC4-DBC7-A59E-CF8F7258D55C&&&div class=&content&&
&div class=&title&&Recorded for GeekPark: webOS Eel Demo&span class=&z-ico-extern-gray&&&/span&&span class=&z-ico-extern-blue&&&/span&&/div&
&div class=&url&&&span class=&z-ico-video&&&/span&/v_show/id_XNjU3MDczMTIw&/div&
&/a&&br&&br&二、&br&&br&Google Design 的名字叫做Material。Damn it！竟然就叫做“材料”，就好比说，不知道给姑娘起什么昵称的时候就叫她为“女人”。&br&&br&因为“数字纸”是一种不知道叫做什么材料的纸。&br&&br&我们设想一种材料，它可以承载信息，信息的更换可用同一材料的更换来实现。让我们测试石板、碑材、竹简、印章、动物皮、布帛……最后发现，如果从简洁的角度考察，纸张是最优秀的载体。因为它足够薄，薄到似乎只有信息本身。而裁剪成固定尺寸并相互叠加又是最经济有效的信息存储结构。&br&&br&但是纸张要通过怎样的形式转化到虚拟世界中呢？&br&&br&我在 iOS 7发布那会儿曾经做过这样的头脑风暴：假设有一个量子国，量子国使用的信息媒介是“量子纸”（Material 之前曝光的名字竟然就叫做&Quantum Paper&，Damn it！）。因为量子的特性，字迹，以及量子国所有事物并不稳定，在他们的视觉记忆中，所谓事物是雪花般的干扰颗粒中的汇聚的松散形体。那么量子国手机的UI设计应该是什么样的？&br&&br&我想该国的设计师可能会这样设计：点击导航栏上的量子按钮，按钮一下子散开成无数颗粒然后再汇聚成新的页面。而如何表达菜单栏与页面之间的上下空间关系呢？也可能是在叠加面上，导航栏和页面不断地在对方的干扰下扭曲和挥发。&br&&br&借用这样的思考方式，iOS6所模拟的一定类似于蒸汽朋克之类的架空科技世界。前工业时代的木头、工业时代的钢铁玻璃和后工业时代的电子屏幕混杂在一起。电影中的画面是：推开木质的赌场大门，绅士们雪茄烟雾缭绕，围着圆拱形隆起带有操作按钮的桌边，打一场电子屏幕的虚拟牌戏……&br&&br&&img src=&/ce8eccd7cbbbc597c1b63fba165daffd_b.jpg& data-rawwidth=&2048& data-rawheight=&1536& class=&origin_image zh-lightbox-thumb& width=&2048& data-original=&/ce8eccd7cbbbc597c1b63fba165daffd_r.jpg&&&br&在我们所处的宏观三维时空里，纸张构成了薄与叠加层级的原型隐喻。让导航栏和页面在形式上属于同一材料：纸张，并借用阴影——我们时空的特征来表达层级关系，这本应该是最简洁有效的方式。问题是，iOS7并没有在导航栏上使用阴影效果，而是采取了我们惯常称之为毛玻璃的形式。&br&&br&其实可以理解成，苹果发明了一种新的“数字纸”：“透明纸”。准确的说：“浅景深纸”。为了强调界面的空间深度，苹果用景深和视差来表达图层之间的距离感。相对远的距离就无所谓阴影。&br&&br&苹果导航栏与程序页面的逻辑距离既是近的，又是远的，因为它看似属于程序内部，又可以视为临时层，和控制中心和通知中心属于同一层级。所以可以不用有阴影。&br&&br&* * * * * * * * * * * * * * * * * * * * * * * * *&br&（补充一部分）&br&除了导航栏上微弱的浅景深效果，苹果还在在导航栏底边用细线来修饰，这实现了阴影的目的：区隔。页面不滚动的时候你大概会觉得它只是同一页面内的分割线，但当页面向上滚动，这条线就类似于阴影，区分了上下层。&br&这种手法依然来自于 Reeder，早期 Reeder 里的分割线既分割了同一页面，又能在页面滚动的时候变成纸张的裂口，而下层内容可以从裂口中穿过——有趣的魔法纸。大概苹果觉得裂口和阴影太拟物了，在 iOS7只保留了分割线。&br&而透明标题栏的设计应该也是来自 Reeder的标题纸条，但纸条的样式被苹果改造成无边框设计，更加扁平，并同属于半透明图层。&br&&br&&img src=&/ec9d16cddc37_b.jpg& data-rawwidth=&1124& data-rawheight=&828& class=&origin_image zh-lightbox-thumb& width=&1124& data-original=&/ec9d16cddc37_r.jpg&&&br&&img src=&/1f7e23a1bb51623cdcdbf5_b.jpg& data-rawwidth=&640& data-rawheight=&1136& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&/1f7e23a1bb51623cdcdbf5_r.jpg&&&br&只是在返回手势所切换的上下页面之间，苹果仍保留了页面阴影，因为它们足够的“近”，同属于程序内部。&br&&br&&img src=&/351dd7dfbdd657c0eb60f_b.jpg& data-rawwidth=&640& data-rawheight=&1136& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&/351dd7dfbdd657c0eb60f_r.jpg&&&br&（补完）&br&* * * * * * * * * * * * * * * * * * * * * * * * *&br&&br&纹理、质感、色调、叠加、阴影、折叠……在纸张的诸多物理特性中，保留哪些去除哪些，各家有各家的选择，但普遍去除了纹理、质感——来自纸张的视觉表征（苹果只在备忘录、提醒事项等程序上保留了这些），而代之以空间关系。同时在减法的基础上再做加法，利用设计的创造力，重新结构和赋予纸张更多的的物理性质。&br&&br&于是作为网站的开始，Google 的下列语句可视为对“数字纸”整体理念的阐述。&br&&br&&b&Material is the metaphor&/b&&br&&br&&i&A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.&/i&&br&&br&&br&&i&Surfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances. Yet the flexibility of the material creates new affordances that supercede those in the physical world, without breaking the rules of physics.&/i&&br&&br&&br&&i&The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.&/i&&br&&br&上述语句中，”technologically advanced and open to imagination and magic”一句触及了对于移动 UI 设计的本质性思考。&br&&br&理念启发形式，而没有形式的创造，理念就无所依附，无有价值。对于移动 UI 设计来说，科技感所需要的“想象力和魔法”就是理念的核心价值。具体而言，要考察你依据理念发明了哪些新样式，或者退一步说，你在样式的借鉴和发扬上有哪些新意。从网站上的资料所见，阴影和层级、纸张拼贴变形与响应式设计、浮动按钮、触摸波纹这几项是对纸张性质的新阐发。&br&&br&&b&三、&/b&&br&&br&&b&阴影和层级&/b&&br&&br&Material的程序界面层级关系如图：&br&&br&&img src=&/62beac120be1587b04de_b.jpg& data-rawwidth=&740& data-rawheight=&467& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&/62beac120be1587b04de_r.jpg&&&br&可见，若要将并不铺满页面的内容纸张从背景层中分离出来，阴影是一种必要手段。&br&&br&颇富新意的是，按钮的启动状态从下沉改为上浮。&br&&br&&img src=&/9ebb64fdd3f6a9e4523afcc2a2f815e0_b.jpg& data-rawwidth=&740& data-rawheight=&351& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&/9ebb64fdd3f6a9e4523afcc2a2f815e0_r.jpg&&&br&但其实这并不真正新颖，类似的交互反馈也见过多次。比如 Paper for facebook 里面的小圆按钮，在点击时会短暂下沉，然后迅速浮起和放大。iOS7的图标在点击后会短时变暗然后整体放大成为程序界面。物体在受力后会给予一个反弹，这符合生活中的物理经验。&br&&br&新意在于，用阴影的深度来表达层级。Material 系统规定了很多阴影的深度层级来表达不同的高度层级。&br&&br&&img src=&/2f31e60b89dd5ffb86745a_b.jpg& data-rawwidth=&740& data-rawheight=&296& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&/2f31e60b89dd5ffb86745a_r.jpg&&&br&&img src=&/a84385b6ddceb_b.jpg& data-rawwidth=&740& data-rawheight=&296& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&/a84385b6ddceb_r.jpg&&&br&&br&&b&纸张拼贴、变形与多屏幕适用&/b&&br&&br&逻辑上所有程序都可视为纸张的组合。但视觉上强调该特征的并不多见。WebOS 是在多任务界面里，让变小的程序呈现纸张卡片特征。Material 的纸张引人注目之处在于它经常小于整个内容界面，并作为内容界面的构件。而构件可以拼贴、分解和相互运动。&br&&br&&img src=&/ade4666a4beb54ce094e61e_b.jpg& data-rawwidth=&360& data-rawheight=&360& class=&content_image& width=&360&&&br&用缝隙来表达纸张与纸张的相互连接并可以整体移动：&br&&br&&img src=&/b76fc860dbab70c588f9dca_b.jpg& data-rawwidth=&740& data-rawheight=&351& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&/b76fc860dbab70c588f9dca_r.jpg&&&br&&br&上下层纸张可做独立移动&br&&br&&img src=&/7df76cad4cb88f4030aaa48c15e28dac_b.jpg& data-rawwidth=&740& data-rawheight=&351& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&/7df76cad4cb88f4030aaa48c15e28dac_r.jpg&&&br&内容纸张在工具栏纸张下的移动&br&&br&&img src=&/35b2ce5fa4ee79268ff2de_b.jpg& data-rawwidth=&740& data-rawheight=&351& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&/35b2ce5fa4ee79268ff2de_r.jpg&&&br&&br&用缝隙连接的两张工具栏纸张和内容纸张，可以在移动中产生上下级关系，Google 称之为”Waterfall”（早期Reeder 的发明）&br&&br&&img src=&/956b54a5c6d3d1aeb207_b.jpg& data-rawwidth=&740& data-rawheight=&351& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&/956b54a5c6d3d1aeb207_r.jpg&&&br&&br&工具栏纸张和内容纸张可做整体移动&br&&br&&img src=&/9ca5dd2f41e_b.jpg& data-rawwidth=&740& data-rawheight=&351& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&/9ca5dd2f41e_r.jpg&&&br&&br&内容纸张可以转成上级纸张越过工具栏移动&br&&br&&img src=&/3b836e378de9bef41a22_b.jpg& data-rawwidth=&740& data-rawheight=&351& class=&origin_image zh-lightbox-thumb& width=&740& data-original=&/3b836e378de9bef41a22_r.jpg&&&br&&br&可见，Google 演绎了纸张拼贴的多种可能性来作为交互的主要手段，这给app 的交互设计创新展开广阔空间。Google Now的酷炫动画算是它的提前预演 ，可以期待它在 Andriod L中的表现。&br&&br&Material 纸张的另一特征是伸缩变形，这是 Google给纸张嫁接其他物质的物理规则：&technologically advanced and open to imagination and magic&。&br&&br&当纸张有了上述的物理性质，就可以构成适用多个屏幕的响应式设计。&br&&br&当屏幕大小，也即背景层大小发生变化，而内容纸张的卡片形式却可以表现为相对固定的外观。同时纸张构件的拼贴和变形又可以保证足够的灵活性。&br&&br&另一方面，纸张作为内容信息的载体和隐喻，可以通过印刷时代的手段——排版，来保持内容的一致性。不同屏幕的纸张都有同样的网格系统，并居左对齐。&br&&br&Google
Map 是表现Material 响应式设计的绝佳例子。&br&&br&&img src=&/e619ccfb91cea8293675f_b.jpg& data-rawwidth=&1920& data-rawheight=&1200& class=&origin_image zh-lightbox-thumb& width=&1920& data-original=&/e619ccfb91cea8293675f_r.jpg&&&br&&br&&b&浮动按钮&/b&&br&&br&网站上看到的信息不够完整。介绍Material Design的动画中似乎在说明，浮动按钮是下层纸张卡片的变形，贴在上层纸张上来提供“更多操作”的入口。&br&&br&&img src=&/56b171cd749ef_b.jpg& data-rawwidth=&806& data-rawheight=&908& class=&origin_image zh-lightbox-thumb& width=&806& data-original=&/56b171cd749ef_r.jpg&&&br&&br&另外，按钮贴在上下纸张的缝隙之间，常见的是工具栏纸张和内容纸张，似乎也暗示着关联性的交互。&br&&br&&img src=&/a9691bcd2fde5c02080e11_b.jpg& data-rawwidth=&1120& data-rawheight=&624& class=&origin_image zh-lightbox-thumb& width=&1120& data-original=&/a9691bcd2fde5c02080e11_r.jpg&&&br&从形式上看，它来自于生活中的圆形贴纸，贴于方形卡片之上，在构成上起到点睛的作用。非常必要。如此，拼贴的概念才算完整。此外，形式上的醒目足以保证它于 Material 语言的标识性，类似于毛玻璃之于iOS。&br&&br&&b&触摸波纹&/b&&br&&br&按钮的点击反馈我见过几种：常见的是变暗或者变色，如 iOS的图标；不常见的有放大，如 Paper for facebook；还有变形，如 LG webOS。&br&&br&我始终记得 Jony Ive 在设计初代 iPhone时，寻找原始感觉的时候将屏幕形容为&infinity pool&：就像一个看不到边缘的高级游泳池。将屏幕表面比作水面，水面对动作的反馈是波纹，这是自然界给予我们不多的对于“表面”的戏剧性体验。最先实现的是早期的WebOS，但它拟物的设计限制了我对于水波纹的想象。直到我看到 Nexus 5上点击主页键或者搜索栏时的动画，Material Design将其扩展为全局。&br&&br&Google认为构件从点击中心扩展圆形半透明的形式来自于纸张油墨涂层的隐喻，而波纹的样式则为触摸的时间和压力做出图形反馈。&br&&br&我们看到，按钮的变暗和下沉被 Google替换为更加“扁平”的动画，按钮不再是一个下沉的“实体”，而仅仅是一个“表面”，其后的上升并不符合常见逻辑。纸张的触摸被赋予了全新的物理性质。&br&&br&最后请观看
Design 的宣传片。&br&&br&&a class=&video-box& href=&/v_show/id_XNzMxNzUyNzQ0& target=&_blank&&
&img class=&thumbnail& src=&/3AB00B3D97C13CDEB-07D7-1CD4-8DFE-D400FE9F833F&&&div class=&content&&
&div class=&title&&谷歌安卓Material主题 Google Material design&span class=&z-ico-extern-gray&&&/span&&span class=&z-ico-extern-blue&&&/span&&/div&
&div class=&url&&&span class=&z-ico-video&&&/span&/v_show/id_XNzMxNzUyNzQ0&/div&
更新：把Material Design 官方文档又完整地看了一遍，有了些新想法，建议阅读：）原文：一、从苹果发布 iphone 那年开始，设计界就开始发明适合触摸时代的新材料，我们姑…
参考The Verge对Matias Duarte的访谈：&br&&a href=&//5849272/material-world-how-google-discovered-what-software-is-made-of& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Material world: how Google discovered what software is made of&i class=&icon-external&&&/i&&/a&&br&注意这一段（下划线和粗体是笔者加的）：&br&Material Design &unified us in our thinking,& Duarte says, admitting that &it’s absolutely a constraint.& These constraints, he says, made design decisions easier and more consistent. Take, for example, the idea of flipping a card over to see what’s on the back. In Material Design’s world, that’s a cheat that doesn’t work. &u&It’s as if the software is actual, physical &/u&&em&&u&stuff &/u&&/em&&u&&b&inside&/b& these devices, and there’s not space inside a phone to flip a card over,&/u& so Google doesn’t allow itself to do it.&br&&br&Material Design Principles这个session中特别提到：这些飘来飘去的纸片，尺度和手机是一样的；屏幕不是看另一个世界的窗口。这是什么意思？&br&&br&Material is metaphor，这是关于整个手机的隐喻，我们怎么理解手里这个扁扁的黑盒子？&br&&br&早期的iPhone是“百变盒子”，通过运行不同的app，它可以模拟各种我们熟悉的物品：手机，相机，计算器... 在屏幕技术的限制内，app尽力接近它们要模拟的对象。在这个隐喻里，屏幕上的各种按钮本来应该是突出于屏幕之外的，虽然我们无法在触觉上模拟此效果。&br&&br&Windows Phone则拒绝在手机层面使用隐喻。手机就是一种全新的物品而无需模拟其他物品，屏幕的属性就是像素而无需模拟其他材质的属性。WP的屏幕是完全的平，前后都没有东西，所有UI元素都位于屏幕表面。&br&&br&Android直到Holo，似乎都没怎么考虑过这个层面的问题。Android UI继承了桌面UI，以功能性为主。&br&&br&iOS7呢？从放缩、透视和毛玻璃的大量使用来看，似乎正是把屏幕看作通往另一个世界的窗口。UI元素可能位于屏幕后面相当远的地方，而屏幕本身可以在这个虚拟世界中自由移动。&br&&br&回到Material Design，这些漂浮的小纸片，就“真实”地漂浮在手机这个小盒子之内，而屏幕是一块透明玻璃，用户可以透过它一窥盒子内部。UI通过阴影所表现出的深度，不应该超过手机本身的厚度。&br&&br&总结：&br&iOS（1-6）：手机是百变盒子。UI突出于屏幕。&br&Android（~Kitkat）：手机是小电脑。UI是什么没想过。&br&Windows Phone：手机就是手机。UI在屏幕表面。&br&iOS7：手机是观察异世界的魔镜。UI在另一个空间。&br&Android L：手机是装着漂浮小纸片，有玻璃盖子的盒子。UI在盒子内部。&br&&br&P.S.&br&说到盒子里的纸片，首先想到的是Paper Mario：&a href=&/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Official Site&i class=&icon-external&&&/i&&/a&&br&&br&--------------------------------------------------------------------------&br&&br&看keynote时对Material Design这个提法十分不解，因为新UI风格并不注重表现材质，也没有体现纸张的物理特点。&br&&br&但看过Material Design的panel后，我觉得Matias Duarte确实已经用两个词说出了Material Design的核心，那就是所谓的material，并非纸/毛玻璃/皮革/木头，而是一种在现实中不存在的&magical material&。&br&&br&1. Material，即屏幕上的元素还是由类似真实世界的材料构成的物体，有类似的物理属性（形状比较固定，占据一定空间，有前后遮挡关系，会投射阴影，可以移动...）。相对的，Metro（比较极端地）和Holo（比较中庸地）都倾向于屏幕上的元素只需要具有像素本身的属性，而不必模拟真实世界。&br&&br&所以我们看到，在去掉阴影的潮流中，阴影又变得无处不在。另一方面，由于真实世界的物体通常不会瞬间、凭空出现和消失，所以平移、旋转、扩展和画面外飞入代替了原来从屏幕中间出现的过渡动画。&br&&br&2. Magical，即这种材料并不模拟真实世界某种具体的材料。拟物化的一个问题是用户对真实世界的材料有非常多的期望。把界面画得太像真实物体，你无法实现用户的期望。比如你可以在屏幕上画出很像纸质通讯录的通讯录，然而用户期望纸质通讯录可以翻页，可以折角，可以用笔批注，甚至有纸的触感，而你没有做到。&br&&img src=&/f619f9390ddf42fdc75fcf_b.jpg& data-rawwidth=&386& data-rawheight=&290& class=&content_image& width=&386&&相对的，不在视觉上模拟特定材料，比较容易控制用户的期望。一个不明材料制成的卡片，用户的期望可能只是可以移动而已，而这恰恰是我们想通过卡片表达的隐喻。&br&&br&3. Magical的另一面，即这种材料不必受真实世界材料的限制。仍以仿纸质通讯录为例，用户并不期望纸张上的文字可以上下滑动，在屏幕上实现这一功能反而会与用户对材料的认知相矛盾。&br&&br&而这种抽象的，&魔法&材料在必要时，不必受真实世界规则限制。比如大量使用的卡片伸缩变形动画，一方面为符合日常经验，变形要以连续的动画而不是瞬间完成，另一方面我们不必费心考虑和表现卡片是如何伸缩的（比如表现为卷轴），反正它是魔法材料。又如UI元素像现实世界一样有前后关系并投下阴影，但我们不必考虑它们是如何悬浮于空中，要不要加上支撑结构。&br&&br&总结：既要充分利用“材料”带来的现实世界隐喻，又不要被现实世界规律所束缚。Material Design看起来很正确，但很难把握度。
参考The Verge对Matias Duarte的访谈：注意这一段（下划线和粗体是笔者加的）：Material Design "unified us in our thinking," Duarte says, admitting that "it’s absolutely a constrai…
设计师 Yoyo
来知乎，参与讨论