8年电商老兵教你如何通过视觉优化提升页面转化

最近被博主逼着交稿子，而且要求必须是干货！你们谁见过我分享干货？我一直都是听别人分享，我是做裁判的好吗？

说这个其实是想说明——虽然是被逼的，但介于博主淫威，这篇文章绝对是用心写的干货。如果你是电商运营人员，请你一定仔细阅读！因为，这些是身为电商人的必备技能，得之可得马爸爸、强东哥等众大佬青睐，进而提升销售额，迎娶白富美，走上人生巅峰。

之前有很多人问我，在团队架构中运营人员是否应该事无巨细的参与到页面设计的工作中来？运营人员应该在页面设计过程中扮演怎样的角色？什么样的页面才是好的页面，怎样评判好与坏？今天，我就以个人经验结合具体案例来做简要回答：

1、运营人员不需要事无巨细的参与到整个页面设计的全流程环节，只需要做好①解读构建设计原型图、②掌控页面整体设计进度、③强势融入页面初稿审核与优化这三个最关键点即可，这三个点足以保障设计师输出高转化且符合用户体验的活动页面。

2、运营人员在页面设计过程中需要当好产品经理的角色，虽然视觉输出层面涉及的技术内容较少，与做一款二维、三维或多维的互联网产品不同，但相同的点是——都要从用户角度出发——去做符合用户体验的设计输出。

3、优秀的促销页面需要兼顾品牌形象和高转化率两个指标，评判页面好坏尽可能通过数据分析来具象化：数据虽然无法正确定义创意度与美观度，但在电商环境下，保障页面有好的转化是第一要务。且数据能帮助运营及时发现问题，并协同设计师持续对页面进行优化。

接以上个人观点，我今天主要想聊聊“运营人员如何协同视觉设计师共同打造高转化页面”的问题。我会通过页面购物动线设计原理简析，影响用户购买决策因素解读和视觉设计数据化管理三大模块来做具体阐述。

一、购物动线设计

我们知道电商平台的用户消费行为大致分为需求产生-信息筛选-购买决策-下单支付-接触目标-产品体验-售后评价-自主分享几个关键环节，而除去物流和产品体验环节，其他环节都与视觉呈现息息相关。而我们进行页面构图结构设计的初衷基本上可以分为引导用户、呈现内容间的关系、建立情感联系三大功用，我们可以根据消费者购物决策过程结合F型（E型）、Z型和非线性三大类网页浏览习惯，来发掘其中能够为我们所用的一些视觉设计技巧。

其中，F型浏览习惯是长期研究网站可用性的美国著名网站设计师杰柯柏·尼尔森于2006年4月在《眼球轨迹的研究》报告中提出的。F型浏览是有意识的行为——纵向扫描用以对比，横向阅读用以判断——是用户从左向右、从上到下传统阅读习惯在网络上的延伸。大多数用户在浏览信息量较大的页面时，都会习惯于此种浏览轨迹。

用户F型浏览习惯可以提示我们在做页面设计时，要清晰知道左侧及上方要展示的内容一定是最高优先级信息。同时信息展示分级需求和帮助用户更快完成任务这两个前提下，遵循用户F型浏览习惯将信息进行区块划分；加粗、显化能帮助用户提高效率的关键词或者信息，诸如单独成列；考虑可拓展性，诸如支持信息折叠和展开。

在小区域多图片少文本展示主导的内容板块中，大多数用户会呈现Z型浏览轨迹。Z型页面布局今年也非常流行，它凸显了现代网页设计的核心需求，如：层次感，品牌感和交互。Z型布局对于那些要求界面简洁明快，网页间跳转由交互性设计负责实现的网页，是非常适合的。

用户Z型浏览习惯，要求我们输出类似海报的模块性视觉稿中（或简约型站点），所呈现的内容要根据其重要性分清排版上的主次关系。诸如背景要和呈现的内容作对比以便于浏览者能够关注你的内容框架，左上角凸显品牌logo，右上角添加一些链接或交互性元件来帮助浏览者更好的浏览网页，正中间图文混排来确保浏览者的注意力能按照我们设想的Z字线路转移，左下增加要点（内容）并沿着水平轴向右下扩展将浏览者的目光引导到右下的行动点（Button）按钮上。

非线性的浏览轨迹一般常见于视觉焦点较为分散的页面，用户在此类页面中习惯于扫视能引起他们关注的内容，如果从信息的关注程度来排列，从高到低依次是:图片(图形)–数字–文字, 最典型的就是苹果官网。

非线性浏览信息展现的原则遵循越是具象的信息越能够快速获取用户的注意力，越是理解成本低的信息越能够让用户快速决策这两个原则。所以在使用非线性页面布局的时候需要多使用图形唤醒人脑中对于具体实物的场景再现，并通过数字直接的告知用户其代表的价值高低便于用户快速决策。

网页设计视觉体系的测试可以尝试A-B Test或者模糊法，尤其是当你的页面有特别要强调的内容时，成本极低的模糊法非常适用。将自己的页面放在PS里模糊5-10个像素，这样来判断那些你想强调的内容是否仍然能吸引到你的注意力。

二、购买决策因素解读