HI,下午好,欢迎来到微信公众号转让!
公众号转让,微信公众号交易平台,公众号出售购买卖价格 24小时服务热线: 4000-163-301

新闻动态

NEWS CENTER

视觉间隔是一种布局元素,它有助于将内容分隔成为清晰的分组、选项和部分

2019-11-01

什么是视觉间隔

视觉间隔是一种布局元素,它有助于将内容分隔成为清晰的分组、选项和部分。它可以让设计师更好地组织内容的视觉体验,处理信息的层级,也有助于用户理解内容,明白内容之间的关系。

视觉间隔和页面上的其他内容在一起,构成视觉层级,这是它最重要的作用。在视觉间隔的帮助之下,用户可以轻松地感知内容之间的关系,明白各个信息片段之间的关系是相似,并列,承袭,从属,还是其他。

视觉间隔的可用性也同样重要:在很多时候,有的视觉间隔元素看起来是可点击,可交互的,这在移动端界面上,是非常重要的。

视觉间隔的种类

谈到视觉间隔,我们可以从两方面来进行拆解分析:视觉间隔的外观和功能。按照视觉特征,视觉间隔有5种基本的类型:

  1. 线条
  2. 色彩
  3. 负空间
  4. 阴影/体积
  5. 图片

下面我们分别针对这5种类型进行说明。

1. 线条

很长时间以来,在排版印刷领域,线条就一直是一种用来分隔内容的顶级方法。线条的分隔功能是认可度最高的一种间隔方式,用户几乎不用思考,就能够理解和感知它,并且发挥作用。

另一方面,这种间隔方式也很容易显得过于简单,并且和应有的形态相去甚远。这也是为什么设计师在想尽办法去寻求别的视觉间隔形态。太多的线条间隔会让屏幕上的视觉干扰太多,并且带来不必要的视觉噪音。

所以,能够将线条间隔用得微妙、恰到好处、出神入化,是设计师功力的一个重要体现。


在这个网站产品页面中,使用深色的线条间隔来分割产品信息,用来组织和间隔信息内容。


在这个页面当中,线条分隔了不同的内容区块,让页面的结构更易于被扫读。


这个电商网站将不同级别的视觉内容进行了分离,借助简单的水平线将价格、CTA按钮以及承载相关信息的表单分隔到不同的区域。

2. 负空间

负空间,也就是留白,也是最为常见的一种视觉分隔元素。留白绝不是对空间的浪费,和屏幕上其他的元素一样,它同样发挥着重要的作用,拱卫支撑着整个用户体验。

负空间是最为流行的视觉分隔之一,尤其是在极简主义风格为主导的设计当中。负空间本身遵循着格式塔原理,尤其是其中「接近原理」和「相似原理」是负空间在设计中,发挥分隔作用的核心所在。合理地运用负空间,还能强化页面的呼吸感。


上面这款旅行规划 APP当中,使用留白将不同的条目分开,没有使用额外的具体视觉元素,仅仅只靠留白。


Health Blog 的列表的排版层次是基于负空间来实现的,看起来清晰又充满呼吸感。

3. 色彩对比

高对比度的色彩,同样能够带来清晰的视觉间隔效果。在 UI 界面中高对比度的色彩有着极为明显视觉表现潜质,它们能够增强网站的信息和内容的表现力,分割区块,营造氛围。对比度是影响页面和屏幕可读性的关键因素之一。

在具体的应用当中,不同的色彩会有效地分离不同的选项、条目和区域,这意味着它作为视觉分隔的作用非常强。这也是近年来分屏式设计如此流行的原因所在。

这是一套移动端菜单的概念设计,强烈的色彩对比让信息清晰可见。


即使是在这样的柔和的设计当中,色彩的对比度也发挥了相当的作用:

  • 一方面,强烈的色彩对比让CTA按钮和输入框之间有了明显的区分;
  • 另一方面,右侧的主视觉元素的背景也同样借由不同色彩的对比,做到了突出的效果。