2016即将过去,手机上的设计美学发生了哪些变化?

只要打开手机,应用们个个都已经和去年大不一样,这时你一定会感叹时间飞转。

image
image

-“删吗?”

-“再想想。”

公元 2016 年,人类分辨四季不再靠应季作物,而是只要打开手机,应用们个个都已经和去年大不一样,这时你一定会感叹时间飞转。

Uber、Nike+ Run Club、VSCO,以及全民吐槽的 Instagram,这批用户众多的应用,都在今年大张旗鼓地改头换面。然而和世间大部分改变一样,老用户永远愤愤不平,但新事物需要时间来消化(或习惯),这也是我们带来这篇推送的原因,建议你在 2016 翻篇前,重新看看它们背后的设计美学,让世界多一分理解,也为下一次改变做好准备。

VSCO | 符号美学

习惯时间:九个月

image

先说说 VSCO,这款拥趸众多的图片编辑应用今年经历了两次改动,年初重新设计了 Logo(也作为应用图标)以及整套视觉体系,六月的更新又将 UI 进一步推向极简。在视觉团队对外公布的设计笔记中,VSCO 遵从的符号美学显露无疑。

① 三种象征

“也许会被批轻率,但采用一个完全抽象的 Logo,对 VSCO 来说绝对是场壮举。”

image
image

两层圆环组成的新 Logo,是代表用户体验的三个象征之一(The Seal),灵感来自基因序列,寓指每人都拥有独一无二的作品基因。另一个近似笑脸的图标(The Face),则是由 VSCO 四个字母重构而成,象征使用 VSCO 的用户。The Globe则将圆形一分为四,“用户社区”的概念借此突显。

image

两层圆环分别代表 A-Z 与 0-9,即最基本的创意元素

image
image

VSCO 四个字母不止一种组合方式

② 解构再造

基于灵感核心的三种象征,VSCO 的整套视觉由此发散。密码般的设计语言将 Logo 包含的元素解构,重新排列成一套独一无二的字母体系,而它们又被广泛应用于设计细节中。

image

“我们在想,是不是能创造出一组体系,让 VSCO 成为一套可视化的语言。”设计团队在笔记中写道。

视觉重构的过程,包括将拆分后的元素(它们通常是简单的几何形状)结合到不同的体系当中,这些体系有人为的,也有自然的。

image

“扩张、压缩、突变、转化”代表了四种设计方向,也是设计团队的试验重点

image

“跌落的元素”

③ 字体以及更多

理解重新设计的 VSCO,它在字体上花的功夫是无法绕过的。与 Letters of Sweden 创始人 Göran Söderström 合作创造的 VSCO Gothic 字体,正是整套设计的基础。

image
image

“VSCO 不是那种随随便便卖身给 Facebook 的应用,它正一步步建立自己的帝国。”

“我们希望重新设计后的 VSCO 可以用视觉语言反映人类语言,既可交互替换、使用灵活,又是自然有机地产出的。”因此 VSCO Gothic、新 Logo 的形状、元素,都被一再拆分解构,成为脸部表情,成为各种象征意义的符号变体。不止 VSCO,在旗下其他应用与服务中,同样的视觉也融入其中,可见“体系化”的野心。

image

不同场景下的字体变体

Uber | 渗透美学

习惯时间:九个月

image

Uber 最近一次设计变动是 11 月,伴随界面变化和信息流的内容扩展。而今年早些时候,它其实就摆脱了创业初就沿用的 “U” 字 Logo,转而大张旗鼓地宣传起这个“外圆内方”的全新设计。

① 比特与原子

最初的 Uber Logo 由黑灰作底,中间是大写的首字母 “U”,当时它的服务也和配色一样直接——是一群朋友在旧金山聚集而成的私人租车服务。如今 Uber 已经遍及 68 个国家的 400 余座城市,对 Logo 的重新设计显得合乎时机。

image
image

新 Logo 中心的方块代表一个比特(bit)——象征 Uber 的科技,而底下的色彩与纹路则暗含构成万物的原子(atom),象征 Uber 串联起的人和事物。

image
image
image
image

Uber 也配合重新设计了字体,相比原本更聚缩,斜切与增补也加强了辨识度

② 可能性

“我们在不断进化,从创始人到整个公司都是,这是重新设计的初衷。”

全程参与设计的 CEO Travis Kalanick,在一篇博文中大谈了新设计包含的未来可能性,“最核心就是中间的方块(the bit),未来其他产品的设计中,都会以此为基础,辨识度立刻就出来了。”

image
image

左:乘客使用的 Uber / 右:司机使用的 Uber

“服务于乘客与司机的两个 Uber 应用,区别只是底色和纹路,这会作为以后推出其他产品的设计框架。” Uber 如今已经不止载人,他们送起了食物、货物,以及更多潜在品类。改变的原因也在于此,好的 Logo 绝不是两三年就需要回炉重造的,而是为未来的可能性铺路。

