越来越普遍的扁平化设计,真的会降低人们使用页面的效率吗?(下)

扁平化与日渐普遍的极简主义 这种趋势并非无端出现。 被誉为建筑史「现代主义之父」的美国建筑师 Louis Su …

扁平化与日渐普遍的极简主义

这种趋势并非无端出现。

被誉为建筑史「现代主义之父」的美国建筑师 Louis Sullivan 创造了现代摩天大楼的原型,他留给後世更大的财富,还在於放之四海而皆准的设计格言:形式追随功能( Form follows function)。

这句话的意思很简单,即设计首先得考虑功能性。

从拟物化和现实主义,到极简的扁平化,再由扁平化升级为更具兼容度的设计风格,都是用户界面设计风格顺应了当下潮流所得的结果。

1994 年,万维网的出现使得互联网开始引起公众注意。大部分美国的上市公司开始视一个公开的网站为必需品。但此时,个人电脑的渗透率极低。只有专业工作人员熟悉电脑桌面软件,更不用说那些看了令人疑惑的数字接口了。设计师们花了大量时间制作网站按钮、菜单和跳转链接,使他们看起来略微友好一些。

在网页设计几乎无可参照的当时,人们认为网站设计的黄金准则就是去模仿电脑桌面的界面设计。

1995 年发布的 Windows 95 就是 3D 模拟的经典例子。

它的对话框使用了很深的阴影和高光来制造 3D 效果。它们的凸起凹陷都遵循着两个基本原则:

凸起的元素是可以用鼠标点击按下的。它经常被用来表示按钮。
凹陷的元素则是被用来填充的。诸如搜索框等输入框就常使用内陷的视觉元素。

就如同美国 1840 年代的铁路、1920 年代的汽车和收音机所带来的技术繁荣一样,巨大的互联网泡沫积聚起来,又因为过热的投机行为经历了一场名为「Dot Com」泡沫的破裂。

不过很快地,互联网经历泡沫破灭以後再次起飞,一大批新的创业公司出现,让自己的界面充斥着阴影、气泡、眩光、巨大投影等时下流行的元素。

微软在 2003 年发布的 Outlook Web Access,被认为是网页设计的杰出代表。

这个在如今标准看来颇为简陋的界面,在当时是 .NET 网站的标准,以及很多 AJAX 库所渴求的设计。

与此同时,苹果的拟物化设计和现实主义风格也搭载着产品的出售被更多用户接受。

拟物化是对物理世界一些特徵的模仿。它用在设计中,能让用户在对现实存在物品的了解基础上,学会使用一种全新的交互界面。

苹果的用户界面上,那些反光的图标其实是现实生活中的物体在电子屏幕上的一种转移。在大部分人还未被智能手机牢牢擒住时,这种对现实物品的模仿其实能消除人们对电子事物的疏离感。

苹果的第一套界面就开始拟物了。

苹果将虚拟键盘做成精致的水晶玻璃质感,正是为了让人们习惯虚拟键盘的存在。可以很肯定地说,假如它没有做得如此「直觉」,它的体验就没有说服力,也无从培育消费者的习惯。

拟物化风格愈演愈盛,并被苹果对细节的极致描绘推向了高点。

但和过去数百年建筑、艺术的发展轨迹类似,扁平化设计所代表的「极简主义」,也是在堆叠装饰风潮达到极盛之後,开始一股由繁入简的风潮。

扁平化设计常被视作网页和界面设计发展到成熟阶段的象徵。

这种成熟首先体现在设计师身上,他们对於设计图标和界面已经得心应手,开始转而寻求创新和现代性。

互联网的渗透意味着远比过去更多的人熟悉如何与电子设备互动。我们已经习惯於与数字设备的交互方法。即便是某个页面上只有一个细线条方框,只要上面写着「Go」,你也清楚地知道那是个可以被点击的按钮。

同样的发展轨迹,你可以在印刷物上的「扁平化」上找到。

