网页设计中的区分艺术

WebFX总裁。Bill在互联网营销行业有超过25年的经验,专门从事SEO, UX,信息架构,营销自动化等。William在希彭斯堡和麻省理工学院的科学计算和教育背景为MarketingCloudFX和WebFX的其他关键研发项目提供了基础。

网页设计中的区分艺术

我们在用户体验领域所承担的最困难的任务之一就是试图以正确的方式获得并保持访问者的注意力。独特的设计在我们的网页设计中,将眼睛集中在需要的地方是一项棘手的任务,但我们应该牢牢掌握这一点。

理解影响和区别的艺术特征使我们能够在常规内容中平衡重要的细节,从而使我们有机会对消费者产生巨大的影响。

本文旨在强调在设计中使用区别时应该考虑的各种因素。

独特的设计

设计中的干扰会导致沟通的中断,并会使用户感到困惑,使他们无法快速决定关注什么或下一步要去哪里。

独特的设计通过提出一些吸引用户需求的基本原则来缓解这种情况。从本质上讲,它强调了这样一种理念,即基于重要性而非位置来突出内容是有益和值得的。

独特的设计什么是独特设计?让重要信息可见是一个简单的目标。

特色设计原则包括:

  • 不突出对象,除非它有真正的需要吸引注意力
  • 限制页面中所有内容的重要性,以避免稀释重要内容的强度
  • 弱化不那么重要的内容
  • 花时间帮助引导用户的眼睛浏览页面,以确保内容以正确的顺序阅读
  • 避免页面上有太多信息以减少噪音
  • 确保你展示的东西符合你想要传达的思想

独特的设计独特的设计对于确保最终用户能够找到他们需要的东西非常重要。

虽然在页面上要求过多的重点(有强烈的区别)可能会破坏用户体验,但没有重点或选择性突出显示的乏味数据也同样会破坏用户体验。

它会使平淡无奇的内容(即使是写得很好的材料)显得枯燥、乏味,甚至难以阅读。

虽然你的大部分内容应该是中性风格的(它不应该有强调),但网站中总会有需要加强的内容。无论你使用的是图像、风格效果、颜色、外观、动画还是其他东西,适当的区分都是非常重要的。

独特的设计纯文本文档没有独特的华丽字体,通常难以阅读。

噪音的利润率

保持独特设计的一个关键原则是噪声裕度函数。你是否曾经访问过一个内容太多的网站?这类问题会让用户几乎不可能找到他们需要的东西。

通过简单地减少在网站设计中出现的信息量,或将其进一步分解为几个页面(或使用标题的部分),你可以增加人们与你的作品互动的方式,因为相关信息将更加上下文可见,更容易定位。

大量的噪音会扭曲网站的整体信息。大量的噪音会扭曲网站的整体信息。

在用户界面中,噪声可以以多种格式出现。

在设计中,任何旨在抓住用户注意力的东西都可能是将注意力从内容上转移开的关键组成部分。理想情况下,你应该尽可能少地使用这些设备或界面。

界面噪音可能是由于网站中出现了太多的元素。界面噪音可能是由于网站中出现了太多的元素。

即使是很少有噪音诱发成分的场所也会有噪音污染问题。如果文本内容布局不当,就会出现问题。在这种情况下,将大块数据分解成表格、项目符号列表、部分和样式化的内容有助于提高可读性。

太多的图像也会变成一种视错觉(就像“沃尔多在哪里?”书),因为对任何相关点的搜索可能会丢失,这使人们注意到试图简化图表、图表和信息图以保持一定程度的中立性和可见性的任务。

内容也不是没有噪音!大块的文本会让终端用户感到沮丧。内容也不是没有噪音!

大块的文本会让终端用户感到沮丧。

空间意识

另一个与噪音密切相关的原则是空间意识。虽然知道页面中显示多少内容很重要,但了解如何表示内容可以帮助最终用户识别他们自己的环境。

在设计的同时强调简洁——引入很多需要的东西空格即使在最冗长的文档中,也可以让用户专注于包含有意义内容的部分。

此外,复杂的背景图像或图案会降低添加空白的效果。

给网站足够的空间可以增加空间意识。给网站足够的空间可以增加空间意识。

组织是任何目标的关键,网页设计中的惯例正是出于这样的原因而发展起来的。

