NBA球星矢量肖像画

安东尼

乔治

史蒂芬森

阿弗拉罗

勇士王朝

谁拍扁了那些logo？

作者|SerGawen

土豆→土豆饼

也许你已经发觉了，“扁平化”（Flat Design）已经改变了大多数互联网产品的形象和使用体验。而你还没在意的可能是，如今这一趋势也在深刻影响着电子游戏——比如《全境封锁2》，它就沿用了前代的“扁平化”UI设计风格，并广受我司程序员（以及产品）们的好评。

从这张截图，我们能够直观的感受到“扁平化”UI的特点—— “能拍平的绝不立体”、“能用纯色、渐变的就不带高亮”、“能用等线字体的就不用衬线字体”。

《刺客信条：起源》中的技能树

这样看来，育碧（Ubisoft）绝对是游戏行业中“扁平化”的忠实拥趸和实际践行者。

自《刺客信条》（Assassin’s Creed）始，育碧自家游戏就抛弃了传统的“拟物化”（Skeuomorph）设计，将游戏logo、技能图标、地图标识等通通拍扁——《彩虹六号》(Tom Clancy’s Rainbow Six)、《全境封锁》(Tom Clancy’s Division)、《荣耀战魂》(For Honor)等游戏均是如此。甚至不惜在2017年拿起革命的小锤，索性连自个儿也抡平了。

土豆饼！

相比之下，日系的厂商面对这一风潮则淡定许多——也许“简约风”早已深植于日本文化之中，你会发现索尼、任天堂、光荣、史艾等日系厂商本就是纯色字母logo。但严格要求自己的索尼还是在2007年“更进一步”，将本就很扁的“Playstation”直接涂成了纯黑。而作为Playstation的“一生之敌”，XBOX跟着微软爸爸的脚步，在2013年正式加入“扁平”大军。

“扁平化”溯源

关于“扁平化”运动的起源，互联网行业内比较公认的“始作俑者”是微软于2006年推出的“Metro”设计方案，随着Win7、Win8的升级，Metro确定了“又扁又平”的风格，并逐步进化为一种现代化的UI设计理念和范式。凭借着Windows操作系统的流行，这一理念得以迅速传播，并很快“感染”了地球上的另外两个互联网大佬——苹果和谷歌。

2013年堪称是互联网界“扁平化”的“元年”，这一年苹果推出iOS 7，全面走向“扁平化”，谷歌、Facebook也在同年将自己的logo“拍扁”。2014年谷歌推出了Material Design，并将旗下的浏览器Chrome“扁平化”。

Google的“扁平化”也许是觉得第一次“拍”的不够彻底，最终连字体也换成了等线。

“现代主义”（Modernism）及其支流“极简主义”（Minimalism）被认为是造就“扁平化”思潮的“精神根源”，这是一种伴生于工业社会、科学信仰、启蒙主义思潮的全新思维方式，从各个领域和角度挣脱传统、繁琐的教条和修饰，用抽象、普世的理念来塑造设计，自然深得硅谷精英们的青睐。

“扁平化”的最直接“启发者”被认为是“国际主义设计风”（又叫做“瑞士体”），这是“现代主义”艺术风潮在设计领域生根发芽的直接产物，它追求重点突出、整洁可读，以左对齐、非对称设计、等线字体、纯色快为突出特征。

Akzidenz-Grotesk 设计于1896年，被认为是“瑞士体”的代表。

互联网和电子信息工业无法脱离现实社会而独立存在，因此其设计理念也不可避免地受到现实世界艺术审美变革的影响。

这当中有趣的地方就在于，事实上在电脑诞生之初，由于显示屏和软件系统无力渲染出复杂的阴影，更没有足够的像素点密度和丰富的色彩来呈现丰富的设计效果，因此在GUI（图形化用户界面）诞生之前，TUI（文字化用户界面）是普通用户与电脑唯一的交互方式，由是催生了抽象度极高的功能性指示图标和以高亮色块为主要呈现方式的指示风格。

一个典型的TUI交互界面（左）和1977年的TUI游戏“Empire”（右）

在90年代后，电脑发展经历了图形化的一路狂飙，拟物化设计、玻璃高光成为了设计师们竞相追逐的画风和炫技的绝佳途径——这几乎是浓缩了人类社会审美的进化史，像极了飞檐斗拱、雕梁画栋与金瓦琉璃。然而历史总是会以一种有趣的方式重复着自己，“扁平化设计”几乎可以看作是“包豪斯风格”（Bauhaus）的萨沃伊别墅在互联网领域的精神重塑。

几乎没有太大的挣扎，互联网行业就在一片“真香”声中拜倒在了扁平主义的大旗之下。

充分体现”扁平化”建筑理念的萨沃伊别墅，于1931建成于法国。

如果我们仔细回溯，会发现主机游戏界面和UI“扁平化”端倪初现要略早于2013年，这也从另一个角度说明了，“扁平化”虽然由微软发扬光大，但并非是由微软在朝夕之间创造。可能是游戏行业的美工们先于自己的互联网同行更早发现了“扁平化”的另一个绝赞之处——更省工省力，那么何乐而不为呢？

这股返璞归真浪潮中，实用主义是扁平化得以迅速征服互联网行业的重要原因。互联网从业者们发现“扁平化”风格的图案和logo可以使用SVG（Scalable Vector Graphics，可缩放矢量图形）来进行制作和存储，相较于传统图片文件（PNG、JPG等格式）体积缩小了十几甚至几十倍，可以作为“字体”随意的嵌入到网页和程序之中，并支持任意比例的无损缩放——从而剩下了客观的存储空间，并解决了各种棘手的显示器尺寸适配问题。

使用svg的FontAwesome图标库。

滥用“扁平化”有时也会带来一些问题，比如过度抽象让人无法准确的理解设计者的本意，大家喜闻乐道的“田牌笔记本”和“香菇XBOX”梗都是在揶揄“扁平化”的倡导者微软。

WB（华纳兄弟）曾在2012年推出过一款《魔戒》主题的MOBA类游戏《中土守护者》（Guardians of Middle-Earth），凭良心说游戏制作水准还算不错，然而除了推广运营不利之外，一个让很多DotA类玩家感到不适应的地方就在于其技能图标全部用扁平化风格设计，五花八门的技能乍看上去几乎毫无区别，导致学习和记忆成本大大提高。而无论是基于《魔兽争霸 III》的DotA还是V社打造的《刀塔2》，技能图标都极具色彩辨识度和动作感，让人过目不忘。

《中土守护者》的技能图标设计不得不说是一个败笔。

一位叫做Jakob Nielsen的UI设计专家曾经对“扁平化”设计提出过批评，他认为这一趋势会威胁到平板设备的“可用性”。他在2017年的研究中指出，使用“扁平化”UI的用户，相较于使用“拟物化”UI，会表现出更大的不确定性以及注意力不集中，从而导致操作的平均时间减慢22%。

同时Nielsen倡导，中和“拟物化”与“扁平化”，来弥补完全“扁平化”的不足。在《彩虹六号：围攻》（Rainbow Six: Siege）中，设计者为图标添加了不同的颜色来指代不同的概念，同时通过渐变、描边、阴影来强化核心图形的立体感，从而大大提升了辨识度，让玩家更容易学习和记忆。

《彩虹六号：围攻》（Rainbow Six: Siege）中的角色图标。

当然，打根儿上讲也不是所有类型的体裁都适合“扁平化”。大体来说，那些设定上更偏向未来，追求科技感游戏才适合采用“扁平化”UI，比如《X-COM》系列、《守望先锋》（Overwatch）等。而对于《魔兽争霸》这种中古画风或是朋克范儿《战锤》，可能还是“拟物化”设计更搭。

《希德梅尔的文明6》提供了一个“拟物化”和“扁平化”混搭的典范。

LOGO不平，何以平天下

“扁平化”的潮流并未局限于传统互联网行业，伴随着信息爆炸，诸如影视、体育行业也在积极拥抱这一设计理念，英超（Premier League）自2016年开始就将其UI全部扁平，与此类似的还有美国的各大职业体育联盟，以NBA为例，除了球队纷纷设计更加“扁平”的队徽之外，电视转播台也将直播界面彻底“抡平”。

“把LOGO抡平”成了各家品牌形象升级的一致选择，一方面“扁平”看起来更“酷”，从而抬升品牌的艺术感和格调，二来“扁平”背后的“化繁为简”逻辑也在帮助品牌打破地域文化局限，用一种更“通用”的设计语言开拓全球市场。想来老子所讲的“大道至简”、“大巧若拙”，便是如此吧。

（完）