Question

Material Design 是一个怎样的设计风格

Answer 1

“Material”中文译为“材料”，它代表着物质的组成成分，如果放在手机系统设计中，这个词会让人很容易的联想到手机系统的界面风格设 计，比如拟物和扁平风格。不过此次谷歌的Material design并不是一种系统界面设计风格，Material design其实是单纯一种设计语言，它包含了系统界面风格、交互、UI等，此外对于谷歌来说，Material design还有着非常伟大的使命，那就是打造一个横跨所有设备的统一的设计语言，像是手机、桌面端、可穿戴设备等今天就请大家跟随这小编的脚步，来看看 这次谷歌全新设计理念Material design。
　　系统界面风格
　　“鲜明、形象、深思熟虑”，Material design此次的界面风格设计用这几个词语来形容是再合适不过了。Material design为安卓提供了新的视觉语言，在基本元素的处理上，借鉴了传统的印刷设计、字体版式、网格系统、空间、比例、配色、图像使用。在这些设计基础上 下功夫，从而能够构建出视觉层级、视觉意义以及视觉聚焦。精心选择色彩、图像、选择合乎比例的字体、留白，力求构建出鲜明、形象的用户界面，使得新的系统 界面是如此的漂亮。

　　而在色彩的选择上Material design的原则是“大胆、图形化、有意义”。在Material Design中，UI配色提倡一种主色，一种互补色。在区域较大部分的色彩采用主色的500色调，区域较小的部分例如状态栏采用深一点的色调。如此巧妙的 色彩搭配使得应用看起来非常的大胆、充满色彩感，凸显内容。

　　Material design对于界面的排版非常的重视。众所周知，好的排版会让界面看起来非常的清爽，不会有杂乱无章的感觉，而要将排版做好，“基线”绝对是必不可少的 一样东西。谷歌官方文档《Material Design排版边距》中就有提到基线的摆放位置，由下图中我们可以看出，Material Design将第一基线放在距离边界16dp的地方，与文本项对齐的第二基线被摆放到距离左边界72dp的地方，这种对齐规则让界面看起来清爽、具有印刷 设计的阅读节奏感。让用户得以快速阅读信息，比较符合格式塔原则。

　　整体来说，Material design为安卓带来一次改革，系统的界面风格和布局都有了很大的改变，安卓系统自身的风格也渐渐显露雏形。终于不会在有人说安卓原生系统难看了。
　　令人愉悦的交互设计
　　Material design的交互设计上采用的是响应式交互，这样的交互设计能把一个应用从简单展现用户所请求的信息，提升至能与用户产生更强烈、更具体化交互的工具。接下来我们选择几个简单的动态图，来看下Material design独特的交互设计。

Answer 2

Material Design，是由谷歌开发的一套设计标准，在这个文档中，它有无数独特而有趣的特性，但也许是最明显的是它提出了平面像素的Z轴概念。事实上，它在扁平化设计上面增加了一些拟物化，创造了一种一群二维平面飞机浮动在对方指定的海拔印象。
也就是说，Material Design是基于扁平化设计而来的。
希望采纳，谢谢

Answer 3

　　

　　从苹果发布 iphone 那年开始，设计界就开始发明适合触摸时代的新材料，我们姑且称之为“数字纸”。顾名思义，它和印刷时代的纸张既有相似又有区别。

　　回顾历史，这里面有数条线索。

　　其一是手机系统。除了 iOS，早期还有WebOS。后者将程序视为卡片，将程序的多任务界面表述为扑克式的横向排列和抽拉。

　　另外一条线索是 app，Reeder, Flipboard, Paper for Facebook, Medium 等等，延续至今。

　　容易被人们遗忘和忽略的一条线索是，在 iPad 出现之后，平板杂志的出现为纸媒向数字媒体的转化提供了短时的兴奋剂，并为后来移动 UI 的发展提供了前期技术储备。

　　我那会刚从某本杂志离职，在论坛上和人争论还未面世的 ipad，并宣告2010年将是数字杂志的出版元年。可以想象那时的集体气氛，在 iPad 面世之后，整个世界的杂志界如何陷入一种对于未来的谵妄狂想。

　　我个人的兴奋点在于，触摸杂志的UI将会发生何种有趣的变化。

　　我记得最早期的优秀杂志是《Popular Science》和《Wired》，前者将文本和图片置于不同图层，因此可以做相互运动。后者将纸张视为火车车厢一样连接和运动的纸的条幅，并以x 轴和 y 轴的不同方向来结构专题。页面依然是固定大小，也即卡片式的——当时国外的科技圈为了解释界面上的新变化，征引了用户界面先驱Jef Raskin 所定义的两种超文本模型：卷轴模式和卡片模式，并适用于不同手势。前者适合滚动（Scroll），后者适合滑动（Swape）。

　　后期的杂志我没太关注，但我还记得戈尔所做的那本环保杂志，Paper for facebook 如何深受其影响，以大小卡片来解决版块和文章的结构关系。

　　回头看来，由印刷时代的经典媒介形式来推动移动UI的发展是颇富象征意义的。这里面承上启下的界碑是 Reeder，它是互联网时代的杂志：订阅、聚合、推送和时间线。

　　这是4年前（2010年）我所发的微博：

　　我建议所有做ipad杂志的都学习Reeder的纸张隐喻，质地和动画idea……我所谓纸张隐喻，是指内容切换如何利用纸张的物理特性，翻页早就过时了，应该在叠加、覆盖、抽拉、翻转这些纸与纸的关系中寻找适合触摸时代的设计语言。我能找到一堆国外案例，和他们相比，国内的微博客户端、周末画报、南方周末简直毫无设计思想。