任何对象的复杂性都可以通过了解其功能或用途的容易程度来确定,而且还可以通过它的呈现方式来帮助我们的老朋友,可读性。

空白的关键功能不仅是将部分分隔开(通过空间),而且还可以提高对这些部分如何维护的认识,从而使设计成为更愉快的体验,从而帮助元素满足其环境的影响需求。

一个结构良好和有组织的网站布局将很容易导航。一个结构良好和有组织的网站布局将很容易导航。

尽管灵活布局的理念表明,终端用户所拥有的设备不同,可见空间的数量可能会有很大差异,但小屏幕突出了web浏览器及其带有滚动条的视口决定级联和优先级信息的方式。

一个众所周知的事实是,网站顶部的信息比页面底部的信息更有优先级(由于它可能被看到的顺序)。因此,确保您的内容以一种符合公约的平衡方式提供是值得考虑的。

惯例表明,内容应该根据重要性给予优先级。

画重点

独特而细致的设计的关键原则之一是基于将重点放在重要的内容和设计元素上的想法。虽然充分利用空间和降低噪音水平有助于自然地吸引注意力,但也有一些方法可以通过将注意力集中或吸引到屏幕上的某些东西来吸引访问者的注意力。

虽然使用这些元素可能对最终用户有益,但值得强调的是,如果你未能平衡关注需求和中立性需求,你可能最终会抵消你展示重要性的努力。

dConstruct网站将人们的注意力吸引到参加活动的著名演讲者身上。dConstruct网站将人们的注意力吸引到参加活动的著名演讲者身上。

与设计的许多方面一样,吸引注意力的想法可以通过对心理学的一般理解来实现(所以买一本关于这个主题的书可能会有好处)。

人们被内容吸引的方式多种多样。

吸引焦点的方法通常基于巧妙的措辞(幽默是有效的)、数字(如价格或日期)、容易识别的相关术语(如“接触”一词)、表示所提到内容的图片(信息图)和动画(自然聚焦以理解效果)。

通过使用读者能理解的词语,你更有可能引起他们的兴趣。通过使用读者能理解的词语,你更有可能引起他们的兴趣。

虽然自然注意力可以通过心理学和相关数据吸引最终用户,但视觉注意力通常更明显,更容易吸引注意力。

一个例子就是人们使用Flash动画,它很自然地模糊了吸引人们对内容的注意和吸引人们对用户界面(而不是内容价值)的注意之间的关系。虽然通过视觉效果来吸引人们的注意力是一种快速(如果不是粗暴的话)的方式,以确保访问者阅读一些内容,但它应该有一定的克制和谨慎。

视觉上的注意力寻求可能是由悬停等动作产生的动画效果引起的。视觉上的注意力寻求可能是由悬停等动作产生的动画效果引起的。

对比媒介

独特设计的另一个关键原则是对比.颜色已经成为许多网站设计的重要组成部分之一,色调和变体之间相互作用的方式不仅可以决定信息的可见性,在更糟糕的情况下,它们甚至可能是可读性潜在问题的指标。

测量对比度最简单的方法之一是检查前景对象(如文本)与背景内容(如块颜色或图像)的可见性。

你遇到的最常见的对比是背景色和前景色。你遇到的最常见的对比是背景色和前景色。

正如前面提到的,网页可及性相比之下,信息的可见性通常会对谁可以访问信息产生影响,因此发挥着共同的作用。虽然低对比度组合可能会给人微妙和柔和的印象,但如果对比不足,或者如果使用了在某些视觉条件下(如色盲)已知冲突的两种色调,那么您很可能会以负面可见性问题告终,不仅使文本不那么独特,而且无法阅读。

视觉障碍是最常见的由颜色对比差造成的疾病。

可访问性与内容与周围环境的对比密切相关。可访问性与内容与周围环境的对比密切相关。

对比的好处和色彩心理学的运用可以以一些不寻常的方式吸引用户的注意力。

一个主要的例子就是所谓的颜色的象征意义在这个网站上,人们会访问一个色彩丰富的网站,这些网站会让人们想起某些事物和情感。这种不露声色的丰富性可以吸引他们的注意力。

根据观众类型和人群文化的不同,对颜色的解释可能会有所不同,但对比和补充你的调色板的和谐将提供额外的强调和有针对性的情感触发。

