27 条基于研究的网页设计技巧:如何设计一个有效的网站

AEO Service Forum Drives Future of Data Innovation
Post Reply
jibag32316
Posts: 31
Joined: Mon Dec 09, 2024 3:53 am

27 条基于研究的网页设计技巧:如何设计一个有效的网站

Post by jibag32316 »

很容易看到。每个营销人员都知道他们获得了多少流量,因为它就在您的分析中。但接下来发生的事情并不那么明显。

这就是为什么给出流量提升建议很容易,但网页设计技巧却很难。因素太多了。即使在 1000 多个成功的网页设计项目之后,我们也很难知道什么才是最好的。

本文包含 27 条网页设计技巧,可帮助 克罗地亚手机号码列表 您从每位访客身上获取更多价值。其中大部分技巧都得到了研究的支持。这些技巧适用于初级设计师和高级 UX 专业人士,适用于小型企业和大型企业。

以下是我们关于如何设计一个能产生效果的网站的最佳建议、想法和灵感。一个看起来很漂亮、能吸引访客并从每一次来之不易的访问中获得更多价值的网站。

这里引用的最重要的两项研究都在最后。如果你不耐烦,就直接跳到最后吧!

网站的结构布局
网站由两部分组成:容器和内容。容器由两部分组成:结构和样式。让我们从结构开始。这些提示是关于页面的结构和布局的。

1. 利用视觉层次
每个页面都有视觉层次结构。如果您不熟悉这个概念,以下是我们的定义:

视觉层次是指视觉元素的排列、大小、颜色和对比度。它决定了它们的相对突出程度以及人眼看到的顺序。

网页设计师使用视觉层次结构来引导访客首先关注重要元素。网站布局包括位置(页面高位或低位)、尺寸(大或小)、视觉效果(视频、图片、图标)和对比度(颜色和空白)。



结合各个方面可使效果倍增。每个人都会看到页面顶部的大型视频。很少有人会看到被图像包围的低对比度文本。

视觉层次结构就是为什么你的眼睛在浏览互联网上的每一个页面时都会遵循一定的路径。如果精心使用,它可以通过一系列信息引导访客的注意力,从而引导他们采取行动。

2. 在主页上使用描述性、以关键词为中心的标题
首页(以及每个页面)顶部的标题要么是描述性的,要么不是。如果不是,访问者可能无法回答他们的第一个问题:“我来对地方了吗?”

这也是使用目标关键词并表明相关性的机会。但很多营销人员会写一些巧妙或模糊的内容。但清晰比巧妙更重要。

不要写一个花哨但模糊的标题,而要写一些描述性的内容。一定要在页面顶部(首屏)解释公司是做什么的。

Image


等等,折叠仍然还存在吗?
是的,有折叠。每个屏幕上的每次访问都有一个可视区域。底部是著名的折叠。要查看此行以下的任何内容,访问者必须滚动。

为什么以及这在网页设计中是否重要是一个备受争议的话题。以下是两个最好的论据:“没有折叠! ”与“折叠仍然很重要。”

当然,屏幕尺寸有成千上万种,从超小到超大。上个月,该网站在 958 种不同尺寸的屏幕上被浏览过。因此,一些设计师表示,折叠已不再有意义。



但底线是这样的(明白了吗?)每次访问仍然有一次折痕,所有访问仍然有一次平均折痕。Hotjar 等工具将其清晰地显示为滚动热图中的一条线,适用于台式机/笔记本电脑、手机和平板电脑。



所以是的,有一个折叠,你在折叠上方和下方放置什么很重要。一项研究表明,访客 80% 的时间都花在折叠上方。



因此,请将您的价值主张(即您所做工作的 8 字版本)放在页面高处,首屏之上。

3. 但不要把所有行动号召都放在顶部
访问者可能会在那里花费更多时间,但这并不意味着他们已经准备好采取行动。很多说服行为都发生在页面的更下方。

Chartbeat分析了 2500 万次访问,发现大多数互动发生在首屏以下。顶部的内容可能可见,但它不一定是让你采取行动的最有效的地方。



关于这项经常被引用的研究,需要注意一点:Chartbeat 主要由新闻网站使用,这与营销网站截然不同。没有人会在新闻网站上做太多的宣传!常规的网页设计技巧不适用。

确保将行动号召放在页面下方任何可能引起人们高度兴趣的地方。

4. 使页面高度更高。回答所有访客的问题。
像素越多,回答问题、解决异议和添加支持性证据的空间就越多。如果访问者找不到重要问题的答案,他们只需继续向下浏览页面即可。一旦他们满意,他们就会停止阅读。