这种更「原始」一些的载体,早在 60 年前就已经见证过这种极简风格的鼎盛时期。当时扁平化设计的名称还叫做「瑞士设计风格」,也称为「国际印刷风格」(International Typographical Style)。

如它名字所指,这种设计风格始於瑞士,在 1940–1950 年代推广至全球,成为战後西方的设计基础。

推动者是现代最着名的平面设计师之一 Armin Hofmann。从苏黎世艺术学院毕业後,他作为一名版师流转於 Basel 和 Bern。1947 年,在火车上遇见时任 Basel 艺术学院校长的 Emil Ruder 後,他得知那儿正缺一名教师,於是开始了 40 年的教学生涯,并在後来接替了 Ruder 的校长位子。

Hofmann 一生中大部分时间都在设计扁平设计风格的海报。因为他认为,海报是最好和最有效的沟通形式之一。

ArminHoffman,1959

他的海报永远高效审慎地使用颜色和字体。他将这种做法称为「色彩的琐碎化」。即便以当下的审美标准评判,它们依旧融合了创意与艺术气质,完全不过时。

事实上,Hofmann 用在海报中的元素和如今的扁平化设计元素并无太大区别:照片蒙太奇,强调排版和实验性的构图,以及大量无衬线字体。

他还将自己的设计哲学和实践写入了一本名为 Graphic Design Manual 的设计指导手册,成了无数平面设计师的必读书目。

瑞士汽车俱乐部海报,Joseph Müller-Brockmann,1955

这种「剥离非必要元素」的风格专注於可读性,和同样以清晰可读为准绳的 Helvetica 字体一起,在二战後的西方设计史中,占据了一席之地。

扁平化设计在原本就是平面的海报中,并没有遭遇太大问题。这也是极简排版风格在印刷物中长盛不衰的原因之一。

数字屏幕就没有这麽简单了。尽管不少设计师全心拥抱扁平化设计,但这种早期只有两个维度的设计风格,也很快就暴露出局限性。比如抛弃一切三维元素的 Metro,它的诞生就伴随着反对者对其易用性的质疑。

尽管在 Jaskni 看来,Metro 难以推广的原因还在於 Windows Phone 可怜的市场份额,以及它对开发者的高要求,「它基於 wayfinding(路牌指示),是非常需要功力的一个领域。」

越来越多设计师厌倦了它的魅力,开始寻求解决方案。

扁平化,真的就是指完全扁平吗?

这恰恰是 Nielen Normann 这份报告存在的缺陷之一:这份报告对扁平化设计的理解似乎还停留在它们最初的印象,忽视了这种设计语言进入数字屏幕以来的进化。

在它的对照组中,扁平化就是彻底没有纹理和阴影的存在。

但现实情况是,扁平化设计其实与拟物化设计的概念并行不悖。它拥有物理世界中的规则,甚至开始主动摹仿现实中的「层次」和「维度」,比如不少设计师利用深浅不一的色块表现出阴影,而不是过去的投影、斜角和渐变,仿造出真实的投影。此时它的对立面已经不是拟物化了,而是「丰富设计」(rich design)。

Jaskni 和 frog 另一名视觉设计师胡玥申都认为这份报告传达的并非扁平化的缺陷,而是「不好的设计」的缺陷。

报告忽视的另一个问题在於,网站浏览效率不仅仅由用户导航的速度决定,网页加载也是重要因素。

他们说,设计风格其实是设计师审美与硬件基础之间的拉扯结果。比如 Jaskni 认为「非常好看」的 Windows Vista 界面,限於硬件,在拖动窗口会出现卡顿现象。即便微软拥有推广这种精细设计的热情,开发者也会因为惧怕消耗系统资源而放弃优化。

而扁平化图标使用简洁的图像传达信息,少有渐变、纹理和阴影,图标更小,页面加载时间也更快。它们既有装饰性,也能导航到网站的正确位置。

不过,扁平化并非完全摒弃纹理和阴影的存在,进化使得它解决了过去那些缺陷。

2013 年,Google 发布的 Material Design 引发了不少扁平化设计爱好者的狂欢。

