编辑导语：如何让运营活动更富特点，在不引起用户反感的情况下、让用户提升活动参与度、进而推动有效增长？故事化元素的添加也许可以在一定程度上丰富用户运营活动体验。本篇文章里，作者结合实际案例，就运营互动如何增加故事化设计元素做了梳理，一起来看一下。

本文将围绕运营活动，讲讲如何通过在运营互动玩法中尝试添加故事化设计要素，以及设计过程中通过新兴工具落地方案、与制造创新造梗、与社区进行联动，为活动提供新的增长方向。

一、运营活动故事化设计尝试

腾讯动漫发展至今，已是头部的漫画内容综合型平台；经过几次体验上的转型，已然解决用户消费场景的转变（移动端转型）与如何找到更好的内容（综合平台转型）；完整且有效地促进产品在初始期与发展期当中用户体验的提升。

面对接下来成熟期的增长挑战；现阶段选择精细化内容运营的策略方向；更加高效发挥自身大IP内容优势，转化IP流量的核心价值。而运营活动是其中最为关键且有效的手段。

我们经过长期运营活动的设计积累后，发现了现阶段漫画领域竞品与我们都存在的一些体验问题：比如像B站经常运用营收向的活动，而且次数反复，容易让大部分用户形成一种逆反心理，觉得老是在圈钱。

还有像快看漫画喜欢发挥自身社区活跃的优势，运用社区任务机制的活动，但形式框架都比较通俗常见，多办几次容易让用户有疲劳感，数据效果的天花板也易可见。

面对这样的活动体验问题，我们尝试突破。使用活动故事化为契机点，抓住数据增长的机会点。

讲好一个故事前，我们要了解讲给“谁”听？目标用户是谁？

根据以往用户调研总结，现平台用户画像分为四种类型：题材型、消遣型、拓展型、成熟型。针对这些用户运营策略上，选择二八定律，希望通过20%成熟型用户的目标行为路径提升80%的数据增长。

基于这样的背景，交互会基于活动玩法的特性与主流程体验，提炼出故事化的推导步骤。主要分为三个步骤：

第一，基于成熟用户在活动不同周期时候的互动心理特点，挖掘可故事化的落脚点；针对落脚点的模块与体验方式制定相对应的故事化设计方案；

第二，在推动整体玩法故事化的过程中；使用有效的创新方法与工具，保障整体体验方案能有效的落地实现；

第三，在整体故事化高潮节点或结尾处制造一些反转的话题梗，引发用户参与讨论，增加活动认知的强度与参与黏性。

二、故事化设计的落脚点提炼

接下来我将以暑期泳装大作战这个活动为例子，阐述一下具体设计内容。

首先根据活动周期的不同的时间节点罗列出玩法可故事化的元素（例如：活动沉淀期的答题互动的空间代入感）与成熟型用户的互动心理（例如：营造答题的紧张气氛），再以与需求方共同确定活动目标（促进平台内部活跃）为落脚点的标准。

提炼出可优化的设计锚点。通过寻找锚点的共性，进一步系统化的制定优化策略。人物魅力运用在AVG游戏的体验空间里，可发展出完整的剧情互动线，可制造名场面的创新反转，促进用户活跃。

三、设计过程中的执行小窍门

故事化应用的场景

AVG游戏中最重要互动体验表达就是游戏人物的表情与动作，可传达出题人的喜怒哀乐，更好地加强玩法的沉浸式感受与注意力聚焦。一个大型活动有大量人物表达页面，我们如果用常规的AE制作动效素材，成本大，面对的挑战也很大。当我们每每遇到困难就会想到使用一些创新工具，来提高设计动效素材的生产效率。

