首页

想让视觉层次更加清晰?来看这篇视觉间隔方法完全梳理!

雪涛

在网页和移动端界面中,内容和信息是否能够经过系统性、有效的整理和组织,对于内容的可用性和实用性,都是意义巨大的。而在呈现信息的时候,视觉间隔是组织信息的关键因素。它说起来并不难理解,但是在实际的运用当中,却是千变万化,今天我们来梳理一下流行的视觉间隔的方法。

什么是视觉间隔

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

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

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

视觉间隔的种类

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

  • 线条
  • 色彩
  • 负空间
  • 阴影/体积
  • 图片

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

线条

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

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

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

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

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

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

负空间

负空间,也就是留白,也是最为常见的一种视觉分隔元素。留白绝不是对空间的浪费,和屏幕上其他的元素一样,它同样发挥着重要的作用,拱卫支撑着整个用户体验。负空间是最为流行的视觉分隔之一,尤其是在极简主义风格为主导的设计当中。负空间本身遵循着格式塔原理,尤其是其中「接近原理」和「相似原理」是负空间在设计中,发挥分隔作用的核心所在。合理地运用负空间,还能强化页面的呼吸感。

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

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

色彩对比

高对比度的色彩,同样能够带来清晰的视觉间隔效果。在 UI 界面中高对比度的色彩有着极为明显视觉表现潜质,它们能够增强网站的信息和内容的表现力,分割区块,营造氛围。对比度是影响页面和屏幕可读性的关键因素之一。在具体的应用当中,不同的色彩会有效地分离不同的选项、条目和区域,这意味着它作为视觉分隔的作用非常强。这也是近年来分屏式设计如此流行的原因所在。

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

即使是在这样的柔和的设计当中,色彩的对比度也发挥了相当的作用:一方面,强烈的色彩对比让CTA按钮和输入框之间有了明显的区分,另一方面,右侧的主视觉元素的背景也同样借由不同色彩的对比,做到了突出的效果。

在 GNO Blankets 这个网站当中,强烈的明暗对比将网站元素分隔成为精美而清晰的区块。

阴影和体积

阴影和体积也是一种非常常见的视觉间隔方式,通过营造在「高度」或者说高程上的视觉差异,从而达到分层的效果,而这种设计也是符合人类一直以来的认知习惯。这种方法有利于保持整个设计的平衡和易读性,另一方面,它又能保持足够的微妙和自然,不会那么引人瞩目从而让人觉得出戏或者受到干扰。

这个APP的目录页面所有元素都采用了白色的背景,而阴影让布局呈现出了纵深层次,让内容足以展现又不显突兀。

这款提供定制化花束服务的APP也采用了类似的阴影元素,让整体看起来清晰又通透。

图片

图片在 UI 界面当中,同样也是一种非常有效的视觉间隔,尤其是在包含大量文本内容的界面中。无论是博客、在线媒体网站还是其他类型的网站当中,图片的间隔作用都非常明显。无论是照片、插画、3D图形,它们作为图片都可以很好的平衡文本内容,提高内容的识别度和可读性,有效地划分层级,并且提高情感吸引力。

这个比特币网站的着陆页就使用了带有3D效果「了解更多」动态图片,图片和文本在内容和功能上都清晰地分隔开来。

在这个餐厅 APP 当中,图片作为划分内容的关键元素而存在。

按照功能划分

如果从功能的角度上来划分视觉间隔,可以根据它所处的层次来进行划分。

全出血间隔

使用线条作为全出血间隔是最为常见的,它会很跨整个屏幕布局来作为信息层级的划分。

这个画廊图库 APP 的艺术家目录当中,使用线条作为全出血间隔,来区分艺术家。

这个名为完美食谱的APP也使用了全出血间隔线来区分内容。

在这个财务APP当中,也使用了全出血间隔线来区分条目。

在这个电影APP的结帐页面当中,也使用了线条来作为全出血间隔。

嵌入式间隔

嵌入式间隔的功能是将相关性较高的内容分割开,并且它通常会和标题或者其他的特定元素保持对齐或者对应,它们通常是进行某个大区块内不同组件的分隔,或者将多个同类的元素分隔开。

这个网站当中,使用横向的短分隔线来区分表单中的参数条目。

中间分隔

这种分割线通常会置于布局的中间某处,同样是分隔相关的内容,但是通常它们在属性上不一定是一致的,但是层级近似。

在这个出售草药的电商网站的右侧,使用中间分隔线将文本和可交互的区域清晰地分隔开。

值得思考的问题

上面对于不同类型的视觉分隔方式都有描述,在此之外,还有两个问题需要注意:

  • 保持微妙:视觉分隔不应该醒目、太过引人瞩目,它们不应该分散用户的注意力,它们应该支撑布局的同时,微妙而不那么抓人眼球。

  • 中等频率:这和上一点是相辅相承的,过多的分隔线会变成视觉噪音,让用户浏览的时候感到疲倦。因此,应该仔细考虑使用频率,尽可能使用负空间,而不是线条。不要过度使用太多色彩,应该尽量保持整体的协调一致。

