首页是许多人第一次接触一个网站时看到的，它会给人留下持久的印象(消极或积极的)，从而影响他们返回网站的决定。在这篇文章中，我们将回顾一些网页设计技巧为设计主页和揭示一些重要的步骤，需要构建一个强大的和成功的首页。
确定网站的目的/目标
一个设计师应该了解网站的目的，以便建立一个有效的主页设计。
首页是一个网站给人留下印象的最初机会，因此网站访问者必须在他们到达的那一刻就确切地看到他们想要的东西。明确网站的目的可以帮助你了解如何吸引用户。
记住这个网站目的和网站有什么不同主题．例如，“房地产”不是一个目的的例子。“卖房子”也不可能是目的——有人在没有亲眼看到房产的情况下就从网站上买房子的可能性有多大?
与房地产的例子保持一致，房地产网站的目的可能是以下之一:
- 展示待售的新或有特色的房产
- 帮助来访者找到企业或房地产经纪人的联系信息
- 协助访客找到适合他们需要的房地产经纪人
每一个目的都可以引导访问者采取行动，并引导他们采取进一步的步骤，直接获得访问网站的结果。在这个例子中，网站是进行房屋销售的门户。因此，一个有效的房地产主页应该有房产和房地产中介定位器，帮助用户快速找到他们要找的东西，以便采取下一步的行动来购买房子。
我们可以使用的另一个例子是在线投资组合网站。投资组合的目的是什么?说“为了获得客户/一份工作”太宽泛了，相反，你应该把网站的目的定义为切实可行的目标。
的例子可能是:
- "鼓励潜在客户与我联系"
- “给其他设计师留下深刻的印象，并在社会上获得正面的声誉”
- "给潜在雇主留下深刻印象"
如果你的目的是“让客户联系你”，你可以在首页上制作一个网页表单。如果主要目的是展示你的作品或给潜在雇主留下深刻印象，主页可以展示作品集的缩略图，以吸引访问者查看更多作品。最终，所有这些目的都会为你带来更多的客户或工作机会，但重要的是要明确你的具体目标，这样你才能理解如何规划你的首页布局。
区分网页和网站的目标
需要记住的一点是，整个网站的目标可能与主页的目标不同。这怎么可能呢?主页是一个入口，虽然网站的总体目标可能是销售产品，但主页的目标可能是将用户引导到能够购买产品的网页。
试图在网站的首页“做销售”会让访问者望而却步。
了解新访问者和回头客之间的区别
一个网站，尤其是首页的规划设计的一个重要部分，是要意识到有两种类型的访问者:以前没有看过这个网站的人，和回来更多的人。一个网站如果没有回头客就不能很好地运行，所以我们必须想办法促进回头客。有两种方法:
- 让访问者对内容产生足够的兴趣并再次访问
- 提供提醒访问者返回的资源。(例如，RSS提要。)
如果一个网站有一个直观的用户界面，设计师可以很容易地假设新访问者或回头客会找到他们的方法。以用户为中心的设计设计的理念是围绕人们访问网站的原因。如果一个设计能够对“如果我来这里”这个问题回答“是”，那么它就是以用户为中心的设计做X，我能完成吗很快没有太多认为或努力“有了对用户体验设计的深刻理解，很容易创建一个优秀的用户网站中心性．
订阅和会员
在你的主页上设置订阅选项可以鼓励重复访问。网站上最常见的订阅点之一是通过主页。当用户从一个登陆页面而不是首页来到你的网站时，下一步的行动通常是去主页看看其他可能感兴趣的东西，并了解这个网站是关于什么的。
Flickr是一个很好的例子，它的首页设计有效地增加了会员数量，并且它的设计根据你是否登录为会员而变化。当注销,Flickr假设你是一个新用户或者你还没有开通Flickr账户。因此，它将注意力吸引到“创建您的帐户”按钮上，以吸引您注册。
它被周围大量的空白突出显示。这促使初次用户注册一个账户。
对于已登录的用户(即。
现有会员网站)，主页则大不相同。Flickr引导您参与社区的方式，并帮助您轻松地执行站点功能，只有拥有用户帐户的人才能使用(例如组织您的Flickr流)。
销售产品或服务
有些网站主要是向你出售他们的产品或服务。亚马逊这是如何有效对待新访客和回头客以获得最大销量的绝佳例子。查看注销后的亚马逊主页会显示最受欢迎的产品或文化上受欢迎的产品。
在下面的图中，你会注意到推荐的产品是面向“地球友好型”目标的。
现在，让我们比较一下登录用户的主页:它看起来非常相似，但推荐的产品是基于最近购买的商品。
亚马逊能够定制他们的主页来迎合新访问者和回头客。
强调内容有效
在选择最重要的内容时，请记住以下步骤。
步骤1:优先考虑
确定哪些组件和内容对于实现网站的目的是最重要的:将它们按优先级排列在列表上。您可以考虑突出显示某些类型的内容(“特色作品或特色帖子”)、您的RSS提要和您的联系信息。这些组成部分的重要性取决于您希望达到的目的。
有了这些信息，您就可以更好地理解如何将注意力吸引到最重要的元素上。
步骤2:创建一个Content-Only Layout
现在，在没有其他设计元素的情况下，使用第一步中构建的列表，并以吸引眼球的正确顺序组织内容。不要考虑网页设计，想想如何拼凑布局组件。f型模式通常用于确定网站上内容组织的顺序。
左上角是眼睛最先到达的地方，然后是右边和下面。用户在页面上走得越远，他们就越不感兴趣，读的也就越少。
第三步:引起注意
除了总体布局之外，还有许多其他的方法来吸引人们对某些内容的注意。为了加强对关键布局组件的关注，研究以下可能性:
- 从背景和周围元素增加组件的对比度
- 增加其相对于周围对象的大小
- 在它周围提供大量的空白
例如,名博主使用对比色来引起订阅按钮的注意。
一个例子:Horizon Business Coaching
最近的一个客户项目让我考虑了上述选项。来自Horizon Business Coaching的Crystal想要一个网站，强调他们的通讯、联系/社交网络方法，并把注意力集中在他们的品牌上。同时关注多个项目可能会让人感到困惑，因此必须根据需要划分优先级、布局和突出功能。
在下面的例子中，您可以看到重要的特性是按照重要性/优先级的顺序突出显示的。
“注册”和“连接”区域有更大/更笨重的元素，这将吸引游客的目光。最重要的是，品牌的位置和多余的空白给予了它的重要性。
标题也用对比色突出显示。
记得带上必需品
我们设计师都知道，有一些重要的网站组件是用户希望在网站中找到的。因为大多数网站都有它们，花时间在布局的设计和战略定位上可以有效地创建一个功能和令人难忘的主页。这些“必需品”包括:
- 标志/网站标记线
- 网站搜索功能
- 导航菜单
- 联系信息
在我上面展示的例子中，客户想要他们的标志和标语(品牌)突出，所以它们在布局中被适当地突出。找出首页需要的内容，把它们按优先顺序排列，让它们引人注意。
对每件事都有理由吗
网页设计师在设计主页时常犯的一个错误是在主页上放置随机的小部件、过多的导航和随机的内容，而很少考虑它们的功能和对整个网站设计的贡献。你必须记住，在一个可用的和功能的网页设计中，简单是非常重要的。杂乱无章的设计会让用户失去兴趣，使内容难以找到和使用，还会降低页面响应时间。
问一问你决定在主页中加入的每一个元素:它是做什么的?人们会使用它吗?它如何帮助你实现网站的目的?
使用有意义的图形
MailChimp的图片非常适合将游客的目光引导到感兴趣的地方。黑猩猩吉祥物为公司提供了强大的品牌标识，并将用户的目光吸引到黑猩猩面对的方向:网站介绍、演示和注册功能。此外，图标被用在整个主页上，以吸引人们对该服务最受欢迎的功能的注意，帮助实现“销售”。
Design Junction上的所有图形都将目光引向需要看到的内容。首先，页面上最大的图像在不同的项目中旋转，展示了有特色的作品集作品。下面是突出显示服务的小图标。
这个设计中的图像被用来为访问者创建一个逐步的层次结构:
- 他们看到(并希望被打动)有特色的作品
- 他们看到的是公司提供的服务
- 他们继续浏览网站，看看还有什么其他的商店
使用有意义的内容
除了使用有意义的图片，你应该确保你的内容有目的，并帮助你实现你的主页和网站的目标。
了解页面响应时间的重要性
由于主页通常是许多用户的第一站，它需要快速访问。一个缓慢加载的网站会使访问者感到沮丧，并增加他们在你的网页完成渲染之前离开的可能性。虽然高效的加载时间对整个网站都很重要，但事实确实如此特别是这在头版是必要的。
以下是减少网页加载时间的基本方法。
最小化和优化图形的数量
评估所有图形元素的需求。当你已经削减到最低限度，考虑使用缩小文件大小的工具．也可以考虑使用CSS图像精灵将图像分组在一起。
这就减少了网页渲染所需的HTTP请求的数量降低页面响应时间．
结合JavaScript和CSS文件
如果网站在正常运行之前必须加载几个JavaScript文件或CSS文件，这也会降低网站的运行速度。如果可能的话，将它们合并到一个文件中。就响应时间而言，加载一个较大的文件比加载五个较小的文件要快。
贬低你的脚本
您可以缩小您的脚本，以减少它们的文件大小。这可以使你的代码更容易读，所以理想的情况是你使用一个应用程序可以不缩小你的脚本:对于CSS的缩小和压缩，查看这篇文章．
结束
设计网页既是一门科学，也是一门艺术。它需要注意细节，注意网站的目的和目标，并考虑到网页的性能。我希望这篇文章能给你一些在设计主页时需要考虑的东西。
欢迎在评论中分享你的想法和你自己设计主页的技巧。
相关内容
- 网页设计中五种有效的标题
- 每一个刚开始做网页设计的人都应该知道的10件事
- 为什么设计师应该学习如何编程
