原作者:阅文体验设计YUX
原文链接:https://mp.weixin.qq.com/s/C3EkCuhMTdbgcJVVUX9ERQ
本次活动主题为“守卫领域”，意在希望召唤组成起点宇宙的万千星核（读者），收集念力（活动道具），共同守卫起点宇宙（兑换1亿起点币）。本次活动将围绕这个主题来展开设计。
<br />** 活动目标**<br />此次活动希望可以通过515周年庆，更好的给用户传递平台品牌价值，提升活跃度和提升平台营收。<br />**1. 运营目标**：
- 提升平台的活跃度和营收
- 老用户回流和拉新
- 品牌宣传
2. 设计目标：
- 塑造515起点世界观的视觉形象
- 提升活动品牌价值和趣味性
<br />** 设计关键**<br />结合以上对于活动主题和活动目标的理解，我们可以提炼出本次的设计关键：<br /><br />** 活动周期**<br /><br />** 概念脑暴**<br />起点宇宙是一个多时空、多位面的载体，世界观设定宏大，场景多样且复杂。为了表现起点宇宙的世界观，在视觉风格上设计师们对于起点宇宙进行了关键词提炼，选取了“赛博朋克”、“三维”、“细描边复古”、“块面游戏”四种视觉形式融入设计中，以此构建四个不同场景，丰富活动多样性和独特性。<br /><br />从以下四种视觉形式中再提炼对应的场景。<br /><br />** 视觉符号的提取**<br />视觉符号是一个活动的重要识别元素，承担着强化活动记忆点和引发用户视觉联想的重要作用。<br />在此次活动中，“念力”是用户使用并兑换奖励的一个重要道具，它是“起点宇宙内的主体能量，由起点作家与读者的万千念头孕育而生，变化无穷，具有各种神奇效果。”念力作为一个重要元素存在，贯穿始终。为了让“念力”这个元素更加直接有力地传递给用户，我们通过脑暴决定将水晶作为“念力”的视觉符号。因为水晶石属于自然界的稀有物质，美丽、神秘、色彩多样，且每种色彩都有其丰富的寓意，与本次活动“念力”道具十分吻合。<br />将水晶元素渗透使用到不同的活动场景之中，以此用来串联整个活动和强化品牌感。<br /><br />** 色彩定义**<br />红色是起点本身的品牌色，为了贴近本次活动调性，将红色调整为科技感更强的“冷调红”，并结合蓝色，形成了整个515活动的色彩基因。<br /><br />** 预热开启**<br />预热活动的目标主要有两个，分别为：
- 希望用户通过邀请伙伴分享活动从而获得奖励。
- 了解活动故事主题。
以“念力”水晶和点币作为头图主要元素去强化活动主题和利益，加深用户对于活动的直观了解和感受。
结合“念力”水晶的视觉符号和宇宙的世界观去设计预热活动的徽章奖励，徽章的质感上，强调荣誉感和尊贵感。
<br />** 主活动解锁**<br />为了提升活动的互动性和沉浸感，在用户点击进入活动主页之前，增加了一个画符解锁的互动样式，以此来进入起点世界观，开启本次活动之旅。<br /><br />** 主页设计**<br />**主页结构**：<br />通过“统一排版，变化主题”的方式，结合主LOGO将核心元素置于画面顶部区域。固定标题框架，变换不同时期的视觉形态，以此来强化活动品牌感和提升一致性。<br /><br />**主页视觉**：<br /><br /><br />**主页动态**：<br /><br />同时在活动首页上也进行了丰富的动态化设计，通过翻页切换不同的地标场景，探索更多的活动内容和任务 ，以此加强活动的趣味性和吸引性。
子页面延展
统一二级页面设计模块，体现一致性的同时减少设计成本。
<br />** 动效设计和实现**<br />**使用多格式动效**：<br />水晶动画作为主场景的初始动效，作用是展示用户收集念力的状态。其实线上混合了CSS动画、SVG动画及Canvas动画，通过裁剪、遮罩、路径及位移变换来表达场景的前后景及其深度关系。动画性能表现良好。<br />尽管理论上仅用Canvas实现可以进一步优化性能，但考虑到开发时间和调试难度，合理地搭配各种技术来达到效果是更好的选择。<br /><br />卡牌游戏和3D场景的动效实现方式分别为为WebGL动画和VAP，较序列帧的实现方式更加清晰和灵活。 <br /><br /><br />** 结语 **<br />此次活动是第一次将起点世界观这个概念传递给用户。设计师在风格、技法上都力求创新去突破起点固有的“国风”视觉印象，并进一步贴近“起点宇宙“的概念。在项目中感谢业务方和技术方的大力支持。
视觉设计：YEEY OM 小双
三维设计：Song 哑铃
文案编辑：YEEY OM
若有收获，就点个赞吧
0 人点赞
