在2021年提高你的网页设计的12个基本技巧

在登陆您的网站后的五秒钟内，您的访问者能否确定您的公司做什么？如果用户需要，是否可以轻松浏览到博客？您的定价布局是否易于理解？你的网站跳出率低吗？

如果你发现自己对这些问题的回答是“不”，那么也许是时候认真审视一下自己的设计方式了优化你的网站．

当一个网站的设计能够满足你的需求时，它才是真正优秀的网站的用户体验，功能，并适当地补充您的内容。

忽视这些事情是非常容易的，因为你认为这些更新是你网站优先权的图腾柱上最不需要担心的事情，但是一个成功的网站既有高性能的内容，也需要平衡卓越的用户体验。

你最不希望花时间在你的博客或服务页面上写一些令人惊叹的内容，结果却因为设计缺陷、导航问题、令人困惑的布局或错过的转换机会而被忽视。

但是网站用户体验的保护伞下有很多东西，要理解其中的所有内容，同时找出需要解决的最重要的事情，是很有挑战性的。

那么，你需要知道什么才能开始改进你的网页设计呢？

为了回答这个问题，这里有12个网站提示来确保你走在正确的方向上在你的重新设计中，确保你不会让访问者离开。

1.有计划

既然您已经认识到您的站点可能需要一些改进，那么现在就应该往回走，并创建一个详细说明如何处理它们的计划。

开始规划你的客户旅程从用户第一次访问你的网站到成为用户。

当这样做的时候，考虑一下他们要浏览哪些页面，他们要阅读哪些内容，他们要转换哪些内容。理解这一点将帮助你设计一个真正有用的网站通过销售渠道培养领导者．

我一直很喜欢Leadfeeder的客户旅程地图。你不需要像他们那样把它画成图形，但它能让人明白要点。它说明了用户在访问他们的网站时做了什么，以及那些做了和没有做客户的人之间发生了什么共同点。

如果您正在努力编辑这些数据，或者缺少一个CRM来简化这方面的研究，您可以随时采访您的客户。问他们你是否有15-30分钟的时间问他们几个问题（你甚至可以用10美元的星巴克或亚马逊礼品卡来补偿他们）。面试尽可能多的人，但不必过分。

然后，使用这些数据制定你的策略．这将帮助您确定网站的关键接触点或您的用户交互区域。

通过这些接触点，你应该能够绘制出每个接触点需要唤起的情感、想法、目标、痛点和机会。

回答这些问题将有助于指导您的设计。他们的形象能以你想要的方式最好地解决这些问题吗?那特定的调色板呢?开始你的客户旅程地图将有助于创建这些问题的答案，并更好地加强你的设计。

2.消除干扰，减少摩擦

你网站上的某些元素会降低网站的价值和价值你试图传达的信息. 复杂的动画、太长的内容以及““敦实”网站图片只是几个例子。

观众只有注意力持续8秒，你需要让你的用户在他们浏览的页面上了解到什么，你的设计不能偏离这一点。

首先要确保你有一致的品牌指导方针你可以工作。

这应该详细说明你的字体样式、颜色、图像、图标和徽标用法。没有这一点，品牌在设计页面时很容易陷入困境。您可能会开始看到任意的颜色、不同的字体样式和大小，这反过来会分散您的信息或为试图转换的人制造视觉混乱。

避免过多的页面动画或交互也很重要。如果你在浏览一个页面时，看到每个按钮都在跳动，或者每个图标都有自己的动画，这会让你感到不知所措，让你无法阅读页面上的内容。

让我们以下面的网站为例。注意，由于我将此视为更大的批评，我将从图像中删除品牌的标志，以便它们能够保持更匿名。

当我看这个网站时，首先注意到的是颜色。

一方面，它们的使用方式让用户很难决定他们的眼睛应该去哪里。应该是两个红色按钮中的一个吗?你好吧呢?或者是导航栏的顶部?