live2D (辅助批量生产的软件工具）

live2D的界面

live2D应用效果live2D是日本cybernoids公司出品一款通过扭曲像素位置营造出伪3D空间感的二维动画软件。整体效果可满足细微的表情变化，最可贵的是可下载或定制模板来批量生产。例如：情绪中“喜”的表达模板可套用相对应的素材页面。当然这种人工智能的骨骼定位逻辑会有小偏差，可通过手动调整。

四、故事化设计中的创新造梗

情绪铺垫的流程

交互反馈的递进关系通过故事剧情的推进，用户闯关达到高潮阶段的时候，需要为反转造梗进行铺垫。用户通过交互操作与体验反馈，递进式把用户情绪推动到高潮，就像追剧直接到大结局的那种期待感。例如用户酷炫的打斗招数伴随着打BOSS逐渐减少血量所表现的虚弱视觉感，这种形成反差感，可引领用户持续玩下来去的心理反射。

高潮的分镜头用户在通关后会有完整的造梗剧情过场。

首先通过一个关开门的蒙太奇的过场分镜头，增加仪式感。再次展露带有面具的boss的互动对白。

最后，面具掉落，露出用户自身的头像。转至黑幕显示一段意味深长的文案——“与恶龙缠斗过久，自身亦成为恶龙；当你凝视着深渊时，深渊也凝视着你”（尼采《善恶的彼岸》）。传达一种少年漫画的核心价值观：你要战胜自己的心魔，成为自己的英雄。

这种符合用户内容认知的造梗，很容易形成情感共鸣，可以让更多成熟型用户形成活跃讨论。

这次我们在运营活动设计上的故事化尝试总结出一套行之有效的操作性方法：探索＞推动＞造梗。为我们未来更好更精准的设计活动互动玩法提供了有效的方向，未来规划可在重点IP联动活动以及节日的运营活动进行复用。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：人人都是产品经理   作者：腾讯设计

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

项目背景

站内攻略作为每年大促玩法的预告者，承担了向用户输出平台节奏、吸引用户预约回流的重要任务。 不同于着眼于转化的卖货会场，或是着眼于分享的互动H5，如何能让用户更好地了解京东的大促平台玩法，便捷用户的购物旅程，就成为了它的主要任务。

设计思路&设计执行

1. 产品化思路与定位

在开始设计之前，我们对比了2017年至今的所有攻略页面，发现往年页面存在缺乏延续性、定位不清晰的问题。作为大促信息传达的先行军，往期的攻略反而更多承担了转化型的会场类任务，对于优惠信息的预告往往是轻描淡写地用文案带过。而每一次的攻略样式都是「船新版本」，也产生了较大的人力消耗。

然而尽管攻略的任务是信息传递，但作为整体大促链路中的一环，它终究还是需要为大盘GMV服务。那么应该如何平衡二者，以达成更好的数据效果呢？

首先，从攻略存在的核心意义——助力集团大盘GMV的提升出发，它需要达成以下几个目标：

• 让用户愿意逛：让用户明白京东大促的节奏和玩法、并且在了解后有意愿参与；
• 让用户愿意买：提供能提升用户购物欲望的决策信息；
• 让用户养成习惯：当攻略持续为用户产生了用户价值后，就可以养成用户「来京东购物前先看攻略」的心智，从而更好地引导用户进行操作。

然而纵观大促会场全局，许多卖货会场也可以达成这些目标，那么站内攻略和它们相比有具有哪些差异性呢？我们可以从对内和对外两个角度进行分析：

对内差异化：从站内来看，「我的」和「AI助手」也都承担了向用户进行活动会场推荐的功能，但「我的」是围绕用户已有的操作展开管理和推荐，是绝对精准的量身打造，「AI助手」是理性层级下的导购，需要用户先产生「想法」，再指导操作；站内攻略则是引导用户未来行为的指导和说明，先组织、筛选促销信息，再使用户产生「想法」，从而产生操作，有一定「逛」的性质。

对外差异化：从站外来看，站内攻略的定位与「什么值得买」有些近似。相比之下，站内攻略的优势则在于它能更紧密地围绕京东用户的消费习惯进行定制化推荐，和近年来以长图为主的阿里系攻略相比，则提供了更为丰富的操作（如预约），一定程度上能减少用户的记忆成本。

基于以上基础，我们对往年攻略的用户画像进行分析，并对攻略进行了横向与纵向的对比，总结出了攻略作为一个长线产品视角下的迭代思路，并根据攻略的特性制定了分时期的北极星指标：提升预热、专场期的预约加购率、提升全时期的活动分流以及提升高潮期的商品转化。那么我们又是如何根据这三个指标来拆解细分策略的呢？

2. 提升预约加购——日历优化

交互层面：动效辅助内容聚焦

作为站内优惠信息的聚集地，如何清晰简洁传达内容，一直是交互侧需要重点思考解决的难题。于是在本次攻略中，我们对比了往期攻略中的预告样式，在数据表现较好的日历样式基础上，对页面的层级进行了进一步的简化，配合动效的引导操作，以便用户能够更聚焦地浏览日历部分的核心内容：

视觉层面：视觉层级清晰

经过对交互稿的分析理解，以下3个痛点，对此次页面的信息层级和画面舒适度是一个考验：

• 内容信息较多：为了提升预约吸引力，这次在单日预告内露出了更多的BI单品，同时增加了预约瓜分京豆的玩法，所以这次首屏的内容信息和双11相较而言，是有所增的。
• 日历展示状态增加：日历尝试了新的交互样式，有展开和收起两种状态。
• 卡片颜色多：为了让用户感知到每日主题的差异，日历卡片的颜色会根据每日主会场的主题颜色相呼应。

那么如何通过视觉的手段，让视觉层级清晰展示且画面颜色和谐呢？下面从最基础的视觉构成里的构图和色彩两方面进行分析并落地：

「构 图」整体用方形进行构图和内容分割

方形是最简洁的几何形态，对于信息量较大的页面，方形会让设计空间利用最大化，并且可以排除形态上的干扰，结构清晰的展示信息内容，让用户通顺的浏览页面。

简化视觉层级

在交互稿上，瓜分京豆模块和日历选择器两部分内容划分较为明显，但所留出的空间，会增加视觉层级的复杂度。为了尽量简化视觉层级，找交互同学商量是否可以在保持内容划分清晰的情况下，把瓜分京豆模块背景和日历选择器拉通，同时，也咨询了前端同学，视觉这样处理在实现上是否会有问题。最终，三方达成一致后，采用了视觉最终呈现的方案。

「颜 色」

为了更好的覆盖618全时期，挑选了色环上三种距离基本相等的色彩进行从暖色到冷色的色相渐变。

• 头图运用了较为清透的黄色至红色的暖色渐变，适用于618全时期，体现了大促的热闹氛围；
• 头图过渡到日历选择器，则是运用了从头图的红色渐变至紫蓝色，这样既能让选择器的文字信息清晰识别，也能将头图和日历选择器两部分内容进行自然的分割，减少了线面分割所带来的复杂层级关系；
• 瓜分京豆模块的颜色则选用了偏中性的黄色，这样一来和每日不同颜色的卡片搭配和谐，二来和头图有所呼应，整体画面色彩保持平衡。

前端层面：复杂交互动画与跨平台功能适配

关于选中移动动画

日历选中动画部分我们需要实现的一种跟随移动的效果，那么我们需要考虑的是在当前日期是有可能去到任何一个可点击日期的位置。

实现方式：

用纯css方式控制，方块使用背景图的方式实现，通过控制类名移动位置，比如.move-[start]-[end]，缺点：需要写好每个日期对应到其它日期的位置，不够灵活

用js控制。把日期看成一个棋盘格子，每个格子都占相同的坑位大小。我们把当前日期看作a，移动至日期看作b。假设把a移动至b的横向占格子数设为n，把a移动至b的纵向占格子数设为m。那么n=当前下标 % 行个数，m=当前下标 / 行个数取整。那么a移动到b的x = w * n，y = h * m (w为格子宽度，h为格子高度)。

注：宽度获取使用block.getBoundingClientRect().width；clientWidth会忽略小数位

• 关于展开收起动画，半圆实现：
• 可以使用clip-path
• 我的实现方法为使用border-radius+height实现，半圆的弧度使用两倍大圆取其部分圆弧显示，展开收起实现使用高度修改：在低端机会略卡，因为每次使用会引起页面重绘（有待探讨优化）
• 使用svg，canvas等
• 关于app预约，小程序预约
• app预约采用的是京东app日历预约，用户开启手机日历（写入）权限后，预约就会写入用户的手机日历，在活动开始前会以日历提醒的方式提醒用户。
• 小程序预约走的是微信大账号提醒流程，预约需要分三步进行：预约-> 授权 -> 上报授权状态。进行完上述步骤后，用户会在活动开始前10分钟左右通过大账号（已关注用户）或服务通知（未关注用户）收到消息

2. 提升活动分流——福利秘籍

提升筛选效率

福利秘籍专区作为大促期间福利互动活动的集中地，承担了为互动分流，为用户提供快速查找筛选可参与活动的任务。而互动往往存在较为复杂的规则，对用户而言存在较高的理解成本。此次除了集团主推的互动，又增加了对于事业部互动的展示，对于保证页面展示效率也带来了一定的挑战。通过对往期迭代内容进行数据对比，同时参考其余会场对于多信息展示的策略，最终我们采用了BI展示，同时对用户弱相关的互动卡片进行折叠的方式提升页面的效率；而在卡片的信息展示上，选择重点突出活动可得的利益点，让用户一眼即可筛选出对自己最有价值的互动进行参与。

视觉创新优化

虽然运营同学对双11的秘籍视觉比较认可，但是仍然提出了希望有秘籍形式感的同时，能进行视觉创新的诉求。经思考后，我认为运营的诉求无法满足：

• 视觉风格和618大促整体风格保持统一；
• 能体现秘籍感的视觉表现手法有限；
• 视觉创新的前提是要保证信息清晰的展示给用户；

于是带着以上3点找运营同学再次沟通清楚对方的真正诉求到底是什么，经沟通，对方最重要的诉求是希望有视觉创新，秘籍形式感诉求较弱。接下来针对重要诉求集中发力，并结合此次618视觉概念（光点、光线），找到了视觉创新优化的解决方案，并和运营达成了一致。

「构图」

上面提到了方形可以排除形态上的干扰，考虑到活动入口图数量较多，且氛围图不可把控，左侧以方形构成，右侧结合了618主图形——光线，把文字和氛围图分开，让各部分信息更加聚焦。

「颜色」

结合双11用研结论——活动入口主题不够鲜明，除了活动文案类似的因素，我认为颜色也是影响因素之一。所以这次在上部分平台级活动入口，采用了2种暖色的近似色交替构成，下部分事业部活动入口，统一采用了1种和上部分近似色的冷色构成；单个活动入口，文字和氛围图的背景进行统一色相的明暗深浅变化。从整体楼层来看，从上至下，由暖至冷，不仅活动主题有了明显差异化，而且较好的过渡到下一楼层；从单个活动入口来看，左右深浅颜色的划分，不仅对不可把控的氛围图适应性更强，且主题文案更加明显。

「表现形式」

整体页面在按钮的部分采用新拟态风格，在保证吸引力的同时，也减少了颜色过多的问题，减少了信息层级。新拟态风格更适合工具功能类产品，本次只尝试使用在了页面的按钮部分，风格上也会有眼前一亮的感觉。

3. 提升商品转化——今日导购

分时期变化的楼层策略

针对高潮期的转化指标，我们参考了往期的迭代经验，发现随着大促节奏的渐进，临近高潮期时，页面的转化模块表现往往有较大的提升。于是在本次设计中，我们针对这个数据表现，对楼层顺序进行了动态调整，高潮期将转化楼层前置，以更好地匹配不同时期的用户需求。

同时根据往期的楼层数据表现，本次我们也延续保留了数据表现较好的模块类型，例如增加了榜单的露出，以辅助页面目标的达成（以下数据来自于lan.jd.com)。