颜色不仅能唤起情感(和注意力),还能使事物与众不同。颜色不仅能唤起情感(和注意力),还能使事物与众不同。

影响重点

我想强调的最后一个原则(不是双关语)是通过选择性效果手动为你的网站添加独特的影响。

到目前为止,我们一直专注于通过强调和对比来去除不必要的价值,并将人们的注意力吸引到一个部分。这种方法采用了一种完全不同的方法,它采用了一些已经引起用户注意的内容(如文本块),然后增强该内容的某些部分,以增加围绕它的元素的可见性。

当然,这是为了在现有内容范围的背景下自然地突出显示。

仅仅突出文本段落就可以增强内容的重要性。仅仅突出文本段落就可以增强内容的重要性。

高亮显示一段文字可能看起来很微妙,但效果惊人。

在像谷歌Chrome这样的浏览器中,你可以改变高亮文本的颜色,这可能会给手动选择内容提供一个更好的对比(更容易阅读)平台。

当然,除了使用背景色,CSS中还有很多方法来吸引注意力,比如在文本之外使用图标,为独特片段的链接着色,或者简单地改变需要增加可见性的信息的字体、大小、颜色或样式(粗体、斜体、下划线、强度和强调)。

除了默认样式之外的常见风格特征可以很好地表示内容。除了默认样式之外的常见风格特征可以很好地表示内容。

在强调影响和区分中使用颜色可以轻松地通过心理学和设计,可以说只有选择性地使用颜色才会给你的作品带来额外的影响(就像更多的空白会给更少的内容带来影响)。

然而,在某些情况下(如儿童网站),使用一系列醒目的大胆色彩和充满活力的阴影实际上可以很好地吸引注意力,使微妙的色彩限制成为一个问题。虽然在许多针对成年人的网站中,最好保持对颜色使用的坚定关注,但针对年轻受众的网站可以摆脱这种生动的阴影使用。

使用适当的锐利的颜色组可以突出不同的部分。使用适当的锐利的颜色组可以突出不同的部分。

注意细节

虽然没有任何严格的规则来规定你应该赋予内容多大的强度,但我发现一个很好的平衡如下:

  • 85%的设计是中性的(没有焦点)
  • 5%的设计只有最少的亮点(如横幅)
  • 5%的设计被强调(如大胆的斜体链接的颜色,及其他力量)
  • 5%的设计是非常重要的内容,需要立即优先考虑

但是,应该考虑影响分布平衡的因素,例如它在视口中的位置,如果内容是“固定的”,以及给定的强度(如大小和颜色)。

上面的图表可以帮助你决定如何打破区分障碍。上面的图表可以帮助你决定如何打破区分障碍。

JavaScript和高级CSS选择器改善了设计时考虑到区别的情况。

有了在任何时间隐藏内容(或限制可见内容的多少)的能力,以及根据视口可用性或设备类型动画或控制信息如何显示的能力,我们可以投入越来越多的精力,最大限度地利用我们选择显示的小装饰。虽然这样的复杂性会让我们觉得我们需要一次性利用它,但受控的方法可以简化我们的设计。

除了脚本和很酷的CSS技术之外,单页设计越来越受欢迎。除了脚本和很酷的CSS技术之外,单页设计越来越受欢迎。

关注的关键原则是设计师自己对细节的眼睛,即使内容是美丽和简单的,也没有理由让事情变得乏味或乏味。可扩展的设计、灵活的布局和极简主义精神的现代进步已经为使信息更容易访问、阅读和使用奠定了一些伟大的方法。

花点时间考虑如何解释每个事件或效果,你的访问者阅读你的作品的能力,并为自己设定“少即是多”的目标(在上下文中),这将提高你的内容的价值。

凡事适度是最好的策略,没有必要浪费精力!凡事适度是最好的策略,没有必要浪费精力!

区分的艺术在于我们描述信息的方式,以及重要和相关的部分如何设法超越繁冗和有用的吸引人的元素,这些元素为内容增添了实质性内容。

随着网络的发展(就像我们的品味和能力一样),有效地描述信息将成为(仍然是)设计界必须提供的最重要的哲学之一,这是一个事实。

反思一下,独特的设计让你的内容有最好的机会在未来被阅读、理解和享受——如果你想被注意到,这是非常棒的!

相关内容

WebFX职业

加入我们的使命,为全球各地的企业提供行业领先的数字营销服务-同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!