AnyForWeb告诉你怎样建设一个漂亮实用的电子商务首屏

无需加好友免费技术支持

首屏（above the fold）就是指不翻转web用户能够看见网页页面屏幕。

在电商网站中，用户最急需解决是指二点：引人注目的商品或服务店铺，及其网址能够给他一种信赖感。信赖必须积淀，因而，各种各样宣传营销信息已经成为电商第一屏显示的不二之选。

一个能吸引眼球滞留的第一个屏幕一定会给网址带来更多用户和益处，AnyForWeb告诉你怎样规划建设一个漂亮实用的电子商务首屏。

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.合乎视觉效果偏好的图文排版

大量单一文字或图片会使用户感觉无聊，而图型混和排能够很好地填补这一点。图型混和排的方式有很多种，如颜色对比、文字或图片变大等，尽可能分散化合理布局，使用户的目光成功迁移。不管采用哪一种方式，都必须要保证具体内容的易读性。

第一个屏幕不符大部分人的用户习惯。当用户进到电商网站时，她们都会先被图片深深吸引。没有多少人想要一字一句地阅读文章大文章段落，因而详细说明不适宜放到第一个屏幕上。

唯品会首屏的文图组合恰如其分，简单高清大图和一些短句子紧密联系，图片有利于用户了解，文本简约，关键确立。

汇总：

第一个屏幕是吸引住用户的关键所在方式。很多网址忽视了第一个屏幕，造成了一些用户感受难题。与一般的官网对比，电商网站在特性上更加独特。电商的第一个屏幕需要以商户的目地顺从用户的日常用户习惯，而非毫无目的将第一个屏幕变为状态栏。

正在做设计工作以前，室内设计师不妨从用户的视角思索，或许会有不一样的收获。