上杭网络公司:浏览阅读时代的网页设计

发布时间2020-05-10    阅读:251    作者:上杭网站设计开发公司

我们生活在一个卷轴文化的时代。花点时间想一想,你是如何通过你的任何社交渠道订阅的。或者你将如何放大这篇文章(以为我们不会注意到,不是吗?)在互联网用户快速浏览内容的情况下,您如何才能让读者慢下来,吸收您的内容?网站?为了了解如何实现这一目标,让我们走出万维网的第二步,看看一个精彩的广告活动的案例研究,让路人停下脚步。

在美国各地的城市里,色彩鲜艳的巨型海报纷纷出现在一家名为rxbar的营养酒吧的广告中。由公司设计威登+肯尼迪这些广告牌一点也不微妙。他们的特点是自我引用的讽刺,就像酒吧的包装在巨大的标题之下的图片:“食物。”或者,在时代广场,一个电子标志写着:“在时代广场几乎看不出RXBAR海报。”这项运动已成为设计新闻。但是,夸张的外表和信息到底是什么天才呢?

答案在于我们的眼睛已经习惯于每天吸收大量的市场营销。大多数时候,我们用呆滞的眼睛来迎接广告和标志.威登+肯尼迪的竞选活动对这种反应提出了挑战。他们呈现的是可消化的内容(你可以自己决定,如果那个双关语是有意的…)以一种破坏我们已经习惯的预期广告策略的形式。在新鲜感的可读性和震惊之间,他们让人们停下来,注意到他们在说什么。

上杭网络公司把事情恢复到网上,这就是你想要对你的网络访问者产生的同样的效果。然而,你如何才能让你的听众吸收你想要通过你的页面传达的信息呢?(更别提了,为了欣赏你所投入的所有辛勤工作,你在网上创造了一个精湛的形象。)传达你的观点,需要利用各种设计技术,引导你无助的巡洋舰穿过你的网站,并指出最重要的路标沿途。在这里,我们解释了什么是浏览阅读,它如何影响您的网站上的用户体验,以及如何使用网页设计,以帮助读者保留信息,即使他们继续浏览您的网页。


什么是浏览阅读?

回到互联网还在用尿布的时候--我们说的是1997年--尼尔森诺曼集团的雅各布·尼尔森发现了一个关于人们如何在互联网上阅读的主要原则。用他的话说:“他们没有。”他得出这一结论之前,他发现79%的接受调查的用户一直在浏览他们所遇到的网络材料。

自那时以来,互联网已经发生了很大的变化。但我们对它的解读并没有太大的变化。事实上,如果有的话,我们只是失去了更多的能力去逐字阅读屏幕上的内容。相反,我们从事一种叫做浏览阅读的实践。你可能会记得,从你的日子,试图使它通过你分配的学校尽可能快的阅读。它的数字对口也没什么不同。浏览阅读指的是我们在网页上快速移动的策略,寻找特定的关键词,只关注吸引我们眼球的元素。

关于为什么这种浏览方法在互联网用户中如此流行的原因,已经有了大量的研究。玛丽安·沃尔夫教授写了大量关于这个话题的文章,他认为我们花在网上的大量时间2017年,平均成年人每天将近6个小时!)实际上正在改变我们大脑的神经学。她认为,我们越来越远离阅读印刷品的过程和时间密集的体验。在线上,我们已经习惯于咬一些内容和先进的视觉设计,为我们创建组织层次结构,这样我们的头脑就不必这样做了。

这个现实对那些想要确保他们的信息到达他们的受众的网站所有者来说是一个挑战。幸运的是,我们一直更好地理解人们是如何与Web内容交互的。例如,我们知道我们下意识地使用了某些阅读策略,比如寻找关键词,或者当一个点在文本海洋中丢失或没有视觉突出显示时,我们很快就会继续前进。此外,眼睛跟踪研究表明,网页访问者倾向于按照“Z”形状(对于基于视觉的网站)和“F”模式(针对基于文本的网站)阅读。下面,我们将探讨如何在您的网页设计中使用这些技术,这样您就可以制定一个策略,让更多的人阅读您的内容。

Z-图案设计


这种样式特别适合于充满视觉组件的页面,也适用于着陆页这是低的文本,但高的项目,如按钮,表单,和简短的解释框。如果这听起来像你必须提供的东西,那么继续阅读,找出如何将你所有的内容转换成“Z”的形状。

