扁平化设计什么时候开始的(为什么扁平化设计成为一种趋势)

为什么要实行扁平化?

它可以让界面设计更加精简和高效。更容易快速传达信息，同时看起来仍然具有视觉吸引力和平易近人。此外，它还可以更轻松地设计响应不同设备浏览器大小变化的界面。通过最少的设计元素，网站能够更快地加载并轻松调整大小，并且在高清屏幕上看起来仍然很清晰。

作为一种设计方法，它经常与拟物化[4]和丰富的设计形成对比。

正是因为扁平化仅仅使用了简单的设计元素，所以使用这一设计的网页会加载得更快，画面大小的调整也更加轻松，在高分辨率的屏幕上各种信息和元素仍然十分醒目。作为一种设计理念，人们经常会将之与仿真设计和富含构思风格进行对比。

运用范例

时下常见的扁平化设计的案例包括微软的Metro界面，以及苹果公司iOS 7的交互界面。

谷歌公司产品界面的质感设计（包括App、网页等）虽然运用到了一些仿真设计的元素，如长阴影，但仍然可以视为一种扁平化的设计。

历史

扁平化设计起初是受到了国际印刷风格（又名：瑞士风格、国际主义平面设计风格）、文本用户界面，现代主义，以及包豪斯（Bauhaus）新兴风格的影响。

其中，人们普遍认为国际印刷风格对扁平化设计理念的影响是最为深远的，上世纪50、60年代的设计风格被认为是扁平化设计的开山鼻祖，但到后来的数码时代却又销声匿迹了。

2002年，美国微软公司发布的Windows媒体中心（Windows Media Center）和2006年发布的Zune MP3播放器都包含了扁平化设计的元素。

Zune的界面设计风格显得十分简约，其界面出现了大号的小字体排版，剪影风格的LOGO和纯色风格的字体颜色。

iphone哪一个版本系统开始采用扁平化风格设计

这个，iPhone从ios7系统开始使用扁平化风格设计啊。第一个自带ios7系统的是iPhone5s。

扁平化设计的风是怎么刮起来的？

扁平化的风是怎么刮起来的？

为何汽车企业选择在近期纷纷改用扁平化Logo？解答这个问题，需要先从上一代立体Logo的诞生过程说起。

时间回到20世纪80年代初期，在当时设计师们都是通过尺规作图、手工上色。而从80年代中后期到90年代后，电脑开始慢慢进入了传统手工平面设计的领域。

尤其是进入21世纪，得益于计算机技术的快速迭代更新，设计师们已经可以通过软件随心所欲的表达自身的想法，将更多的细节融入设计里。因此，我们熟知的众多3D拟物化且有质感的Logo纷纷诞生，形成了一波设计风潮。实际上不止车企，很多品牌的Logo都走了这个路数。

但这样的设计风格并非没有局限性。立体Logo在电脑屏幕上和在平面印刷制品上呈现出来的效果有所差异。受到物料材质、制作供应的影响，强行在平面上刻画一种本不应该存在的立体感，只会显得刻意和廉价。不过，彼时这些Logo毕竟大多时间都处于“静止状态”，不会进行动态变化和交互，因此审美上的矛盾并没有太过突出。

可以说，当时各个品牌拟物化、立体化的设计是因为电脑绘图技术爆炸式的发展造成的。技术有了，审美没跟上。所以，目前扁平化的设计思维才是正途。

对于汽车企业来说，扁平化的新Logo解决了新出现的四个突出问题

『越来越多的动态展示场景，需要Logo随之更新』

由于液晶屏幕价格的急剧下跌，以及智能手机的普及，汽车企业获得了比过去更多的动态展示载体。因此，Logo的使用不只局限于静态的展示，在App、网页以及视频中都需要进行复杂的动态交互。尤其是对于愈发频繁在科技展会上亮相的汽车企业来说，充满科技感的宣传片也需要Logo随之发生变化。

但如果使用过于拟物化的设计，会显得画面杂乱无章。

“在有限的空间内完成复杂的交互，扁平化设计可以在复杂的交互中保持设计上的一致性，减少噪音，从而达到化繁为简的效果。”AbleSlide创始人武超说道：“拟物化的设计既繁琐又费时，而扁平化设计将大大减低设计成本，兼容性更佳，更加实用。“