文章来源:站酷

如何从0到1构建UI视觉层级?

雪涛

如“黄金分割”之于构图,“视觉层级”之于页面节奏,都是基础且必不可少。本文与你分享如果一步步从原型开始构建APP视觉层级。

工作中,你是否经常听到“视觉层级”这词?就犹如“用户体验”一样让人耳熟能详。抛开装逼因素,这两个词的多次提及,可见其重要程度。


音乐有节奏,好的音乐能通过音阶的高低起伏变化表达音乐情绪。

例如:《Main Title》即使你没看过《冰与火之歌》,光听音乐你是否能感觉到音乐给你营造千军万马恢弘之势。《Playing Love from The Legend of 1900》你是否想到一个宁静夜晚,佳人与你倾诉衷肠,柔情似水。

反之,节奏不好,则无法和听众达成共鸣。


绘画有节奏,张驰有度、大小对比、远近疏密变化,构成了画面的节奏。反之,没有节奏,则画面平淡。


同样的,APP UI也有节奏。页面良好的视觉层级,方便用户在浏览的过程中抓取关键信息,帮助用户快速达到目的。



那么,如何构建?


1.明确页面目的与需求主次

拿到原型,明确页面目的和需求的1、2、3层级,并理解消化。开启设计师的隐形技能:根据一句话或者一个词,在大脑开始构建画面布局。在构思阶段,建议同时浏览同类型UI设计以及交互布局,在找参考的过程中,结合自身APP的页面目的一起构思,并在纸上绘出可行性方案。 


由于,APP是为人服务。那么我们需要知道,人眼浏览习惯模式的科学依据。



2.人眼浏览模式

曾有一数据显示:如果在3S内无法吸引用户,你将流失这个用户。如今我们所在的时代快节奏、碎片化,用户的日常浏览是“扫描”而非“阅读”。所以,了解人眼浏览习惯,变得十分重要。

人眼浏览习惯有:F型;Z型;其他;


F型浏览模式

Z型浏览模式

还有,其他浏览模式,海哥HMI人机交互在他一篇文中《用户是怎么阅读的?尼尔森F模型》提到:


蛋糕模式:眼睛只关注标题和副标题时,水平一层一层;
斑点模式:跳过大块的文本和扫描,寻找特定的东西,比如按钮,数字;
标记模式:轻扫页面时,将眼睛聚焦在一个地方,呈圆形分布。(移动端会常发生);
承诺模式:通篇阅读,用户确实充满动力和兴趣。


在明白人眼视线流程后,我们开始运用视觉手段,吸引用户来看我们想给他看的内容,并按照我们的预想顺序,依次阅读。



3.设计手法


a.对比

对比,让视觉有轻重,用户看起来不累。需要强调的信息放大,没那么重要的东西缩小。如果同一层级的模块,通过颜色或者样式的变化来表达。如:字体大小对比,颜色对比;模块大小对比;图片大小对比等。 


b.字重

字体千千万形状各不相同,然而他们都有着相似之处:字重的大与小。在同一字号大小下,字重大的笔画,以面构成,会比字重小的,更具视觉冲击力。

需要强调的信息,字号变大,字体加粗,这样就能区分主与次,建立更易读的视觉层级。 


c.样式

为了各个模块间的和谐组合和视觉上的凸显与美观,我们需要灵活运用各种样式表达。卡片投影;形状;材质等; 


d.模块化整合与留白

同一类别信息,模块化整合。便于用户浏览操作,视觉上不零散,整体美观。多模块化的组合,注意留白以及页面的节奏轻重。 


以上要点,要根据实际情况灵活巧妙运用。在做的过程中,通过Mirror工具实时查看页面效果,不断改进,加强表达。


总结


宗白华说过:“一切艺术都趋向音乐”。确切说一切“广义的”艺术都趋向于音乐状态。优秀的UI视觉层级表达,就如音乐一样有节奏变化,波浪起伏,是一种视觉享受。无论是平面还是UI,视觉层级,需要像“黄金分割原理”一样,是内化进设计师的身体里一个元素。多多实战练习,不需要死记硬背,就会刻在我们的大脑深处。 

文章来源:站酷

如何在设计中建立良好的视觉层级

蓝蓝

随着互联网信息爆炸式增长,用户浏览单个网页时,并不像我们想象的如阅读文章般从左到右、从上倒下逐一查看,那么朋友们和蓝蓝设计一起了解如何在设计中建立良好的视觉层级!

一、 视觉层级为什么重要

左侧是设计师期望用户的浏览方式,右侧为用户实际的浏览方式—摘自《Don’t make me think》

用户来到一个网站有他自己特定的目标,如阅读新闻、购物、查看新消息,然而信息量太大,逐一查看需要大量时间,这就要求网站设计能抓住主流用户特征,将重点推送给他,用户找到自己的目标或感兴趣的点,才有可能继续浏览或产生下一步动作,否则就会离开。

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档