这个想法是,有人可以粗略地把字母‘Z’画到你的页面上,从左上角开始,到右下角结束,然后点击你为网页访问者创建的流程的每一个阶段。在你跳进(“Z”)队形之前,你应该先确定你需要包括哪些信息。要做出这个决定,先想想访问者刚刚登陆你的网站的那一刻。

  • 您希望他们的眼睛立即被吸引到哪些页面元素?

  • 在你刚才列出的元素中,重要的顺序是什么?哪个应该是第一,第二,第三,等等?

  • 你在页面上引导他们走向的最终行动是什么?当他们走到“Z”的尽头时,你想让他们完成什么?无论是购买产品还是注册网络研讨会,都要写下你的具体目标。

一旦你回答了这三个问题,你就可以开始把你的流程投入到设计的现实中去了。

Z模式的顶部:这第一条水平线就在你的网站标题所在的地方运行。因为读者的眼睛首先会自然地吸引到左边的角落,这是一个骄傲地贴上你的标志的完美的地方。还没有呢?这个Wix Logo制造商是来帮你解决这个问题的。只要回答几个关于你的企业和它的整体外观和感觉的问题,你就会在几秒钟内收到一个定制的、专业的徽标,供你下载和使用你所有的营销材料。这是一种即时欢迎游客的方式,也是加强你品牌认同.

一旦你的标志牢固地到位,你可以向右移动。想一想,对于来访者来说,还有什么是至关重要的,让他们立刻了解你的生意。是你的标语吗?链接到你主要存在的社交渠道?一份简短的任务说明?

这个顶板也可能是你放置菜单的地方。是否有多个页面的传统格式,或者长滚动网站将这些基本信息保持在可以获得的范围内,可以使您的客人生活更轻松。当然,如果你有一个较短的,独立的登陆页面,那么也许你可以跳过菜单。否则,这个导航天赋是必不可少的。

访问者通常希望在页面顶部容易找到容易访问的导航选项。如果他们进入你的网站有一个特定的意图,例如购买一张令人惊叹的照片,那么他们可能会快速扫描顶部,以获得一个链接到你的画廊或网上商店。对站点上的所有内容进行评估,然后将其合并为几个类别,例如:证词集合,“关于我们”一页,“常见问题”部分,a商店展示您的产品,“联系”部分,以及任何其他认为与您的业务相关的部门。

Z型的对角线部分:从右上角到左下角,这条有角的线横跨整个页面,功能就像一个游乐场滑梯。它意味着迅速地将访问者从他们完成扫描面板的地方带到你希望他们再次在页面底部进行扫描的地方。无论你在这个空间里插入什么,都会吸引观众的注意力。这样,他们就能保持足够的兴趣,在他们到达“Z”号的时候,完成你先前确定为你的最终目标的行动。

要完成这一任务,一个肯定的方法是将一个可视化的内容添加到您的页面上,比如一个迷人的页面。视频背景,互动画廊,或吸引眼球动画。每一个让你展示,而不是告诉,你的业务是什么。如果你经营一家咖啡店,一个互动的背景展示豆类是新鲜的土地,瞬间传达了很多关于你是谁和你在做什么的信息。无论您为对角线部分选择什么,您的目标都是继续沿着页面向下移动查看器。

Z模式的底部:飞机正在准备起飞到你的行动项目。字母模式的最后一个水平面板就像你对“询问”的积累,所以你在这里提供的任何信息都应该有两个目标:在访问者愿意信任你之前回答任何剩余的问题,并为你所提供的一切建立热情。一些关于这条跑道延伸的想法是一些小盒子,上面有简短的文字,列出了你的产品的好处,摘录了狂欢节的评论,或者一些关于你的商业“故事”的句子。

如果你已经填写了‘Z’的道路上有令人信服和有趣的信息到目前为止-恭喜!来访者可能已经到达了信的末尾。现在是时候让你呼叫行动(CTA)已知。您的要求可以采取多种形式:您可以要求读者订阅您的邮件列表,购买您的产品,下载您的报告,预约,还有更多。你提出的问题应该与你的企业目标一致。

无论你选择什么CTA,你如何选择这个问题是很重要的。利用设计效果,例如与页面其余部分形成对比的粗体颜色、按钮或重音字体,突出显示您的“任务”。如果你对如何从设计的角度来处理这个任务感到卡住了,那就来看看这个。实际转换的cta完整指南,这些想法最佳字体配对,以及如何应用的详细说明。网站设计原则(尤其是2号!)这一步就是你在这段时间里一直在激励访客的一步。别让他们错过电梯。

