网页设计中的主页是什么?
首页是你网站的首页——用户在输入你网站的URL地址时登陆的目的地。它位于网站域名的根(例如，m.hju8.com)或子域名(例如，university.webflow.com)。
网页设计有两个目标:
- 解释网站的目的，并提供概述信息
- 提供低级网页的顶级导航(例如，博客，销售页面等)
另外，主页也是用户每次遇到困难，想要重新开始时都会返回的地方。因此，你的主页设计应该为其他网站区域提供明显的导航路径。
6个必须知道的网站主页设计最佳实践
在每一个获奖的主页设计背后都有一个详细的客户旅程地图。
客户旅程是网站访问者如何在你的网站上移动以实现各种目标的示意图。
一个好的客户旅程地图列出了用户在登陆你的网站后将采取的不同行动(例如，浏览产品页面，将商品保存到愿望列表中，注册一个帐户，等等)——它这样做是为了不同的受众群体．
你的主页设计应该帮助用户从他们旅程的第一步(例如，了解你的网站)过渡到最后一步(例如，转化为付费客户)。与此同时，你的主页应该同时满足新访问者和回头客的需求——可能处于不同阶段的潜在访问者(例如，正在考虑)。
有了上面的想法，让我们来看看几个网站的主页设计想法和他们工作的原因。
1.使用熟悉的设计元素
无论你是在设计一个新网站还是更新一个旧网站，这总是很诱人的“开箱即用”-使用水平滚动，跳过标题导航或包含火炮动画。
大胆的设计选择适用于一些品牌，主要是那些不把网站作为主要销售渠道的品牌(例如，奢侈品牌)。
但不熟悉的设计模式也会让很多购物者望而却步。在一个观察性研究，参与者被要求猜测特定内容(例如，国际电话信息)将被放置在电信网站的哪个位置。75%的用户选择了相同的位置。这意味着两件事:
- 人们已经对特定网站信息通常放置的位置有了预期
- 然而，四分之一的用户即使在标准的网站布局中也难以识别正确的区域
那么，为什么要让他们的工作更难呢?正如用户体验顾问Peter Ramsey所说笔记：
事实是:设计最佳体验不在于独一无二，而在于简单。猜猜什么东西用起来真的很方便?感觉很熟悉的东西。
因此，分析你所在行业的其他网页布局设计。注意主页屏幕的数量和类型，以及设计页眉/页脚导航的方法。
把其中一些想法作为你的“基础”。然后用独特的排版、图标、视觉效果和其他图形设计元素来设计你的主页。
从…得到启示ICAM-一家钢铁制造公司。他们的细分市场通常并不令人兴奋。然而，他们的主页设计阻止你在你的轨道和修补你的好奇心，以发现更多(即使你不是购买金属制品)。
有趣的是，ICAM使用了一个相当标准的主页布局。在第一个屏幕上有一个英雄形象，然后是他们的行业专业知识和制造商概述的多列布局。
但这个主页设计给人耳目一新的感觉，因为该公司使用了大量的空白，大胆的排版和充满活力的视觉效果。此外，他们还将创造性的扭曲(水平滚动区域)延迟到主页的底部，这意味着它不太可能吓倒不自信的网络用户。
2.决定最佳的网页布局
在网页设计中，首页布局是你在屏幕上可视化组织不同信息的方法。
细心的人会注意到好的主页设计通常都有相同的布局。例如，在分屏“英雄”屏幕中，左边是行动号召，左边是视觉效果(照片或视频)。
在网站首页设计中使用类似布局的原因并不是缺乏创造力。相反，一些布局已经成为“最佳实践”，因为它们:
- 提供良好的用户体验，不要让第一次访问的用户感到困惑
- 让用户产生一种似曾相识的愉悦感
- 是否通过基准测试和测试证明能够提高转化率
网站首页布局的流行类型:
- 单独的列-将主要内容显示在单个垂直栏中的经典选项。对于博客，个人网站和简单的公司网站都是不错的选择。
- 分屏布局将页面分成两个相等的区域，呈现不同的信息。最适用于电子商务主页(例如，分离不同类型的服装)或SaaS网站，提供两种产品类型(例如，免费的个人产品版本和商业版本)。
- 不对称的布局假设把你的主页分成不同大小和风格的区域。不对称有助于为用户创造特定的焦点，将他们的注意力吸引到最突出的信息上。
- 卡片布局网格通过将较大的文本块分解成较小的卡片(一个图形元素，以图像和一些文本为特色)，以更易于理解的方式呈现大量信息。通过轻触卡片，用户可以访问额外的内容。
- 盒子在视觉上与卡片相似，但形状不同。例如，您可以有一个较大的标题宽度的框区域，然后在其中跟随四个较小的框。这两种网站布局都很适合电子商务。
- 特色图像布局将视觉效果(照片和视频)放在主页上最突出的位置，文字和其他图形设计元素是次要的。
- f模式布局是基于大多数人在阅读网站内容时的标准眼球运动。眼球追踪研究发现我们通常最关注页面顶部的信息(标题区域)，然后水平浏览，然后再向下浏览下一个垂直线，直到找到吸引我们注意力的内容。
用户行为分析(UBA)工具是确定什么类型的布局适合你的主页的最好方法。
例如，您可以使用Matomo的热图而且会议记录观察用户如何浏览你的主页，他们点击哪些区域或链接，以及他们在导航过程中遇到哪些拦截。
Matomo可以捕捉准确的行为洞察，因为我们跟踪您网站中元素的相对位置。这种方法使我们能够为使用不同浏览器、操作系统、缩放级别和字体的用户提供准确的数据。
最棒的是什么?你可以从多达100个不同的用户群体中收集行为数据，以了解不同的受众群体是如何参与你的产品的。
3.包括一句口号
标语是对你公司的业务和独特销售主张(USP)的一行总结。简历应该简短、朗朗上口，并将你与竞争对手区分开来。
一个现代的网页设计实践是在第一个屏幕上包含一个行动号召。为什么?因为你可以立即与每一位用户沟通或提醒他们你的价值主张，并为他们提供一种简单的方式，让他们随时准备与你做生意。
以下是三家拥有类似产品(项目管理应用程序)的公司如何通过主页标语来区分自己。
Monday.com将自己定位为工作的操作系统(OS)。
Basecamp强调其产品的简单性，并公开表示他们不同于其他过于复杂的软件。
体式反过来，它解决了一个熟悉的用户痛点(竖井式通信)，它试图用自己的产品解决这个问题。
想出一个完美的主页标语是一个大任务。你可能有很多想法，但对哪个版本能坚持下去没有信心。
最好的方法是什么?让一系列的a /B测试来决定。你可以每两周或每月轮流测试首页标语，并跟踪文案变化对转化率的影响。
与Matomo A/B测试功能，您可以直接从您的web分析应用程序创建、跟踪和管理所有实验-并获得关于每个测试变量的总页面访问者和转化率的综合报告。
除了标语，你还可以运行A/B测试来验证提交表单的位置、按钮文本或整个页面的布局。
例如，在公开之前，你可以将你的新主页设计与旧版本的用户进行比较。
4.突出用户的主要任务
虽然随意浏览是一件事，但我们大多数人都会带着一个明确的议程去特定的网站——查找信息、比较价格、获得服务等等。
因此，你的主页应该为用户的主要任务提供清晰的起点(你也在客户旅程地图上确定了这些转换目标!)
这些任务包括:
- 账户注册
- 产品演示请求
- 通讯注册
最好的网站主页设计有机地引导用户完成一系列常见任务，一次一个屏幕。
让我们分析貂主页的设计。该公司为即将移居美国的人提供免费银行账户和信用卡产品。用户的主要任务是:决定他们是否想尝试Sable，并希望在他们那里开设一个账户。
这个单一用途的页面专注于说服潜在客户，Sable是适合他们的。
第一个屏幕上有一个动画下拉箭头，用于滚动主CTA。这可能是针对刚刚通过在线广告或社交媒体帖子登陆页面的首次访问者。
第二个屏幕是主要的卖点——免费、便捷地进入美国银行账户，还能帮助你建立信用评分。
第三个屏幕鼓励用户更多地了解黑貂信用——旗舰产品。对于持怀疑态度的人来说，第四个屏幕提供了更多注册信贷产品的理由。
然后，Sable开始推介第二款产品——带有返现功能的免费借记卡。再一次，后续屏幕通过提供其他额外福利(如亚马逊等流行服务的更高返现)和克服反对意见(不需要SSN和提供多语言支持)，使交易更加甜蜜。
这个序列以并排的产品比较和一些额外的社会证明结束。
在Sable的例子中，每个主页屏幕都有一个明确的目的，旨在促进一个特定的用户操作——开户。
对于多产品公司，上述策略非常适用于设计单独的登陆页面。
5.设计适当的航行路径
所有网站都有两个导航区:
- 标题菜单
- 页脚菜单
设计一个有效的标题菜单更为重要，因为它是访问者用来发现其他页面的主要工具。
你的标题菜单可以是:
- 粘性-总是可见的人不断滚动。
- 静态-例如，一个隐藏的下拉菜单。
如果你想要一个静态的标题，并且有一个较长的主页布局(例如，5个以上的屏幕)，你还需要在页面中间的某个地方添加额外的导航元素。否则，用户可能不知道下一步该去哪里，只是弹开了。
你可以这样做:
- 推广你网站的其他区域(例如，子类别页面)通过链接到他们
- 增加了“最近的帖子”，“推荐阅读”和“最新产品”的旋转木马
- 使用按钮和cta引导用户进行特定操作(例如，帐户注册)或资产(免费电子书)
例如，化妆品品牌类型学主页上没有粘头。相反，他们通过推广不同的产品类别(畅销书、捆绑销售、最新产品)和免费的皮肤诊断测试来促进发现——这是一个留住首次用户的极好的参与机制。
一旦用户向下滚动到页面底部，他们应该有一组额外的导航选项——也就是页脚链接。
同样，这些有助于引导访问者发现更多的内容，而无需滚动回主页顶部。
尼尔森诺曼集团说人们大多使用页脚作为:
- 第二次被说服的机会-在阅读了整个主页之后，用户已经准备好试用你的产品了。
- 难以找到的内容的最后手段没有在全局标题导航中显示的信息(例如，条款和条件或运输信息页面)。
根据经验，你应该为页脚指定以下信息:
- 实用工具链接(联系页面、条款和条件、隐私政策等)
- 次要任务链接(例如，职业页面，投资者详细信息，媒体联系等)
- 组织内部的品牌(如果你经营多个品牌)
- 客户参与链接(电子邮件通讯和社交媒体按钮)
关键是保持区域紧凑-不超过一个标准用户屏幕分辨率1280×720。
6.显示用户可点击(或不可点击)的内容
主页邀请您的网站访问者踏上旅程。但如果他们不知道点击哪些元素，他们就不会到达任何地方。
好的主页设计可以让用户很明显地看到哪些页面元素是可点击的，也就是说，可以把用户带到一个新的页面或主页的另一个部分。
这里有几个必须知道的主页设计技巧，以获得更好的页面导航:
- 使用颜色和下划线或粗体突出可点击的单词。或者，您可以将浏览器的光标从标准箭头改为另一个元素(例如，一个更大的点或一个尖尖的手指)，以表示当光标悬停在可点击的网站区域上时。
- 制作描述性的按钮文本，暗示用户单击页面时会发生什么。不要使用抽象和通用的按钮文本，如“查看更多”或“了解更多”，尝试更有活力的语言，如“潜入”，点击进入水疗页面。
- 使用统一的悬停区域来显示不同的主页设计元素如何代表单个路径或多个导航路径。当多个项目被封装在一个视觉元素中(例如，一个框)时，用户可能不愿意点击图像，因为他们不确定它是一个大的点击区域指向单个页面，还是有多个点击区域指向不同的页面。
主页上的BEAUSiTE-瑞士阿尔卑斯山上的一个异想天开的酒店-体现了上述所有的设计原则。当你滚动到一个点击区域时，他们会改变光标的样式，对所有按钮文本使用情感和创造性的微拷贝，并清楚地区分不同的主页元素。
21天免费试用。不需要信用卡。
