Flat Design 与Skeuomorphism之间的战争——平面像素
作者：大漠 日期：2013-04-21 点击：2305
本文由LL根据Sacha Greif的《The battle between flat design & Skeuomorphism——flat pixels》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://sachagreif.com/flat-pixels，以及作者相关信息
——作者：Sacha Greif
——译者：LL
如果你对设计这个行业有所留心的话，你就不难发现当下正进行关于skeuomorphism和flat design两者的讨论。
下面我们来进行一个简单的测试，根据下面的两个不同的计算器设计特，你能够发现哪一个是属于skeuomorphic的设计范畴吗？
哪个应用程序运用了skeuomorphic设计?
如果你对skeuomorphic一无所知，那么很显然，这说明你在这几个月来还没接触过这个被接近5000篇博客文章所介绍探讨的话题。因此，现在你更要好好把握住这个“进修”的机会咯！
但是如果你信心满满地指出：“当然是下边！”，不过，我还是很遗憾地告诉你还是错的！看到了没，这确实是个棘手的问题。
其实这两个应用程序都属于skeuomorphs的一种（维基百科说了：skeuomorphs是指原有物件中某些必需的形式在新的设计中已不再必要，但新设计仍模仿旧有形式，以使新的外观让人感觉熟悉和亲切。），傻眼了吧，想知道为什么那就请您继续看下去吧。
skeuomorphism的定义
这个长长的单词所表示的就是借用已有的实物外形，即使我们这个时候并不需要其原来的功能。举个例子来说，智能手机发出快门声提醒我们这是个摄影机软件，或者日历软件当中出现撕裂的纸以及金属环也同样如此。
或者，正如wikepedia（维基百科）告诉我们的
skeuomorph相当于一个仿真的修饰物，或者说用其他的材料或者其他技术来模仿原型框架设计出的物体。
然而维基百科只提及到“仿真的修饰物”，在数字化的领域当中，skeuorphism在数年前就变得非常流行，这要得功于ios，是他激活了高质感材质以及栩栩如生的按钮设计的发展浪潮。
从windows RT不难看出微软Metro的审美特点
在另一方面，新兴的“扁平化设计方式”则占据了半壁江山，其代表就是微软的Metro UI设计。扁平化设计追求视觉上的简约，用简单的形状以及色彩来替代纹理和光影的效果。
Skeuomorphism or Realism?
确切地说，虽然这个趋势并不仅仅关于skeuomophism（代表着模仿已有模型的相似设计），更多的是关于写实设计方面：而对于致力于模仿真实世界中材质纹理的视觉风格，苹果公司在他们应用程序在纹理质感上的所作的大量努力就是一个很好的例子。
两个应用程序都模仿运用了实物计算器的布局，因此他们属于同型物skeuomorphs
因此，回到我们之前的例子，尽管只有右边的那个例子更加追求写实的视觉风格，但是因为他们同样都仿制了实物计算机的布局，于是这两个计算器都属于仿型物。
当然了，仿型（skeuomorphic）设计和写实设计这两者总是联系得非常紧密的：仿型设计倾向于写实设计（因为他要看起来和已有的实物相似），而且写实设计也要倾向于仿型设计（不然的话，捣鼓出来的东西也跟现实格格不入。
因此尽管写实设计是一个单纯的视觉风格，而仿型设计在更深层次影响着设计。但他们两者自身在技术上没有任何错误。正如Loren Brichter（of Tweetie & Letterpress fame）在最近的一个采访当中指出。
仿型设计其实一点都不差。我们需要以我们平常的习惯来浏览设备。那些所谓花俏的纹理材质仅仅是一个视觉设计上遇到的问题......我希望人们对它本身不要有太多的非议。
如果说问题在于“花俏的纹理材质”，为什么我们在一开始就放弃他们呢？而又是什么使得我们如此之快地厌倦他们了呢？
Find My Friends：在主界面运用了花俏的纹理材质
一切源于iphone
我相信，无论是引领写实设计的浪潮，还是最近对其的强烈抵制，这些情况的发生都跟一个产品息息相关：iphone
在iphone诞生之前，在用户界面上的拟物写实设计是很少见的，当然了，这在电子游戏上是例外的。为了让人感觉身临其境，游戏设计师很早就开始精心修饰他们的用户界面。就拿暗黑破坏神2来说，那富有特色的石头锻造按钮以及玻璃式的能量计通通都镶嵌在哥特式的雕像中。
暗黑破坏神2的用户界面，跟许多电子游戏一样，富有特色且逼真的纹理（但不能算是skeuomorphic），行走的奶牛看起来也是非常逼真的。
但在更多“严肃”的场合下，写实设计仍然受到非常大的制约。一个显著的例外就是由早期的Mac OS X继承而来，被誉为“具有第二代网页风格”的玻璃按钮。
这些华丽的按钮无疑就是乔布斯醉心于拟物写实设计迈出的第一步（ 杂志《Fast Company》有提到，苹果公司的 iCal（一种在 Mac OS X 操作系统上运行的个人日历应用程序）中的皮革样式灵感来源就是乔布斯私人飞机上的座椅上。
在早期的OS X版本中 玻璃质感的写实设计随处可见
借着IOS系统，苹果公司决定将写实设计发扬光大，但我相信他们走的这一步显然经过了深思熟虑。
IBOOK的页面转换动画：当前看起来确实挺花俏的，但是变革已悄然在发生。
首先，你不能小看写实设计的视觉感染力：当然了，在若干年后，我们还是会对这些纹理质感以及页面翻转动画感到俗不可耐，但是不得不承认，Iphone在一个操作系统上把用户的界面修饰得如此富有视觉感染力，这种成就是无人能及的（更不用说是在手机操作系统上了）.
而且我们不要忘记了，iPhone对于许多用户来说俨然就是一个新鲜的设备。写实设计是连接已有物与新生物的一个桥梁，为了用户在他们的新设备上感到亲切。就拿日历来说，因为它的设计，很容易在别人第一眼就能够看到他的功能是什么，只是他们用按钮来取代翻页动作，所以在这里只需点击就能够翻转页面。
关于写实设计的讨论
一个媒体的技术限制总会影响其外观的表现形式，无论是对于智能手机还是对于油画来说，统统都一样。无容置疑，在Iphone上使用写实的设计手法，是存在一些实际原因的。
首先，在智能机，不同于台式电脑那样，应用程序填满手机来屏幕运行。你不会看到两个应用程序同时在手机屏幕上显示出来，所以说，即使两个应用程序有着截然不同的两种视觉设计样式，也不会让你感觉到一种不。
设置和天气：相同的操作平台，相同的出品公司，完全不同的设计样式。
因此一旦苹果公司能够明智地在IOS操作系统中中提供一套优秀窗体小工具的时候。他就能够在一开始使得Iphone应用程序的视觉样式不再墨守成规。
同样，Iphone的设计考虑到的是你的手指，而不是一支细小的触控笔。Iphone很快发现触控的区域大小不能小于一个特定的尺寸。（苹果的人员界面设定指出至少是44*44ps大小。）
在iphone推出前的智能手机狭窄的列表以及小图标这些制作的形式难以得到人们的认可：因为当时压根就没有在这一细节上下工夫。Iphone的大大的触控区域使得在屏幕上展示得更少，却利远远大于弊。
这些理论对苹果刚起步的设计方向有着很重要的贡献，事实证明，这些设计刚被推出了，很快得到了设计领域的认可接纳。
毕竟，互联网是一个让设计者很抓狂的平台，在这里，有着种类繁多的浏览器，可调整大小的视窗，，以及缓慢的加载时长。以至于每一个设计师都痛苦地发现，在浏览器中最终的显示效果总是达不到当初PS中弄出来的那个样子。
伴随着iphone的推出，突然间天上掉馅饼似的，一个只支持单一渲染引擎的平台呈现在设计师面前，固定的尺寸，更加廉价的开发成本，（并不是指限制屏幕上丰富的色彩）。这些没有一个不让你热血沸腾地投入其中。
当然了，游戏设计师早在很多年之前就在这样的平台上工作了，（也就是游戏机），这是因为游戏要经常以写实设计手法设定用户的界面。
同样，不得不说的是固定大小的规模确实使得位图的使用变得非常方便，然而不是对每一个智能手机操作系统都是如此。拿个例子来说，安卓应用程序可以支持多种显示和屏幕尺寸，这使得应用程序的富有灵活性的设计变得更有挑战性。
尽管，智能手机已能带给我们非常好的真实体验，然而到目前为止，正如我们所看到的，各种突破革新仍然在不断上演，让我们拭目以待。
skeuomorphism的问题
很多人都曾经谈论过写实设计方法和skeuomorphism上过多使用的地方，一般都是体现在仿制的皮革以及木制的UI控件上。
首先，写实设计上如果稍有不慎，很容易使得陷入粗俗的境地。毕竟，对于真实的世界来说，仿制的皮革以及仿制的木头未必就能传达给人真实的感觉，这样，疑惑就来了，为什么我们屏幕里的事物要有所不同呢？
混淆skeuomorphism也是一个需要解决问题：设计制作事物使得其看起来像一个已存在的事物，而不需要已存在事物的功用，所以说这就是用户界面设计的“形似而神非”
苹果的ipad上的通讯录这个应用程序就像一个笔记本，而且你不用在浏览器上翻动你的页面。
苹果的ipad上的通讯录应用程序就是一个明显的例子，看起来就让人感觉像是电子书，然而却没有电子书的使用法则，通讯录不能够让你通过点击页面来进行左右的翻动，没有一点书本的特征。
无论他们的表现形式是否为写实，但是更应该让人关注的更深层问题应该是，在采用skeuomorphic的设计方法的时候，该怎么联系上其相应的功能。
问题的来源于设计的参考来自于已存在的事物，所以在你参照的过程中，即使那些没有必要存在的局限性，也在你参考已有事物进行设计的时候，也一并带上了。
举个例子，日历通常来说都是一页的纸张显示一个月份的内容，很显然，他们都是受限于物理纸张的局限性。
尽管在数字媒体上没有这样的限制，但许多电子日历还是没有选择把整个屏幕留在当前的周末上，而是仍然坚持在一个屏幕上显示单个月份的内容。
caculator，Calcbot,以及Soulver在计算机上都有不同的表现，注意当中的写实设计，苹果甚至在calcbot中使用传统的“c”按键来代替删除键的清除躬耕
另一个好的例子就是苹果IOS系统自带的计算器程序：一贯追求真实的苹果计算器不可避免在数字化的领域中还是带上了来自现实中的局限：单一行列的显示，有限的按钮等等......
然而，Calcbot通过加入一个历史查询的功能，很好地摆脱了现实中计算器上的限制。
Mar 应用Soulver所更加彻底地抛弃了实物计算器的局限性，取而代之它展示给大家一个新的“天地”。
这些UI元素看起来非常绚丽，但是实物中的局限性依然同样与它们如影随形，（内容摘自adrien olzak的braun ui）
或者拿着个简单的灯光开关来说吧：以上这些都运用了实物类的UI设定，但不像一般单选按钮或者下拉按钮那样，他们能够让我们很直观地看我们所要选择的东西，甚至在有三个选项的情况下也同样有着更加出色的表现。
如果能够得到正确的使用，skeuomorphic和写实设计会给我们带来与现实世界更加紧密的联系。这有利有弊：有时候，联系太过于密切，会导致在你想要修改已经完成的作品的时候，感到无从下手。
flat design的崛起
整个行业都纷纷预测在各种可能的设计趋势，然而，没人想到的是，吹起下一个设计浪潮的风向标的公司，居然是微软。
不管为了跟苹果划清界限，抑或是因为他们仅仅觉得这是个更好的设计理念，微软在他们的Metro风格的用户界面上展示了截然不同的审美理念.IOS系统中的阴影，高光，渐变，纹理效果统统通通在Metro中找不到踪影了，取而代之的是平面极简化以及清新大方的排版设计。
Metrc vs Metro
在2012年，微软在德国人的连锁超市上遇到了麻烦，Metro侵犯了其商标，这样导致他们被迫放弃“Metro UI”这个商标名字
尽管他们想出他们专属的设计语言进行替代，但我还是在文章中继续使用“Metro”这个名字。下面我要说的是一种用户界面的显示风格还是一个连锁超市的商标？我想你应该清楚明白。
Flat design其实早已出现在大家的身边其实你可以追溯到他来源于Swiss 设计，但是直到大家通过微软公司，它才得到了更多的关注认可。
无论大家是否钟情于清新大方的排版设计格调，可以肯定的是，微软的新设计在技术人员当中引起了不少共鸣，他们对Metro专注于排版以及色彩运用方面的改革不吝赞美之词。
而且 flat design追求纯粹的视觉体验，这也使得在钟情于最简化设计理念的设计者们心中同样引起了共鸣，著名的Antoine de Saint-Exupery指出：要实现完美境界，不在于能否包罗万象无所不有，而在于每一个有限的组成部分，都是不可取代的精华.
Letterpress一个应用在游戏中关于flat design的优秀例子
这导致了在许多设计者在探索学习的过程中开始自我反省，渐渐意识到在photoshop中涉及到那些质感光感的设计也许自我感觉挺不错的，但是把这些设计应用在股票交易的软件上却不是那么一回事。
甚至在游戏的UI图标上——精致的结构以及精致的阴影-都开始有往简单化的方向发展的趋势了。
在近期，常常被大家谈起的两个游戏，Letterpress以及Hundreds这两款常常被大家谈起的游戏都属于以极简化设计（flat designs）。更有甚者，Letterpress 的作者甚至指出在整个游戏只使用一个简单的图片。
排版影响
移动应用The Magazine前端排版）
在这里，我要说的不仅仅是Metro，当微软开发Metro的时候，苹果所支持的一项技术革新同样在进行：高清的屏幕显示技术被引进（“retina”视网膜），一开始在iphone上，后来扩展到了ipad以及laptops上
这样，计算机显示的效果史无前例更进一步地接近实物。
早在前几年，浏览器对诸如EOT以及WOFF这些字体格式的兼容，铺迈出了浏览器兼容所有字体的第一步，而许多公司为了使得他们的显示屏幕达到最佳化，也开始了漫长艰难的改进历程。
但是此时此刻，retina技术的诞生使得在硬件要求不算高的情况下，超高清画质不再遥不可及，正如Erik Spiekrmann 在tweeted所说的：
如果你希望依靠retina技术得到好的显示效果，不需要再考虑其他因素了，仅仅需要像以往一样，搜索一个好的样式模板就可以了。
或者，正如John Gruber在他的文章讨论的主题：
在UI设计当中skeuomorphic的特效效果的渐行渐远的同时，也标志着retina—分辨率设计时代的到来。
所以说当你具备一个高画质的显示屏以及屏幕最佳化的字体，你很快发现这已经非常完美了。
响应式网页
然而，移动物联网对设计的影响，其中的一部分我们不能忽视：响应式设计。
响应（或者说自适应）的设计使得在不同的设备上需要提供不同的设计的日子一去不复返，现在仅仅一个设计就能满足适应多种设备的屏幕的显示需要。
响应设计这个能够满足网格结构从多栏到单栏的转化，字体的大小变化，或者通过点击电话屏幕激活悬停菜单。
The Next Web的最新设计就是关于极简化以及响应式。
固定不变的元素很难适应大小以及形状的改变。取而代之的是，设计者发现在浏览器上依靠CSS生成的图像会更有效率。
而且，传统的设计程序photoshop，这个能够提前为设计者提供静态设计模型的软件，不能很好地满足响应式设计的需求了。
与此同时，你会因此发现为什么许多设计者开始避开注重质感的设计而向极简化的设计靠拢。
极简化设计的限制
扁平化设计并不是完美无缺的，它也有它自己的问题。
首先，就像任何设计趋势一样，它就难免会被某些随波逐流的人不加思考地滥用。
但是，我们要明白的是，在这个极简化的潮流当中，受到影响最大的写实设计手法任然具备其特有的魅力，况且，过度地追求极简化有可能会导致在可用性上遇到问题。
具备少许渐变的效果以及圆角的按钮，需要一个柔和的内部阴影的框架区域，而且导航栏需要浮动在其他内容的上面，这些大量的细节线索，有助于在用户界面上引导用户的使用。
摒弃这些细节线索，取而代之采用扁平化的设计方法，这会使得所有的元素一下子被显示在一个平面上，这就会很自然地让人产生疑惑：这是一个按钮呢？还是个横幅广告？如果点击他会产生什么样的响应？
作为一名设计师，如果要做到顾及用户需求的同时，也能符合自身的审美追求的要求，是否就应该抵制极简化的设计浪潮？如果我们在之前写实主义的潮流下也是这样畏缩不前的话，那么，现在用户恐怕还得跟粗糙的界面打交道，整个行业难以有所进步。
因此我觉得允许两种设计方法的同时存在未尝不可，并不是一定要斗到你死我话的局面。如果在需要写实风格的环境下，那设计就注重于纹理和高光。在另一方面，如果一个极简化的审美风格更能更好地达到设计者的设计目的，那么你就得要开始少用渐变的效果了。
要想知道哪个项目更适合采用哪个设计方式，唯一的办法就是做很多的尝试，实践出真知，经验的积累自然会向你给出答案。
不速之客
许多团体在最近这段时间对“写实主义设计vs极简化设计”看成是苹果公司和微软公司的较量。
然而让人没有想到的是，谷歌开始重新在设计方面上摩拳擦掌，它的动作似乎在宣告所有人，我要来抢你们饭碗了，都给我小心点。
谷歌地图在苹果手机中大量的极简化设计
借助着他们最新的移动应用程序，谷歌开始向世人展示一个新的设计方式，有些人把这个设计方式称为“almost flat”或者也有人叫“skeuominimalism”，不像gmail或者google reader那样，这个新的设计方式给人清新大方的同时，又谨慎地使用一些像阴影，渐变之类的元素。
这个设计方式为大家展示了上面所讨论两个设计方式的精华之处，具备写实主义的情景支持以及恰当提示，又有着与极简化设计有所区别的纯粹简约。
但是另一个看法是把他当做极简化设计的升级版：寻求效果的同时就简约主义的层面来说，朴素且又不失可用性。
换句话说，谷歌所展示给我们的设计更像是一个改进后的东西，并不能算是一个创新的设计（尽管如此，我们还需要慢慢去咀嚼，学习它。）
选择前进的方向
对于上述的这些，我改要做出怎样的抉择呢？
如果你能提出这样疑问，是非常了不起的。当然了，在此之前我们要知道的是，这些设计方式仅仅是工具，他们自己并不能完成任何目的。然而你，注重一个明确的设计方向也是非常重要的（至少我觉得是），而且更多的设计师比我更能明白这一点。
因此，经过慎重考虑，我会选择极简化设计的这个阵营，并且全身心专注于此，其中包括谷歌的某些设计。
这不是因为极简化设计有着无可比拟的优势，也不是因为我钟情于简约主义。而且我也和每一个人都一样，也都深深喜爱着IOS应用软件中华丽精美的构造。
我只是觉得，在追求真实的设计效果上，我们的设计师已经非常成熟了。上Dribbble随便看看，你就能找出一大堆让人惊艳不已的3D渲染或者Photoshop模板。
而当前我们所欠缺的就是灵活的设计，响应式网站能对多种环境提供多种解决办法，这样就能做到事半功倍。
我相信在我们的工具能够获取网页上信息的时候，我们在开始写代码的时候肯定拿来借鉴一下，当你在设计以及编码布局的时候，我想你会喜欢那些简单的东西。
极简化设计同样能够使你把心思放在排版和样式上，而网页设计的这两个方面也远没有传统印刷行业如此复杂。
而在移动端方面，极简化设计可以轻松进行动画和交互设计，就像我们所看到的letterpress和Clear
这就是为什么我最后选择了极简化设计的原因：这不仅是个关于审美选择，我还要考虑到这个选择能否在弥补我的缺点上有所帮助。
扩展阅读：
- Skeuomorphism
- What Skeomorphism Really Is
- Loren Brichter: Designs on the future of iOS apps
- User interface design in video games
- Will Apple’s Tacky Software-Design Philosophy Cause A Revolt?
- An Android Design Process
- Skeu.it
- Avoiding the Uncanny Valley of Interface Design
- Metro (design language)
- Flatliners
- The Flat Design Era
- The Trend Against Skeuomorphic Textures and Effects in User Interface Design
- Why I’m No Metrosexual
- Flat UI is Not the Only Way Forward
- How Flat?
- The Flat Sink
- Redesigning Google: how Larry Page engineered a beautiful revolution
- Almost Flat Design
- Skeuominimalism - The Best of Both Worlds
- Less Aesthetic, More Design
- The Post-PSD Era
译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！
关于LL
广东某大学在读大学生，热爱Web前端，对前端技术有强烈的兴趣，在这里希望有机会和大家共同分享与交流，从而更好的提升自己。请关注我：新浪微博
如需转载烦请注明出处：
