案例复盘：起点读书 515 周年庆设计总结

本文主要是关于起点读书 515 周年活动设计的一个总结，相信会对你有帮助，一起来看看~

活动背景

515周年庆是起点每年例行的大型运营活动。今年采用了游戏形式的活动玩法，通过职业角色形象、任务策划、排行榜等不同维度来加强作者与读者的互动、作品与用户的联系，打造了全新的「 515 催更者联盟」活动。

活动的故事背景为用户可选择成为 赏金先知 、 时空游侠 或 典藏馆长 三个神圣职业，通过不断历练自身战力值，联合对抗起点大陆中异军突起的断更兽，保护作家写作环境与网络文学世界的和平，并可获得丰富的奖励。

交互设计

515活动页面逻辑

515 活动页面逻辑如上图，共 14 个主要页面。经过多次活动的沉淀，此次活动主 Tab 精简为三个，分别为一个入口聚合页及二个不同维度的榜单页：

1. 【我的主页】聚合了职业形象、每日任务、我的道具卡牌、boss决战入口的主页面；
2. 【战队擂台】作品战队的战力值三榜单;
3. 【职业争霸】全站冠军及三个职业排行榜。

创新点

每日任务变身剧情番外+世界地图

今年的每日任务不同于以往的任务列表，而是借鉴了游戏大地图的形式，在一张大地图（约竖屏三屏）上涵盖15个与作品对应的地点与3个原创地点，每个地点对应一个每日任务。

同时每个任务都配有向用户征集的与该地点相关作品所匹配的同人番外（共使用 270 篇），增强做任务的趣味性及内容联动。

515 每日任务页面

活动道具结合客户端卡牌功能与线下周边

515 活动中共可获得18种作品专属道具（或道具碎片），用户除了可以在活动内【我的道具卡牌】页面浏览自己获得的道具及碎片，还可以在起点读书端内【我的卡牌】页面查看 515 活动专属道具卡牌。同时，18个道具还会制作成实物徽章奖励给部分用户。

515 道具页面 与 客户端卡牌页面

视觉设计

1. 风格

今年的515整体风格，根据设定，采用了贴合故事背景的 东方修仙 风格。在页面中主要体现为颜色、元素的使用。

影视海报氛围参考

2. 形象

三个职业形象的设定充分均衡了用户考量，分别代表了 独立聪慧的女性形象 、 学富五车的经典阅读形象 、 象征财富与地位的高贵形象 。Boss 设定为「断更兽」，蹭了平台作家端更梗的热点，也让用户更能感同身受。形象立绘根据画风与设定需求，邀请了画师 @ -君翎- 合作绘制。

从左至右分别为：时空游侠、赏金先知、典藏馆长、断更兽

3. 配色

515 页面的主色使用了整理饱和度偏低的深蓝色，辅以金色衬托氛围，深红色增加部分模块的荣誉感。同时，在常规页面与BOSS决战页有整体色调从蓝金到红黑的转换（图1图2），突出与BOSS殊死一战的紧迫感。广告素材也调整了红蓝色的比例（图3），使广告素材带有更多起点的品牌特征（红色）。

4. 元素

基于修仙的故事背景设定，祥云成为了贯穿整个 515 的大小细节的核心元素，从LOGO到页面在各个细节处都使用了不同形式的祥云图案装饰来统一整体。

5. 任务地图

每日剧情任务的大地图也是本次活动中工作量比较大的一部分：由原画同学绘制18个原创地点建筑，再由设计师拼接制作成一整张大地图，并且还需要考虑地点类型、排布、任务状态等等因素。

515 任务地图

6. 活动道具

关于此次活动中的道具，在策划初期就确定了要做成实体周边的想法，所以在道具icon制作时也多了更多需要考量的因素，尽量平衡与原著的还原度、精致程度与实体化的可行性。

515 活动道具

7. 推广素材

在与产品确认宣传周期及侧重点后，我们针对不同时间点也制作了不同的推广素材。提供了多套动态闪屏，且执行了ABTEST方案，以此来验证更精细的推广素材对活动的影响。

部分活动闪屏

总结

今年的 515 活动在整体设计上与去年采用了完全不同的风格，并针对角色形象、任务地图、决战页面等都做了升级优化，打造了一个不同氛围的 515 。

此次 515 的设计过程中，会加入更多合作的部分：与外部画师的合作、多名设计师参与设计不同部分、原画的相关支持、线下周边供应商的同步进行……在设计部内部带来了更大的影响，也保证了这样一个大体量活动在紧张的设计排期内能够准时保质交付。

最后，感谢每一位在 515 活动中合作或参与的同学，相信未来每一年的 515 都会产生各具亮点的优秀设计。

作者：钟玮涛，微信公众号：阅文体验设计YUX ( id: YUX_design)

来源：https://mp.weixin.qq.com/s/hZgRB8EXAtxoC26r_P7JSQ

本文由 @阅文体验设计YUX 授权发布于人人都是产品经理，未经作者许可，禁止转载

题图作者提供

作者暂无likerid, 赞赏暂由本网站代持，当作者有likerid后会全部转账给作者（我们会尽力而为）。


Support author:
Author's Filecoin address:
Or you can use Likecoin to support author: