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

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

Product, Logo, Technology, Electronics, Cameras & optics, Camera, Gadget, Electronic device, Digital camera, Circle,
Technology, Electronic device, Screenshot, Font, Icon,

-“删吗?”

-“再想想。”

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

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

VSCO | 符号美学

习惯时间:九个月

White, Text, Circle, Font, Logo, Diagram, Line, Brand, Graphics,

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

① 三种象征

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

Font, Text, Circle, Logo, Black-and-white, Graphics,
Text, Line, Yellow, Circle, Ball, Animation, Font, Parallel, Games,

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

Text, Font, Line, Circle,

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

Blue, Cobalt blue, Azure, Electric blue, Font, Circle, Line, Organism, Graphics, Logo,
Text, Font, Circle,

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

② 解构再造

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

Text, Font, Circle,

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

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

Text, Font, Line, Diagram, Circle, Line art,

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

Blue, Text, Font, Line, Circle, Design, Line art, Illustration, Drawing, Pattern,

“跌落的元素”

③ 字体以及更多

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

Text, Font, Pink, Logo, Red, Orange, Brand, Graphics, Peach, Magenta,
Text, Font, Black, Darkness, Line, Black-and-white, Photography, Photo caption, Logo, Monochrome photography,

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

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

Text, Font, Line, Smile,

不同场景下的字体变体

Uber | 渗透美学

习惯时间:九个月

Logo, Text, Product, Font, Design, Graphic design, Graphics, Line, Material property, Brand,

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

① 比特与原子

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

Black, Text, Font, Pattern, Rectangle,
White, Line, Black-and-white, Font, Drawing, Logo, Illustration, Monochrome photography, Graphic design, Graphics,

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

Black, Font, Text, Line, Design, Black-and-white, Graphic design, Animation, Logo, Graphics,
Text, Black, Font, Guitar, String instrument, Line, String instrument, Plucked string instruments, Musical instrument, Pattern,
Black, Text, Font, Line, Black-and-white, Design, Pattern, Material property, Tile, Logo,
Text, Font, Line, Pattern, Design, Logo, Graphics, Black-and-white, Brand, Parallel,

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

② 可能性

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

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

Font, Logo, Design, Graphics, Signage, Animation, Brand, Graphic design, Photography, Fictional character,
Logo, Font, Design, Graphics, Technology, Graphic design, Pattern, Square, Brand, Icon,

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

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

Gadget, Mobile phone, Communication Device, Portable communications device, Smartphone, White, Product, Electronic device, Technology, Mobile device,

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

③ 差异化定制

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

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

Green, Red, Wall, Architecture, Line, Grass, House, Design, Pattern, Facade,

爱尔兰

Green, Turquoise, Pattern, Teal, Graphic design, Illustration, Design, Line, Textile, Font,

墨西哥

Architecture, Design, Sky, Font, Graphic design, Adaptation, Illustration, Art, Photography, Book cover,

中国

Nike+ Run Club | 色彩美学

习惯时间:三个月

Logo, Text, Font, Red, Orange, Brand, Graphic design, Signage, Trademark, Line,

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

① 主色

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

Green, Font, Text, Technology, Electronic device, Screenshot, Icon, Logo,
Product, Text, Font, Technology, T-shirt, Screenshot,

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

Product, Yellow, Technology, Electronic device, Gadget, Measuring instrument, Font, Compact car, Watch, Service,
Technology, Electronic device, Auto part, Gadget, Font, Compact car, Vehicle, Speedometer, Car, Subcompact car,

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

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

② 界面

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

White, Arm, Shoulder, Joint, Standing, Elbow, Muscle, Hand, Human body, Photography,
Arm, Muscle, Hand, Joint, Wrist, Personal protective equipment, Elbow, Compact car,

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

Product, Text, Smartphone, Font, Technology, Mobile phone, Iphone, Gadget, Electronic device, Electronics,

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

Instagram | 传承美学

习惯时间:六个月

Product, Logo, Technology, Electronics, Cameras & optics, Camera, Gadget, Electronic device, Digital camera, Circle,

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

① 灵感依旧

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

Camera, Cameras & optics, Point-and-shoot camera, Product, Digital camera, Photograph, Camera lens, Camera accessory, Lens, Photography,

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

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

Yellow, Text, Font, Rectangle, Square, Pattern, Paper, Paper product,
Text, Circle, Line, Font, Drawing, Diagram, Illustration, Clip art, Graphics, Sketch,

新版 Logo 的起草过程

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

② 两种延续

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

Line, Design, Pattern, Circle, Font, Pattern,
Line, Font, Diagram, Design, Drawing, Cylinder, Sketch, Pattern, Circle, Logo,

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

Circle, Spiral, Colorfulness, Graphics, Logo,
Text, Violet, Material property, Magenta, Font, Rectangle, Tints and shades, Paper product,

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

③ 不止 Instagram

Text, Icon, Graphic design, Logo, Graphics, Brand, Circle,

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

编辑: DaJuan

This content is created and maintained by a third party, and imported onto this page to help users provide their email addresses. You may be able to find more information about this and similar content at piano.io
广告 - 内容未结束请往下滚动
更多 From 世界