Material Design 是一个怎样的设计风格
发布网友
发布时间：2022-04-22 16:32
共4个回答
懂视网
时间：2022-05-12 11:28
这是一款非常简单的Material Design风格手机App菜单特效。该特效使用CSS3和少量的jQuery代码来完成。在用户点击汉堡包菜单按钮之后，按钮会变形放大到整个手机APP屏幕，同时菜单选项会从屏幕下方滑动上来，效果非常酷。
制作方法
HTML结构
该APP菜单的HTML结构使用嵌套
<div class="phone"> <div class="screen"> <nav class="nav"> <ul> <li><a href="#">搜 索</a></li> <li><a href="#">主 页</a></li> <li><a href="#">HTML5学习</a></li> <li><a href="#">CSS3学习</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> <div class="nav-toggle"> <div class="icon"></div> </div> <div class="lower-screen"> <div class="card"> <h2>Material cards</h2> <p>...</p> </div> <div class="card"> <h2>..</h2> <p>...</p> </p> </div> </div> </div> </div>
CSS样式
在这个APP节目设计中，手机的界面采用固定的宽度和高度，并设置为固定定位。手机的屏幕也设置了固定的宽度和高度，并设置为相对定位。
.phone {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 280px;
height: 580px;
border-radius: 40px;
background-color: white;
}
.phone .screen {
width: 260px;
height: 450px;
background-color: #ECEBE9;
display: block;
margin: 65px auto;
overflow: hidden;
position: relative;
border-radius: 2px;
border: 4px solid #262626;
}
汉堡包图标的包裹元素设置为一个半径30像素的圆形。它的:before伪元素设置为和它同样的大小，后面会使用这个伪元素来制作圆形扩展的动画效果。
.nav-toggle {
width: 60px;
height: 60px;
z-index: 2;
border-radius: 50%;
margin: 10px;
position: absolute;
cursor: pointer;
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
-webkit-transition-duration: 0.66s;
transition-duration: 0.66s;
-webkit-transition-timing-function: swing;
transition-timing-function: swing;
}
.nav-toggle:before {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #4A75E6;
content: "";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
-webkit-transition-duration: 0.66s;
transition-duration: 0.66s;
-webkit-transition-timing-function: swing;
transition-timing-function: swing;
}
在用户点击了汉堡包图标之后，特效中使用jQuery代码来为body元素切换class，当body元素被添加了.nav-openclass之后，.nav-toggle:before伪元素开始动画，圆形开始扩展。
body.nav-open .nav-toggle:before {
width: 1200px;
height: 1200px;
background-color: rgba(74, 117, 230, 0.95);
} 整个效果的CSS代码十分简单，具体请参考下载文件。
热心网友
时间：2022-05-12 08:36
系统界面风格
“鲜明、形象、深思熟虑”，Material design此次的界面风格设计用这几个词语来形容是再合适不过了。Material design为安卓提供了新的视觉语言，在基本元素的处理上，借鉴了传统的印刷设计、字体版式、网格系统、空间、比例、配色、图像使用。在这些设计基础上 下功夫，从而能够构建出视觉层级、视觉意义以及视觉聚焦。精心选择色彩、图像、选择合乎比例的字体、留白，力求构建出鲜明、形象的用户界面，使得新的系统 界面是如此的漂亮。
而在色彩的选择上Material design的原则是“大胆、图形化、有意义”。在Material Design中，UI配色提倡一种主色，一种互补色。在区域较大部分的色彩采用主色的500色调，区域较小的部分例如状态栏采用深一点的色调。如此巧妙的 色彩搭配使得应用看起来非常的大胆、充满色彩感，凸显内容。
Material design对于界面的排版非常的重视。众所周知，好的排版会让界面看起来非常的清爽，不会有杂乱无章的感觉，而要将排版做好，“基线”绝对是必不可少的 一样东西。谷歌官方文档《Material Design排版边距》中就有提到基线的摆放位置，由下图中我们可以看出，Material Design将第一基线放在距离边界16dp的地方，与文本项对齐的第二基线被摆放到距离左边界72dp的地方，这种对齐规则让界面看起来清爽、具有印刷 设计的阅读节奏感。让用户得以快速阅读信息，比较符合格式塔原则。
整体来说，Material design为安卓带来一次改革，系统的界面风格和布局都有了很大的改变，安卓系统自身的风格也渐渐显露雏形。终于不会在有人说安卓原生系统难看了。
令人愉悦的交互设计
Material design的交互设计上采用的是响应式交互，这样的交互设计能把一个应用从简单展现用户所请求的信息，提升至能与用户产生更强烈、更具体化交互的工具。接下来我们选择几个简单的动态图，来看下Material design独特的交互设计。
热心网友
时间：2022-05-12 09:54
也就是说，Material Design是基于扁平化设计而来的。
希望采纳，谢谢
热心网友
时间：2022-05-12 11:28
从苹果发布 iphone 那年开始，设计界就开始发明适合触摸时代的新材料，我们姑且称之为“数字纸”。顾名思义，它和印刷时代的纸张既有相似又有区别。
回顾历史，这里面有数条线索。
其一是手机系统。除了 iOS，早期还有WebOS。后者将程序视为卡片，将程序的多任务界面表述为扑克式的横向排列和抽拉。
另外一条线索是 app，Reeder, Flipboard, Paper for *, Medium 等等，延续至今。
容易被人们遗忘和忽略的一条线索是，在 iPad 出现之后，平板杂志的出现为纸媒向数字媒体的转化提供了短时的兴奋剂，并为后来移动 UI 的发展提供了前期技术储备。
我那会刚从某本杂志离职，在论坛上和人争论还未面世的 ipad，并宣告2010年将是数字杂志的出版元年。可以想象那时的集体气氛，在 iPad 面世之后，整个世界的杂志界如何陷入一种对于未来的谵妄狂想。
我个人的兴奋点在于，触摸杂志的UI将会发生何种有趣的变化。
我记得最早期的优秀杂志是《Popular Science》和《Wired》，前者将文本和图片置于不同图层，因此可以做相互运动。后者将纸张视为火车车厢一样连接和运动的纸的条幅，并以x 轴和 y 轴的不同方向来结构专题。页面依然是固定大小，也即卡片式的——当时国外的科技圈为了解释界面上的新变化，征引了用户界面先驱Jef Raskin 所定义的两种超文本模型：卷轴模式和卡片模式，并适用于不同手势。前者适合滚动（Scroll），后者适合滑动（Swape）。
后期的杂志我没太关注，但我还记得戈尔所做的那本环保杂志，Paper for * 如何深受其影响，以大小卡片来解决版块和文章的结构关系。
回头看来，由印刷时代的经典媒介形式来推动移动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的标题纸条，但纸条的样式被苹果改造成无边框设计，更加扁平，并同属于半透明图层。
只是在返回手势所切换的上下页面之间，苹果仍保留了页面阴影，因为它们足够的“近”，同属于程序内部。
（补完）
* * * * * * * * * * * * * * * * * * * * * * * * *
纹理、质感、色调、叠加、阴影、折叠……在纸张的诸多物理特性中，保留哪些去除哪些，各家有各家的选择，但普遍去除了纹理、质感——来自纸张的视觉表征（苹果只在备忘录、提醒事项等程序上保留了这些），而代之以空间关系。同时在减法的基础上再做加法，利用设计的创造力，重新结构和赋予纸张更多的的物理性质。
