UI设计，扁平化还是拟物化？

2010，当windows phone开始扁平化的时候，换来的是世人的嘲笑。
2011，当安卓4.0开始扁平化的时候，人们把这当作安卓为了和苹果不同的挣扎。
2013，当 ios 7开始扁平化的时候，就突然成了设计潮流了……

拟物设计就是追求模拟现实物品的造型和质感，通过叠加高光、纹理、材质、阴影等各种效果对实物进行再现（也可适当程度变形和夸张）；扁平化设计就是摒弃以上对效果（尤其是高光、阴影等能造成透视感的效果）的追求，追求通过抽象、简化、符号化的设计元素来表现。

关于拟物化和扁平化，我们可以通过以下两张图片直观感受一下：

黄健明《Salvation》

毕加索《亚维侬的少女》

拟物风格VS扁平化风格

一、如何区别扁平化 (Flat) 和拟物化 (Skeumorphism) 两种风格？

拟物化设计-skeuomorphism
特点：界面模拟真实物体的材质、质感、细节、光亮等；人机交互也拟物化，模拟现实中的交互方式。拟物设计的会让你认出这是个什么东西。

好处：
·认知和学习成本低：我外婆能看懂iOS里面几乎所有原生应用的图标；各种乐器类应用的拟物化设计；
·各种按钮的视觉质感和按下去之后的交互效果，养成用户对这类“东西”的统一认知和使用习惯；
·人性化的体贴：我相信有很多同学都非常喜欢ibooks的体验，用它来阅读确实是一种享受。

坏处：
拟物化本身就是个约束，会限制功能本身的设计。

扁平化设计-Flat
特点：界面上单色极简的抽象矩形色块、大字体、光滑、现代感十足；交互的核心在于功能本身的使用，所以去掉了冗余的界面和交互，而是使用更直接的设计来完成任务；扁平化设计则让你意会这是个什么东西。

好处：
·简约而不简单，扁平的设计搭配一流的网格、色彩设计，让看久了拟物化的用户感觉焕然一新；
·突出内容主题，减弱各种渐变、阴影、高光等拟真视觉效果对用户视线的干扰，让用户更加专注于内容本身，减少用户使用这类产品的负担，在扁平化的视觉和优秀的架构设计下显得非常简单易用；
·设计更容易，优秀扁平的设计只需要包含良好的架构、网格和排版布局，色彩的运用，高度的一致性，而不需要考虑更多的阴影、高光、渐变等等。（其实也是相对来说的，这里争论比较大，扁平化对于色彩运用和排版布局的要求更加高了；

坏处：
需要一定的学习成本，且传达的感情不丰富，甚至过于冰冷。

我们看一下Chrome的Logo的扁平化设计：

另一个扁平化例子：

拟物化ROM

扁平化ROM

二、UI设计，扁平化 (Flat) 还是拟物化 (Skeumorphism)？

在数码设备普及度不高的时代，拟物化是有效果的，尤其对于孩子和老人来说，拟物化设计更直观有趣。但是随着数码科技的发展，拟物化的好处会越来越少，随之带来的是开发成本增加、审美疲劳等问题，拟物风格更多地作为一种视觉装饰。

事物总是需要一个抽象的过程，就如同毕加索画的这只牛。

关于扁平化和拟物设计有很多争论，偏激点的说法就是扁平化即将取代拟物化设计。扁平风格还是拟物风格？其实还要根据产品功能。比如，阅读类或者资讯类的产品就可以极尽扁平，乐器类的产品我无法想象如何扁平。所以，功能先行而不是设计先行。

UI设计，扁平化还是拟物化？相关推荐

Flat UI Colors——扁平化配色参考
来源:http://www.uisdc.com Flat UI Colors(http://flatuicolors.com/) 网站采集了扁平化设计中最受欢迎的色彩,绝对是您进行扁平设计的必备工具, ...
【干货分享】使用Inno Setup设计扁平化风格的安装包
前言: 本文将提供一个通用的扁平化风格安装包模板.模板参考有道云设计,兼容win10.win7等操作系统. 模板及相关软件学习资料下载路径: 链接:https://pan.baidu.com/s/1u ...
Photoshop-八步教你设计扁平化图标阴影部分
扁平化图标阴影部分简单教学前言: 前段时间笔者一哥们让我给他们的APP设计一个图标,笔者不假思索想到了目前十分流行的扁平化风格.于是便到谷歌上搜了一下: 可以看到大牛们设计的扁平化图标很多都有一个标 ...
【有利可图网】PS教程：设计扁平化相机APP图标
今天教大家设计制作平化相机APP图标,主要通过不规则形状来完成各种软件图标的绘制,喜欢的朋友让我们一起来学习吧. 先看看效果图下面是教程 Step01:点击 - [文件]- [新建](快捷键Ctrl ...
《交互设计的艺术-ios7拟物化到扁…
第三章做好设计前期工作 3.1 移动应用的市场定位 1. 移动产品不是计算机软件 ,重在功能,不要大而全 3.2 确定产品目标 1.有价值与众不同独树一帜 3.3 为用户而设计 1. 用户细分: ...
wxpython 按钮扁平化_jquery mobile扁平化设计样式--Jquery mobile Flat UI介绍
这几天开发的web app使用了jquery mobile,jquery mobile自带的样式比较适合做企业应用, 但是要是移动互联网应用的话,就显得通用一些,没有更鲜明的互联网元素. 现在扁平化设 ...
《写给大家看的设计书》——从iOS7的扁平化谈起
昨晚看了WWDC2013的直播,iOS7以扁平化UI的方式展现在世人面前.于是接下来进入了微博吐槽时间. 大象要跳舞是很难的,这正是苹果面临的情况.现在无论是Android还是Winphone,与iO ...
关于扁平化界面风格的设计美学讨论
这是一篇关于视觉方面的小文章,关于扁平化与拟物化风格的讨论.有不少朋友来发表各自的看法,说明这确实是大家都蛮关心的设计问题.大家的观点虽然不同,但都有一定的道理,都能看出发表论调的设计师的思考和激情. ...
实例讲解扁平化设计的步骤和要点
自从苹果放弃拟物化设计,采用扁平化设计以来,扁平化设计的龙卷风就全面席卷了整个UI设计界,自此之后,无论是网页还是APP的设计,首要考虑的就是采用扁平化的设计.扁平化的设计似乎成为了有别于拟物化设计的 ...
为什么扁平化设计辣么火？它会过时么？
2019独角兽企业重金招聘Python工程师标准>>> 5月11日,Facebook 旗下的图片社交应用 Instagram 更换了新的 LOGO,放弃了复古相机的样式,转而变成了一 ...

UI设计，扁平化还是拟物化？

UI设计，扁平化还是拟物化？相关推荐

最新文章

热门文章