在它发布这个设计语言以前,Google 在设计上的战术颇有些小心翼翼:设计没有重大变化,只是在每次新产品发布时实施一些小小改变。

但作为在设计上具有高要求和高用户期望的大公司,Google 在发布 Material 时做了超前的一步:它不仅为自己的设计语言取了名字,还专门设定了相对完整而明晰的设计规则。

这为设计师们提供了便利。因为对设计师来说,当凭空设计出一套新的风格时,需要付出巨大的研究成本与沟通成本。而 Material Design 相当於一个框架,在其中生发出来的设计,是已经被验证过的。

要解释 Material Design 的概念也很简单,它试图在最简化的设计中引入一些拟物化设计的特徵:

它将所有设计元素都想像成在固定光源下的纸片,因为光源远近表现出深浅不同的色彩和阴影。虽然它看起来依旧扁平,但就连运动模式都模拟了物理世界的规则。

尽管一些设计师认为 Material Design 在颜色、阴影方向等都做了过於死板的限制,令他们创意受限,但 Material Design 的发布算是扁平化设计「进化」成功的尝试。

与 Material Design 发布同年,设计师 Jeff Escalante 也在 Dribbble 等设计网站上发起了一次关於扁平化设计趋势的讨论,并提出了一种颇为简单粗暴的解决方案:长阴影(Long Shadow)。

它的效果如同将图标上的物体置於冬日阳光下:它们都拖着 45° 斜角的长阴影,是物体的2.5 倍。

长阴影保留了扁平化设计的基本审美,但也为图像增加了深度。这使得它的确火了一阵,设计网站 Dribbble 和 Pinterest 上都出现不少类似作品。教程也在教大家如何以更高效率制作长阴影。

不过这种戏剧化的对角线阴影让人联想起早期的苏联海报或是像俄罗斯构成主义、几何抽象派画家马列维奇的拼贴画作品。它们都呈现出一种积极的、理想主义的风格,具有强烈的视觉冲击力,非常适合用作图标和品牌商标。

但除此以外,长阴影的使用广度欠奉。和理论更成系统的 Material Design 相比,它并没有办法走得更长远。

2013 年,人们关於扁平化设计的讨论,还在於「它是一个趋势,还是一次革命」。

但从现在它们的发展看来,扁平化设计已经成了一个容纳度极高的存在。它还在依照变体不断延续自己的影响力。

苹果实际上也没有将自己限定在最初那个扁平化设计的框架里。在走扁平路线的 iOS 7 中,Game Center 图标在一众被拍扁的图标中显得不同,依旧拥有闪亮的光泽感。

Dribbble 中不乏好事者将它拍扁,但「这就不是原来的球体了」,Jaskni 说,「苹果可能不是在一味追求扁平化,而是在寻求好的设计。」

显然,扁平化设计只是电子屏幕设计的其中一个阶段。到目前为止,2D 界面的通用性已经基本得到解决。一旦出现像 AR/VR 这样更沉浸的视觉需要时,它可能会失去现有的地位。

在过去两年多,包括微软在内的不少科技公司都在进行「包容性设计」,意即他们开始思考一些相对前沿的事物,并为之做出设计方案。

比如微软发布的全息设备 HoloLens。尽管用户能够与全息照相机进行互动,但 HoloLens 的操作系统与微软其它设备所用的界面并不相同。

微软希望能发布一套像 Metro 那样,贯穿所有产品线的设计语言。

他们也「做到了」。今年 5 月的开发大会上,微软发布了一套叫做「Fluent」的设计语言,它看起来像是扁平化设计的延伸,但被赋予了无缝对接 2D 和 3D 操作系统的愿景。

尽管它目前还只是一个概念,但如同每个阶段的演进一样,这个依旧很年轻的系统需要时间。

文章出处/ 好奇心日报

诚挚邀请你成为好朋友–>

  

 

 

 

红海加速器好用吗

0 0 投票数
Article Rating
订阅评论
提醒
guest
0 Comments
最旧
最新 最多投票
内联反馈
查看所有评论
0
希望看到您的想法,请您发表评论x