你需要弄清楚当用户到达页面时，你希望用户的注意力往哪里去，以及它自然流动的顺序。这种当前的颜色安排在完成这个过程中产生了摩擦。

第二，有些区域的间距不一致。hello栏（“you！”）中的悬挂器创建了第二行，如果文本周围的容器宽度增加，则可以轻松地固定该行。H1也不是完全垂直居中于白色区域，将您的目光吸引到“问题”而不是消息的大部分。

在标题下方的灰色部分，它们以一个按钮(没有太多的上下文)为首，感觉像是夹在图像的顶部。作为一个用户，我想知道它是否应该有下面的空间，或者，它是否应该直接与图像相关。网站加载错误吗?这种内部争论造成了摩擦和混乱。

让我们看看一个提供更好的用户体验并遵守品牌指南的页面。

在我们上面沟通方， IT领域的另一家公司。乍一看，这个网站使用了一个更干净的外观和感觉较少大胆的颜色和更多的空白。

说到颜色，我喜欢《Communication Square》的两种按钮颜色，一种用于优先级较低的漏斗顶部或中间动作(蓝色)，另一种用于漏斗底部动作(橙色)。结果，我的眼睛立即转向橙色，他们希望我采取的更重要的行动。

他们的字体也更有凝聚力。看起来只有一种字体，用于轻、中、粗体。这就创造了一致性，使所有的东西都能很好地一起工作。

总的来说，英雄形象几乎没有让人分心的空间。事实上，英雄的图像本身并不是很详细，而是用白色的覆盖层来掩盖，这使得内容更加突出，而不是消失在图像中。

像这样的细节确实有助于创造或破坏你的整体网站体验，帮助你的用户更好地理解你想让他们做什么，减少混乱的空间。

3.增加社会证明

如果你在亚马逊上购物时像大多数人一样，你很可能会被那些写下自己产品体验的人的四星到五星评论所吸引。

通过查看这些评论，我们获得了对产品的信任，相信它会履行承诺，我们需要它履行承诺，这反过来又推动我们购买它。

同样的效果也适用于您的产品、服务和网站。如果用户看到真实人物的有力证明，研究表明你的前景非常乐观58%的人更愿意购买你的产品．

但是，您的推荐信应该如何视觉化，以便在用户看到时有效地建立起对他们的信任？

嗯，你可以采取一些策略。但首先，你需要考虑你想要什么样的证明格式，文本还是视频。历史上,，视频推荐是最好的。这是因为媒介能够让用户的注意力持续更长的时间，并建立更强的人际关系，能够听到声音，看到真人的脸。

不过，你也可以选择文本客户感言，如果设计和整合得当，仍然可以帮助你与用户建立信任。

highland Adestra是英国一家企业电子邮件和营销自动化软件公司。他们有四个视频的页面每个都包含在各自的部分中。

Upland没有随意将所有视频放在一起，而是将它们分开，并附带一个标题和句子，详细说明客户与它们合作的结果或好处。现在，用户已经了解了他们将在视频中听到的内容。

我还喜欢一些视频显示某人讲话的缩略图，这在视觉上让用户放心，他们可能会听到客户自己的声音，而不是观看基于文本的视频。

如果你还没有像Upland那样配备视频推荐，那么你可能会有一个案例研究页面，在那里你可以详细谈论你为帮助客户所做的一切。

Zenefits在他们的网站上做了大量的工作。

每张卡片都有一个展示该公司成员的形象，这比他们使用库存照片或仅仅是他们的标志的照片更值得信任。

因为他们有五页的客户感言，所以他们在页面顶部添加了一个过滤器，允许用户划分要寻找的行业类型或解决方案。现在，用户可以更快地找到他们想要的案例研究类型。

最后，如果你的网站只有文字表语而没有案例研究，那么在设计它们时，你需要注意一些方面。

例如，你不能只放一组文字说明和一个名字。这些不太可能被认为是事实，因为这会让用户想知道他们为哪家公司工作，他们的职位是什么，以及这个人看起来是什么样子(为了从视觉上确认这个人可能是真实的)。

