网页设计理念的演变及其趋势 上篇

awwwards 网站上有一篇 Jerry Cao 撰文的《6 Web Design Trends You Must Know for 2015 & 2016》,读完很受启发。但原文仅提出了设计趋势的简单判断,并没有论及设计理念之所以如此演变的原因。我不揣浅陋,想就此展开,探讨一下扁平化设计为何而生,因何而盛,它对网页设计的影响深入到了哪种程度?

从事游戏的相关设计多年,所列举的案例也多以游戏网站为主,读者诸君可以和 Jerry 的原文互相参阅,或能有所助益。

前几年,扁平化设计的概念正炙手可热,iOS 7 的风格转变更令它的关注度达到了前所未有的高度。如今 iOS 已经更新到了第九代,iOS 10 也如箭在弦,蓄势待发,关于扁平化的讨论倒是渐渐平息了,但它带来的影响却已经沉淀下来,随处可见,就连在游戏这个口味向来偏重的领域,扁平化设计也成为了主流。

譬如在过去的 2015 年,最受瞩目的年度大作之一『The Witcher 3』,它的网站是这样的:

而巫师系列的开山之作,由当时还默默无闻的波兰公司 CD Projekt Red 发布于 2007 年①,如果你曾经见过它的网站,那应该还有印象:它处处精雕细琢,造型却又浑然一体,宛如秘银工匠精心制作的工艺品。

① 虽然选择巫师作为范例出乎偶然,但这也恰是个绝妙的巧合,苹果正是在同一年发布了初代 iPhone,之后我会详细阐述它对网页设计的重大影响力。

近十年的光阴,主人公已经是白发苍苍,英雄迟暮,然而设计师的感慨不止于此,因为游戏的网站设计也发生了翻天覆地的变化,比起杰洛特饱经风霜的沧桑面容,设计上的转变也许同样显著。且试着将变化的各个方面列举于此:

2007年 2015年
总体印象 冷峻凝重,精致,酷! 简洁,现代,但同样很酷。
UI 重质感,刻画细腻 简单线条,没有质感
造型修饰 注重整体造型,导航也融合在内 以内容为主,除了左上角与右上角的特色纹章,再无其他修饰
场景处理 模拟游戏内的场景,氛围强烈 除KV之外,基本采用游戏截图
导航结构 传统 Minisite 结构,一个首页搭配多个内页,通过导航点击跳转 所有内容集中在一个加长单页内,右侧导航提供每个子主题的跳转
交互方式 内页很多,需要逐个点击 滚动为主,少量点击触发弹出层,尽量避免页面跳转

考察过后,我们发现最新的网站不光在视觉上扁平了,连网站的整体架构也抛弃了层次复杂的传统模式,可谓是由表及里的全面扁平化。也许我们可以简简单单地说:「这就是最新潮流啊,大家现在都是这样做的。」但如果我们打算思考得更深入一点,那就必须解决这样的问题:这股潮流究竟是如何形成的?究竟是什么样的因素,驱动着扁平化设计的潮流滚滚向前?

一桩旧案:欧美风格与韩国风格之争

我们暂且把这个问题搁到一边,把目光转移到一个早前的热点话题上。虽说在国内,我们对扁平化的接受程度到现在都还打了折扣,但其实游戏设计界早就发生过近似扁平与拟物的风向之争,争论的双方,一边叫「欧美风格」,另外一边,叫做「韩国风格」。

Witcher 初代官网正是「欧美风格」的绝佳典范,它们注重整体氛围的塑造,质感强烈,用户体验时仿佛置身游戏场景之中,带着明显的拟物倾向。我们不妨来看看「欧美风格」的更多精彩范例:

而「韩国风格」排版更简洁,偏重信息传递,虽然也不缺乏仔细打磨过的视觉焦点,但整体来看,扁平化的倾向显然要强得多。

同样的,我们把两种流派的差别罗列于此,以辨其异同之处:

