发布时间：2020-3-30 分类： 行业资讯
本文将从交互设计的角度讨论网易严格选择的营销线从0到1的设计过程。
无论电子商务产品的模式如何，其实质都是商品的销售。营销活动是销售商品不可或缺的方式，不仅影响GMV，而且是获取用户的重要手段。
在消费升级的时代，消费者对产品的质量和服务产品有了更高的追求;作为电子商务产品核心功能的营销线贯穿于从用户浏览到订购的整个过程。从设计的角度来看，让我们来谈谈网易严格挑选的营销线从0到1的设计过程。
营销线的概念
从广义上讲，营销是将商家的愿望作为活动包装，促进消费者消费的手段。大多数人的概念也是随处可见的促销信息，如超市折扣活动，淘宝双11大促，朋友圈爆款H5等。
对于电子商务，营销线是一个模块化系统，由一系列与营销相关的功能组成。不同的产品对营销线有不同的定义。以严格选择为例，现有产品特征分为：
选择营销热线的设计背景
经过严格的选线，以其简单的品牌色调吸引了众多忠实用户。然而，随着产品的不断发展和用户的快速增长，原有的简单功能框架已不能满足需求，用户反馈的许多需求也需要解决。例如：
特殊时段的促销活动
高粘度用户的激励措施
有关最大可用优惠，运输和订购的提示和指南
针对补充和替代产品的个性化建议
……
无论是从业务角度还是用户投诉，营销线都是未来优化目标的重要组成部分，不仅丰富了产品的运营维度，还有助于推动新的促销和增加客户订单交易量和回购率。
那么营销线应该如何设计呢？
分析营销线的设计过程
1.优化购物路径
严格选择原始流程和功能相对较薄，用户只有浏览和订购等基本操作，因此购物路径经过优化和补充，如下图所示：
（购物路径优化图）
可以看出，每个节点都增加了营销功能。虽然用户的购物路径相对延伸，但用户订单的时间和决策成本却增加了，但是当营销线定位于提供更好的服务时，购物路径会缩短，这不是我们的最终目标，而是应该改善购物效率和转换率，在满足各种用户需求的同时改善产品的用户体验。
2.明确设计方向
功能逻辑上面向业务，保持严格选择自己的品牌色调，同时确保顺畅高效的购物流程;
设计的基本方向简单易用，可以从以下三点反映出来：
风格一致性
交互一致性
流程平稳性
3.设置促销工具
促销工具是最常见的营销方式之一。丰富的游戏风格多种多样。配置的营销活动可以贯穿C侧的整个购物流程。不同页面的逻辑和风格也不同。
产品详情页面：
详细页面是用户体验产品信息和优惠的最直观的地方，因此有必要清楚，明确地展示不同营销活动的特征。现有的营销模块主要体现在以下三个标记区域：
（WEB产品详细页面）
区域1:基于单价可变价格工具。它通过不同的风格强调时间和价格之间的紧密关系，创造一种紧迫感，并促使用户尽快下订单;如图所示，价格变化（商品在一段时间内每天降低折扣价格），因为它涵盖了广泛的时间范围，它被设计为日历风格，以提高用户的感知价格变化的概念;折叠支持超过五天，并且当天的活动价格做联动显示，这样当天的价格总是在第一个屏幕的顶部保持可见。
区域2：主要使用多种商品/全场工具。通过标签的强化指导，活动的宣传口号依次展示;默认情况下，最多显示两个，超出折叠过程，并避免过多信息干扰用户。
区域3：包装的逻辑和样式（以组合模式出售）更复杂。它不适合放置在顶部区域。该图放置在产品图下方，推荐模块共享空间以确保用户可以在一个屏幕内查看活动信息。风格兼容，可扩展，可清晰，清晰地显示多组，便于后期优化。
从上图可以看出，此页面上的号召性用语按钮强调“添加到购物车”，因为购物车可以进行更多的营销活动，并支持个性化推荐和订购等功能，这不仅有助于提升客人。单价也便于用户进行单笔订单和单笔订单交货，因此应引导用户进行购物车操作;参考其他电子商务，目前的商业页面CTA按钮也更适合购买。
（多电子商务平台的商业页面订购按钮）
应设计CTA按钮以确保唯一性和一致性。例如，只允许购买包和单页。很多时候，给用户太多选择会适得其反。
购物车页面：
购物车可以说是营销线最重要的载体。它满足产品查看，产品管理，营销支持和金额计算等基本功能。添加促销工具后，原始购物车样式也相应调整。
以最基本的礼物为例（当用户购买指定数量/件/款式时，可以获得相应的礼品/优惠券），购物车中的完整礼品活动如下：
（WEB购物车2.0版）
在正常情况下，整个营销活动模块包含促销标语，礼品和活动产品;促销口号在活动模块的划分和呈现中发挥着重要作用，不仅在视觉上突出，而且在信息传递方面也简洁，只是突出显示当前用户的当前活动状态和满足目标所需的条件引导用户检查或关闭订单，动态计算梯形图阈值，并降低用户理解和计算的成本。
如果口号中包含多个字段，则在满足齿轮条件之前和之后样式会有所不同：
完整的礼物还支持梯形图文件和整个事件。此时，细分样式是必需的：
除了口号之外，还调整了整个活动模块的视觉样式：活动产品组具有背景颜色，无效产品组显示为灰色并显示在底部，与常见产品组不同确保用户信息浏览和理解的效率;
在交互过程中添加了以下优化，以确保用户付款流程的流畅性和良好的可操作性：
允许用户在购物车中切换sku，降低用户页面跳转和替换操作的成本
当条件满足时，礼品将自动显示，减少用户遗漏
订单操作栏从底部到浮动驻留显示器进行了优化，并且字段的重新布局缩短了高度并增强了操作的便利性
4.调整多端解决方案：
营销活动涉及很多目的，移动终端的交互方式和操作逻辑与WEB端的交互方式和操作逻辑有很大不同。考虑到屏幕尺寸的适应性和操作的平滑性，界面的界面布局要求将更高，并且用户最重要的信息应该在有限的空间中暴露。
拿一个栗子，下图显示APP购物车的正常和编辑风格，口号标语最小化：只显示下一个渐变的引导文本，条目被削弱，用户点击通过箭头。 。
（APP购物车2.0版）
所有字段在全局布局中都具有优先级。除了产品的基本信息之外，优先活动切换的优先级更高，因此低频调整和SKU切换功能被折叠，并且仅在编辑状态下可见。
在编辑状态下，用户无法收集礼物，选择活动，跳转制作单个页面，并且条目和热区具有相应的隐藏处理，因此操作路径和用户行为可以对应，减少无意义的跳转和逻辑判断。它还可以避免用户的操作疑惑和错误。
（注：以上图片显示的是以前的稿件，在线购物车是最新的修改方式）
以上仅列出了一些促销工具。其他类似的促销工具可以在现有的基础上进行扩展（全面减少，全面折扣，梯度价格—限时购买，特价），以保持促销工具的整体一致性。
随着越来越多的促销工具，这个过程将变得越来越复杂，它将涉及互斥和共享，以及前端后端限制和合作。因此，在设计过程中，不仅要考虑当前期间推广工具的逻辑风格，还要考虑到后期的兼容性扩展。
改善标签价格体系
营销线的丰富性将不可避免地导致商品价格的变化。不同的营销方案中会有多个价格和多个标签。如何在不同页面上显示以吸引用户而不会导致用户认知偏差？而作为用户的标签如何掌握此显示的程度，以获得最直观的事件指南？
以APP为例，价格和标签在不同页面上的处理方式不同：
（APP页面，商业页面，购物车）
在满足业务需求的同时尽可能简化页面样式：
价格：默认是采取用户可以享受的最小sku价格显示;作为重要营销载体的详细信息页面需要显示全部价格信息—活动价格和原价，但列表页面，购物车是隐藏的;
标签：针对不同页面特征的不同处理，不仅可以控制印象数，还可以灵活定位和风格。例如，如果购物车页面空间有限，则隐藏销售标签，并将活动标签优化为文本标签，并将产品名称放在之前;
让我们改进标签的显示逻辑：
（一些主要标签样式）
现有标签的数量为20+，因此标签根据标签属性进行分类，内部类别根据服务优先级进行排序，同一产品的显示数量受到控制，更重要的标签是优先暴露以提高易读性。
在视觉上，标签样式是统一的。所有活动标签都在相同的颜色系统中。销售标签根据系统和手动配置进行细分。库存标签很特别。购物车地图上的标记取决于产品的不同状态。明显的区别。
此外，还有各种类型的标签，例如多色可选/原始制造。此外，随着函数的增加，需要考虑更多的优化样式。我们也在进行连续迭代优化。
结论
营销线具有复杂的功能。由于业务调整和功能增加，在线版本已多次迭代。在实际的项目登陆过程中会遇到很多问题。本文空间有限，只是在早期阶段对项目进行了概述。设计经验：
设计形式遵循功能——营销路线应该面向企业的需求，避免新颖而美观但无法解决实际问题的设计，如何提高产品转化率是设计师需要关注的互动。
易于使用且易于使用为主要目标——营销活动往往信息量大，并且由于时间和操作等因素而易于频繁更换，因此尽量保持风格简洁，逻辑清晰，以便用户有效浏览操作，减少购物。困惑和焦虑。
以用户为中心——深入挖掘用户行为习惯，从用户的角度真实分析购物过程中可能出现的问题，考虑多端和多场景的兼容性，确保每个联系人都能得到及时有效的反馈。在满足业务需求的同时保持良好的用户体验。
更多营销热线，请继续关注我们，欢迎大家交流和讨论:-D。
作者：马译天，网易精心挑选互动设计师
本文来自大家都是产品经理合作媒体@网易UEDC，作者@麻译天
该地图来自unsplash，基于CC0协议
