网页布局设计教程-mile米乐体育

设计一个网页，将神奇的美感和信息的冲击结合在一起，将艺术与科学融为一体。秘诀在于给自己一点创作自由 – 同时坚持一个经过验证的网页布局结构。

这是一个快速指南，用于构建转换提升的网页布局设计教程。

第1步：首先考虑用户旅程

在开始草拟想法之前进行研究和思考网页结构是至关重要的。在进行研究时，请确保您不遗余力地关注潜在客户的期望。毕竟，在不了解目标用户的期望的情况下，设计一个提供卓越用户体验的网站几乎是不可能的。

一个无法提供良好用户体验的网站吸引大量流量的机会要少得多。但是有些不经意的用户体验仍在吸引大量用户。

研究用户需求和期望的方法有很多种，但访谈和卡片分类可能是最受欢迎的方法。一旦您深入了解目标受众对页面的期望，您就可以开始研究信息架构了。

卡片分类练习可以为您提供独特的见解，在您设计网站的整体结构及其导航时指导您的决策。

信息架构（ia）就是以清晰，直观和明智的方式组织网站信息。考虑一下您自己浏览网页的体验：登陆网页计划不周，并且在几秒钟内无法证明其相关性令人沮丧，并且可能会让您立即点击关闭或返回按钮。

好的ia将创建一个层次结构，强调最重要的元素，并保持访问者的参与。如果没有坚实的“骨架”，你就会为失败做好准备。

导航是您应该尽早考虑的ia的关键方面之一。如果用户无法找到自己的方式，那么您的网站是多么华丽并不重要。

良好的导航有三个主要特征：

简单

明晰

一致性

第2步：获得正确的视觉层次结构

强大的视觉层次结构使得引导用户访问您希望他们采取的操作的站点与看起来不错的站点之间存在差异。人类是令人难以置信的视觉生物，当涉及到在线消费内容时，我们经常扫描页面以快速辨别出我们是否能在潜入之前找到我们需要的东西。

作为设计师，您可以确保看到最重要的信息并吸引用户。如果没有清晰的视觉层次结构，页面上的所有内容似乎同样重要，使其变得无法抗拒。各种设计原则有助于创建强大的视觉层次。

使用网格

网格提供了一种强大的方法，可以在页面上的不同元素之间创建连接，并为布局提供顺序感。网格显示所有元素在页面上如何相互交互，并确保您使用清晰的结构来突出正确的信息。

设计自然扫描模式

人们使用两种主要的眼睛扫描模式来快速扫描内容块：

f形图案

z形图案

作为设计师，您可以很好地控制用户扫描页面时的外观，因此为他们设置正确的路径至关重要。我们经常在博客和新闻网站等文本较多的网站上遇到f形图案。

值得注意的是，尼尔森 – 诺曼集团 – 那些在2006年发现这种阅读模式的人 – 最近重新审视了他们的研究并澄清了一些围绕它的误解：f形模式实际上对用户和企业不利，应该是避免。

如果用户以f模式扫描您的网站，则表示他们对页面左侧显示强烈偏好，并且缺少右侧的重要内容。要阻止f扫描，您必须格式化网站上的内容，以便将其引导至您认为最重要的信息。

以下是引导访问者阅读最重要内容的几种方法：

在前两段中包含最重要的信息

使用标题和副标题

大胆的重要单词或短语

直观地分组少量相关信息

经常使用项目符号和编号列表

努力为您的用户做出艰苦的工作，以尽量减少干扰，并阻止他们采取捷径。

视觉上优先考虑关键元素

使用网页布局设计的五个基本构建块来构建一目了然的视觉层次结构。（但请记住，对于有视力障碍的访客，内容顺序胜过所有这些！）

1.尺寸

在任何设计中将重要性与重要性联系起来非常重要 – 最重要的信息应该是页面上最大的信息并且需要最多的关注。

2.颜色

请记住，颜色可以作为组织工具，也可以作为设计中的品牌/个性工具。

3.布局

良好的格式可以鼓励访问者在整个页面中使用内容，并更快地找到最重要的信息。

4.间距

白色空间或负空间是设计师用来吸引注意力最重要的ui元素的工具。

5.风格

选择匹配并突出您的品牌的风格将有助于您更有效地传达您的信息。

网页布局应用三分法则

这个原则要求您将设计划分为三分之三（三行和三列），以查看线相交的位置并找出设计焦点所在的位置。这是一种有效的技术，可以启动网站的构图，并选择元素的定位和框架。使用网格是将此技术应用于任何设计的最简单方法。

第3步：专注于您的号召性用语按钮

没有号召性用语按钮（cta）的网站是不完整的。事实上，营销人员会说他们是页面上最重要的元素，所有的努力都应该集中在让人们点击上去。精心设计的cta的战略性使用可以极大地改善页面的流动并引导用户进行转换，因此正确实现这一点至关重要。

以下是设计按钮时需要注意的事项。

确保您的按钮看起来可点击

这可能听起来很明显，但是你会惊讶地发现设计师经常抛弃清晰度以支持创造力或一些新的潮流。要确保用户了解元素是一个按钮，请使用标准视觉提示来帮助他们确定可点击性，例如形状，阴影和高光。

清楚地标记所有按钮

按钮用于告诉用户下一步应该做什么。如果副本含糊不清，那么思考而非行动的人。向用户明确说明他们点击后会发生什么。

在视觉上突出显示最重要的cta

设计独特的cta有三个重要方面：颜色，对比度和位置。使用醒目的颜色和足够的对比度来帮助主要按钮突出 – 并将它们放置在用户不会错过它们的显着位置。