欧美风格 韩国风格
UI 质感厚重,刻画细腻 视觉基本集中在页面头部
注重整体造型,浑然一体,非常大气 UI 也会精雕细琢,但集中在重点区域
大面积场景渲染,氛围饱满,视觉冲击力强烈 其余部分的设计相对扁平
页面内容(相对来说)比较少 内容和入口很多,各种新闻列表、Banner条
整站架构也比较简单 整站架构门户化,复杂庞大

然则对勤于思考的设计师来说,一个新的问题又产生了:同一时期,同样是游戏网站,为什么会形成如此泾渭分明的风格差异?

buywitcher3
所以 The Witcher 3 网站上固定不变的,只能是游戏的购买链接,而且还不止一处。

仔细考察这两类游戏的特征,答案很快就浮出水面:这样的风格差异,其实是欧美市场与韩国市场的游戏主流决定的。众所周知,欧美游戏市场起步早,一直到现在都以主机(单机)游戏为主。而等到韩国人加入游戏发展史的时候,都已经是新世纪的事情了,但他们一上来就瞄准了打怪升级组队PK的网络游戏,很快占据了网游市场的半壁江山。

主机游戏由于是一次买断制,除了少量游戏还有资料片和DLC之外,基本上不会有后续更新,所以厂商追求的就是大作范儿,把视觉包装做到极致,才能打动玩家的眼球和钱包,促使他们赶紧买单。

而网游通常打着免费旗号,靠游戏内的各种道具和服务来获取收入,所以他们需要各种运营活动刺激玩家消费,同时还得持续更新游戏内容(版本迭代),以维持玩家热情,延续游戏的生命周期,由此便产生了大量的公告、活动等网站内容。

出身决定命运,也决定了两个地区不同的发展路线,所以韩国网站侧重内容和排版,而欧美网站强调视觉效果,总体风格自然分道扬镳,各自演化。即使到后来,欧美也出现了魔兽世界、激战、Rift 这样的网游巨作,但是因为设计风格的延续和传承,它们和韩国游戏网站的风格还是能轻易区别开来。

当然,这两种类型也会有交汇合流的时候。在一个网游发布之后,正式上线之前,各种运营活动都还没有展开,那网站设计自然也会更强调游戏自身特色,突出视觉效果,看起来就比较接近欧美的风格了。在国内,这个阶段的网站一般叫「预告站」或者「悬念站」。

国内游戏设计的概况与发展

和韩国一样,国内的游戏市场也基本上被网游所占据。虽然挑剔的品牌经理和项目接口人总是盯着上流大气的欧美网站,两眼放光,心心念念,但设计师们折腾来捣鼓去,最后上线的成品仍不免是韩国风格为主,原因何在?看完前面一段,聪明如你,早已了然。

所以早几年的国内游戏网站,大体是这样的,布局还是向韩国看齐,但细节上非常强调视觉效果以及游戏品牌的差异化。设计师总要绞尽脑汁,把那些可以体现游戏调性和品牌特征的元素添加到设计里去,譬如QQ飞车的车身流线造型,QQ仙境的空岛木牌,逆战(当时还在用早期的开发代号T-Game)的机械构造导航栏:

但到了今天,我们惊讶地发现,网站的模块布局说不上有多大变动,但这些精妙的设计细节却大多被舍弃了,即便是之前必须重点刻画的「下载」按钮,也不再像以往那样精工镂刻。游戏网站对质感的运用变得更加节制,纵使不能完全扁平化,也已经走在扁平化的半途中了。

面对这样的转变,我们不禁又回到了那个问题:这股潮流究竟是如何形成的?究竟是什么样的因素,驱动着扁平化设计的潮流滚滚向前?

智能手机的崛起与设计理念的转变

之所以说我们的游戏网站扁平化并不完全,那是因为扁平化设计并不局限于视觉风格的转变,而是一整套响应时代变革的系统性设计理论。舍弃质感和纹理,简化页面布局,这当然都是扁平化的部分体现,那如果据此认为,扁平化就这样了,那未免想得太过肤浅。

