跳到主要内容

4种创建视觉层次结构的关键方法

在这篇文章中,Chris Bank OfUXPin- 线框图和原型制作应用程序 - 解释了在Web UI设计中创建可视层次结构的四种主要方法。要分析超过33家公司的UI示例,请查看免费电子书Web UI最佳实践

在我之前的帖子中,人眼如何阅读网站,我研究了在Web UI设计中创建视觉层次结构的重要性。在这里,我将继续解释在实践中可以实现的一些关键方法。

我将专注于你的武器库中一些最强大的可视化工具。作为一个好的经验法则,Alex Bigman认为颜色和大小管理注意力,而间距有助于管理视觉关系。我将在本文中看到所有这三个,但首先让我们从另一个有用的工具开始,对比...

01.对比

对比是两个不同元素紧密排列的发生。在Web UI设计中,这些元素可以是颜色,纹理,形状,方向或大小,以命名重要元素。

Source: Communicating with Visual Hierarchy; http://static.lukew.com/pageheirarchy_lukew_03192008.pdf

来源:与Visual Hierarchy进行通信; http://static.lukew.com/pageheirarchy_lukew_03192008.pdf

在不同大小的字体和颜色之间进行交替可为您的界面创建即时层次结构。

例如,您可以在下面的screengrab中看到不断接触从浅色背景变为深色背景会立即将主要号召性用语(“尝试免费”)与导航菜单和次要(“呼叫我们”)号召性用语分开。

Contrast is used to give hierarchy to the Constant Contact homepage

对比度用于为Constant Contact主页提供层次结构

结合网站的Z模式,处理提供了清晰的视觉层次结构,突出显示电子邮件提交表单,然后是页面中间导航菜单。

本文,Brandon Jones研究了颜色和大小的使用如何影响界面中对象的第一印象。

使用下面的图像作为例子,大多数人不会在第一眼看到两个圆圈 - 相反,他们可能会看到“黑色圆圈和较小的红色圆圈”。

Source: Understanding Visual Hierarchy in Design; http://webdesign.tutsplus.com/articles/understanding-visual-hierarchy-in-web-design--webdesign-84

来源:了解设计中的可视化层次结构; http://webdesign.tutsplus.com/articles/understanding-visual-hierarchy-in-web-design--webdesign-84

从这个意义上讲,界面项中的对比非常强大,因为区分是人类的默认反应。

02.颜色

简而言之,鲜艳的色彩从柔和的色彩中脱颖而出。这看起来很明显,但重要的是它的应用:您可以利用它来吸引用户的注意力。

此外,某些颜色可以帮助设定整个场地的情绪(蓝调是宁静的,红色是积极的,等等)。

Fitbit combines strong use of colour with a classic Z-pattern

Fitbit结合了强烈的色彩搭配和经典的Z图案

Fitbit他们的颜色使用颜色Z模式界面以上特别聪明。洋红色的明亮使用立即将调用行动放置在视觉层次结构的顶部附近,但也匹配“获取活动”按钮的颜色 - 潜意识地发出两个概念相关的信号。

类似的蓝色阴影也用于健身目标和产品部分,巧妙地在两者之间创建关联(并且点击界面中最有价值的部分)。

03.尺寸

大小,特别是文本的大小,是一个强大的工具,它规避了从左到右和从上到下阅读的传统规则。这意味着右下角的大词或短语可能是一个人阅读的第一件事。

此外,大小可以强调实际的消息或内容,使其更加重要。

This political site - http://getactive.sj-stmk.org/ - uses size to make its point clear

这个政治网站 - http://getactive.sj-stmk.org/--使用尺寸来明确说明

说到文字的大小,由Smashing Magazine进行的排版研究在50个热门网站界面上发现,标题通常保持在18到29像素之间,正文复制范围在12到14像素之间。

当然,这只是一个指南(并将更多地应用于内容繁重的网站),但表明你仍然希望保持一种比例感。

04.空间

如中讨论的那样Web UI最佳实践制作漂亮东西最重要的技巧之一就是绝对没有漂亮的东西。将太多有吸引力的图像混合在一起是一种快速破坏它们的方法。

重要的是,您的Web界面具有喘息空间,并且您可以将所有内容都放在一边。减少“视觉噪音”的数量将使您想要保持的分数更强。

事实上,Usaura的创始人Dmitry Fadeyev建议说白色空间实际上提高了理解力。 2004年的一项研究发现,白色空间的战略性使用将理解能力提高了近20%。

Houzz uses space to make the content easier to read

Houzz使用空间使内容更容易阅读

虽然间距不会影响人们在网站上的表现,但确实影响了用户的满意度和体验(这同样重要,如果不是更重要的话)。如上所示,使用的内容边距,填充和段落间距较大Houzz使内容更容易阅读(并鼓励与链接和侧边栏交互)。

话: 克里斯班克

克里斯班克是增长的领先者UXPin一个用户体验设计应用程序,可以创建响应式交互式线框和原型。



翻译字数超限