设计一个网页,将美学美感与信息传递相结合,几乎达到了魔幻般的壮举,需要将艺术与科学完美融合。秘诀在于给予自己一点创作自由-同时坚持经过验证的结构。
这是为任何企业网站构建可提升转化率的网页布局的快速指南。
设计商业网站布局的3个步骤
步骤1:首先考虑用户的访问体验
在甚至开始草绘想法之前,进行研究并考虑主页结构是至关重要的。在进行研究时,请确保不停的关注潜在客户的期望。毕竟,在不了解目标用户期望的情况下,设计提供出色用户体验的商业网站几乎是不可能的。
无法提供出色用户体验的网站吸引大量流量的机会要少得多-毕竟,UX和SEO齐头并进。有些用户使用粗心的UX仍会吸引大量用户。但是,拥有更好用户体验的公司,例如Uber,Airbnb和Slack,则更有可能重塑自己的行业。
研究用户需求和期望的方法有很多,但是采访和卡片分类可能是最受欢迎的方法。一旦深入了解目标受众对页面的期望,就可以开始研究信息体系结构。
信息体系结构(IA)旨在以一种清晰,直观和明智的方式来组织网站上的信息。考虑一下您自己浏览网站的体验:在计划不周,几秒钟内没有证明其相关性的网页上登陆令人不满,并且很可能使您立即单击关闭或返回按钮。
好的IA会创建一个强调最重要元素的层次结构,并保持访客的参与度。如果没有坚实的“骨架”可以建立,那么您将为失败做好准备。
导航是您应该尽早考虑的IA的关键方面之一。如果用户找不到自己的网站,您的网站有多华丽都没什么用。
良好的导航具有三个主要特征:
- 简单
- 明晰
- 一致性
您的目标应该是引导用户以尽可能少的点击获得他们正在寻找的信息。您可以在导航栏中使用清晰,简洁,有用的语言,并在整个站点中采用一致的设计来实现这一目标。添加诸如面包屑导航功能还可以极大地提高您网站的可用性,从而帮助访问者随时了解他们在网站上的位置。
步骤2:正确获得视觉层次结构
强大的视觉层次结构使引导用户采取行动的网站布局设计与看上去美观的网站有所不同。人类是极其令人难以置信的视觉生物,当涉及到在线消费内容时,我们经常扫描页面以快速辨别是否在关闭之前就能找到所需的东西。
作为设计师,您可以确保看到最重要的信息并吸引用户。
如果没有清晰的视觉层次结构,页面上的所有内容似乎都同样重要,从而使其难以承受。
各种设计原则有助于创建强大的视觉层次。
使用网格
网格提供了一种强大的方法来创建页面上不同元素之间的连接,并使布局设计有条理。网格显示页面上所有元素的交互方式,并确保您使用清晰的结构来强调正确的信息。
自然图案设计
人们可以使用两种主要的眼动浏览模式来快速浏览内容块:
- F形图案
- Z形图案
作为设计师,您对用户浏览页面时的外观有很多控制权,因此为用户设置正确的路径至关重要。我们经常在博客和新闻网站等文本繁多的网站上遇到F形图案。
值得注意的是如果用户以F模式扫描您的网站,则意味着他们在页面左侧显示出强烈的偏好,而在右侧则丢失了重要内容。为防止F扫描,您必须格式化网站上的内容,以将其定向到您认为最重要的信息。
以下是几种引导访客阅读您最重要内容的方法:
- 在前两段中包含最重要的信息
- 使用标题和副标题
- 大胆的重要单词或短语
- 可视地分组少量相关信息
- 经常使用项目符号和编号列表
阻止F形扫描的设计很适合于文本丰富的网站,例如博客和新闻网站。Z形图案更适合于复制量最少且设计一些关键元素以吸引用户注意的站点。登陆页面经常利用Z形图案来引导用户进行转换。
使用五个基本的设计构建基块来构建直观的视觉层次结构:
1.尺寸
在任何设计中,将大小与重要性相关联非常重要-最重要的信息应该在页面上最大,并且需要最多的关注。
2.颜色
请记住,颜色在设计中既可以充当组织工具,又可以充当品牌/个性工具。
3.布局
良好的格式会鼓励访问者在整个页面上参与内容,并更快地找到最重要的信息。
4.间距
空格和间距是设计人员用来吸引人们注意最重要的UI元素的工具
5.风格
选择与您的品牌相匹配并突出您的品牌的样式将有助于您更有效地传达您的信息。
应用三分法则
该原理要求您将设计分成三部分(三行三列),以查看线条相交的位置并找出设计的重点。这是一种有效的技术,可以启动您的网站组成,并选择元素的位置和框架。使用网格是将此技术应用于任何设计的最简单方法。
步骤3:专注于号召性用语按钮
没有号召性用语按钮(CTA),任何网站都不完整。实际上,营销人员会说它们是页面上最重要的元素,所有努力都应集中在让人们点击上。战略性地使用设计良好的CTA可以极大地改善页面的流程并引导用户进行转换,因此正确地进行此操作至关重要。
设计按钮时,请记住以下几点。
确保按钮看起来可点击


这听起来似乎很明显,但是您会感到奇怪的是,网页设计师经常抛弃清晰性而转向创造力或一些古怪的新趋势(是的,我是在谈论您,是根本不知道能点击的按钮)。为了确保用户将元素理解为按钮,请使用标准的视觉提示来帮助他们确定可单击性,例如形状,阴影和高光。
清楚标记所有按钮
那里的按钮告诉用户下一步该做什么。如果副本含糊不清,那么人们就会思考而不是行动。与用户明确一下,如果他们单击将会发生什么。这是Netflix的一个聪明例子。
直观地突出显示最重要的CTA


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