首页 > 体育> 网上城娱,扁平化UI设计的空间表达!
网上城娱,扁平化UI设计的空间表达! 2020-01-09 16:35:01   阅读1707

网上城娱,扁平化UI设计的空间表达!

网上城娱, 文/张剑 扁平化ui因其易用、高效、友好的特性使它广泛应用在移动终端,但是扁平并不完全意味着对空间属性的抛弃,降低视觉效果的信息干扰才是目的,它可以通过平面设计的语言和交互的隐喻来实现空间的表达,而用户在关注信息的意识焦点之外能够自然的感受到界面中空间的存在。对ui空间塑造主要有以下方式:

色彩和形体

①通过色彩表达空间感。在拟物化的ui设计中,可以模拟材质和纹理来表现空间感,通过对不同的质感、纹理和颜色组合形成丰富多彩的界面视觉空间。但是扁平化ui的典型特征就是不使用材质和纹理,主要通过色彩对比来形成空间的深度。不同的色彩具有不同的属性,我们可以利用色彩的明度、纯度和色相对比来获取界面的空间感。

一般情况下,暖色、纯色、高明度色、集中色等具有前进的感觉;而冷色、浊色、低明度色、分散色等则具有后退的趋向。冷色调给人以后退的心理感受,暖色调给人以前进的心理感受。在黑背景上,亮色具有前进感,深色具有后退感;在白背景上,亮色具有后退感,深色具有前进感。

在其他条件相同的情况下,纯度越高的色彩越具有前进感;纯度越低的色彩越具有后退感。界面设计师可以利用色彩变化表现空间感的技巧来营造界面中更为真实丰富的空间效果。

②通过形体表达空间感。在拟物化ui设计中,界面框体和图标造型会大量应用透视来表现空间感和其三维属性。而在扁平化ui中则通过形体与形体之间的关系如大小的差别(近大远小),表现出空间上的距离感;或者以形体的重叠和覆盖使之产生前后和上下的空间感;放射状的阵列和疏密的利用也能营造空间和深度;还可以利用面的转折来表现空间感。

明暗关系

在界面设计的空间表现上,为了塑造出生动的空间感、层次感,明暗表现有着不可替代的重要作用。物体接受了光源,会产生投影,投影可在形象的前面或后面,表现出形象的轮廓、体积。投影的存在使形象更富于真实感,它是空间感的反映。

时下流行的扁平化长阴影设计,更强化了界面中阴影对空间的表现力和形式感,就像冬天傍晚时分,物体长长的投影一样,格外引人注目。这种45°比一般情况要长很多的投影效果在保持扁平化的同时更强调了空间的表达。当然,扁平化ui中阴影和渐变的应用需要遵循少量精炼的原则,在合适和重要的区域添加才能起到画龙点睛的作用。

动态图形

界面设计要求向用户传递信息过程中通过合理的空间表现或隐喻来呈现界面的层级结构和相互关系,将空间深度变化为能帮助传递一定信息的视觉表达元素,其存在意义的核心是“层次”和“秩序”。界面设计可以有效地利用动态图形,通过有组织,有目的的设计理念和设计手段,把时间与空间串联,结合现实中的三维空间及时间,从而扩大界面视觉语言的表现力。

动态过渡对空间的表达。在界面中动态的转场过渡越来越多的运用,常配合手势使界面对空间深度的隐喻更为深入和自然,同时也倾向于将信息扁平化。渐隐渐现相对于变形和三维翻转比较轻量;同样是移动,时间、速度、加速度、距离的不同组合造成的心理感受也会大不一样。

界面中全新的动画,也为界面带来“深度”和“活力”。界面的动态图形也通过创新表达空间的深度,这种创新不一定是颠覆性的,或许仅仅是基于以前的一些微小细节的变化。

空间的隐喻

隐喻是一个综合的手段:包括视觉层面的拟物、行为的模拟以及对整体概念的利用。在扁平化的ui中也通过这一方式营造了用户对于空间感受的心理真实。行为的隐喻来自真实世界,但不像拟物那样显而易见,它伴随着操作发生,自然而然。 在界面信息陈列有两种模式:

①同一空间毗邻陈列将信息同屏并列地显示出来,当然这样做取决于信息和功能的多少,也可以筛选主要的信息呈现。毗邻陈列提供了更直观的操作方式,加速了交互行为。

②另一种方式是沿时间线陈列,这种方法把功能、信息分割进不同深度的层级关系里,这么做能减少用户误操作的次数,同时便于在不同层级强化主要信息。

扁平ui对空间的隐喻,其目的还是为了高效的交互、良好的体验以及营造深度的沉浸感。而关于沉浸感,扁平和拟物有着不同的解释和目标。扁平化的沉浸感是沉浸在信息的海洋中,拟物化ui中我们可以认为那些承载信息的容器环境也是内容的一部分,其界面元素在视觉上做了不同程度的刻画,其沉浸感强调的是整体氛围的融合。

① 官方头条号:设计智造 顶级创意设计师必备

② 本篇为 设计智造www.cocoo.top 编辑整理,版权归原作者所有,转载请注明出处!

江西十一选五投注