联系电话136 8812 4668(业务咨询) / 158 8206 4880(服务投诉)
赛门仕博官网

1

2017年01月06日

高转化率的网站设计布局技巧

设计一个高端专业的网站,需要将视觉美感和信息的冲击结合在一起,将艺术与科学融为一体。通过构建一个提升网站转化率的网站设计布局结构来验证这个过程。以下分析如何提升网站高转化率的网站设计布局技巧


一,首先考虑用户浏览路径

在开始网站规划之前进行研究和思考网页结构是至关重要的。在进行研究时,在不了解目标用户的期望的情况下,设计一个提供卓越用户体验的网站几乎是不可能的。一个无法提供良好用户体验的网站吸引大量流量的机会要少得多。研究用户需求和期望的方法有很多种,其中客户访谈和卡片分类是最受欢迎的方法。当深入了解了目标受众对页面的期望之后,便可以开始研究规划网站信息架构了。

网站信息框架卡片分类

网站信息框架卡片分类

网站信息架构(IA)就是以清晰,直观明确的方式组织网站信息。思考客户浏览网页的体验:进入网站之后在几秒钟内满足客户的需求甚至与需求毫无相关性会让客户感到挫败感直接离开网站。

好的网站信息架构设计会规划出一个信息层次结构,强调最重要的元素,并激励客户参与。网站导航是网站信息结构设计最早考虑的方向之一。如果客户无法找到自己的浏览需求选项,那么即使网站设计得多么华丽都显得不重要。

良好的网站导航设计有三个主要特征:

1)简单

2)准确

3)一致性

网站导航设计

网站导航设计的目标是让客户尽可能少的点击次数来引导获取他们正在寻找的信息。所以网站导航设计应该使用清晰,简洁明了的文字,并保持整个导航的一致性。

包屑导航设计可以极大地提高网站的可用性,帮助用户随时了解处在网站上的位置。

网站面包屑设计


二,正确的网站视觉层次结构设计

强大的网站可视化层次结构设计可以让用户访问我们精心规划好的网站浏览路径。因为人是视觉生物,当涉及到在线购买产品的网站内容时,我们经常快速扫描页面辨别出需要的产品。作为网站设计师,必须确保用户能够看到最重要的信息并吸引用户。如果没有清晰的视觉层次结构,页面上的所有内容似乎同样重要,使其变得难以选择。各种网站设计原则可以帮助创建出强大的网站视觉层次。

1,使用网格

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


2,阅读习惯设计

人们主要使用两种阅读模式来快速浏览网站内容:

1)F形浏览

2)Z形浏览

作为网站设计师,更好地控制用户浏览页面时的外观,提供正确的浏览路径和视觉路径。以下是引导用户阅读最重要内容的几种方法:

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

2)使用标题和副标题

3)大胆的重要文字或短语

4)直观地设计少量相关信息

5)使用项目符号和编号列表来展示信息

网站F型与Z字形浏览模式
F型与z字形网站浏览路径模式

F形浏览模式的设计非常适合博客类和新闻类网站等文字密集型的网站。Z形浏览模式更适合较少文字和一些旨在吸引用户注意力的关键元素的网站。网站着陆页通常利用Z形浏览模式引导用户沿着转换路径浏览。

Z字形浏览模式网站设计案例

3,视觉上优先考虑关键元素

使用网站设计的五个基本构建块来构建一目了然的视觉层次结构。

1)尺寸

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

网站设计:尺寸

2)颜色

颜色可以作为内容组织工具,也可以作为网站设计中的品牌/个性工具。

网站设计:颜色


3)布局

良好的布局格式可以清晰得规划好用户浏览网站页面内容,并更快地找到最重要的信息。

网站设计:布局

4)间距

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

网站设计:间距

5)风格

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

网站设计:风格

4,使用三分法则

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

网站设计三分法则


5,品牌文案以及转化按钮

没有转化元素的文案和按钮的网站是不完美的,营销人员会说他们是页面上最重要的元素,所有的努力都应该集中在让人们点击上去。精心设计的CTA的战略性使用可以极大地改善页面的流动并引导用户进行转换,因此正确实现这一点至关重要。以下是设计转化按钮时需要注意的事项。


1)确保按钮看起来可点击

这可能听起来,是一句废话,但是你会发现很多网站设计师经常设计一些新的“潮流”按钮,让用户摸不着方向。所以要确保用户是否清楚这是一个按钮,使用标准的视觉提示来帮助他们确定可点击性,例如形状,阴影和高光。

网站按钮设计反面案例

反面案例:用户不知道按钮是否可点击
网站按钮设计正确案例:使用视觉层次突显按钮可点击
使用视觉层次来突出按钮可点击




2)清晰地标记所有按钮

按钮用于告诉用户下一步应该做什么。向用户明确说明他们点击后会发生什么。下面这个网站就很好得验证了这个特性。

网站按钮设计作用:明确目标

3)在视觉上突出显示最重要的文案

设计独特的CTA有三个重要方面:颜色,对比度和位置。使用特色颜色和高对比度来突出按钮 - 并放置在重要位置。