最有效的销售页面模拟销售对话。

您永远不会在销售会议期间打断某人并停止回答他们的问题,对吗?这就是简短页面所做的一切;它停止回答问题。

这就是Crazy Egg 著名研究的用武之地。他们对受众进行了调查,发现了他们最关心的问题和担忧,并建立了一个解决所有问题的页面。

页面长度增加了 20 倍。转化率提高了 30%。

“滚动是一种延续,点击是一种决策” – Josh Porter, Rocket Insights
5. 一次只展示一件事
“我喜欢简洁、现代的设计。”当我们开始网页设计项目时,大多数客户都会这样告诉我们。他们经常以苹果的网站为例。

访客不喜欢杂乱。我们喜欢留白。换句话说,我们喜欢低视觉复杂度。

2012 年,谷歌开始研究哪些类型的网站在访问者眼中是美丽的。这是一项关于简单性的研究,名字很复杂:视觉复杂性和原型性对网站第一印象的作用:致力于理解审美判断。 打开新窗口

他们了解到,更复杂的设计不太可能被认为是美丽的。



这解释了单列布局和高页面的趋势。多列(左侧导航、内容区域、右侧栏)的设计更复杂,访客视野内有更多视觉元素。

所以要减少混乱。在每个滚动深度上,将两个元素中的一个作为焦点。

6. 坚持标准布局
谷歌的同一项研究还发现,“高原型性”也与感知美感相关。换句话说,怪异通常并不美观。遵循网页设计标准的网站更有可能受到喜爱。

被认为最美丽的网站既具有较高的原型性,又具有较低的视觉复杂度。它们既简单又干净。



想想看,区分你的品牌是件好事,但布局不是做到这一点的地方。在说什么上要与众不同。但在如何使用你的网站上要典型化。

有些汽车看起来很棒。它们与众不同。它们很漂亮。但它们仍然有侧面的车门、底部的车轮和前面的车灯。

但什么是标准?根据我们自己的研究,这些是网站的标准元素:



具有高原型性的“标准”网站包括以下内容:

左上角有徽标
标题中的水平导航
顶部的搜索栏
底部的社交图标
移动响应式设计
7. 警惕“假底”
现代营销网站(尤其是销售页面)都是用页面块构建的。这些是内容行,通常一侧是图片,另一侧是文本,以单列形式沿页面向下流动。



以下是潜在客户开发网站上典型服务页面的结构。

如图所示,页脚的背景颜色较深。很多网站都采用这种做法,以致访问者现在认为,切换到较深的背景意味着页面底部。

但如果设计中页面块的背景是深色的,访问者可能会认为他们已经到达页面底部,并停止滚动。这是假底部。



注意:我与自己的设计师就这一点进行了辩论。我们的创意总监Kurt Cruse提出了一个很好的观点。背景颜色的变化是让访问者知道内容类型正在变化的绝佳方式。我明白你的意思,Kurt!

在选择页面块的背景颜色时要慎重。为了安全起见,只选择略有不同的颜色,或者始终使用白色或浅灰色。然后在页脚处切换为深灰色或黑色。

8. 避免使用旋转木马和旋转滑块
这些幻灯片多年来一直很受欢迎,客户也很喜欢。但是主页幻灯片有一个问题:访客可能只会看到第一张幻灯片。

很多研究都得出了同样的结论。后续幻灯片上的信息不太可能被看到,行动号召也不太可能被点击。只要看看大学网站上幻灯片的点击率就知道了。

它们之所以受欢迎可能是因为它们很容易获得批准。不同部门的不同利益相关者都会在首屏上获得一些像素。它们适合内部政治,不适合访客。

主页幻灯片可以很好地防止人们在会议室里互相攻击。

那么我们该怎么做呢?

堆叠幻灯片,以便访客可以通过向下滚动页面来查看每张幻灯片。它们会突然变得更加显眼。
使用特色图片,将最具影响力的幻灯片作为主角。给它一个良好的行动号召!
9. 避免使用标签和折叠面板
这是将内容从隐藏状态中移除的另一种方法:避免使用标签和可扩展的内容框。

了解到多达 76% 的网站访问者正在扫描,您可以让内容全部显示出来,让访问者更清楚地看到您的内容,而无需单击即可显示某些内容。

如果标签和可扩展手风琴面板有效,您可能会在亚马逊上看到它们。

请记住,滚动比点击更快捷、更简单。如果访客必须瞄准并点击或按 Tab 才能查看某些内容,他们就不太可能看到它。
Post Reply