多语言展示
当前在线:1961今日阅读:103今日分享:49

扁平化UI中的空间表达

现在,越来越多的UI都扁平化了,但是扁平并不完全意味着对空间属性的抛弃,降低视觉效果的信息干扰才是目的,它可以通过平面设计的语言和交互的隐喻来实现空间的表达,而用户在关注信息的意识焦点之外能够自然的感受到界面中空间的存在。数字界面中,承载空间是二维的,对空间的塑造主要是平面设计语言,但是它对最终的实现空间没有任何限制,可以从二维到任何更高维度。
方法/步骤
1

色彩和形体对空间的塑造  UI视觉设计中对空间的探求,主要是形态和形态之间在视觉上形成的框架关系,将这种框架关系设置在二维平面空间(指高、宽二维)的状态之中。有时也能在二维平面的基础上表现出带有纵深感的三维立体空间(指高、宽、深三维)的效果。它需借助明暗、色彩、透视等多种表现手法才能达到,这样的空间效果使界面中形态的构架关系显得更为复杂和丰富。

2

通过色彩表达空间感。在拟物化的UI设计中,可以模拟材质和纹理来表现空间感,通过对不同的质感、纹理和颜色组合形成丰富多彩的界面视觉空间。但是扁平化UI的典型特征就是不使用材质和纹理,主要通过色彩对比来形成空间的深度。不同的色彩具有不同的属性,我们可以利用色彩的明度、纯度和色相对比来获取界面的空间感。一般情况下,暖色、纯色、高明度色、集中色等具有前进的感觉;而冷色、浊色、低明度色、分散色等则具有后退的趋向。冷色调给人以后退的心理感受,暖色调给人以前进的心理感受。在黑背景上,亮色具有前进感,深色具有后退感;在白背景上,亮色具有后退感,深色具有前进感。在其他条件相同的情况下,纯度越高的色彩越具有前进感;纯度越低的色彩越具有后退感。界面设计师可以利用色彩变化表现空间感的技巧来营造界面中更为真实丰富的空间效果。

3

通过形体表达空间感。在拟物化UI设计中,界面框体和图标造型会大量应用透视来表现空间感和其三维属性。而在扁平化UI中则通过形体与形体之间的关系如大小的差别(近大远小),表现出空间上的距离感;或者以形体的重叠和覆盖使之产生前后和上下的空间感;放射状的阵列和疏密的利用也能营造空间和深度;还可以利用面的转折来表现空间感,没有转折的面在平面构成中只是二维空间的表现,一旦有了面的转折关系,就使形体具有了高、宽、厚度的三维立体效果,自然就形成了带有纵深感的三维立体空间关系;此外还可以利用图的关系,人的实际视觉经验时刻都在体现图的关系,因为人的视觉无法对视域中的所有对象进行聚焦,只有被人注视的部分在眼中才是清晰的,而其余部分由于无法准确在视网膜上成像而呈现焦点之外的模糊状态。

4

明暗关系对空间的塑造  除了Windows UI的绝对平面化,其他的扁平化UI都不完全仅仅只有色块和轮廓。iOS7和大多数扁平化安卓平台UI,以其主界面为例,往往是多个图标(只有高度和宽度)并置于画面中,与画面平行,图标之间无前后远近之分。如果图标的形象无厚度,并且包围这些形象的空间没有深度,这样的空间形式就会和Windows UI一样是完全的平面性空间(二维平面空间)。但是在iOS7和大多数扁平化安卓平台UI中,在追求效率的工具化和情感化之间,采用了偏向于扁平的较为折中的设计,即表现少量细节处的明暗变化,它不依靠纹理,更多的利用色彩和形体的细微变化来达到,多表现为投影和渐变。这样的明暗变化去掉了拟物化UI中对质感和纹理精雕细刻的极致表现,也有别于Windows UI高度抽象化。  在界面设计的空间表现上,为了塑造出生动的空间感、层次感,明暗表现有着不可替代的重要作用。物体接受了光源,会产生投影,投影可在形象的前面或后面,表现出形象的轮廓、体积。投影的存在使形象更富于真实感,它是空间感的反映。  扁平化UI中阴影和渐变的应用需要遵循少量精炼的原则,在合适和重要的区域添加才能起到画龙点睛的作用。

5

界面动态图形对空间的表达  界面设计要求向用户传递信息过程中通过合理的空间表现或隐喻来呈现界面的层级结构和相互关系,将空间深度变化为能帮助传递一定信息的视觉表达元素,其存在意义的核心是“层次”和“秩序”。界面设计可以有效地利用动态图形,通过有组织,有目的的设计理念和设计手段,把时间与空间串联,结合现实中的三维空间及时间,从而扩大界面视觉语言的表现力。  动态过渡对空间的表达。在界面中动态的转场过渡越来越多的运用,常配合手势使界面对空间深度的隐喻更为深入和自然,同时也倾向于将信息扁平化。渐隐渐现相对于变形和三维翻转比较轻量;同样是移动,时间、速度、加速度、距离的不同组合造成的心理感受也会大不一样。

推荐信息