98
电商大促攻略页设计指南
作为电商平台的运营人员或交互设计师,在每年的大促活动中,都需要设计一个专门的"攻略页"来帮助用户更好地参与活动,享受优惠。这种攻略页不同于普通的资讯页面,它不仅要向用户传达促销信息,还要承担引流、预约、发券、传播等营销目标,同时还存在各种交互操作。
本文将从产品方案阶段基础知识、设计案例讲解、表现模型的可用性评价三个主要部分,对攻略页设计的方法进行全面讲解,希望能为有需求的运营同学和交互同学提供参考。
在开始设计之前,需要明确两个问题:
1. 我们要通过这个产品得到什么?
2. 我们的用户要通过这个产品得到什么?
回答第一个问题,即确定了产品目标。攻略页的产品目标可能包括:曝光大促内容、预约回流、引流、分享传播、发券、成交、品牌识别等。根据每次大促的战略不同,攻略页承担的目标也不一样,需要进行优先级排序。
回答第二个问题,即确定了用户需求。对于攻略页这个小型产品,可以省略用户画像的步骤,直接将"攻略"这一概念对应到用户需求上:在活动中向用户传达活动信息,帮助用户更好地参与活动并达到参与目的。
可以将产品目标和用户需求整合到一张雷达图上,并标注每个目标的重要性,这有助于设计者更好地理解需求。同时,每个目标都应该有一个明确的验收标准,有些直接体现为业务KPI,有些则需要通过用户调查来实现。
根据战略目标,可以提炼出攻略页需要的具体功能,如直接跳转、预约提醒、一键预约、抽奖等。
内容方面,需要收集本次大促会场的数量、各个会场的促销时间节奏和优惠利益点,以及各个营销活动的时间节奏、奖品和玩法。由于在设计阶段可能无法获取太多详细信息,需要选择普适性较高的表现模型来容纳任何类型的信息。
交互设计关注于描述"可能的用户行为",并定义"系统如何配合与响应"这些行为。信息架构主要设计组织分类和导航结构,目的是让用户获得良好的行为引导和操作反馈,高效浏览内容。
在选择表现模型时,要注意它是否符合用户的原有认知。比如"攻略售货机"这个概念就存在一些问题。功能和信息可以细化成具体的交互场景描述,并与表现模型相结合。
界面设计包括基础交互组件的运用、创新交互样式的呈现、抽象信息的视觉符号化表现等。
导航设计指引导用户在各种信息节点之间穿梭的方式,并告知用户在信息架构中的位置。
信息设计包括信息分类和可视化设计,可视化设计最终也会落实为界面元素。
攻略页中常见的功能性交互组件有按钮、弹框、反馈toast等,导航样式通常为页内锚点导航。促销信息的展示常见样式有时间列表、日历图表、品类列表等。
表现层是用户首先注意到的地方,内容、功能和美学在这里汇聚,满足用户的感官感受。
攻略页的表现层涉及视觉感受和听觉感受两个部分。可以参考"感性工学"的方法,收集视觉资料,确定预期的感觉形容词,与视觉设计师进行沟通。同样,动效设计也可以使用形容词来沟通想要的效果。
总的来说,这五个步骤并不是严格的线性流程,需要经常反复。每个阶段的输出文档也可能需要多次修改,需要周知相关人员以保证大家对产品进程理解一致。
下面我来讲述一下京东微信购物入口2017年双11攻略页的设计过程:
2.1 战略关键词及验收标准建立
在常规的攻略页战略目标基础上,加入了"形式创新"作为主要目标。由于无法提前收集到具体的省钱计划,所以把"省钱计划"从目标中去除,只专注于曝光促销节奏和最给力利益点。
2.2 确定功能和部分交互形式,收集促销信息
表现模型选择为"攻略电台",采用短视频配合口播的形式播报促销信息,并配合简版时间轴列表。对促销信息进行主题包装,每个主题一个短视频。
2.3 画交互
整理出4个主要页面:loading页、教导页、主页、简版攻略页,并确定各页面信息的优先级。边画交互稿边理顺逻辑,考虑正常状态和异常状态。
2.4 感知设计
主要工作包括:主页面的视觉元素感知确定、各场景的动画及静态视觉元素感知确定、声音脚本编写和声音风格确定。
2.5 用研问题整理,数据埋点需求整理,开发需求文档
2.6 用户调查总结
主要结果包括:能感知到这是攻略页、来不及完整了解信息、能注意到简版攻略和彩蛋红包等。通过调整动画时长进行了改善。
2.7 产品下线后的数据分析
分析结果表明:有趣的内容形式能拉长用户停留时间,用户对带"攻略"字样的分享感兴趣,用户观看视频的耐性不足,相比于左右按钮,用户更喜欢滑动切换,相比于边看视频边预约,用户更喜欢在简版攻略中一次性预约。
总的来说,选择合适的表现模型是攻略页设计的关键,接下来的交互操作和信息可视化设计就变得较为简单了。
3.1 EXCEL表格
优点:操作简单,适合同质性内容的展示;缺点:趣味性较低,视觉样式单一,页面尾部流量不足。
3.2 页内短视频
优点:趣味性高,信息承载量较大;缺点:信息传达效率低,操作较分散。
3.3 全屏长视频
优点:观赏性和信息承载量高;缺点:用户很难记住具体的促销信息。
3.4 幻灯片
优点:内容承载能力强,可根据需求提高趣味性;缺点:样式较为常见,缺乏新颖性。
3.5 时间轴或类别列表
优点:信息承载量高,操作简单;缺点:趣味性较低,难以融入营销玩法。
3.6 长海报
优点:信息传达效率高,可提高趣味性;缺点:视觉样式同质性高,尾部流量风险。
不同形式各有优缺点,需根据项目情况选择合适的表现模型,同时也要不断探索新的创意形式。
