网页细节优化之使用热点图优化网页

2016-02-16 21:16 6 1 收藏

最近很多朋友喜欢上设计,但是大家却不知道如何去做,别担心有图老师给你解答,史上最全最棒的详细解说让你一看就懂。

【 tulaoshi.com - 平面设计 】

如果内容为王的话,那么设计就是城堡。对于企业而言,好的网页设计不仅包含了能够引起访客兴趣的内容,吸引目标用户,而且包含有直观而漂亮的UI设计,促进销售。许多设计师喜欢将自己认为创意爆棚的UI设计直接应用到客户的网站上,但并没有考虑过这种设计是否符合网站的产品,是否符合目标用户群所需要的体验与需求,从这个角度上来说,这样的设计真的合适么?

所以,当你在设计企业和商务类网站的时候,你需要自省。多问问自己,这样的设计是否合理,站在需求方和用户的角度上仔细考量一下,你的创意和设计是否真的靠谱。在接下来的案例中,我们使用Ptengine这款软件生成用户点击的热点图,来帮设计师了解用户是如何访问网站的,分析设计的利弊。

1、对于产品销售而言一个巨大的Banner真的有效么?

许多网站都喜欢在网站的导航栏下顶部的位置放上巨大的Banner,宣传主打产品或者主要的服务。一旦使用了这样的设计就意味着网站顶部大部分都会被一张图所填充,用户的注意力会被它所吸引,然后才是让用户注意到下方的其他产品。下面的这张热点图是最大的体育品牌Vendor的鞋类产品页面,我们发现他们顶部的Banner的点击率并不高,仔细分析数据之后发现大概占据了页面总点击量的10%,很明显多数用户看了这个图之后并未被其吸引而是选择向下浏览他们自己真正喜欢的鞋。

网页细节优化之使用热点图优化网页,PS教程,图老师教程网

网页细节优化之使用热点图优化网页,PS教程,图老师教程网

2、你应该在最突出的地方放置什么内容?

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

设计师们常常会探讨在网站什么地方放置什么内容,但是这些内容是否适合产品以及用户的需求则很少真正涉及。接下来,我用两个活生生的案例来展示一下,什么是好内容被放置到错误的地方。

有几个很有吸引力的甜点食谱被放置于主页最下方,仅有37%的用户会将网页拖到这个位置看到它们。但是几乎所有看到这个食谱的用户都点击了它们,但是绝大多数的用户根本没几乎浏览到这里!设计师应该让这样的杀手级的内容置于最好的位置,不是吗?

网页细节优化之使用热点图优化网页,PS教程,图老师教程网

网页细节优化之使用热点图优化网页,PS教程,图老师教程网

网页细节优化之使用热点图优化网页,PS教程,图老师教程网

几乎相同的情况也发生在运动品牌Vendor的网页上。许多不同类型的鞋被放置在整个长页面上,设计师真的应该梳理一下那些鞋比较吸引人。只有20%的用户会浏览到页面底部,但是几乎所有浏览到这里的用户都会点击那双鞋,这足以证明它非常吸引人,那么为何不将它挪到用户更容易发现的地方呢?

网页细节优化之使用热点图优化网页,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

网页细节优化之使用热点图优化网页,PS教程,图老师教程网

3、是否始终要为图片附加链接?

在网站上,一图抵千言,这是很正常的事情。但是你设计的页面中,图片是否传达出正确的含义了?如果图片加了超链接但是用户没有明白你的目的,这是一种设计失败;如果你放置的图片吸引了用户去点击,但图片没有附上链接,用户的点击徒劳无功了,这也是一个失败的设计。

第一个案例是一个着陆页。看看热点图,你会发现许多用户点击了图片。用户这个时候应该是想点击图片深入了解一下网站可以为他们提供什么内容,用户希望这个图片有超链接,能引导他们去某个详情页。但是没有。

网页细节优化之使用热点图优化网页,PS教程,图老师教程网

第二个案例是某款手机的帮助页面。你会注意到,这个地方的客服电话用了鲜明的红色,看起来好象能点击的样子,但是它实际只是纯文本。用户希望能通过点击直接拨打电话,但是看来是不可能了。如果想直接同用户保持联系,那么这个地方必须修改。

网页细节优化之使用热点图优化网页,PS教程,图老师教程网

4、我所设计的按钮是否容易被点击?

看看下面的例子吧。APP页面中,设计师使用了HOT等关键词来吸引潜在的用户的注意力,但是即便使用了粉红色来填充按钮,它的效果看起来也非常不明显。而男装部分,干脆使用了浅蓝色,这个地方的点击量就更少了。我们可以理解设计师的苦心,但是对于用户,它一点也没有吸引力。

网页细节优化之使用热点图优化网页,PS教程,图老师教程网

在打造一个优秀的网页之时,好的设计师不仅会赋予它良好的体验和优秀的创意,还会根据用户的习惯与诉求调整设计和创意,让设计能够落地,使得用户与网站实现良好的互动。Ptengine是一个帮设计师探索用户使用习惯的好工具,它所搜集的数据能清晰的反映网页设计的实际效果,为迭代和优化提供了有力的数据支撑。如果你想作出更优秀的设计,试试Ptengine这样的优秀工具吧。

来源:http://www.tulaoshi.com/n/20160216/1574537.html

延伸阅读
标签: Web开发
在div+css布局中,一般都这样来整体构架的: div id="header"/div div id="center"/div div id="footer"/div 而对于header部分,肯定要显示网站标题,除了显示网站标题外,还可能要显示其他比较重要的对象,比如网站的导航栏: div id="header" div id="title"这里是网站的标题/div div id="nav"这里是网站导航栏/div /div 很多人一般都这...
二、优化GIF和PNG图像 1. 设置调色板、色度、抖动与色损 当选择GIF与PNG8格式时,可选择调色板,各调色板的特点如下: · Adaptive:该调色板是从所有颜色中提取的系列色彩,是被使用最多的调色板,可以使用最少的颜色实现较好的效果。 · WebSnap Adaptive:是一种更高级的自适应调色板,这种调色板既兼顾色彩的丰富性又考虑了浏览器的...
标签: Web开发
     web开发人员是否必须掌握复杂的组件技术才能加快html页面的访问速度?答案是:不一定!实际上,有许多关于HTML与DHTML方面的技巧,它们原理简单而且上手容易。无论是技术高超的老手,还是初涉编程的菜鸟,领会这些都十分必要。      明显HTML,暗渡“公用脚本”      减少...
(二)优化方案的选择、设置以及增删 1. 选择内置优化方案 在Optimize 顶部设置的Setting下拉列表中,用户可选择系统内置的一些优化类型。 Fireworks中提供了6种优化方案,各优化类型的意义如下: · GIF Web216:将所有颜色都转换为216种Web安全色。 · GIF WebSnap 256:将非Web安全色转换为最接近的Web安全色,调色板最多包含256种颜...
标签: Web开发
效率和开始的节奏以及功能的丰富彼此相互制约。最近忙着做功能,明知道有些地方可以优化的也得先放放,但是老大一关注,你的马上去做。 在老大的眼中,一次优化好后就可以不再优化,或者只需要很少的时间来维护,却不知道,优化是一个持续的过程,想法赶不上变化。 做人难,做事情更难! 优化如何开始,怎么开始,以及做些...

经验教程

205

收藏

68
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部