打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
乔布斯的审美,过时了吗?
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),不少人预测它在未来几个月里,将被竞相模仿进而成为一时风潮。

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

编辑、文  韩晗
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
潮流是个轮回,这些UI设计趋势你怎么看?
UI设计的扁平化理念!
大师分享 | 解读设计风格的变迁史
用户界面设计中的平面风格
首发 | 2021年UI界面设计趋势
火爆设计圈的玻璃拟态风格,现在到底怎样了?
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服