楼层整体化、内容吸引力包装

基于之前今日楼层视觉整体感较弱的问题，这次楼层背景色和页面背景色有所区分，楼层内模块颜色和楼层背景色同色，较往期此楼层来看更加整体化，又能让页面层级更加清晰。

其中，针对这次品牌入口和上海美影厂IP形象结合的策略，为了提升用户吸引力，且不干扰信息内容的前提下，视觉上采用了和用户共情，且和IP形象契合的元素——老电视机，同时按钮文案也进行场景契合的包装，增加趣味性。

项目成果

与往期站内攻略对比，本次618站内攻略主要在以下方面有较为明显的提升：

品牌视觉契合及创新

在延续主视觉元素的同时，视觉风格有所创新，在页面的按钮部分采用新拟态风格，减少颜色过多而导致的复杂信息层级问题，同时也保证了视觉吸引力

视觉精致程度

整体页面颜色较有节奏，且更加清透舒适

元素细节（打光、投影等）的刻画更加精致

信息层级清晰度

通过对颜色的合理规划，有主次的文字信息，让单个楼层更整体化，各楼层模块划分清晰

数据表现

根据上线后的表现，本次福利互动模块的点击数据获得了显著的提升，今日模块的点击转化率相比往年也获得了成倍的增长，页面目标基本达成。