『车内交互：车机小屏幕提出的新要求』

如今，车机功能越来越强大，车内的UI设计的定位也在发生改变。从初期的功能车机时代，以认知与引导优先；到现在的信息时代，以交互效率优先，用户最为关心的信息和应用需要在页面中凸显出来。而扁平化设计，则是以交互为主，设计质感为辅的一种设计理念。

更重要的是，车内屏幕的大小相比电脑、电视更加有限。在一个相对较小的屏幕上，尝试呈现细节丰富的3D立体图形的效果会大打折扣。所以说，在目前形式追随功能（Form follows the function,This is a law）的大环境下，扁平化设计才是大趋势。

『遵循化繁为简的设计大趋势』

首席出行官认为，扁平化设计的目的是让人们专注于内容而不是形式，引导用户去关注品牌和产品的本质。而扁平化设计做到了这一点，它抛弃了一切不必要的阴影、质感、边框、立体感，向用户传达最本质的内容。

“之前可口可乐就做过一个很成功的案例。”武超说道：“它把所有它自身的元素都去掉了，只留了一个像丝带一样的白色线条在瓶身上，所有人都认得出，这其实是它扁平化最重要的一个结果。”

这也是Logo扁平化设计的魅力所在。其使得原本品牌的Logo元素简化，让消费者记忆与识别的负担变小。在曝光量不变乃至缩小的情况下，Logo中提炼出的元素能够被用户快速识别。简单来说，扁平化的Logo更能通过色彩搭配，唤起消费者的感知和记忆。

『更好地传播品牌价值』

从设计的源头来看，设计品牌Logo的初衷是为了更好地传播品牌价值。“比如宝马全新的Logo，去掉黑圈后让你少记了一个颜色。用户心中只会留下蓝白的格子。Logo扁平化之后，它更多的是去使用颜色和形状来区分。“武超谈道，”宝马未来可以在很多地方去沿用蓝白配色，当颜色代表了一类事物之后，可以更好地大众间传播。“而随着品牌影响力的扩大，品牌Logo原本承载信息的功能正在逐渐弱化，更多的是作为品牌宣传、品牌创意延伸的根基。

最后，回到扁平化Logo设计上，Less is more。化繁为简确实是一种商业的进化，越简单的标识越容易辨识，也越容易让人记住。

IOS7发布后关于“扁平化”与“拟物化”的思考。

IOS7的发布让“扁平化（Flat Design）”和“拟物化（Skeuomorphism）”的争论变得愈演愈烈，这比上次微软发布Metro 来的还要强烈。

为何IOS的改变会引起这样的争议？

我想这跟苹果公司一直以来作为的“拟物化”设计的的领军形象不无关系。我们可以回想，iphone发布时，将手机的物理拨号键以触屏软件的形式植入ios系统开始，或者从imac桌面那一个个跳动的水晶图标开始，再或者在ibook像翻开一本真实的图书一样来阅读，苹果公司一直在引领了“拟物化”设计的浪潮。而新发布的IOS7现在开始推动“扁平化设计”，这样颠覆性转变必然会引起大家的争议。

拟物化的优势是什么？

“当你应用中的可视化对象和操作按照现实世界中的对象与操作仿造，用户就能快速领会如何使用它。（ iOS Human Interface Guidelines）” 也就是说以 模拟实物的视觉设计和交互体验，让用户完全不用去抽象的理解就可以直观的认知和使用。

拟物化设计在视觉上有着很高的识别性，让原本抽象的产品形象变得具有亲和力，更加优雅，在使用上降低用户的学习门槛。

推荐我最喜欢的拟物化设计App： Paper by FiftyThree

拟物化的劣势是什么？

在追求拟物化设计的浪潮中，出现了另外一些的问题。

一、视觉设计：上面有说，拟物设计具有很高的识别性、质感、亲和力。

但是盲目的追求拟物化设计需要付出更高的开发成本，在移动设备的小尺寸屏幕里不能高效的利用的有限的空间。