看一看关于漂移的的网站。

在他们的例子中，他们使用Twitter评论，但你可以很容易地用一些不使用Twitter feed的东西来补充这种布局。

不管它们来自Twitter，这一部分都有很多正确的地方。首先，由于趣味性布局，可以一次看到大量评论。

其次，推荐信包括照片和个人/公司名称，这使得评论更加合法。

当涉及到在你的网站上包含感言的地方，我总是推荐你的主页，服务页面，和/或在你的导航中包含专门的感言页面。对于那些正在了解你的公司并考虑购买的人来说，这些页面都是最好的接触点。

只要他们是真实的，客户感言将改善你的网站体验，并在你的潜在客户成为客户之前建立信任。

4.实现号角

一旦你的访问者登陆你的网站(可能是通过博客或主页)，你需要引导他们到你的网站上的地方，这将有助于促进他们的转换。人们都很懒，所以让他们轻松一点。给他们指明正确的方向，这样他们就不用费力去寻找他们想要的东西。

在你的网页设计中，最好的方法之一就是在导航的右上方，需要操作的区域下方，以及网页的底部策略性地放置“号召行动”。

但不要忽视买家的旅程。在您的网站上，最简单的做法是让用户无论到哪里都能听到最底层（BOFU）的行动呼吁，但如果有人还没有准备好购买，那么他们可能根本不会采取任何行动。

相反，您应该根据用户正在浏览的页面，在他们所在的位置与他们见面。

例如，如果他们在一个网站上，学习一种用于制作定制衣柜的材料，那么这个人更有可能仍然在自我教育，并意识到他们的问题。与其用“联系我们”的行动号召来打击他们，不如给他们一个全面的定制壁橱建筑材料指南。因为这是他们目前关心的问题，所以他们更有可能转变信仰。

我们来看一个现实生活中的例子。

它的标题是“8个明显的原因，你需要重新设计网站（但仍然忽略）”。阅读本文的读者可能会考虑重新设计网站，并试图确认这是否是他们的最佳决定。因此，只有向他们发出行动呼吁，帮助他们了解更多，才有意义。

我们向他们提供的服务是重新设计您的网站的终极指南，希望他们能在一个地方找到几乎所有他们想要的答案。

这些类型的优惠也有与用户建立信任的好处。如果这些方法对他们起到了教育作用，他们就会开始把你的公司视为思想领袖，从而让他们更愿意研究你的服务。

5.使用正确的库存图像

我们总是建议在你的网站上使用原创照片，但如果这不是一个选择，有一些技术可以帮助你挑选正确的股票照片类型．

虽然库存照片为你节省了制作自己图片的时间，但很多网站都有一些陈词滥调的图片。你还会发现很多其他网站可能也在展示同样的图像，这当然对你的可信度没有帮助。

用户将“潜意识里，他们会把自己的负面经历投射到这些照片上，减少信任，增加过程中的摩擦”的转换。

所以，在选择库存照片时，尽量远离这些俗气的图片。这些照片中，人们带着夸张的微笑击掌，一群人看着相机，穿着超级英雄服装的高管，一群穿着西装的人在空中跳跃。

你最后一次在现实生活中看到这些场景中的人是什么时候？

而是寻找那些在光线充足的环境中描绘真实场景的照片。这可能是办公室里穿着商务休闲服的人在会议桌上聊天，人们在笔记本电脑上打字，人们在开放房间的白板上画画。这些都是其他人开始认为合法的场景类型。寻找真实场景中的真实图像，而不是工作室中的图像。

所以，不要像这样使用照片:

如果出于上述原因，您觉得不现实，请尝试以下照片：

一旦你找到像这样你喜欢的照片，你应该把它们浏览一遍TinEye了解有多少人在他们的网站上使用这张照片。如果数字是数千，最好使用一张更不寻常的照片。

