当前位置: 首页>资讯中心>网页设计>文章正文

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

发布时间:2020-02-01 22:07访问人数:来源:浪知潮网络

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

您是否曾经想过如何设计网页布局?设计一个网页,将美学美感与信息传递相结合,需要将艺术与科学完美融合。秘诀在于给予自己一点创作自由,同时坚持经过验证的结构。听起来不可能?不用担心,这是为任何企业网站构建可提升转化率的网页布局的快速指南。

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

在甚至开始草绘想法之前,进行研究并考虑主页结构是至关重要的。在进行研究时,请确保不懈地关注潜在客户的期望。毕竟,在不了解目标用户期望的情况下,设计提供出色用户体验的商业网站几乎是不可能的。 

而无法提供出色用户体验的网站吸引大量流量的机会要少得多,毕竟,UX(用户体验)和SEO齐头并进。有些用户使用不良的UX仍会吸引大量用户,比如58同城t。但是,UX更好的公司,例如滴滴,重塑行业的机会更大。

研究用户需求和期望的方法有很多,但是用户调查和用户分类可能是最受欢迎的方法。在深入了解目标受众对页面的期望后,就可以开始研究信息体系结构了。

信息体系结构(IA)就是要以一种清晰,直观和明智的方式来组织网站上的信息。考虑一下您自己浏览Web的经历:在计划不周,几秒钟内没有证明其相关性的网页上登陆会令人沮丧,并且很可能使您立即单击关闭或返回按钮。 

良好的IA会创建一个强调最重要元素的层次结构,并使访客保持参与。如果没有坚实的“骨架”可以建立,那么您将为失败做好准备。

导航是您应该尽早考虑的IA的关键方面之一。如果用户找不到自己的网站,您的网站有多华丽都没关系。 

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

  1. 简单
  2. 明晰
  3. 一致性

您的目标应该是引导用户以尽可能少的点击获得他们正在寻找的信息。您可以在导航栏中使用清晰,简洁,有用的语言以及整个站点的一致设计来实现这一目标。添加诸如面包屑的备份功能还可以大大提高网站的可用性,帮助访问者随时了解他们在网站上的位置。

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

强大的视觉层次结构使引导用户采取行动的网站布局设计与看上去美观的网站有所不同。人类是极其令人难以置信的视觉生物,当涉及到在线消费内容时,我们经常扫描页面以快速辨别是否在潜入之前就能找到所需的东西。 

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

使用网格

网格提供了一种强大的方法来在页面上的不同元素之间创建连接,并使布局设计有条理。网格显示页面上所有元素的交互方式,并确保您使用清晰的结构强调正确的信息。

自然浏览模式设计

人们可以使用两种主要的眼动扫描模式来快速扫描内容块: 

  1. F形图案 
  2. Z字形

作为设计师,您对用户扫描页面时的外观有很多控制权,因此为用户设置正确的路径至关重要。我们经常在博客和新闻网站等文本繁多的网站上遇到F型图案。 

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

如果用户以F模式浏览您的网站,则意味着他们在页面左侧显示了强烈的偏爱,而在右侧则丢失了重要内容。为防止F浏览,您必须以一种将内容定向到您认为最重要的信息的方式来格式化网站上的内容。 

以下是一些引导访客阅读您最重要内容的方法:

  • 在前两段中包含最重要的信息
  • 使用标题和副标题
  • 大胆的重要单词或短语
  • 可视地分组少量相关信息 
  • 经常使用项目符号和编号列表

努力为您的用户做些辛苦的工作,以最大程度地减少干扰并阻止他们采取捷径。

阻止F形浏览的设计很适合于文本丰富的网站,例如博客和新闻网站。Z形图案更适合于复制量最少且设计一些关键元素以吸引用户注意的站点。登陆页面通常使用Z形图案来引导用户进行转换。

在视觉上优先考虑关键要素

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

1.尺寸 

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

2.颜色

请记住,颜色在设计中既可以充当组织工具,又可以充当品牌/个性工具。

3.布局 

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

4.间距

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

5.风格

选择与您的品牌相匹配并突出您的品牌的样式将有助于您更有效地传达您的信息。

应用三分法则

该原则要求您将设计分成三部分(三行三列),以查看线条相交的位置并找出设计重点。这是一种有效的技术,可以启动您的网站组成,并选择元素的位置和框架。使用网格是将此技术应用于任何设计的最简单方法。

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

没有号召性用语按钮(CTA),任何网站都不完整。实际上,营销人员会说这是页面上最重要的元素,所有努力都应集中在让人们点击上。战略性地使用设计良好的CTA可以极大地改善页面的流程并引导用户进行转换,因此正确实现这一点至关重要。 

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

确保按钮看起来可点击

这听起来似乎很明显,但是您会感到惊讶的是,网页设计师经常抛弃清晰性,而倾向于创造力或一些古怪的新趋势(是的,我是在谈论您,鬼按钮)。为确保用户理解元素是按钮,请使用标准的视觉提示来帮助他们确定可单击性,例如形状,阴影和高光。

清楚标记所有按钮

那里的按钮告诉用户下一步该做什么。如果副本含糊不清,那么人们就会思考而不是行动。与用户明确一下,如果他们单击将会发生什么。这是Netflix的一个聪明例子。 

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

设计独特的CTA涉及三个重要方面:颜色,对比度和位置。使用醒目的颜色和足够的对比度来帮助主按钮突出显示,并将其放置在用户不会错过的醒目位置。

您还想了解网页布局吗? 

作为南京网站建设专家,我们渴望在这个至关重要的主题上有更深入地研究,因此,请联系客服,让我们知道您还想学习什么! 

分享:
说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!

版权:【注明为本站原创的文章,转载请注明出处与原文地址!本站部分转载文章能找到原作者的我们都会注明,若文章涉及版权请发至邮箱:service@langzhichao.com,我们以便及时处理,可支付稿费。向本站投稿或需要本站向贵司网站定期免费投稿请加QQ:1115814032】

SEO按天计费
浪知潮网络提交您的需求提交您的需求
  • 公司名称
  • 联系人
  • 电话
  • 邮箱
  • 验证码
    看不清?点击更换

南京浪知潮网络科技有限公司 Copyright © 2012-2019 All Rights Reserved.未经许可,不可拷贝或镜像   网站地图