二、移动设备上的平面操作毕竟与现实生活中有着巨大的区别，盲目的拟物有时候反而会对用户造成困惑。

三、既然拟物是一个模仿过程，这就限制了开发者的创新和想象间，产品容易臃肿且局限。

拟物与极简是矛盾的吗？

我不这么认为，苹果公司是一家崇尚极简主义的公司，在过去的一段时间里，苹果以优雅的拟物设计和极简的产品体验，真正的做到了 简单而丰富 ，我的小外甥女拿到IPAD不需要教她就可以自己玩的不亦乐乎。

扁平化设计的优势和劣势

扁平化设计就是 用最简单、最轻量级甚至抽象的方法来传达产品本身核心内容或功能 ，也就是说“扁平化设计”并不追求画面的质感、重量感、甚至产品的实际形态。优秀的扁平化设计给人感觉简洁、整齐、清晰，所有的功能一目了然，没有什么是多余的。因此“扁平化”可以更高效的利用空间，给用户最少的干扰去理解产品内容。

但是扁平化设计太过简洁，识别性极差，容易审美疲劳，缺少亲和力。最重要的是， 抽象的表达提高了学习成本 。举一个例子大家就明白：拟物化设计就像“象形文字”，全世界人不用学习都能猜出它所表达的大概意思，但是它的表达却非常模糊和局限，而扁平化设计就像抽象的现代文字，你必须通过学习才能理解它所表达的意思，但表达精确而丰富。（PS:我并不是说“拟物化设计”原始，而是举例说明他们之间直观的感受）

推荐我最喜欢的扁平化设计App： Any.do

为什么IOS7开始推动扁平化设计？

我在本文开头所引用的设计十诫中的两条描述，在IOS7发布后似乎给人传达了这两个信息：创新、极简。

同时，我也有个猜想：Google glass已经公测，传说中的Apple iWatch也越来越近，电子产品似乎正在往穿戴市场发展。穿戴式的电子产品体积更小，屏幕空间有限，而 扁平化设计恰恰能够更好的利用空间 。

扁平化设计：起源、问题与扁平2.0

【前言】扁平化设计是一种自2012年开始流行开来的网页设计风格、至今仍广泛使用。但滥用扁平化设计可能导致严重的可用性问题，其中最大的问题是这种设计缺少可点击的视觉标识。扁平2.0在这方面则可以有更好的变现。

扁平化设计是一种流行的设计风格，采用这种设计风格的网页中没有光泽或者三维视觉效果的图形元素。许多设计师认为，这是极简设计的分支。

扁平化设计常被视为是3D效果、纹理与写实主义设计风格的对立面。一个真正的扁平UI完全不会出现任何的3D效果、纹理或写实主义风格的元素。

3D效果为界面带来深度错觉，帮助用户形成视觉层次并知晓哪些元素是可交互的。

早期的界面中，伪3D效果（阴影、梯度和高光）来使可操作元素一目了然。然而，这种伪3D效果冲击性太强、过于厚重而容易分散用户注意力。

纹理是指界面设计时使用的那些用于模仿真实世界的装饰性设计。纹理设计想要做到的是，让用户可以借助已有经验去迅速理解所接触到的全新产品界面。

写实主义是指模仿真实物件或者其审美性的纹理的设计风格。

纹理设计常常与写实主义相混淆。我们常在网页设计中见到这两者的混合使用。两者的主要区别是：写实主义的目的纯粹是满足审美需要，而纹理设计则希望借助隐喻来帮助用户理解界面。

2011年，微软Metro design设计风格和Windows 8的发布极大地推动了扁平化设计的流行。微软文档将新设计风格描述为“真实的数字化”（authentically digital）——这一描述巧妙地提升了扁平化设计对设计师的吸引力。不同于纹理设计，扁平化设计被看着是对数据化媒介的探索，而不是真实物理世界的重复。

苹果官网页面的扁平化成为这一趋势风向标。苹果一直坚持的是纹理设计和写实主义设计，直到2013年，苹果官网才转变成扁平风格。

自2011年扁平化设计提出开始，Nielsen Norman Group便公开批评其可用性问题（见链接 vocal critic of its inherent usability issues  ）。其最主要的观点是扁平化设计为了追求美学的时尚而牺牲了用户的需求。

多年来，用户已经习惯了传统的点击标识，比如蓝色字体、下划线链接或带3D效果的按钮。随着设计趋势的改变、用户接触到新的设计原型，用户识别可链接可点击元素的能力也在进化，但这并不意味着我们可以完全抛弃这些可点击线索。

当我们问一个22岁的加拿大人，她是如何知道网站的可点击元素的时，她给出了如下回答:

“最初可点击样式，无论文字或其他元素，蓝色、有下划线就表示可点击。但是……有下划线时会特别有帮助。或者是一个按钮……不必说点这里……只需要说立即购买、购买或添加到购物车即可。”

这句话形象地说明了人们是如何利用线索来判断可点击性的：

如果您的网站想要变得更加扁平，为避免影响用户快速找到可点击元素，请遵照我们的点击元素设计指南（译者注：原文另附，要点翻译如下）：

1、最安全的颜色为蓝色，其他颜色也可选择；

2、下划线并不是必须的，比如导航菜单就不需要。

3、请测试你的超链接颜色，确保色盲色弱者能正常使用；

4、超链接（或其他科点击元素）以外的任何地方，请勿使用你定义的超链接颜色，也不要

不要使用蓝色字体或下划线；

5、请保持全站超链接样式的一致性。

1、请确保你的按钮看起来像真正的按钮。必须有正确的视觉线索来帮助用户快速识别按钮。如果你使用3D效果，那么按钮建议设置为矩形；如果使用扁平化设计，也要确保它看起来可点击。

2、不可点击的元素，请避免其看起来像按钮。比如为标题文字添加了黑色的背景，就会给人以按钮的感觉。

3、请留意页面的内容层次，避免为用户带来五花八门的按钮。这样用户无法区分。

1、让小图片在点击时有视觉反馈，比如图片变大。

2、要充分利用图片、ICON、文本等元素，来扩大可点击区域、提高用户的点击意愿。

3、请不要为图片设置过多的行动召唤按钮（CTA），除非图片里清晰地呈现了超链接列表（或按钮）。

1、如果要使用icon图片链接，请确保其清晰可识别。

2、请尽量为icon添加文本等可点击的视觉线索，除非你所使用的icon识别性很高或已成为行业惯例。

注：此处只介绍要点。详细解释和案例，请访问文末链接：可点击性设计指南。

最近，设计师们开始意识到扁平化设计中的可用性问题。因此一个更为成熟和平衡的扁平化设计开始成型。设计师们发现可以在探索“真实的数字化”的独特机会的同时，不会损害可用性。

这样的扁平化设计也被称为“半扁平”（ semi flat ），“准扁平”（ almost

flat）或“扁平2.0”。这种风格的设计几乎扁平，但使用了微妙的阴影、高光和布局设计来创建用户界面的深度。

谷歌的材料设计语言是扁平2.0的一个例子：它借助遵循物理学原理的隐喻和原则，去帮助用户理解界面及其视觉层次。

Evernote Android 版是一个扁平2.0的优秀案例。尽管大部分死扁平UI，这个APP在导航栏和FAB按钮（the floating plus button“+”）中添加了微妙的阴影。在内容展示方面，它采用了卡片隐喻方式提供了扁平而有层次的三维空间。

早期伪3D GUI和史蒂夫·乔布斯式的纹理设计往往产生沉重的的界面。去除这些沉重的元素有利于提升可用性。但磨平视觉差异、完全扁平化也会走向另一个坏的极端。扁平2.0则为我们设计出既易于使用又简洁的界面，提供了可能。

汽车品牌换Logo，有的变得高大上，也有变得面目全非的

朋友，你是否还记得前几年的万事达天价Logo事件？

就这俩圈儿，值800万～

emmmmmmm

我就想说一个字：

不过，这其中肯定是存在着极大的营销成分，也不知从何时开始，来自于其他行业的扁平风逐渐刮到了汽车行业。当然，按照各位汽车大佬的意思这并不是跟风，而是“重塑品牌形象、革新、迎合电动化、智能化时代”。

从设计层面来看，专家认为扁平化设计的目的是让人们专注于内容而不是形式，引导用户去关注品牌和产品的本质，抛弃了一切不必要的阴影、质感、边框、立体感，向用户传达最本质的内容。

大众的扁平化LOGO设计虽然不是这一股扁平化浪潮中最早问世的，但它可能是最早被消费者所熟知的。在2019年法兰克福国际车展前夕的大众之夜上，大众汽车正式发布了全新的品牌标志，VW标由之前的立体化设计直接变成了剪纸风格的扁平设计，来迎合数字化传播的趋势。

其实早在2016年，同属大众旗下的奥迪就已经在官网和一些广告宣传中开始使用扁平化的LOGO设计了，但它的扁平化LOGO更多的是为了品牌宣传，并没有直接运用到实车当中。

将扁平化设计同样用于品牌推广的还有丰田，2019年5月份丰田也将原来的3D风格LOGO换成了扁平设计，并为丰田牛头标添加了一个大红色的背景，字体的颜色也换成了更显“瘦”的黑色。

其实不止奥迪和丰田，东风雪铁龙也曾这么玩过。2017年东风雪铁龙全新的LOGO设计首先在官网呈现，同样也是扁平化设计取代了此前的金属质感LOGO，不过其主要也是应用于数字化媒体平台和官方宣传文案上，并没在实车上使用。

2018年英国跑车品牌路特斯也发布了全新的品牌LOGO，全新LOGO同样也是一改之前的3D立体设计，变得更加扁平化，同时“LOTUS”的英文字母也不再弯曲，而是保持在一个平面上，但依旧使用的是经典的英国赛车绿和黄色。

2018年，宝马旗下的MINI就已经开始尝试使用黑白极简的扁平化LOGO设计了，并且将它贴到了车身上。这种设计早在90年代中期MINI就曾使用过，这次简约复古的传统双翼设计也正是为了向上世纪90年代的经典MINI致敬。

既然MINI都这么干了，宝马肯定也是紧随其后。在今年年初宝马发布全新i4纯电动车型时，同时向外界展示了全新的扁平化LOGO设计，蓝天白云和“BMW”的基础元素都没有消失，只是看上去更加透明和扁平了。

国产品牌中，长安是第一个“跟风”的。从去年9月份开始，长安汽车便开始将旗下所有平台的品牌LOGO更新为新样式的LOGO设计。新LOGO依旧使用经典的长安标，设计也是由立体造型更新为扁平化设计，并将标识本身全部设计成了黑色元素。

除了以上这些已经完成扁平化LOGO设计转换的汽车品牌之外，将来还将会有更多的汽车品牌加入这场“扁平潮”中间来。例如，日产也于近日向外界传递自己将要更换扁平化LOGO的消息，并且旗下的Z系列跑车也将使用全新设计的扁平化LOGO。

相对其他品牌，日产的扁平化设计是变化最大的。在取消掉原本金属质感的3D效果之后，扁平化使字母外围的金属圈消失变成了开口的线条环绕。但不知道这一设计将会用于实车，还是仅仅像丰田或奥迪一样用于品牌传播。

韩国起亚汽车公司最近也放出消息，其全新扁平化的LOGO设计将会在年底之前启用，新标识或将在今年10月首先配备于混合动力和电动车型上，同时还将分为红色和黑色两种颜色，来满足不同车型的搭配需求。

在2019年上海车展上，比亚迪展出的“汉”概念车也同样采用了全新扁平化、电动化的LOGO设计。虽然最终并没有运用到新车上，但根据比亚迪2018年注册的新商标以及概念车的新LOGO应用，可以预测比亚迪在未来也将开始使用全新扁平化设计的LOGO。

看到了越来越多画面复杂的过度装饰设计，消费者似乎越来越喜欢简单有力的表达方式了，所以化繁为简是一种商业的进化。汽车LOGO的进化大多是为了凸显全新的产品理念，当然这其中也不乏仅是为了跟个风的品牌，希望这样的扁平化设计真的能给车企带来一定的效果。

说说令你印象最深的Logo是什么？

（不限于汽车）

本文来源于汽车之家车家号作者，不代表汽车之家的观点立场。