image

11 月的更新中,Uber Feeds 里不止搭车信息,还有音乐、餐厅等,预示非常明显

③ 差异化定制

取代原本的黑白设计,新 Logo 暗含的心思复杂得多,纹路、配色都根据不同国家而作了定制。这背后是数月的调研,“建筑、布料、风景、艺术、时尚以及人,都是灵感来源。”

爱尔兰地区的图案来自乔治亚时代建筑和高地大片的绿植;墨西哥地区则启发于经典的“墨西哥粉”,以及当地特色的瓷砖图样;在中国,老式建筑的墙砖、窗纹构成了由四个圆交叠成的独特纹理。

image

爱尔兰

image

墨西哥

image

中国

Nike+ Run Club | 色彩美学

习惯时间:三个月

image

八月底,在跑者中占有率相当高的 Nike+ Running 突然大幅更新,不仅改名 Nike+ Run Club,界面、Logo、配色、功能一口气全部大变。暂且不论功能上受到的诟病,仅从设计角度,背后的一番心思就很值得揣摩。

① 主色

相比 VSCO 和 Uber 完全推翻重来的 Logo 设计,Nike+ Run Club 的变化主要体现在配色上,原本深入人心且一直未变的红色主调被荧光绿取代,老用户纷纷表示不适应,App Store 评分甚至一度被“一星”充斥。

image
image

然而 Nike 旗下的应用,又怎么能脱离 Nike 单看呢?荧光色本就是 Nike 产品的标志性配色,而提到产品,今年最瞩目的自然是 Apple Watch Nike+,此次大更新正是在发布 Nike 合作手表的苹果发布会前夕,与同样荧光色的 Apple Watch Nike+ 统一配色,似乎是为显示效果铺垫。

image
image

上:Apple Watch Nike+,搭载全新配色的应用

下:旧版 Nike+ Running,平台为三星智能手表

② 界面

今年前的 Nike+ Running,版本更新幅度一向细微,最大改变也只是 iOS 7 时顺应了一次扁平化大潮。而如今的改变,背后是搭载平台的进化,原本只需考虑手机屏的表现,如今还需要配合运动手表的配色、材质,改动有理可循。

image
image

而那些仅在手机上呈现的界面,设计则向极简靠拢,为的是配合越来越多的功能类型,购物、社群、活动,内容越丰富,极简的框架越显重要。

image

Nike+ Run Club 已经不止跑步那么简单

Instagram | 传承美学

习惯时间:六个月

image

Instagram 可能是今年遭受吐槽最多的应用,为此设计主管 Ian Spalter(就是苹果发布会上演示自拍的黑人小哥)发布了一长篇博客,为看客梳理看似夸张的新 Logo 缘何诞生。

① 灵感依旧

“品牌 Logo 和产品一起建立与人的联系,我们当然不会只为追求革新而去改变。”

image

最为人熟知的一版图标,也经历了多次修改

Instagram 的名字源于柯达的一款便携傻瓜相机,最初的 Instagram 图标也是仿照宝丽来相机设计,直至大众最熟悉的棕色相机 Logo,始终在设计上保持真切感。“我们当时探索的是如何把它变得更现代。”于是多余的装饰被移除,整体也逐渐明亮而扁平。

image
image

新版 Logo 的起草过程

然而“扁平化”实则让图标少了相机应有的质感。“因此我们开始研究用户到底最喜欢它的哪一点。”设计团队发现原版 Logo 中的镜头和彩虹是接受度最高的视觉元素,因此这两者成了保留和重构的基础。

② 两种延续

Ian 与团队意识到,他们不能再抓着“相机”不放,而是“需要一个用途更广、扩展性更强的图标”——当需要变化的时候,写实的相机显然太笨重了。无数版设计过后,最终的成果依然能使人联想到相机,又为进一步的元素变化提供了前提。

image
image

如果说“镜头”是嫁接新旧两版 Logo 的核心之一,那另一份不容忽视的延续就存在于色彩梯度当中了。“当我们开始想办法延续彩虹元素,色彩的简化是绕不过的一步,最终我们决定保留较暖的配色来中和图形的简易。”

image
image

取色自原版 Logo 中的彩虹,再经色彩简化,才得出最终的颜色组合

③ 不止 Instagram

image

这张对比图应该将 Instagram 的另一番心思表露无遗了。旗下应用 Layout、Boomerang 和 Hyperlapse 自此有了与 Instagram 更统一的图标,带有相同的线条粗细和色彩梯度。如果说当时的用户还无法直观理解,那新设计推出至今,gif 应用Boomerang 的用户已经超过 4 亿的数字足以说明问题,可见设计布局之必要。

编辑: DaJuan

广告 - 内容未结束请往下滚动
更多 From 世界