这将有助于为你的品牌带来更多的真实感，并确保图片与你是谁以及你的内容所解释的内容相匹配。

你也可以看看这篇文章如果你发现自己正在努力在网站上获得更真实的照片，请向一些很棒的股票照片网站咨询建议。

对你的照片更加用心，将有助于更好地代表你的品牌，以及你希望别人如何看待它。

6.组织导航

在设计网站时，导航是关键。它本质上是显示用户可以访问的核心地点的地图。这是用户可以很容易地深入到你的服务、产品、博客等领域的方法。

没有什么比网站导航界面混乱更糟糕的了。糟糕的设计实践，如过度填充导航，使用模糊或令人困惑的超文本，缺乏或组织，都可能使你的访问者很难找到他们想去的地方。

如果用户找不到他们想要的东西，他们就没有理由留在你的网站上。相反，他们肯定会反弹，找到一个提供更好用户体验的竞争对手。

什么时候改进网站导航在美国，确保访问者能够轻松找到他们想要的东西是很重要的。这将包括流线型内容、导航层次和响应式设计，这样用户体验就不会在手机上发生巨大变化。

以Zendesk的导航为例，它包含了你可能想要访问的最重要的信息。产品、定价(这是必须的)、服务和资源。

每个导航项目都有足够的空间，因此可以清楚地看到分隔位置。

在某些情况下，如上图，菜单项甚至会有一个描述性的行，为该页面的目的提供更多的上下文。悬停效果也让用户清楚地知道，这些链接将导致他们转到另一个页面。

只要点击一下，用户就可以很容易地到达这些地方，所以要确保你制定了类似的策略(不要让导航超载)。

像这样干净而有组织的导航让用户知道你想让他们在你的网站上轻松地移动，没有什么要隐藏的。因此，你的用户更有可能在他们的会话期间访问更多的页面，增加他们花在你的网站上的时间。

7.让访问者在主页上滚动

有段时间我们很警惕关于让我们的网站页面太长，特别是你的主页。这是出于对用户不滚动的恐惧，因此它迫使人们尝试将他们能做的塞进人们浏览网站时使用的最普通的屏幕大小。

但那些日子早已远去。在一个2018年的研究尼尔森诺曼集团（Nielsen Norman Group）表示，网站页面74%的浏览时间都花在了前两个屏幕上，横向最高可达2160px。因此，没有必要害怕创造一个更强大的底层体验。

利用你的主页房地产为你带来好处。

一个好的经验法则是包含三到五个部分，帮助新用户和经常用户直接访问网站的关键区域。

这些部分应该是什么？这个列表可能会一直持续下去，但一些更关键的元素的快速列表包括：

每个导航项目都有足够的空间，因此可以清楚地看到分隔位置。

在某些情况下，如上图，菜单项甚至会有一个描述性的行，为该页面的目的提供更多的上下文。悬停效果也让用户清楚地知道，这些链接将导致他们转到另一个页面。

只要点击一下，用户就可以很容易地到达这些地方，所以要确保你制定了类似的策略(不要让导航超载)。

像这样干净而有组织的导航让用户知道你想让他们在你的网站上轻松地移动，没有什么要隐藏的。因此，你的用户更有可能在他们的会话期间访问更多的页面，增加他们花在你的网站上的时间。

7.让访问者在主页上滚动

有段时间我们很警惕关于让我们的网站页面太长，特别是你的主页。这是出于对用户不滚动的恐惧，因此它迫使人们尝试将他们能做的塞进人们浏览网站时使用的最普通的屏幕大小。

但那些日子早已远去。在一个2018年的研究尼尔森诺曼集团（Nielsen Norman Group）表示，网站页面74%的浏览时间都花在了前两个屏幕上，横向最高可达2160px。因此，没有必要害怕创造一个更强大的底层体验。

利用你的主页房地产为你带来好处。

一个好的经验法则是包含三到五个部分，帮助新用户和经常用户直接访问网站的关键区域。

这些部分应该是什么？这个列表可能会一直持续下去，但一些更关键的元素的快速列表包括：

• 价值主张
• 介绍视频
• 服务概述
• 产品特性
• 对你的公司
• 奖状
• 案例研究/成功故事
• 内容

天顶在击中这些点方面做得非常出色。

他们的主页提供了一种体验，引导您简要了解该工具、其平台的功能、推荐，并以演示的行动号召结束。

在页面的最后，用户对Zenefits能为他们做什么以及客户如何喜欢使用这个平台有了全面的了解。

如果你想深入了解最好的主页，请查看这张令人赞叹的信息图或这篇全面的文章，它揭示了这里没有提到的其他重要的主页元素。

8.不要害怕空白

空白是一个重要的设计元素，它可以帮助你分割页面，增加可读性。空白也被称为“负空间”，指的是页面元素周围的空白区域，没有内容或视觉项目。

空白在网站元素的设计过程和定位中也起着重要作用。虽然更多的空白可以指示哪些部分是分开的，并引导眼睛，但更少的空白可以指示哪些元素由于其接近而应该彼此相关。

Vidyard在这方面一直做得很好。他们的部分总是分开很慷慨，所以他们适合在你的视口中，没有太多拥挤从任何部分上面或下面。

这使得用户能够关注网站页面的每个部分，并立即让他们知道每个部分的开始和结束。这可以帮助引导用户的视线到重要信息，如行动呼吁或价值主张。

如果您需要网站做得更好的更多示例，看看这些全明星，帮助你提高自己．

9移动优化是必须的

这些天来，你花时间去学习是至关重要的优化你的移动网站．

如果你还不知道，80%的互联网用户拥有智能手机谷歌表示，61%的用户不太可能返回他们无法访问的手机网站，40%的用户会转而访问竞争对手的网站。

如果我是你，我会有点担心。

但这不仅仅是视觉上的反应。有必要调整网站以满足访问者的需求。问问你自己，为什么有人会用手机访问我的网站?他们会寻找什么?我目前的经验是否能让他们轻松地做这些事情?

以Chili的网站为例，你可以明显地看到桌面和手机网站是多么的相似。因此，随着时间的推移，当用户在这两个网站之间来回订购时，这两个网站之间有一些相似之处，这使得使用这个网站变得很熟悉。

他们还让网站的核心功能——订餐变得很容易。手机网站的屏幕上总有这个按钮，这样你就可以随时下单，而不必进入一个完全不同的页面。

如果你的网站在移动优化方面滞后，看看这些很棒的手机网站吧了解他们如何为用户创造无缝的移动体验。

10.让定价更容易找到

告诉我这种情况你听起来熟悉吗?

您目前正在寻找一种新的在线SaaS产品来解决您遇到的问题。对于这个故事，让我们说一个项目管理工具。

在过去的一个小时里，你花了几个小时的时间审查了一些软件，并认为你终于找到了一个看起来很有前途的软件。考虑到这一点，您现在可以尝试找到定价。

所以当你点击价格页面时，你看到的页面是这样的:

在这一点上，你可能有点沮丧。你甚至可能想知道这是否意味着它太贵了。他们到底想隐藏什么？为什么要打电话问呢？

因此，现在你决定离开网站，看看竞争对手。

如果你的网站遵循类似的模式，或者更糟糕的是，根本没有定价页面，你会发现你的用户也遵循同样的心态。

我再强调也不为过在您的网站上，包括定价在内有多重要. 包括它“使访问者能够完成他们的研究（正如任何现代买家所希望的那样），并最终确定自己的资格或取消资格，防止您的销售团队将时间浪费在不匹配的人身上。”

你可能会担心竞争对手会以低于你的价格出售你的产品，或者你的价格太复杂，无法在你的网站上显示出来，但实际上，你应该更担心正确地教育你的潜在客户，为什么你的价格是这样的，以及你提供的价值。

如果有人只是想要尽可能便宜的价格，不管怎样，他们很可能并不适合你。

考虑到这一点，让我们看看一个网站，它确实使定价在其网站上脱颖而出。Trello可以让用户非常轻松地确定他们最适合的定价级别以及用户的成本。

价目表包含了每一层的特性，所以比较每一层就像从左到右阅读一样简单。最后一层使用的绿色按钮也有助于将人们的视线吸引到那些更理想的选项上。

想要开始一个好的定价策略，看看这些当然可以来帮助引导你。

11.创造一种自我选择的体验

作为一个发现自己在电子商务网站上购物时不知所措的人，当我发现工具可以帮助我选择正确的东西时，我无法表达我有多高兴。

这些工具被称为自我选择工具，引导用户通过一系列问题来得到特定类型的结果。这些结果可以是一个定制的报价，产品，或者一个非常高级别的问题的答案(例如，“我的性格是什么?”)。

这样的工具可以让人们更容易地了解什么是最好的产品或服务，而不必浏览你的网站来找到答案。

我最喜欢的，看似简单的工具是亚马逊网站上某些商品下面的产品推荐选择器。当你对显示的任何东西竖起或向下的大拇指时，该工具会立即改变feed中显示的其他产品，它认为这些产品更接近你想要的东西。

不用说，这让我更容易找到一个完美的花瓶!

IMPACT客户端是一种不那么可怕的推荐工具耶鲁电器的产品配置为最好的范围烤箱．这实际上只是匹配您选择的输入并过滤产品。

使用详细的图标，用户能够选择哪些选项最适合他们的情况，从而为他们提供最好的产品。这节省了用户搜索网站的无数时间和打电话给销售代表的麻烦。

而且，你越快得到你的潜在客户想要的东西，他们可能就会越快地购买它。

虽然这可能是一个更晚的项目，但它是一个有价值的工具，将最终帮助您的公司从竞争对手中脱颖而出，并在您的业务中提供独特的体验。

12.测试和迭代

你的网站应该是你公司的一个活的、不断发展的部分，而不是静态的。可能永远都有改进的空间。改进网站的某些区域可以帮助提高转化率、页面时间和每次页面，但知道什么解决方案可能对改进网站最有效是困难的部分。

这就是运行A/B测试的原因。使用页面的两种变体并相互测试，可以发现某些区域是否会给用户带来问题。

在某些情况下，您的页面可能执行得相当好，但包含过时的信息。对页面进行A/B测试可以显示页面内容对会话持续时间或转化率有多大影响。

在其他情况下，您可能希望查看设计更新是否会影响页面的性能。简单的改变，如按钮的颜色，标题，或改进复制，可能会在转化率上产生令人难以置信的差异。

尽管如此，除了采取一种“先做后忘”的方法，特别是当你不知道要改变什么时，你可以使用工具去创造对他们进行A/B测试，多元测试，甚至设置热图来查看用户在做什么。

每个测试都可以揭示各种数据，这些数据确定用户为什么以特定的方式与页面交互。

从这里开始，我将每周或每两周监视这些测试和工具，以查看您所做的更改如何影响页面性能。如果事情朝着错误的方向发展，经常检查还可以让你更快地调整。

我推荐使用以下工具幸运橙或Hotjar热图和A/B测试工具VWO,Omniconvert,或A / B好吃．

关键的外卖

花时间来实现这些建议在你的网站上可以带来戏剧性的变化,可以帮助提高性能,经验,和客户网站的转化率,但一旦你获得这些技巧,你可能会想,更大的项目是更新和重新设计你的网站。

尽管这肯定是一个更令人生畏的项目，但您并不是唯一一个有这种想法的人。所以，无论你是否不确定重新设计网站是你应该做的事情，或者，你只是想知道它需要什么，我建议下载这个终极指南，放在你的口袋里．

这样，当网站重新设计的话题在你的组织中出现时，你会更加领先，你会对需要做的事情更有信心。