电子商务网站设计分析--首屏设计

  首屏(above the fold)是指不滚动web网页屏幕就能被用户看到的画面。

  世界著名的网页易用性专家尼尔森曾经有报告显示,首屏以上的关注度为80.3%,首屏以下的关注度仅有19.7%。这两个数据足以表明,首屏对每一个需要转化率的网站都很重要,尤其是电商网站。

  在电子商务网站中,用户最急切需要获得的不外乎两点:吸引人的商品或店铺,以及网站能够给予他的信任感。信任需要积累,因此,各类宣传推广信息就成了电商首屏展示的不二之选。

  一个能引人驻足停留的首屏一定会为网站带来更多的客户和利益,会告诉你如何策划设计出一个好看好用的电商首屏。

  1.确定可视范围

  根据统计报告显示,2014年使用率最高的Internet用户屏幕分辨率为1366px*768px。以此为例,浏览器边框宽度普遍在21左右,所以网页首屏宽度在无干扰因素的情况下可以确定为1345;而屏幕总高度为768,除去任务栏高度40、店铺页头106、浏览器(工具栏、边框等)160和位置工具栏30,初步估算首屏高度控制在432较为合适。因此我们可以得出,最符合时下趋势的首屏设计宽高基本范围是1345*432,重要的内容可以尽量放在这个区间里。

  2.展示吸引用户的信息

  首页的首屏位置在整个网站中都称得上寸土寸金,正因为如此,此处展示的文字应该短小精悍,尽可能用最少的篇幅就把信息表达清楚。标题性文字更应该把商家的商业诉求清晰直接的表达出来,在这类文字的策划上需注意符合网站的整体风格。

  一号店的banner文案就能很好的抓住浏览者的眼球,有趣的标题文字加上“0元领”这样的醒目的字眼,让用户充满了好奇心。

  Gap的首屏虽然没有将广告的下半部分很完整的展现出来,但是这似乎并没有影响到用户想要继续点击的心情,真正吸引用户的信息点都被整齐的陈列在首屏中,供用户逐一了解。

  3.视觉焦点要显眼

  大多数用户的浏览习惯是走马观花式的,以如今国内电商网站普遍的布局来看,用户在第一屏中的视觉焦点基本上以Banner和导航为主。因此,其中所表现的无论是文字还是大图,都应该让用户一眼看清内容,减少其思考时间。设计师在设计时可以用“去色”的方法来检验实际效果。

  去色前:

  去色后:

  易迅首屏算是个反面教材。首屏原图会令人觉得太过繁复,所以视觉焦点自然会分散开来。

  通过去色前后的对比图我们可以发现,去色后,导航上的文字内容会变得不够清晰,因此我们可以得出,色彩是锁定用户视觉焦点的主要问题。

  去色前:

  去色后:

  唯品会首屏去色后的效果就截然不同了。去色后,Banner上的内容仍然可以很容易的辨认出来,文字和背景都很清晰。

  4.图片让内容更利于理解

  要让用户在短短的几秒钟之内就了解网站或商家发布的一系列信息,单凭简短的文字是不够的,还需借力于图片的帮助。图片的使用能从侧面含蓄的衬托主题,因此,在图片素材的选择上应该保证对主旨的表达有帮助,并且在视觉上保持风格一致。

  凡客诚品的首屏走的是极简路线,没有什么修饰,让用户可以专注于商品本身。配图没有把商品全貌都展现出来,但在极简的风格下,也能增强用户的点击欲。

  5.用风格强调主题

  网站首屏的风格是根据目的来决定的,在设计之前,必须要了解这个首屏究竟在整个网站中会起到什么样的作用。一般来说,电子商务网站的首页首屏会用来进行推广宣传,比如单品推广、店铺推广和活动宣传等。

  单品:

  以单品推广作为主题的首屏一般会用卖点组成文案,再配上简单的图片。

  店铺:

  店铺的推广其实并不需要用很大的篇幅来具体说明,只要将一些用户在意的关键点表现出来即可,例如优惠信息,活动形式范围等。

  活动:

  一项活动的宣传很难用简单的文案在首屏中描述清楚,所以要尽量用有冲击力的字词来吸引用户点击到详情页。

  6.锁定用户的视觉重点

  当用户对网站还不太熟悉的时候,进入首页必然会一头雾水,此时,给予用户视觉上的引导变得格外重要。引导的方法多种多样,比如醒目的大字或图片,吸引人的标题、或是条理清晰整体布局等。所谓引导,并不只是代表让顾客购买商品,更意味着让用户点击进入其他页面,产生更多的消费。

  很少有电商网站的首屏像好乐买一样干净整洁、分类明确,清晰的布局让用户一眼就能找到自己的需求。

  7.动画吸引用户视线

  在网站用户体验比较流畅的基础上,在首屏中可以适当的加入一些鼠标互动效果,或是Flash动画效果会让页面看起来更加生动有趣,这种做法也能增加一定数量的点击,并且吸引用户的注意力。但这些效果只能作为点缀,大面积的使用反而会适得其反。

  淘宝网在右上角有一个小小的鼠标交互效果,点击后进入的是一个活动专区,翻页效果在心理学上被认为更容易触发用户想要点击的冲动。

  8.符合视觉习惯的图文混排

  大片单一的文字或图片会让用户产生厌倦感,而图文混排很好的弥补了这一点。图文混排的方式有很多,比如色彩上的对比、文字或图片的放大等等,在布局上尽量做到错落有致,让用户的视线顺畅的转移。无论用哪一种形式,都必须确保的是主要内容的可读性。

  一淘网的首屏不太符合大多数人的使用习惯。当用户进入一个电商网站,首先一定会被图片吸引,很少有人会愿意逐字逐句的看完大段文字,所以详细的描述并不适合放在首屏的位置。

  聚美优品首屏的图文搭配恰如其分,简单的大图和一些短句,两者之间相辅相成,图片便于用户理解,文字很精简,重点分明。

  总结:

  首屏是吸引用户至关重要的通道,很多网站因为对首屏的忽视,从而产生了一些用户体验上的问题。电商网站相比较普通的官方网站在性质上更特殊一些,电商首屏应该带着商家的目的性去迎合用户的常规使用习惯,而不是漫无目的地把首屏变成布告栏。

  设计师在做一个设计项目之前,不妨多从用户的角度思考,也许会有意想不到的收获。

