网站布局:每个设计师都需要学习的网站解剖



您是否想过如何设计网页布局? 设计一个将美学与信息传递相结合的网页,需要艺术与科学的融合。 秘诀是在坚持经过验证的结构的同时给自己一些创作自由。 听起来不可能吗? 

Don \\ u0027t不必担心,这是构建页面布局的快速指南,该页面布局将提高任何商业网站的转化率。 

步骤1:首先考虑用户体验 

之前您甚至开始草绘构想,进行研究并考虑首页的结构非常重要。 

进行研究时,请确保您专注于潜在客户的期望。 

毕竟,在没有了解目标用户期望的情况下,几乎不可能设计出能够提供出色用户体验的商业网站。 

无法提供出色用户体验的网站的数量要少得多吸引大量流量的机会。毕竟,UX用户体验与SEO息息相关。 

一些使用不良UX的用户仍然会吸引大量用户,例如58城市吨。 

但是,具有更好的UX的公司(例如Didi)拥有重塑行业的更多机会。 

研究用户需求和期望的方法很多,但是用户调查和用户分类可能是最多的方法流行的方法。 

现在您已经对目标受众对页面的期望有了深刻的了解,就可以开始研究信息体系结构。 

Information Architecture IA是将网站上的信息清晰,直观地组织起来的方法和明智的方式。 

请考虑一下您自己的Web浏览体验:在规划不当且在几秒钟内没有证明其相关性的网页上登陆会令人沮丧,并且很可能会导致您立即单击关闭或返回按钮。 

好的IA会创建一个层次结构,该层次结构强调最重要的元素并保持访客的参与度。 

如果没有要构建的坚固骨架,那么您将为失败做好准备。 

导航是IA的关键方面之一,您应该尽早考虑。 

如果用户可以找到他们的网站,则网站的华丽程度无关紧要。 

良好的导航功能具有三个主要特征: 

简单

# ## clear  ## consistency  

您的目标应该是通过尽可能少的点击将用户定向到他们正在寻找的信息。 

您可以在导航栏中使用清晰,简洁,有用的语言以及整个站点的一致设计来实现这一目标。 

添加面包屑等备份功能还可以极大地提高网站的可用性,并帮助访问者随时了解他们在网站上的位置。 

步骤2:正确获取视觉层次结构 

强大的视觉层次结构使引导用户采取行动的网站布局与看起来不错的网站有所不同。 

人类是极为令人难以置信的视觉生物,当涉及到在线消费内容时,我们经常扫描页面以快速判断是否可以找到我们需要的东西。 

作为设计师,您可以可以确保您看到最重要的信息并吸引用户。 

没有清晰的视觉层次结构,页面上的所有内容似乎同样重要,难以忍受。 

各种设计原则有助于建立强大的视觉层次。 

使用网格

网格提供了一种强大的方法来创建页面上不同元素之间的连接,并使布局设计井井有条。 

网格显示页面上所有元素的交互方式,并确保您使用清晰的结构来强调正确的信息。 

自然浏览模式设计 

有两个主要注意点-人们可以用来快速扫描内容块的扫描模式: 

F形图案 

Z字形 

作为设计师,您可以控制很多用户扫描页面时的外观,因此为用户设置正确的路径至关重要。 

我们经常在博客和新闻网站等文本丰富的网站上遇到F模式。 

值得注意的是,最新研究表明F形模型实际上对用户和企业不利并且应避免。 

如果用户以F模式浏览您的网站,则意味着他们在页面左侧显示强烈的偏好,而在右侧丢失了重要的内容。 

为防止F浏览,您必须将网站上的内容格式化为将内容定向到您认为最重要的信息的方式。 

以下是一些将访问者引导至您最重要的内容的方法: 

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

使用标题和副标题 

大胆的重要单词或短语 

直观地分组少量相关信息 

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

为您的用户而努力,以最大程度地减少干扰并防止他们采用快捷方式。 

受阻的设计F浏览非常适合文本丰富的网站,例如博客和新闻网站。 

之字形模式更适合复制量最少的网站,并设计一些关键元素来吸引用户的注意。 

着陆页通常使用Z字形模式来引导用户进行转换。 

在视觉上对关键元素进行优先级排序 

使用五个基本设计构件来构建直观的视觉层次结构: 

1。大小 

在任何设计中,将大小与重要性相关联非常重要-最重要的信息应在页面上最大,并且需要最多的关注。 

2。颜色 

请记住,颜色既可以用作设计中的组织工具又可以用作品牌/个性化工具。 ## 3.Layout  

良好的格式会鼓励访问者以便与整个页面的内容互动,并更快地找到最重要的信息。 

4。间距 

空格或负空格是设计人员用来吸引用户注意最重要的UI元素的工具 

5.style  

选择一种样式匹配并突出显示您的品牌将帮助您更有效地传达信息。 

应用三分法则 

此原则要求您将设计分为三部分,三行和三部分列以查看线相交的位置并找到设计点。 

这是一种有效的技术,可以启动您的网站组成并选择元素的位置和框架。 

使用网格是将此技术应用于任何设计的最简单方法。 

步骤3:专注于号召性用语按钮 

没有电话就无法建立完整的网站动作按钮CTA。 

实际上,营销人员会说这是页面上最重要的元素,所有努力都应集中在吸引人们点击上。 

战略性使用精心设计的CTA 

它可以极大地改善页面的流程并指导用户完成过渡,因此正确完成此操作至关重要。 

设计按钮时,请牢记以下几点。 n 

确保按钮看起来可点击,这听起来似乎很明显,但是您会惊讶于Web设计师经常放弃清晰度,而倾向于创意或一些奇怪的新趋势。是的,我是在说你,鬼按钮。 

为确保用户理解元素是按钮,请使用标准的视觉提示来帮助他们确定可单击性,例如形状,阴影和高光。 

明确标记所有按钮 

那里的按钮告诉用户下一步该做什么。 

如果副本含糊不清,人们会思考而不是行动。 

与用户保持清楚,如果他们单击将会发生什么。 

这是Netflix的明智示例。 

直观地突出显示最重要的CTA  

设计独特的CTA涉及三个重要方面:颜色,对比度和位置。 

使用粗体颜色和足够的对比度来帮助主按钮突出显示,并将其放置在用户不会错过的醒目位置。 

您想了解有关网站布局的更多信息吗? 

作为南京网站建设专家,我们渴望对这一重要主题进行更深入的研究,因此请与客户服务联系,让我们知道您还想学习什么。




上一页:控制网页设计思想的原则下一页:南京周边的溧水网站制作应该如何进行?
QQ客服
  • 在线客服 点击这里给我发消息
关注微信
  • 微信
电子邮箱
  • 邮件咨询
回到顶部