你已经走到尽头了!不过,你不必只停留在一个Z型上!如果您的登陆页面有多个部分,或者您想要发布的一系列CTA(例如,您的业务提供的四个服务中的一个),那么只需在第一个字母的末尾重新启动模式。为了让观众始终保持参与,探索视差滚动效应可以为您的网页带来活力,并使访问者兴奋地继续滚动。

F型设计


如果你开始写博客或者你的一些页面自然地围绕着大量的文本,那么这个设计模式就是给你的。假设有人将字母‘F’映射到您的页面上。不管它的内容是什么,都是你想要在你的写作中插入所有最重要的信息和短语的地方。要想把随意的扫描器转换成你努力工作的读者,关键是要吸引他们的注意力,只要他们的眼睛自然地吸引他们的注意力。在您开始构建页面时,请记住以下几个原则:

F型的水平线:制作一个引人注目的标题和章节标题对于快速向访问者解释他们能在页面上找到什么以及为什么值得他们花时间停留在页面上是非常重要的。“F”字形的顶部通常是你期望找到标题和特写图像的地方,它下面的第二行大致落在字幕在文本后面出现的范围内。无论是格式化您的博客存档,还是设置博客帖子本身,这都是正确的。除了激发读者的兴趣之外,创建h1和h3标题还能给读者带来很大的乐趣。提升你网站的SEO,因为它使你的书面材料更容易通过谷歌的搜索索引找到。

这个结构对页面的前两个段落区域有很大的意义。这是因为它们正好落在访问者仍在从左到右扫描页面的范围内。确保你的“钩子”,当你达到这个计数结束时(不,第二段的结尾并不在页面的一半),无论是你的文章的吸引人的标题,还是你的帖子有趣的开场白。

使用Z-模式,还记得信的每个部分是如何用来让游客一直走到最后到达CTA为止的吗?在这里,前两个水平平面的‘F’形状是用来实现一个类似的目标:说服读者,这是一页或一篇文章,他们希望继续阅读,直到结束。

F型的垂直线:在浏览完页面顶部的水平部分后,读者自然会垂直向下移动,停留在左侧。你的工作将是填补这个空间的有趣的功能跳出页面。这鼓励读者打破他们本能的扫描速度,实际上跟随着句子的其余部分。

为实现这一目标,您可以使用的一些策略如下:

  • 段落、标题和要点中的前景化关键字:不要让读者继续读到句子的末尾来理解你的观点。例如,“织女星在家里尝试”比“在家里尝试这些食谱”更有吸引力。有了第二种选择,你就下了一个很高的赌注--也是不太可能的--打赌你的读者最终会明白你在说什么。即使对我们中的胆小鬼来说,这也不是我们推荐的风险。

  • 格式化元素:在你的内容中洒上一些风格元素,比如引号、特色图片、编号或项目列表。他们打破了页面,也提供了容易的地标画在眼睛中,因为它的涂鸦页。另一个简单的垫脚石,你可以添加是使用数字(当相关),而不是写数字的文字。与字母表字母的对比将作为另一种方式来分解文本和吸引注意力。

上杭网络公司在整个F模式中要记住的一般原则:我们对在线阅读的耐心只能容忍短句。要理解为什么,只要想想twitter的字符限制,或者每当你在你的提要中看到一篇文章长度的文章时,你的内心感觉如何。当你写作的时候,记住这个原则。保持信息的可获取性,并且易于掌握。让你的读者理解你的观点,或者回溯理解你在说的话,这对保持他们的存在并不是个好兆头。

不过,我们知道你的生意并不总是那么简单。你当然不需要降低你的想法的质量来向读者推销你正在做的事情。这只是意味着想出另一种策略,在复杂的环境中构建,而不是用一个无休止的句子在视觉上压倒读者。如果你有一个更复杂的想法要呈现,链接到相关的背景信息(提示:像链接到其他文章或帖子,你可能在过去写),或伴随着图片或信息图表,以提高理解。相信我们,你的访客会提供那些赞美的手势。

你已经把你的内容塑造成一个漂亮的‘Z’或‘F’形状横跨你的页面。这次又是什么?首先,使用可读性测试工具,就像这个,来评估你写的内容的清晰度。第二,将更新后的网站发送给值得信赖的朋友、家人或同事,以获得他们的反馈。让他们把你的页面上立即突出的地方记下来。检查这个列表与你原来的计划,你希望什么会吸引游客的眼睛,并相应调整,直到你达到完美的排列。


QQ客服
胡经理