　　这是两年前我在知乎上回答问题(iOS 系统的拟物化设计存在哪些问题？为什么有一些人会批评？)的一段话:

　　问题是虚拟界面的设计所面对的原生材料是什么？它存在吗？更为本质的设计可能不在于外观，而在于组织和交流信息的逻辑形式，或者说交互。暂以一例说明，Reeder式纸张隐喻的巧妙在于，不是模拟纸张的样式和材质，而是模拟纸张的叠加、覆盖、抽拉等空间关系，如此，纸张的裂口和阴影是必要的拟物设计，它产生的虚拟逻辑更有效果地区别和组织信息。这些结合着信息形式的拟物深刻的影响了后来者，比如Safari。

　　我们看到，Snow Leopard里的 Safari如何借鉴使用了纸张的叠加关系， 并在 Jony Ive 的推动下在 iOS7上遍地开花。

　　前段日子，被 LG 收购的 WebOS 团队将他们秘密研制的新系统 Mochi 开源，我们因此看到，Reeder 的纸张隐喻如何在纸张的裂口和抽拉关系上继续启发着操作系统。（早期 Reeder 设计找不到图，可以借用 Mochi 的图来理解纸张的裂口）

　　而他们又是如何继承卡片式设计并结合纸张的物理性质（折角），在多任务交互上再次演进。

　　Recorded for GeekPark: webOS Eel Demo
　　http://v.youku.com/v_show/id_XNjU3MDczMTIw

　　二、

　　Google Design 的名字叫做Material。Damn it！竟然就叫做“材料”，就好比说，不知道给姑娘起什么昵称的时候就叫她为“女人”。

　　因为“数字纸”是一种不知道叫做什么材料的纸。

　　我们设想一种材料，它可以承载信息，信息的更换可用同一材料的更换来实现。让我们测试石板、碑材、竹简、印章、动物皮、布帛……最后发现，如果从简洁的角度考察，纸张是最优秀的载体。因为它足够薄，薄到似乎只有信息本身。而裁剪成固定尺寸并相互叠加又是最经济有效的信息存储结构。

　　但是纸张要通过怎样的形式转化到虚拟世界中呢？

　　我在 iOS 7发布那会儿曾经做过这样的头脑风暴：假设有一个量子国，量子国使用的信息媒介是“量子纸”（Material 之前曝光的名字竟然就叫做"Quantum Paper"，Damn it！）。因为量子的特性，字迹，以及量子国所有事物并不稳定，在他们的视觉记忆中，所谓事物是雪花般的干扰颗粒中的汇聚的松散形体。那么量子国手机的UI设计应该是什么样的？

　　我想该国的设计师可能会这样设计：点击导航栏上的量子按钮，按钮一下子散开成无数颗粒然后再汇聚成新的页面。而如何表达菜单栏与页面之间的上下空间关系呢？也可能是在叠加面上，导航栏和页面不断地在对方的干扰下扭曲和挥发。

　　借用这样的思考方式，iOS6所模拟的一定类似于蒸汽朋克之类的架空科技世界。前工业时代的木头、工业时代的钢铁玻璃和后工业时代的电子屏幕混杂在一起。电影中的画面是：推开木质的赌场大门，绅士们雪茄烟雾缭绕，围着圆拱形隆起带有操作按钮的桌边，打一场电子屏幕的虚拟牌戏……

　　在我们所处的宏观三维时空里，纸张构成了薄与叠加层级的原型隐喻。让导航栏和页面在形式上属于同一材料：纸张，并借用阴影——我们时空的特征来表达层级关系，这本应该是最简洁有效的方式。问题是，iOS7并没有在导航栏上使用阴影效果，而是采取了我们惯常称之为毛玻璃的形式。

　　其实可以理解成，苹果发明了一种新的“数字纸”：“透明纸”。准确的说：“浅景深纸”。为了强调界面的空间深度，苹果用景深和视差来表达图层之间的距离感。相对远的距离就无所谓阴影。

　　苹果导航栏与程序页面的逻辑距离既是近的，又是远的，因为它看似属于程序内部，又可以视为临时层，和控制中心和通知中心属于同一层级。所以可以不用有阴影。

　　* * * * * * * * * * * * * * * * * * * * * * * * *
　　（补充一部分）
　　除了导航栏上微弱的浅景深效果，苹果还在在导航栏底边用细线来修饰，这实现了阴影的目的：区隔。页面不滚动的时候你大概会觉得它只是同一页面内的分割线，但当页面向上滚动，这条线就类似于阴影，区分了上下层。
　　这种手法依然来自于 Reeder，早期 Reeder 里的分割线既分割了同一页面，又能在页面滚动的时候变成纸张的裂口，而下层内容可以从裂口中穿过——有趣的魔法纸。大概苹果觉得裂口和阴影太拟物了，在 iOS7只保留了分割线。
　　而透明标题栏的设计应该也是来自 Reeder的标题纸条，但纸条的样式被苹果改造成无边框设计，更加扁平，并同属于半透明图层。

　　只是在返回手势所切换的上下页面之间，苹果仍保留了页面阴影，因为它们足够的“近”，同属于程序内部。

　　（补完）
　　* * * * * * * * * * * * * * * * * * * * * * * * *

　　纹理、质感、色调、叠加、阴影、折叠……在纸张的诸多物理特性中，保留哪些去除哪些，各家有各家的选择，但普遍去除了纹理、质感——来自纸张的视觉表征（苹果只在备忘录、提醒事项等程序上保留了这些），而代之以空间关系。同时在减法的基础上再做加法，利用设计的创造力，重新结构和赋予纸张更多的的物理性质。