时间: 2024-11-05 22:05:21

电子商务网站设计分析--首屏设计的相关文章

电子商务网站的设计与实现(一):当前的一些购物体验和开发期望

正如2015年度规划中提到的那样,2015年,我想尝试开发一款电子商务网站.主要目的了,就是练练手,提高下能力,在实践中构建和优化自己的开发基础库.如果可以卖钱,自然更好.即使不能,也要不断优化,为若干年之后做IT相关的生意做点准备. 言归正传~ 电子商务相关网站,用的还算比较多的.综合购物网站.垂直购物网站.P2P网贷等一大堆,具体开发相关系统很少,只有P2P网贷系统和一个图书购物网站的Demo. 电子商务网站,其实就是,线下图书.中国移动营业厅.超市.福利彩票的网络版,虚拟+现实,是当前主要

网页设计师让你的电子商务网站更有利可图的5大理由

有没有想过从一个蓬勃发展的在线业务中区分可能会导致破产因素的威胁吗?除了出售商品和用于由双方基于互联网的公司的所有营销策略的有效性的质量,还有一个因素是影响其水平的知名度和盈利能力:网站设计. 要创建并运行一个繁荣的商业,必须通过开发一个全功能的.诱人的.适当优化的网站开始.为了完成这一使命,大多数业主需要依靠有经验的网页设计师提供专业服务.这里有5个方法,使一个真正的专业人员可以帮助你把你的网上商店提供到一个新的水平,提高你网站的吸引力.  获得竞争优势通过创建一个独特.醒目的店面 根据下一个

如何压力测试电子商务网站

如何压力测试电子商务网站 第1页:背景与面临的挑战! 如今,与百姓日常生活密切的电子商城.网络订票和网上银行等系统都是电子商务网站的典型案例.这些系统涵盖了产品宣传展示.商品选购.交易结算.服务与客户反馈等诸多功能.当需要同时向一个庞大的群体提供这些服务,性能考量往往是系统成功运营的关键. 以国内某著名电子购物网站为例,该网站有3000万注册用户,日均访问量达8000万,日均订单处理超过30万单,日交易额过亿元.可以想象,系统性能对该网站拥有者的收益有着至关重要的影响.而且,网站的性能优化不仅可

