在你的网页设计中创造焦点

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

在你的网页设计中创造焦点网页设计师没有太多时间去打动网站访问者,说服他们留在我们设计的网站上。他们想要快速找到东西,我们应该设计网站来帮助他们做到这一点。做到这一点最重要的方法之一就是使用焦点。

焦点是网页上我们想要引导用户注意力的突出部分。焦点是页面上醒目的中心;它比其他组件更突出、更独特。原理是这样的:通过设计这样一个感兴趣的区域,我们能够强调网页最重要的方面,并传达网站的主要目的。

最基本的

最好只有一个焦点。找到这一页上最重要的东西,然后强调它。焦点应该直接与网站的目标和优先级以及网站所有者的期望相关。

有多个焦点是可能的,但我建议专注于一个主要的行动号召。在一个页面上有很多焦点和没有焦点是一样的,因为这样,用户就无法辨别哪个是最重要的。如果你必须有多个焦点,它们应该是可区分的。

创建一个视觉层次结构以表示哪个焦点更重要。用不同的大小、颜色、位置来区分它们,视觉重量和其他技术的区别

把焦点放在哪里

大多数用户看到主页首先,这可能是你的焦点最好的页面。但是只在主页上创建焦点是一个常见的错误。所有的网页都应该有一个焦点,让用户快速访问页面上最重要的信息。

例如,在可滚动的页面上,将焦点放在折叠上方是一个很好的候选位置)。在一个不可滚动的页面上(即,一个页面一次可见),你有更多的自由。

使用已经存在的元素,但要好好使用它们。把简单的东西做得精致;让平凡的事情变得令人印象深刻。如果可以的话,暗示一个故事。

用一个故事告诉你的设计作品。

如何创造焦点

这里有一些设计元素,你可以通过调整来建立你的焦点。我包含了每个元素的一些现实例子和反例子。

排版

文本元素有很强的潜力成为注意力的抓手,但典型的网站充斥着大量的文本,因此必须强调特定的部分。大小、颜色、间距(字符和行之间)和字体都是可以用来加强文本元素强调的因素。爱德华多·德拉罗克使用不同的字体和大小,使三个级别的可见性。

上面巨大的字体Fajne Chlopaki的网站很吸引眼球。音乐乐队The Autumn Film宣布了一个粗体字体的特别优惠,创造了真正的焦点。砂岩展示了为什么好的标签提供了一个迷人的焦点。

字体大小的多样性有很多作用,但颜色才是真正吸引眼球的。网站的标题Flash游戏峰会2011就是一个很好的例子。

插图

图形化组件快速传递信息,不需要太多描述。它们还可以作为视觉钩来吸引用户的注意力。它也可以用来显示一个过程中的步骤,如此生动地描述和记忆。

大多数情况下,图像元素都是银弹:在适当的时候保存它们,不要过度使用它们。WPCoder有一个适当的和描述性的焦点。这是一个美。

打赌你的追随者的主页有几个焦点,但主要的插图(大猩猩)占主导地位,并引导眼睛到其他点。注意它的手臂和它们下面的空间——一个很好的例子,如何处理几个焦点。Aka-Acid有一个漂亮的设计,但缺乏特别的焦点是一个缺点。

按钮

近年来,网页设计中最流行的元素之一就是“行动号召”按钮。几乎每个网站上都有大按钮。因为它们的高度可见性(由于它们的尺寸)、熟悉性和描述性标签,它们是有效的。

按钮是吸引人的元素,但过度使用或误用会降低它们的效果。在Fatburgr上,两个简单的按钮吸引了用户的注意力。它们的大小和颜色是有效的。

SolidShops使用清晰和明显的按钮来创造焦点在上下折叠。

空格

使用空白是将人们的目光吸引到页面的特定区域而不依赖于可见元素的最简单方法之一。苹果使用空白完美地使特色产品明显。通过在搜索框周围留下足够的空白来达到目的。

装饰

将某物与其周围环境区分开来的一种方法是使用简单的装饰。色彩和定位对于创造伟大的效果有很大的帮助,而其他元素的效果很大程度上取决于这些基本元素的使用情况。在3rddm上,唯一立即吸引注意的是蓝色。

在那之后,眼睛会看到蓝色图标之间最大的项目。简单但有效。页面上最大、色彩对比最高的部分通常最突出。

用户体验杂志的主页在不同的层面上有几个焦点。正如Train-ee所演示的,标签云是按大小排列焦点的好方法。基本的装饰可以把文字中的某些元素带出来。

丹·维韦罗斯(Dan Viveiros)的网站是极简主义和基本的,但它行之有效。像这样的页面文章排版分散用户;眼睛无处休息,坦白说,这让人困惑。

结论

每个网页都必须向用户展示一些有用的、有吸引力的东西。可以用多种方法来强调网页的某些部分,我已经和你们讨论过其中的一些方法。

相关内容

WebFX职业

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

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