电子商务网站设计分析系列之二:首屏设计

  屏(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-12-20 02:58:41

电子商务网站设计分析系列之二:首屏设计的相关文章

电子商务网站设计分析三:登陆注册页设计

电子商务网站已经慢慢成为现代都市人的必需品,大家都乐此不疲的使用着,但对于第一次注册使用的情景,相信大家还记忆犹新.精心挑选完商品之后,用户们怀着愉快的心情点击购买按钮,但显示的却是"请先注册或登录",原本满满的购物欲和好心情有可能瞬间大打折扣. 电商网站需要注册和登录才能执行购买流程虽然受到很大一部分用户的不喜爱,但确实是非常普遍的现象.用户之所以如此反感,也不完全因为流程繁琐,网站的表现形式不够友好.人性化也是原因之一,甚至还有网站令用户很直接的感受到一种强迫性. 市场环境让几乎所

网站设计分析:网页的首屏标准你了解多少?

什么是首屏 首屏的英文是above the fold,fold有折叠之意,above the fold是指在折叠之后能看到的,为什么首屏的英文翻译会跟折叠有关系呢,原因很简单,因为这个概念最早用于出版领域,可以简单的理解为"头版"因为报纸的运输和分发过程是折叠起来的,所以报纸的折叠后暴露在读者面前的那一部分内容就显得尤其重要,读者会根据头版的内容决定是否购买. 因此处于头版的内容意味着一个,编辑认为它们是最重要的,头版的内容也决定了出版物的立场和定位.所以"above the

电子商务网站设计分析系列之一:首页导航

伴随着互联网的成长,通过电子商务网站实现商品交易越来越频繁,而访客在面对越来越庞大的信息量时会感到迷茫,因此,优秀的导航设计能够提高网站的易用性,对实现电子商务网站的高效运作具有实际意义.另外,电子商务网站的首页导航设计必须本着用户体验为佳的原则,既要将网站中的所有信息都在有限的导航栏中体现,又要为用户反馈出重要的帮助信息.网站因其独特的重要性和不可替代性,在电子商务网站设计中日渐凸显出举足轻重的地位. 1 .符合网站内容结构 在设计电商网站的导航之前,事先应该对网站整体的内容有一个全面的了解,

电子商务网站设计分析:面包屑导航

AnyForWeb正式推出电子商务网站设计分析的系列文章,每月更新,本次主题为电商网站的面包屑导航设计,欢迎关注! 网站中的面包屑导航(Breadcrumb Navigation)导航是一种作为辅助和补充的导航方式,它能帮助用户明确当下所在的网站内位置,并快捷返回之前的路径. 面包屑的由来出自一个童话,两个孩子为了不在森林里迷路,于是沿途洒下了面包屑作为标记,帮助自己能够原路返回.通过这个故事我们可以看出,之所以被称为面包屑导航,正是因为它在网站中也起了相同的作用,让用户既能看清自己在网站中所处

电子商务网站设计分析:登陆注册页设计

  AnyForWeb正式推出电子商务网站设计分析的系列文章,每月更新,本次主题为电商网站的登陆注册页设计,欢迎关注! 电子商务网站已经慢慢成为现代都市人的必需品,大家都乐此不疲的使用着,但对于第一次注册使用的情景,相信大家还记忆犹新.精心挑选完商品之后,用户们怀着愉快的心情点击购买按钮,但显示的却是"请先注册或登录",原本满满的购物欲和好心情有可能瞬间大打折扣. 电商网站需要注册和登录才能执行购买流程虽然受到很大一部分用户的不喜爱,但确实是非常普遍的现象.用户之所以如此反感,也不完全

网站广告怎么投放最好?首屏广告投放类型优化和广告位布局优化的案例

在说到联盟优化前,我们先看一则报道: 1.众测数据显示,网民对PC广告的满意程度一般,仅为48%,相比手机端广告(WAP/APP)的满意程度较高,平均满意度达56% 2.PC网盟的问题汇总 流量TOP问题:布局混乱.遮挡正文 广告创意TOP问题:丑陋.低俗.易造成干扰 投放TOP问题:重复 一.首屏广告投放类型优化 在这里,主要体现的是干扰强的物料,让用户产生厌恶感,反而减少点击. --强干扰的广告样式(Flash),替换为橱窗/原生等优体验样式. 直接看案例,优化前如下图: 优化后如下图: 由

网页首屏设计之图文混排的10大技巧

  1.强化对比 Packdog Wearetelegraph 首先网页首屏中的文字必须具备可读性才行,所以你需要确认文字与背景之间的色彩搭配能让用户看得清楚.当你选择一个暗色调的背景,那么你需要使用白色或者浅色的的文字,而当背景比较素雅的时候,文字可以使用深色,这就是我所说的强化对比. 当然,对比不仅限于色彩,文字同样存在对比.文字与图像相互配合,才能达到出人意表的效果.例如第一个案例,Packdog网站的设计,大图作为背景,用色浓郁,文字则正好相反,轻薄而大小错落.这些对比强烈的元素组合在一

超赞的35个网站的首屏设计

  Yaron Schoen Alex and Regomes Art 4 Web Bei Blog Blue Hat David Jonsson Ayaka Ito Emc2 events Felicetre Hotel Rottnest Hugs For Monsters Living Design No Milk Today PIXELBACKER Priscilla Martins Rareview Web Design Relogik Simple Art somoslaperalim

网站设计分析:用核心-路径法设计页面

中介交易 SEO诊断 淘宝客 云主机 技术大厅 译者注:文章的原名为Designing Screens Using Cores and Paths.本文作者受到城市规划中"交通需求线"的启发,提出了网站设计的"核心-路径法".区别于通常采用的从框架到主页以及导航的方式,"核心-路径法"让设计者从核心内容入手,由内而外来设计.这个打破常规的方法能够在网站中创造最直接的路径,以便用户找到核心内容. 链接原文:http://boxesandarrows