071221-steve-jobs-hmed4p.grid-6x2时间回溯到 2008 年,扁平化设计的理念由 Google 首先提出。此前一年,史蒂夫·乔布斯刚刚发布了颠覆手机定义和市场格局的 iPhone,从此改变了我们的世界,随后才出现了 Google Android 平台。这当然并非巧合,扁平化设计的诞生、传播,乃至变成盛极一时的设计主流,无不紧紧跟随着智能手机的发展进程。

早期的智能手机,尤其是 Android 机型,不但性能低劣,网速缓慢,电池功率不足,屏幕分辨率也小得可怜。而扁平化通过简化设计,摒弃多余的修饰效果,既能降低系统负载和功耗,也能减少卡顿,提升加载速度,更重要的是,它降低了用户的认知、操作成本,让信息在狭小的屏幕内得到了更有效的传递。

silver-48-front-resize_new
2013年,转向扁平化的 iOS 7 随着 iPhone 5 同时发表。

然而最初的几年,Android 应用的设计品质饱受诟病,扁平化设计的影响力也非常有限,并没有引起广泛的回应。这种状况一直持续到 iPhone 4 发布,移动互联网迎来了突飞猛进的爆发阶段,扁平化设计才开始流行起来。最后在 2013 年,苹果也放弃自己坚守多年的拟物设计,改投扁平化设计的怀抱,扁平化设计终于迎来了爆炸式的概念普及,不仅成为每个设计师的必修课,它的影响力也已经波及所有的只能手机用户,几乎成为一种家喻户晓的大众设计理念。

移动互联网的兴起意味着互联网重心的转移,为智能手机而生的扁平化设计自然受到了更多设计师的关注。另一方面,设计师在这个时代面临的问题则是,iPhone、iPad 引发了智能手机、平板电脑等终端平台的相继崛起,为了提高设计效率以及保持体验的一致性,必然要求「多个终端,一套设计」,于是响应式设计应运而生。恰好精致而笨重的拟物设计无法跟上响应式设计的轻灵舞步,反倒是扁平化一拍即合,两者相得益彰。也正是通过与响应式设计的融合,扁平化设计的理念进一步扩展到了 PC 端,它们双剑合璧,几乎主宰了此后的所有网页设计。

扁平化的基因里流动着移动互联网的血液,所以大到网站的架构布局,小到信息的梳理方式,它都和传统网站表现出不同思路和风格,带着移动互联网的深刻烙印。可惜在国内,因为技术门槛较高,以及内容规划得不到有效的控制,大部分的游戏网站都没有采用响应式设计,内容繁多的 PC 端和内容较少的移动端仍被当成独立的两件事来处理。纵使视觉上的扁平化足以改善信息的可读性,提升用户体验,但其内在的设计理念,也可以说只是「韩国风格」换上了一件更时髦的外衣而已,并没有向前走得更远。

这也正是「欧美风格」的支持者还念念不忘的地方:对手的优势还是那些优势,表现力方面的短板也依然存在,却因为赶上了扁平化的顺风车,莫名其妙就分出了胜负。

小结

当然,我们要记住,设计的本质是为了解决问题,并不是为了实践或者贯彻某种理念。但牢骚之余,我们还是忍不住要问:如果我们的扁平化只是停留在视觉层面,那它和现在不那么时尚的「拟物设计」、「欧美风格」比起来,又有什么不一样呢?

在后续的『中篇』里,我们会继续讨论扁平化设计的一些典型范式,以及这些范式隐含的内在逻辑,以帮助大家更深刻地理解扁平化这种设计理念。但世界上并没有一种十全十美的设计理念,理念的演变也必将持续向前,所以在『下篇』我们会说到扁平化带来的一些弊端,以及设计师为纠正这些弊端而产生的一些新的设计思考,请大家能持续关注网站和公众号的后续更新。

《网页设计理念的演变及其趋势 上篇》有1个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注