首页 > 网页教程 > 设计分享 > 扁平化设计与Material Design区别在哪里?

扁平化设计与Material Design区别在哪里?

时间:2015-04-30    来源:960px

两种相似的设计风格,一个基于另一个。一个是新热事物,另一个,有人猜测,已经以自己的方式成为一种时尚。一个是自发的——适应设计的趋势,另一个却是有目标——专用的设计指导规范。

你可能明白了扁平化与Material Design之间的冲突了。

但是,他们之间不同是什么呢,本质上是一个比另一个更好?在某些用途上更好?实际上,一些人想知道它们之间的差别有多大,让我们从最基本的开始:拟物化设计的身影出现在每一个身上。

拟物化设计

扁平化设计 MaterialDesign materialdesign教程

拟物化设计, 在这个背景下,设计是为了模拟真实的物理世界。通常,这需要设计的在线应用的形式看起来像他们的真实世界的变体,比如像电子合成器软件,做的像键盘。这种界面的设计方式,在大部分的时间里占据了主导的地位。

问题是,这不是基于数字设备可用性设计的,或者所有的旋钮和按钮可以用鼠标或触屏操作,它看着只是模仿真实事物的外观。

实际上,设计圈得到的结论是,需要其他东西,这将去掉所有的复古的装饰元素,然后给他们留下的东西是,可用性放在第一位。所以他们从界面设计移除所有痕迹的拟物化设计,创建了扁平化设计。

扁平化设计

扁平化设计 MaterialDesign materialdesign教程

扁平化设计,在许多方面,基于最基本的元素进行设计。它选择删除任何样式,那些令人捧腹的三维表现方式,像投影,渐变与纹理。它只关注与图标之间的联系,字体和颜色。

这是第一个在数字媒体设计上连贯的风格,一个利用互联网的独特的属性和用户的需求,快速发现的简单按钮,直接配色方案为了快速识别的元素,和简洁的图标。

外观在扁平化设计里面是次要的:重点是原始的功能。简单的图标隐喻甚至可以省略一些网站的内容, 引导用户进行操作,仅仅基于它的颜色和图片。此外,它加速加载时间和高或低分辨率屏幕上看起来显示一样好,提供更加可靠的用户体验。正因为如此,对设计者和用户来说它会让事情更容易。

赞成的意见

它拥抱了屏幕的限制基于这些去工作,而不是尝试去做别的事情。

流线型的设计,摆脱不必要的图形和动画元素,减少加载时间。

没有拟物化元素,你的读者能很快速度发现内容。

删除所有不必要的设计选择,使网站设计速度更多

扁平化设计的简化网站不断地适应浏览器,可以非常容易做出响应。

反对的观点

扁平化设计可能限制、约束你去使用简单的颜色,形状和图标。

如果走得太远,很容易不小心创建一个毫无特色的和看起来一般的网站

一些网站,或应用程序,需要复杂的视觉线索来指导用户来进行如何使用,这是扁平设计的一个主要的失败点。一个常见的抱怨是,静态的矢量图形,它缺乏阴影,边缘很难分辨是否可点击按钮

它的普遍性很难创建一个看起来很独特的网站或应用程序。

有一点需要注意,这是一个2010年代中期独特的审美,你的网站很快会过时,如何你不计划去重新设计你的网站,时间相对会很快。

Material Design

扁平化设计 MaterialDesign materialdesign教程

扁平化设计的评论家,认为这走的太远了,消除所有的拟物化比较激进,即使是有用的。进入,借用Material Design层的概念,使用阴影,将数不清的图像进行编辑和分离;斜面和动画,它利用自然交互关联深度与重要性。

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

想象一张纸,能够随意随意扩展收缩,重塑自身,融合和分离。现在把它们一个个叠放起来(他们也可以漂浮空中),然后在每张上面画一个网站要素。简而言之,这就是Material Design的概念。

然而Material Design并不是完美的设计文档的特征。它也并非一成不变的铁杆定律。试着更多的把它想成问我未来设计的物理框架和模板。它的设计具有普遍适应性,就像安卓穿戴手表一样,能响应屏幕的各种尺寸,甚至是不同形状。Material Design的应用在其他app开发商中也在推广。

Material Design是安卓应用设计的标准,因为它被应用到提及的穿戴设备上。它是否应该用到IOS上是引起不断争论的源头。有人争论说保持谷歌外形很有必要。其他人则认为它和剩下的操作系统相互冲突。孰对孰错,全看你自己的决定。

赞成的意见

三维安排让程序更易于互动:比如阴影被安排用来显示分层。

和扁平化设计不同,Material Design都有详尽明确的一套参考,没有什么需要你去猜测。

如果你想开发一个多平台的东西,比如一个网站和一个安卓应用,Material Design对所有设备都提供统一的体验。这样的话就会增加用户使用方便性,进而巧妙地促进你的品牌化。

如果你对动画感兴趣,Material Design是个不错的方法因为它自带了许多这一类型的动画。没有它们你就只能动手画了。

反对的观点

不管喜欢与否,Material Design不可避免的和谷歌关联。如果你想使自己远离这点,为你的网站或应用创造一个独特的特性,使用谷歌指引来实现要困难的多。

不是所有的系统都能实现预期帧频。而且你很难知道该怎么做才能提高那些不可实现者的可用性。

动画会耗尽手机用户的电池。

强制开发者们遵守设计指南可能会进一步扼杀个体创造力,阻碍更多动画和装饰特点的发展。

总结

Material Design和扁平化设计真的没有那么大的天壤之别:两个都用同样干净和最低的美感。当扁平化界面被分割,你基本能从中想到质感界面。尽管Material Design动画广泛收到表扬,但是总结起来也不过是更加用户友好化。事实上,没有人说你不能把二者的美感相结合,用Material Design激活一成不变的扁平化网站。

在我看来,扁平化网站很实用。比起满是动画和复杂图片的网站,它们的下载速度更快。如果你要设计一个极为简单的网站,针对使用不同设备,技术经验水平不等的各种用户,或者只是重视用户体验多于形式,扁平化设计正适合你。如果你对在网站上放各种动画或动态图片无感,主要对原始的简单化和可用性有兴趣,毫无疑问我会推荐你选择扁平化设计。但是如果你想创建一个有动画的更加花哨的网站,当然要选择Material Design。

(教程作者:designmodo)

相关推荐
分析用户界面中扁平化设计的优缺点
另眼观看用户界面扁平化设计的不足之外
扁平化风格的网页设计案例欣赏
什么是扁平设计?如何创建扁平化设计风格?
21个扁平化设计的动态创意链接交互样式欣赏
换汤不换药?看应用们如何“为iOS 7设计”
网页设计中如何运用圆形的搭配 让网页更出彩
界面设计教程:如何做好扁平化设计之交互篇
扁平化设计的前世今生:灵感或来自瑞士风格
扁平化:回归真实的设计
网页设计分享:如何预知未来的大势所趋?
设计完美极简风格网站的六个步骤分享
年度最佳!20个最优秀的网页设计案例欣赏
网页设计师必看:2015全球网站设计趋势推荐
关于扁平化设计的五个要素
网页教程:扁平化设计的步骤和要点
网站改版:Material Design复杂响应式设计
APP浏览体验设计的思考:如何理解用户的眼?
20个创意漂亮的手机应用程序登陆页面设计欣赏
iOS7用户界面设计的10个准则分享
交互设计上常见的界面切换动画如何优化
Windows Phone 8 UI设计指南分享
APP设计经典:Pinterest的交互细节
对症下药!如何设计受欢迎的应用引导页?
搞定APP着陆页优化的超实用原则(附工具)
APP界面设计:移动缺省页如何设计才会内容“丰富友好”?
产品设计:FEEDLY创始人再聊改版实战经验
写给初学者:移动站点app开发尺寸基础知识
APP界面设计教程:让人眼前一亮的渐变设计手法
APP导航设计:不要在移动端菜单设计犯这些错误
交互设计基础!四个移动界面常见的动效类型
国外UI设计师:UI界面设计作品精选
APP设计!6个方法助你设计出优秀的APP
APP设计零基础教程:5步让你设计出漂亮的APP界面
15个值得学习的APP交互体验设计细节

分类导航

教程推荐

热门特效

热门教程