那些你不知道的电商排版“套路”

分类：行业资讯阅读：12700

2016年07月20日 00:00

一个好的电商页面的排版及布局设计到底是什么样的？设计明明做得辣么美辣么高大上，网站的流量和点击量咋就没有上去呢？在这个电商崛起的时代里，设计不单纯是艺术，它更意味着用户、产品和消费。“不懂用户的策划不是一个好的设计”

很多设计师在做设计的时候常常有这样的困惑：我的设计明明做得辣么美辣么高大上，网站的流量和点击量咋就没有上去呢？

在讨论这个问题前，我要先问大家三个问题：你是否花心思了解过用户的消费行为？是否有从用户的角度来思考你的设计？是否考虑过你的设计如何为网站带来更大的经济效益？在这个电商崛起的时代里，设计不单纯是艺术，它更意味着用户、产品和消费。“不懂用户的策划不是一个好的设计”，今天咱们就从用户角度出发来讨论一下电商页面的排版及布局设计问题吧。

整体模块排布设计

首先，我们要了解用户的浏览路径，所谓知己知彼方能百战不殆，了解用户的行为习惯，就能对症下药啦。用户在打开一个网页后，眼睛首先是水平移动的，常常是扫过网页内容的最上半部分，然后目光略微下移，但扫描的区域要比第一范畴更短一点，接着用户会朝网页左边的部分进行垂直扫描，通常该举动很慢而且很有系统性，这种宛如英文字母F形状的浏览模式被称为尼尔森的F型网页浏览模式。

尼尔森的F型网页浏览模式

在了解了用户的浏览习惯后，我们就要规划我们的内容模块了。如今的店铺模块可谓是多种多样，但并不是每个模块都要原封不动地添加上去，用户的视觉范围有限，应该有选择性地展示用户感兴趣的内容。如果盲目堆砌模块会导致网页页面加载速度变慢，甚至卡机。再者，如果用户找不到自己想要的东西，就不利于用户的消费体验，进而影响了产品的销售。合理地安排模块的布局，能打造一个高效的电子商务平台，不断保持竞争力，从而实现企业和用户价值最大化。

根据以上我们的调查和分析，下一步就是把各个模块归位了。对于电商网页来说，用户的浏览轨迹可能呈现F、E、Z等形状，然而网页的最上端部分（即页面1/3屏的高度）依旧是视觉浏览的重中之重，销售活动、优惠信息要放在最醒目的位置，可将banner图在该位置轮番滚动播放。导航路径应条理有序，使用户可以从一个页面毫不费力地跳转到另一个页面，一般采取左侧分类导航的设计。

页面上还应有搜索工具，使买家可以在几秒钟之内找到合适的产品。页面中的每个区域都有它的价值和意义，可能只是用户视觉的感知程度不同而已，只要做好布局，页面死角也可以变得不存在。此外还可以在页面的页脚区为忠实客户推出“推荐产品”服务，通过跟踪他们的足迹，为其推荐可能喜欢的产品，以此增加交易量，以此留住回头客。也可以在页头、中间、页尾添加或采用悬挂式客服列表，方便卖家随时咨询等等。

整体布局设计

将各个模块填充好了之后，要考虑网页的整体布局，在视觉设计上要达到非常和谐的统一，在这里说几点小诀窍：

首先适当的留白，给内容足够的呼吸空间。各个页面的图文间距都控制得非常好，页面整体感觉更通透，衬托出信息内容。这种留白，给用户思考和想象的空间，在引导用户视觉和创造流畅的视觉感受方面却是至关重要的。

其次，平衡、对齐、对比是极简主义的三大要领，在优秀的电商网站中，这方面都做的很好，在平衡的把握上，信息的主次对比非常明显，不只是颜色上，还有大小上，让用户在第一时间感知重要信息。图片的位置，大小的控制，人物的视觉方向、每张banner的文字对齐方式都是根据整体页面的平衡感来设定，同时考虑整体的对齐流。

还有就是要形成一种节奏感，视觉元素的造型、大小、色彩分布符合一定的比例关系，就能在视觉上产生类似于音乐的节奏感。主题色块按照一定的间隔自上而下分布，在起到区分信息流的同时，色块间距离和大小的不同也形成了不同的波长和轻重的节奏感。

常见排版方式

电商中的商品列表页也被称为商品聚合页，是为了能为消费者提供更完善的商品种类选择。这一类页面的最大特点就是信息量大、图片多，所以布局是否清晰合理，以及如何尽可能的压缩内容设计的重点部分。

目前，国内电商网站的商品列表页常见表现形式有三种，分别是行列排列、瀑布流和特别款突出。这三种形式各有特点，设计师应该根据商品特色选择最合适的表现手法。如果商品的种类数量多且繁杂，规规整整的行列排版方式更利于用户找到浏览规律；瀑布流的形式更多的在流行时尚领域的电商中使用；特别款突出的方式可以为一些节日活动的宣传促销而准备。具体可参考以下案例：

行列排列

瀑布流

特别款突出

Banner中的文字排版

设计banner可能并不难，但是设计一个称职又有视觉冲击力的banner，还是需要经验积累的。设计师应该力求自己设计的每个banner都经得起多方面的考验，在这个小方块里真正的做到有板有眼才行。接下来，我就跟大家分享一些关于banner文字设计的一些技巧。

设计banner时候，千万不要不加思索的就把一行文字硬生生的放上去，那会让你的banner直接显得呆板木讷。不妨试着做一些文字排列混搭的设计，比如大小和颜色的混搭、排列组合的混搭、不同字体之间的混搭以及中英文字体的混搭，会有意想不到的效果。

有时候设计banner，根据背景构图不同或者我们想要更有视觉冲击力表现文字内容时，我们可以尝试对文字进行倾斜或斜切透视等处理来打破方正有矩的“稳定的构图”，让画面更有动感和层次感。

考虑到有些时候背景颜色比较复杂，也可能背景有比较多产品等元素，这时我们需要让文字放在一个相对独立的区域或色块中，如果没有相对独立的区域，我们就要自己设计创造出这个独立区域和色块，这样更便于文字阅读，也能让文字的视觉焦点加强。

详情页排版

详情页的设计说简单也简单，说难也难，难就难在能否卖出去。制作一张优秀的详情页，大概要用60%的时间去调查构思，确定方向，然后用40%的时间去设计优化。

首先要意识到产品详情页是提高转化率的入口，其作用是激发顾客的消费欲望，树立顾客对店铺的信任感，打消顾客的消费疑虑，从而促使顾客下单。可以利用详情页上半部分诉说产品价值，后半部分培养顾客的消费信任感。对于消费信任感不光通过各种证书，品牌认证的图片来树立。使用正确的颜色，字体，还有排版结构，这些对赢得顾客消费信任感也会起到重要的作用。详情页每一块组成都有它的价值，都要经过仔细的推敲和设计。关于详情页整体框架排序可参考下图：