乔布斯的审美,过时了吗?

UI设计
手机在如今已是生活必备之物,UI设计(界面设计)也因此被大众所熟知。然而回到触屏手机诞生之初,当传统物理按键突然被替换为一块电子显示屏,如何让用户迅速理解并掌握其使用方法?这背后,一种名为“拟物设计”的界面设计风格功不可没。
面对以下三个按钮,
哪个会让你产生最清晰的点击欲望?

这三个按键分别代表了触屏智能手机发明以来,界面设计的三个时代主流风格。从上至下依次为“拟态设计”“扁平化设计”和“拟物设计”。

乔布斯最爱风格

「拟物设计」Skeuomorphismm 

以计算器界面从左至右示例“拟物”“扁平化”和“拟态”三种设计风格

时间回到2007年,苹果发布第一款iPhone,引发了一场席卷全球的手机革命。当传统物理按键突然被替换为一块电子显示屏和象征着丰富功能的平面图标,如何让用户迅速理解并掌握其使用方法?“拟物设计”(Skeuomorphism)正是由此孕育而生。

两代苹果系统中指南针的图标变化

“拟物设计”一词来自希腊语“skéuos”(容器或工具)和“morphḗ”(形状),顾名思义,即在虚拟界面上模拟物理世界的实物。最典型的一例便是早期按键的视觉形式——第一代iOS系统中的按键以光影模拟出了凸起效果,正如物理世界中的按键,让人一看便产生点击的意识。

iOS系统早期界面设计

“拟物设计”图标不仅有助于用户迅速学习智能手机的应用方式,也有利于提高其使用效率。设想一下——即便使用手机的每个人都认识“相机”两个字,查找一个相机的图标显然也比查找这个词语更加便捷轻松。

相机图标设计

向来以极简主义狂热者著称的史蒂夫·乔布斯(Steve Jobs)是”拟物设计“的拥护者,这或许有些出人意料。尽管在生活于2021年的我们看来,这样的设计风格难免显得“土俗”且过于繁复。但在数字化屏幕普及初期,如此设计形成了物理世界与数字世界的有效衔接,使人们得以迅速掌握触屏手机的应用模式。

iOS 6与iOS 7系统界面,图片来源:Reddit.com

2011年,一件举世轰动的大事发生——乔布斯去世。他的离开不仅改变了苹果公司的发展,同时也影响了全球的界面设计风格——斯科特·福斯特(Scott Forstall),苹果用户界面创建者之一、“乔布斯所偏爱的视觉设计风格最忠实的支持者”从公司辞职。设计师乔纳森·艾夫(Jonathan Ive)接任,并对苹果的视觉进行了大刀阔斧的改革。

以手机界面示例“拟物”“扁平化”和“新拟态”三种设计风格

Instagram的logo变化体现出了界面设计风格的时代变化

“拟物已死”

「扁平化设计」Flat Design 

在这之后席卷全球的风格是我们所熟知的“扁平化设计”(Flat Design)。“拟物设计”以物理世界为依据,“扁平化设计”则以国际印刷风格(International Typographic Style,或称为瑞士风格)为基础。该风格诞生于上世纪20年代,旨在清晰地传达信息,网格、无衬线字体、文本左对齐都是其风格标志。

约瑟夫·穆勒-布罗克曼(Joseph Müller-Brockmann)设计的网格系统

而国际印刷风格的诞生则更为源远流长——上世纪初于荷兰孕育而生的艺术运动“风格派”(De Stijl)以黑白和三原色形成的纵横分割为视觉标志,蒙德里安(Piet Mondrian)的作品便是其精髓的呈现;风格派进而影响到包豪斯(Bauhaus),“少即是多”与“形式追随功能”这些理念在其消亡后的几十年内对现代设计影响犹存。

皮特·蒙德里安《Composition No. II, with Red and Blue》,布面油画,40.3×32.1cm,1925年

约瑟夫·穆勒-布罗克曼,苏黎世市政厅海报,1955年

几十年后,“扁平化设计”将这股平面设计浪潮引入纸媒之外的电子媒介中。而苹果并非“第一个吃螃蟹的人”,微软在2002年发布了Windows Media Center,四年后又发布了Zune MP3播放器,体现出扁平化趋势;而2012年发布的Windows 8界面则将这种改变展露无遗——光泽与斜角消失,投影也被弱化。