什么是好的电子商务网站用户体验

最近被朋友问道:什么是好的电子商务网站用户体验?做了近六年的电子商务网站项目,参与了五六个电子商务网站的需求分析和测试,这个问题乍一听好像很好解释,但说出来却自觉杂乱无章.这就好比别人问你什么人可以称得上好人.听上去是一个很简单的问题,回答起来却一时半会无从说起. 静下来想一想,或许可以从用户体验五要素来阐述. 用户体验五要素图解如下: 图解详情请见Jesse James Garrett的<用户体验要素>一书 结合用户体验五要素, 一个电商网站良好的用户体验可以体现在以下几个方面: (注: 以

大屏设计系列之五——大屏设计语言分析

如果您想订阅本博客内容,每天自动发到您的邮箱中,请点这里 作者:蓝蓝 蓝蓝设计经常会接到大屏设计的项目,比如中国移动互联网监控大屏可视化设计及开发.太极集团承接的中央台应急指挥中心大屏可视化设计.交大思源承接的北京地铁轨道批挥中心大屏可视化设计.数码视讯展厅大屏可视化设计,在积累了一定经验的同时,也在不断的学习和丰富关于大屏设计的特点及数据可视化的表达方式. 数据可视化过滤了非常多的冗余信息,浓缩了最重要的信息,它的魅力就在于将枯燥的数据组织在一起,把最需要的那些编辑成一个故事.目前大数据那么流

时间都去哪了-移动Web首屏优化实践

时间都去哪了-移动Web首屏优化实践 首屏时间 可用性的前提,后面用户是否使用你app很重要的因素之一: 我们PC上访问其实现在的带宽已经很好了,百兆光宽带,但是在移动端就不一样了,很多用户还是使用的流量,GPRS.所以,对于首屏时间的加载,压力还是蛮大的: 我们手机在出发一个操作之后,发生了什么? 下面是在返回数据前发生的动作,但是作为前端,我们好像动不了这些东西,不可能叫运营商去帮你定制一套系统: 这个才是我们真正要去做的东西-渲染(webkit) 给你两个优化的方面,优化网路与优化渲染(高

如何建立电子商务网站(三)

这篇是关于如何建立电子商务网站的最后一篇博客.这篇博客更多是介绍如何完善提升电商网站的质量. 五. 俗易懂的域名:要建立一个好的电子商务网站,你要有一个简单易记的域名,另外,你的域名还要与商店的名称有一定的联系,大部分的员工,乃至老板都会出现无法说清楚自己网站的域名,那你要让客户记住你的域名,这又怎么说的过去呢. 六. 互惠互利:你要和其它成功的电子商务网站进行链接或者与它们建立一个联盟的关系,共享你们之间的客户群体,提高网站的点击率,只要看的人增加了,那么机会也就意味着加大了. 七. 网站要有

如何建立电子商务网站(一)

关于怎样建立一个成功的电子商务网站,我这两天查找了很多资料,在这里做一些总结. 一. 对于电商企业来说,一个企业的官方往往也是这个企业的B2C独立平台,因此建立符合消费者习惯的布局设计非常必要. 首先,在进行网站策划时,我们必须明确网站的定位,网站栏目的设计.网页结构的布局(如文件目录的结构.内链的连贯和互联)等. 其次,设计页面和更新内容需要注意对网站重要元素的突显,尤其需要注意简单易懂而不杂乱: (1)在视觉设计上,网站的风格应该与企业形象相匹配,这样做不仅仅和企业的形象相应对,还能突显品牌

中小型电子商务网站架构

一个小型的电子商务网站,例如日交易量5万订单以下,或者说每天差不多五千万个pv左右.我们可以讨论下,整个架构应该如何设计. 业务分离,域名分离 现在好的电子商务网 站都是按照业务分开,细化每个业务线.这样有利于系统的扩展,也有利于对系统的维护.例如:商品可以独立出来,交易独立,用户独立等等.各个系统之间需要 交互的信息可以通过远程传输来实现.在一个比较有规模的团队中,最好有个组专门来维护一个独立的业务,有利于团队对业务渗透和业务的维护. 由 于业务分开,系统分开,当然在域名上也应该分开, 例如: