UI界面设计的拟物风格又要回归了?

过去几年扁平风格大行其道,所以现在的网站设计中很大部分都采用这样的风格,但是如果仔细深入研究,你会发现如今的扁平风格已经跟最初微软的Metro UI式的纯扁平风格已有明显的差别。因为设计师们对于界面设计更讲究细节,更讲究与现实物理世界的保持一致原则。

谈到扁平风格感觉快要走到头了,我们来回顾一下历史。

 

拟物风格的兴起与没落

过去,人们并不熟悉界面操作时,现实感强的UI界面有助于快速理解操作方式。例如:垃圾桶图标代表可以把不要的文件丢进去、写实的日历中被钉选的日期、把可点击按钮做得极其立体,一眼就知道可以点击,而这种强烈立体感的表现手法一直运用于 Mac / ios 。如下图:

过去的ios界面中充满阴影、玻璃反光等元素。因此,准确的说,这就是『拟物风格』- 强调实体感。

拟物风格最大的优势,就是对于刚上手的使用者来说,可以通过对真实世界的认识,快速理解ui界面上各个元件是如何操作的。

随着对物件的设计越来越极致,质疑的声音也就开始出现了。物体画的越来越细腻,也就美观而已,过度的装饰不仅喧宾夺主,反而对UI的操作没有帮助,令使用者感到混淆与困惑。

另一方面,拟物的对象本身也有时代性的问题,过去习惯使用的东西如电话簿,名片盒,日历,甚至指南针等等物品,很多都已渐渐淘汰,现实中已不再使用。用这些“旧时代”的物品来试图引导现今UI的操作是难理解的事情。

第三点,如今极简设计的美感越来越被大众接受。就像20世纪初的产品和建筑从繁复装饰走向简约。我们看这些写实且过度花俏的拟物风格的界面设计就显得突兀。

第四点,复杂的细节刻画占用了设计师太多的时间、降低工作效率、以及文件太大等等问题…...

以上种种的缺点可以预见,拟物风格势必被扁平风格取代,最后没落。

 

既然拟物风格已经没落,为何说又要回归了?

 

我们回归到拟物风格的定义:

一般在UI 设计的应用上,是代表一些看起来、或是使用起来很像现实世界中的相对事物。

上述提到的以ios为代表的都是过去拟物风格的表现方式,强调的是对单一物件的刻画细节仿真。如果从更广义的范围去讨论,只要与现实世界有所关联,都应该称为拟物?所以。当下的设计趋势,便是这种广义上的拟物,越来越强调现实世界的物理特性。

 

2014年Google发布了一套新的设计语言 — Material Design

在这套设计规范中,物理特性就是其中一个很重要的概念。从纸的型态模拟观点来想像,由于电子萤幕是完全平面化的,不像现实当中的物体是3D的,所以介面中的物件就像是一张张的纸,利用纸张的特性模拟空间感,凸显资讯内容间的层级关系,而这样的空间感,是利用阴影的投射来决定物件的高低位置,这样的阴影利用了光照的原理,模拟出阴影的角度,产生更合乎现实,更自然的感觉。

Material Design其中还有一个设计概念,就是转场动画。同样赋予物理特性,在动画的过程中,拉伸,回弹时的动态效果模仿了橡皮筋的特性,也多了更真实的细节,例如垃圾桶图标有了倾倒的动画,或是通过指示条的旋转告诉你删除的过程。

2017年,windows也推出了一套自己的设计语言-Fluent Design System,主要目的是为了未来AR/VR设备而做的设计准备,因此配合现实环境就显得相当重要,当中包含的五大设计原则都与物理特性息息相关:

光照Light :在点击或是hover的动作上加入光照效果,或是像柔和的光源洒落于空间中,物件本身的反光质感,与material design的光影效果(用阴影的扩散)是不同的概念。

深度Depth — 深度的概念从Material Design就已经被强调过,但FDS则是用更多的方式去呈现,如景深的模糊效果、视差滚动的动态效果、物件彼此的大小与位置。

动态Motion — 物件的动态效果更强调细腻的变化,彼此之间的动态效果有个别的时间差,比起单调的同时动作,看起来会更流畅自然,并且与真实空间中的前景后景的物理概念一样,不同的时间差更容易在想要凸显的主体上达到有效的聚焦效果。

材质Material — FDS将会出现大量的模糊透明背景,也就是模拟毛玻璃的材质感,通常也会带入些微光源效果,除了吸引眼球的视觉外,在AR / VR界面上,感知空间中背景的物件是很重要的,因此模糊背景的利用可以在不影响观看内容的情况下又能够做到背景的暗示。

而毛玻璃效果其实最早在windows vista系统中就已被运用,只是在当时由于效能以及干扰视线等问题仅仅应用在小区块,这次FDS的毛玻璃特效,成为最强烈的视觉焦点。同样的iOS与MacOS在最近的更新也大量使用模糊效果。

缩放Scale — 在视觉上,眼前的物体大,越后面的相对较小,因此缩放也是用来营造空间感的设计特性。

FDS发表的设计概念图:

可以看出此设计风格有极其强烈的拟真感,光源的带入、立体空间、投射阴影、以及物件之间前后的深度变化,主要在于模拟环境,而非过去的模拟实体,并且将极简风格应用在资讯内容呈现上,两者相辅相成,运用得当的话视觉效果令人相当惊艳,也许能将UI设计风格拉到新的高度。

 

设计元素上的拟物

除了上述两套设计语言有明确的提出物理观点之外,其实在现今流行的设计元素中,也能发现很多拟物的设计,例如:

1, 扩散阴影: 扩散阴影从Material到AppleTV的UI中再次被大量使用,另外一个特点是阴影反映背景颜色的现象也更加贴和其真实物理特性。

 

2,文字与图片的交叠:利用特殊的修图方式,让文字融入图片当中,产生前后的距离效果。

类似的还有破格设计,同样在呈现前后距离,文字就像是浮在前面一般。透过空间感破格交叉的群组能够让物体间的过度更加顺畅,而不会有太生硬的区块切割。

 

3,微渐层:利用柔和的颜色渐变以及角度的变化,模拟光源带入的感觉。

 

4,视差Parallax: 除了动态的视差以外,利用前后景模糊,主体清晰来模拟立体空间感。

 

5,3D:过去的3D应用基本上是为了表现立体感,而如今3D越来越成为一套设计风格,有趣的是,现在3D设计风格反而不一昧追求真实感,而是利用高彩高亮的颜色或是幻想式的模拟搭配营造出一种超现实的氛围。

 

结论

从以上这些设计元素都可以看出与现实环境或是物理特性的关联或衍生,不管有意无意,在虚拟世界中我们都下意识习惯与现实有所关联,这也就是为什么拟物始终没有真正消失的原因,用不同或是比较隐晦的形式存在在各个地方,VR/AR的崛起,这些拟物特性理所当然就被强调出来了,在未来一段时间,或许就是新一代拟物风格的年代。

每天更新,
全站高品质素材免费下载!