微软Windows 8与苹果iOS 7界面

一方面,经过多年的使用训练,手机用户已建立起对于图标的视觉认知,过于复杂的拟物界面反而干扰了用户体验;另一方面,通过简化图像、减少视觉上的细节,“扁平化设计”不仅可以节省屏幕中的空间,还可以节省设备运行占用的内存,确保交互操作快速加载。

“扁平化设计”界面动态案例

传统印刷媒介的设计风格影响着界面设计的同时,手机这一媒介的普及也影响着传统平面设计领域。在过去,用户通过街头广告、报纸杂志和电视获取信息,而如今则在手机屏幕的方寸之间尽览世界。在这样一股浪潮下,不少品牌也开始更新LOGO以适应市场需求。

品牌LOGO风格的变化体现出由立体转向扁平的趋势

2013年,苹果iOS 7系统的发布似乎标志着其风格正式从“拟物设计”转向更简约的“扁平化设计”。由此,苹果公司宣告“拟物已死”。到了2019年,“扁平化设计”已然占据市场。

“扁平化设计”1.0与2.0版本对比

风格是个“圈”

「新拟态」Neumorphism 

然而在近两年,一股熟悉的界面设计新风再度刮起——设计师利用斜角、光影来展示层次结构、突出按键功能,“拟物设计”的重要特征再度回到主流风格,并一度被预测为最热门的设计趋势之一——“新拟态设计”(Neumorphism)。

三星发布会视觉设计采用“新拟态风格”
Maze Pixel设计的“新拟态风格”图标

“新拟态设计”在“拟物设计”一词前加上代表“新”(New)的前缀,由杰森·凯利(Jason Kelley)发明。

这一风格的爆火始于乌克兰设计师亚历山大·普吕托(Alexander Plyuto)的“无心插柳”,他在设计分享平台Dribble上发布了一张“新拟态风格”的UI作品,该作关注度持续飙升并登上了平台热度榜首。随后,许多设计师受到启发进行创作,“新拟态”之风刷屏设计平台。

亚历山大·普吕托设计的“新拟态”风格作品

观察“新拟态设计”,不难发现它中和了“拟物”与“扁平”两种原本互为对立的风格。这类作品大多表面使用白色、米色或灰色等柔和的浅色,既不同于“扁平设计”的2D视效,又不同于“拟物设计”的过分写实,利用温和而微妙的光影关系区分出界面的层级。

“新拟态”风格按键视觉动效

OTAKOY设计的“新拟态”基础视觉

尽管“新拟态设计”在视觉上令人愉悦,但在实际用户体验中,它却有很多不可忽视的局限性。素净的色彩固然赏心悦目,但低对比度和低饱和度难免造成可辨识性、视觉吸引力弱等问题。而投影等细节的添加也无疑增加了代码的开发难度和界面的加载负荷,故而没有占据主流市场。

Tanmay Rai设计的“玻璃拟态”风格计算器

