前几年，扁平化设计的概念正炙手可热，iOS 7 的风格转变更令它的关注度达到了前所未有的高度。如今 iOS 已经更新到了第九代，iOS 10 也如箭在弦，蓄势待发，关于扁平化的讨论倒是渐渐平息了，但它带来的影响却已经沉淀下来，随处可见，就连在游戏这个口味向来偏重的领域，扁平化设计也成为了主流。
譬如在过去的 2015 年，最受瞩目的年度大作之一『The Witcher 3』，它的网站是这样的：
而巫师系列的开山之作，由当时还默默无闻的波兰公司 CD Projekt Red 发布于 2007 年1，如果你曾经见过它的网站，那应该还有印象：它处处精雕细琢，造型却又浑然一体，宛如秘银工匠精心制作的工艺品。
近十年的光阴，主人公已经是白发苍苍，英雄迟暮，然而设计师的感慨不止于此，因为游戏的网站设计也发生了翻天覆地的变化，比起杰洛特饱经风霜的沧桑面容，设计上的转变也许同样显著。且试着将变化的各个方面列举于此：
| 2007年 | 2015年 | |
|---|---|---|
| 总体印象 | 冷峻凝重，精致，酷！ | 简洁，现代，但同样很酷。 |
| UI | 重质感，刻画细腻 | 简单线条，没有质感 |
| 造型修饰 | 注重整体造型，导航也融合在内 | 以内容为主，除了左上角与右上角的特色纹章，再无其他修饰 |
| 场景处理 | 模拟游戏内的场景，氛围强烈 | 除KV之外，基本采用游戏截图 |
| 导航结构 | 传统 Minisite 结构，一个首页搭配多个内页，通过导航点击跳转 | 所有内容集中在一个加长单页内，右侧导航提供每个子主题的跳转 |
| 交互方式 | 内页很多，需要逐个点击 | 滚动为主，少量点击触发弹出层，尽量避免页面跳转 |
考察过后，我们发现最新的网站不光在视觉上扁平了，连网站的整体架构也抛弃了层次复杂的传统模式，可谓是由表及里的全面扁平化。也许我们可以简简单单地说：「这就是最新潮流啊，大家现在都是这样做的。」但如果我们打算思考得更深入一点，那就必须解决这样的问题：这股潮流究竟是如何形成的？究竟是什么样的因素，驱动着扁平化设计的潮流滚滚向前？
一桩旧案：欧美风格与韩国风格之争
我们暂且把这个问题搁到一边，把目光转移到一个早前的热点话题上。虽说在国内，我们对扁平化的接受程度到现在都还打了折扣，但其实游戏设计界早就发生过近似扁平与拟物的风向之争，争论的双方，一边叫「欧美风格」，另外一边，叫做「韩国风格」。
Witcher 初代官网正是「欧美风格」的绝佳典范，它们注重整体氛围的塑造，质感强烈，用户体验时仿佛置身游戏场景之中，带着明显的拟物倾向。我们不妨来看看「欧美风格」的更多精彩范例：
而「韩国风格」排版更简洁，偏重信息传递，虽然也不缺乏仔细打磨过的视觉焦点，但整体来看，扁平化的倾向显然要强得多。
同样的，我们把两种流派的差别罗列于此，以辨其异同之处：
| 欧美风格 | 韩国风格 |
|---|---|
| UI 质感厚重，刻画细腻 | 视觉基本集中在页面头部 |
| 注重整体造型，浑然一体，非常大气 | UI 也会精雕细琢，但集中在重点区域 |
| 大面积场景渲染，氛围饱满，视觉冲击力强烈 | 其余部分的设计相对扁平 |
| 页面内容（相对来说）比较少 | 内容和入口很多，各种新闻列表、Banner条 |
| 整站架构也比较简单 | 整站架构门户化，复杂庞大 |
然则对勤于思考的设计师来说，一个新的问题又产生了：同一时期，同样是游戏网站，为什么会形成如此泾渭分明的风格差异？
所以 The Witcher 3 网站上固定不变的，只能是游戏的购买链接，而且还不止一处。
仔细考察这两类游戏的特征，答案很快就浮出水面：这样的风格差异，其实是欧美市场与韩国市场的游戏主流决定的。
众所周知，欧美游戏市场起步早，一直到现在都以主机（单机）游戏为主。而等到韩国人加入游戏发展史的时候，都已经是新世纪的事情了，但他们一上来就瞄准了打怪升级组队PK的网络游戏，很快占据了网游市场的半壁江山。
主机游戏由于是一次买断制，除了少量游戏还有资料片和DLC之外，基本上不会有后续更新，所以厂商追求的就是大作范儿，把视觉包装做到极致，才能打动玩家的眼球和钱包，促使他们赶紧买单。
而网游通常打着免费旗号，靠游戏内的各种道具和服务来获取收入，所以他们需要各种运营活动刺激玩家消费，同时还得持续更新游戏内容（版本迭代），以维持玩家热情，延续游戏的生命周期，由此便产生了大量的公告、活动等网站内容。
出身决定命运，也决定了两个地区不同的发展路线，所以韩国网站侧重内容和排版，而欧美网站强调视觉效果，总体风格自然分道扬镳，各自演化。即使到后来，欧美也出现了魔兽世界、激战、Rift 这样的网游巨作，但是因为设计风格的延续和传承，它们和韩国游戏网站的风格还是能轻易区别开来。
当然，这两种类型也会有交汇合流的时候。在一个网游发布之后，正式上线之前，各种运营活动都还没有展开，那网站设计自然也会更强调游戏自身特色，突出视觉效果，看起来就比较接近欧美的风格了。在国内，这个阶段的网站一般叫「预告站」或者「悬念站」。
国内游戏设计的概况与发展
和韩国一样，国内的游戏市场也基本上被网游所占据。虽然挑剔的品牌经理和项目接口人总是盯着上流大气的欧美网站，两眼放光，心心念念，但设计师们折腾来捣鼓去，最后上线的成品仍不免是韩国风格为主，原因何在？看完前面一段，聪明如你，早已了然。
所以早几年的国内游戏网站，大体是这样的，布局还是向韩国看齐，但细节上非常强调视觉效果以及游戏品牌的差异化。设计师总要绞尽脑汁，把那些可以体现游戏调性和品牌特征的元素添加到设计里去，譬如QQ飞车的车身流线造型，QQ仙境的空岛木牌，逆战（当时还在用早期的开发代号T-Game）的机械构造导航栏：
但到了今天，我们惊讶地发现，网站的模块布局说不上有多大变动，但这些精妙的设计细节却大多被舍弃了，即便是之前必须重点刻画的「下载」按钮，也不再像以往那样精工镂刻。游戏网站对质感的运用变得更加节制，纵使不能完全扁平化，也已经走在扁平化的半途中了。
面对这样的转变，我们不禁又回到了那个问题：这股潮流究竟是如何形成的？究竟是什么样的因素，驱动着扁平化设计的潮流滚滚向前？
智能手机的崛起与设计理念的转变
之所以说我们的游戏网站扁平化并不完全，那是因为扁平化设计并不局限于视觉风格的转变，而是一整套响应时代变革的系统性设计理论。舍弃质感和纹理，简化页面布局，这当然都是扁平化的部分体现，那如果据此认为，扁平化就这样了，那未免想得太过肤浅。
071221-steve-jobs-hmed4p.grid-6x2
时间回溯到 2008 年，扁平化设计的理念由 Google 首先提出。此前一年，史蒂夫·乔布斯刚刚发布了颠覆手机定义和市场格局的 iPhone，从此改变了我们的世界，随后才出现了 Google Android 平台。这当然并非巧合，扁平化设计的诞生、传播，乃至变成盛极一时的设计主流，无不紧紧跟随着智能手机的发展进程。
早期的智能手机，尤其是 Android 机型，不但性能低劣，网速缓慢，电池功率不足，屏幕分辨率也小得可怜。而扁平化通过简化设计，摒弃多余的修饰效果，既能降低系统负载和功耗，也能减少卡顿，提升加载速度，更重要的是，它降低了用户的认知、操作成本，让信息在狭小的屏幕内得到了更有效的传递。
2013年，转向扁平化的 iOS 7 随着 iPhone 5 同时发表。
然而最初的几年，Android 应用的设计品质饱受诟病，扁平化设计的影响力也非常有限，并没有引起广泛的回应。这种状况一直持续到 iPhone 4 发布，移动互联网迎来了突飞猛进的爆发阶段，扁平化设计才开始流行起来。最后在 2013 年，苹果也放弃自己坚守多年的拟物设计，改投扁平化设计的怀抱，扁平化设计终于迎来了爆炸式的概念普及，不仅成为每个设计师的必修课，它的影响力也已经波及所有的只能手机用户，几乎成为一种家喻户晓的大众设计理念。
移动互联网的兴起意味着互联网重心的转移，为智能手机而生的扁平化设计自然受到了更多设计师的关注。另一方面，设计师在这个时代面临的问题则是，iPhone、iPad 引发了智能手机、平板电脑等终端平台的相继崛起，为了提高设计效率以及保持体验的一致性，必然要求「多个终端，一套设计」，于是响应式设计应运而生。恰好精致而笨重的拟物设计无法跟上响应式设计的轻灵舞步，反倒是扁平化一拍即合，两者相得益彰。也正是通过与响应式设计的融合，扁平化设计的理念进一步扩展到了 PC 端，它们双剑合璧，几乎主宰了此后的所有网页设计。
扁平化的基因里流动着移动互联网的血液，所以大到网站的架构布局，小到信息的梳理方式，它都和传统网站表现出不同思路和风格，带着移动互联网的深刻烙印。可惜在国内，因为技术门槛较高，以及内容规划得不到有效的控制，大部分的游戏网站都没有采用响应式设计，内容繁多的 PC 端和内容较少的移动端仍被当成独立的两件事来处理。纵使视觉上的扁平化足以改善信息的可读性，提升用户体验，但其内在的设计理念，也可以说只是「韩国风格」换上了一件更时髦的外衣而已，并没有向前走得更远。
这也正是「欧美风格」的支持者还念念不忘的地方：对手的优势还是那些优势，表现力方面的短板也依然存在，却因为赶上了扁平化的顺风车，莫名其妙就分出了胜负。
小结
当然，我们要记住，设计的本质是为了解决问题，并不是为了实践或者贯彻某种理念。但牢骚之余，我们还是忍不住要问：如果我们的扁平化只是停留在视觉层面，那它和现在不那么时尚的「拟物设计」、「欧美风格」比起来，又有什么不一样呢？
在后续的『中篇』里，我们会继续讨论扁平化设计的一些典型范式，以及这些范式隐含的内在逻辑，以帮助大家更深刻地理解扁平化这种设计理念。但世界上并没有一种十全十美的设计理念，理念的演变也必将持续向前，所以在『下篇』我们会说到扁平化带来的一些弊端，以及设计师为纠正这些弊端而产生的一些新的设计思考，请大家能持续关注网站和公众号的后续更新。
- 1.虽然选择巫师作为范例出乎偶然，但这也恰是个绝妙的巧合，苹果正是在同一年发布了初代 iPhone，之后我会详细阐述它对网页设计的重大影响力。 ↩