项目沉淀

1. 好的经验

针对攻略这类规律性存在的活动会场，我们可以针对其主要的功能组成模块进行数据导向的设计与迭代，来更好地指导后续的优化方向；同时也可以辅助业务侧更加清晰地规划会场定位，提升页面对用户以及大促的整体价值。

2. 如何沟通

Q：需求方一味的追求热闹复杂的视觉样式创新，该怎么办？

A：热闹的氛围对于大促活动来说固然非常重要，但也要根据页面类型去判断（重氛围or重信息)。设计师要倾听诉求并搞清诉求的根本原因，并用专业的角度判断诉求的合理性，以及价值大与否。热闹氛围塑造的前提是不能影响信息的识别，否则就会本末倒置，并且热闹氛围的视觉样式要和该场景逻辑匹配 。

3. 待优化项

虽然本次页面大部分模块基于产品化的思路迭代均获得了一定的正向反馈，但产品的发展往往是个曲折上升的过程，活动会场也不例外。结合上线后反馈，站内攻略依然有以下可优化点：

日历操作体验

根据用研结果显示，日历操作体验问题反馈较多，日历模块为滑动改变日期，而非点击跳转日期的操作方式，与用户的认知不符，且首屏动效较复杂，在安卓机型上体验较为卡顿。后续如有同样的交互方式，需优化操作体验。

福利互动入口主题文案

根据用研反馈，主题文案描述不直观，不易理解，导致用户容易滑过整个模块。建议后续活动主题能简单清晰的描述优惠和玩法。

综上，未来站内攻略需要进一步探索主要功能模块对用户的价值，探索其在大促链路中独特的差异性；同时保留高用户价值模块并持续优化，以求达到更好的用户体验，用设计策略为用户与业务带来更多的价值。

文章来源：优设    作者：JellyDesign

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务