为了应对开发工程量大这一问题,在一个名为“新拟态”的网站中,程序员设计了一款风格模拟器,通过移动“尺寸”“模糊”等滑块,可直观地生成“新拟态”风格模块,并直接产出可拷贝代码。(网址:https://neumorphism.io/#e0e0e0)

“新拟态”设计风格模拟器

苹果MacOS Big Sur界面

近日,苹果公司将一种新的风格引入了MacOS Big Sur的最新版本,半透明的毛玻璃背景与“新拟态”的结合有效解决了视觉辨识度这一问题。这一风格被命名为“玻璃拟态”(Glassmorphism),不少人预测它在未来几个月里,将被竞相模仿进而成为一时风潮。

形式与功能之争贯穿着设计史,在界面设计这一年轻领域亦是如此。乔布斯所钟爱的“拟物设计”解决了早期培养用户使用的问题,而“扁平设计”与“新拟态”则在平面与立体、简约与丰富间摆动。“设计风格是个圈”,或许未来的某一天它又将兜兜转转掀起一阵复古浪潮。而乔布斯于设计方面的审美在今天看来是否已经过时?欢迎留言说出你的想法。

编辑、文  韩晗
(0)

相关推荐

  • 火爆设计圈的玻璃拟态风格,现在到底怎样了?

    今天一起来看下,今年比较火的玻璃拟态设计风格,通过这篇文章,我将带大家了解玻璃拟态的美学发展过程.风格特点.为什么没有被大量使用?最后通过一些优秀的案例,找到切入点,将这种设计风格巧妙的运用到设计中. ...

  • MIUI 9 重磅登场,最老安卓定制系统如何一步步走到今天?

    今天下午,小米在国家会议中心正式发布了 MIUI 9.MIUI 是小米的第一个产品,拥有比小米手机更悠久的历史:它也是国产定制安卓 ROM 的鼻祖,在国内手机行业掀起一阵定制系统的狂潮. MIUI 走 ...

  • 苹果iOS 15要来了,支持息屏显示,还有这些变化!

    据媒体报道的最新消息,苹果公司将会在今年的6月份举办一年一度的全球开发者大会.除了一些硬件的正常更新迭代之外,在这次大会上将会发布苹果最新的iOS15操作系统. 从目前各大媒体的爆料来看,最新IOS1 ...

  • 用户界面设计中的平面风格

    平风是近年来非常流行的设计风格,在设计中可以起到非常好的效果.拟像和刨平成为了一个UI设计师必须要学习的两种风格.现在来看看什么是扁平化设计. 1.什么是平风 所谓扁平化就是:对于人机交互的图形&qu ...

  • 聪明莫过比尔盖茨,但常被怀念的是乔布斯

    引言:聪明的人总能赢得当下,有想象力的人引领未来.盖茨值得羡慕,乔布斯常被怀念.   今天借比尔·盖茨的离婚公案八一八我们知道的比尔盖茨的那些风闻以及这件事情在科技史上的影响.   一.聪明人比尔盖茨 ...

  • 乔布斯浪子回头、秦海璐坐享其成:感情就是前任栽树,后任乘凉。

    读者佩佩说:"跟男朋友在一起五年,从青涩的学生变成了打工人,后来,我们分手了.最近发现他有了新女友,女生每天在朋友圈晒他对她多么好,生日送惊喜,下班接送,各种哄着--我看到以后很难受,他跟我 ...

  • 乔布斯背后的男人:埋头做了 20 年幻灯片,让苹果发布会更完美

    7小时前 那些不为人知的幕后故事. 神译局是36氪旗下编译团队,关注科技.商业.职场.生活等领域,重点介绍国外的新技术.新观点.新风向. 编者按:Keynote 最开始是为乔布斯个人设计的一款软件,乔 ...

  • 亿万富翁乔布斯临终的醒悟

    很多人活着的时候想死,但真到了死的时候,又特别想活,特别留恋这个世界,特别舍不得离开这个世界. 百分之九十九的人还是想长久的活着,虽然活着有时很痛苦,但也不愿意离开这个世界.人有生就有死,这是自然规律 ...

  • 紫色iPhone 12的存在意义,可能乔布斯才懂

    雷科技数码3C组 编辑丨MoFirLee 1998年,苹果创始人乔布斯带着iMac G3力挽狂澜,挽救了当时濒临破产的苹果公司.一开始,iMac G3只有"邦迪兰"一种配色,到了1 ...

  • 乔布斯根本不是演讲天才 | 富日记

    乔布斯是世人公认的演讲大师. 有人说,乔布斯的iPhone发布会是商业史上最伟大的演讲. 苹果内部认为乔布斯做的iPhone演示的营销价值,超过了之前的数亿美元公关支出. 因此很多人称乔布斯是演讲天才 ...

  • 库克考虑退休,他比乔布斯有两处高明

    在乔布斯逝世之后,笔者曾写过一篇文章<神走了,苹果会蔫吗?>.毫无疑问,库克刚刚接手苹果时,整个地球都要为之担心,毕竟,帮主创造出来的东西,实在太过惊艳.更糟糕的是,由库克亲自操刀的首款产 ...

  • Epic Games 与苹果对簿公堂!结果未出,却意外牵出“乔布斯轶事”

    审判结果事关苹果长期在 App Store 上精心构造的商业壁垒. " 作者 | 肖漫 Epic Games 和苹果之间的"大战",还在继续. 2021 年 5 月 4 ...

  • 乔布斯:佛陀智慧成就了我!​

    近期读了<乔布斯传>,纵观这个苹果创始人的成功轨迹,我看到了一个佛教徒的禅意人生. "极简生活"的背后透着佛陀智慧,是佛学改变了他,成就了他. 乔布斯小时候被生母送人, ...