起点读书 515 设计回顾


515周年庆作为起点设计平台最为重大的活动,是读者、作家、平台共同举办的一场盛典。


今年的活动较去年而言,内容更为丰富、玩法更为多样,还构思了更为有趣的故事主题,那本次活动设计同学是如何参与其中的呢?下面将会通过设计的视角,来为大家揭示起点515背后的设计思考。



起点读书 515 设计回顾

主题定义


本次活动主题为“守卫领域”,意在希望召唤组成起点宇宙的万千星核(读者),收集念力(活动道具),共同守卫起点宇宙(兑换1亿起点币)。本次活动将围绕这个主题来展开设计。

起点读书 515 设计回顾


起点读书 515 设计回顾

活动目标


此次活动希望可以通过515周年庆,更好的给用户传递平台品牌价值,提升活跃度和提升平台营收。

1. 运营目标

  • 提升平台的活跃度和营收

  • 老用户回流和拉新

  • 品牌宣传

2. 设计目标

  • 塑造515起点世界观的视觉形象

  • 提升活动品牌价值和趣味性

起点读书 515 设计回顾


起点读书 515 设计回顾

设计关键


结合以上对于活动主题和活动目标的理解,我们可以提炼出本次的设计关键:

起点读书 515 设计回顾


起点读书 515 设计回顾

活动周期


515周年庆作为作为起点全平台c位的大型活动,包含任务、互动、玩法等众多内容,周期长达40天(4.21-5.30),共有四个阶段。

起点读书 515 设计回顾


起点读书 515 设计回顾

概念脑暴


起点宇宙是一个多时空、多位面的载体,世界观设定宏大,场景多样且复杂。为了表现起点宇宙的世界观,在视觉风格上设计师们对于起点宇宙进行了关键词提炼,选取了“赛博朋克”、“三维”、“细描边复古”、“块面游戏”四种视觉形式融入设计中,以此构建四个不同场景,丰富活动多样性和独特性。
起点读书 515 设计回顾
从以下四种视觉形式中再提炼对应的场景。

起点读书 515 设计回顾


起点读书 515 设计回顾

视觉符号的提取


视觉符号是一个活动的重要识别元素,承担着强化活动记忆点和引发用户视觉联想的重要作用。

在此次活动中,“念力”是用户使用并兑换奖励的一个重要道具,它是“起点宇宙内的主体能量,由起点作家与读者的万千念头孕育而生,变化无穷,具有各种神奇效果。”念力作为一个重要元素存在,贯穿始终。为了让“念力”这个元素更加直接有力地传递给用户,我们通过脑暴决定将水晶作为“念力”的视觉符号。因为水晶石属于自然界的稀有物质,美丽、神秘、色彩多样,且每种色彩都有其丰富的寓意,与本次活动“念力”道具十分吻合。

将水晶元素渗透使用到不同的活动场景之中,以此用来串联整个活动和强化品牌感。

起点读书 515 设计回顾


起点读书 515 设计回顾

色彩定义


红色是起点本身的品牌色,为了贴近本次活动调性,将红色调整为科技感更强的“冷调红”,并结合蓝色,形成了整个515活动的色彩基因。

起点读书 515 设计回顾


起点读书 515 设计回顾

字体设计


提炼活动主题,选用粗直的线条和穿插的斜角来丰富字体细节,营造颇具力量感的字体张力。

起点读书 515 设计回顾


起点读书 515 设计回顾

预热开启


预热活动的目标主要有两个,分别为:

  1. 希望用户通过邀请伙伴分享活动从而获得奖励。

  2. 了解活动故事主题。

以“念力”水晶和点币作为头图主要元素去强化活动主题和利益,加深用户对于活动的直观了解和感受。

起点读书 515 设计回顾


起点读书 515 设计回顾
结合“念力”水晶的视觉符号和宇宙的世界观去设计预热活动的徽章奖励,徽章的质感上,强调荣誉感和尊贵感。

起点读书 515 设计回顾


起点读书 515 设计回顾

主活动解锁


为了提升活动的互动性和沉浸感,在用户点击进入活动主页之前,增加了一个画符解锁的互动样式,以此来进入起点世界观,开启本次活动之旅。

起点读书 515 设计回顾


起点读书 515 设计回顾

主页设计

主页结构

通过“统一排版,变化主题”的方式,结合主LOGO将核心元素置于画面顶部区域。固定标题框架,变换不同时期的视觉形态,以此来强化活动品牌感和提升一致性。
起点读书 515 设计回顾
主页视觉

起点读书 515 设计回顾


起点读书 515 设计回顾
主页动态

起点读书 515 设计回顾

同时在活动首页上也进行了丰富的动态化设计,通过翻页切换不同的地标场景,探索更多的活动内容和任务 ,以此加强活动的趣味性和吸引性。


起点读书 515 设计回顾

子页面延展


统一二级页面设计模块,体现一致性的同时减少设计成本。

起点读书 515 设计回顾


起点读书 515 设计回顾

动效设计和实现


使用多格式动效

水晶动画作为主场景的初始动效,作用是展示用户收集念力的状态。其实线上混合了CSS动画、SVG动画及Canvas动画,通过裁剪、遮罩、路径及位移变换来表达场景的前后景及其深度关系。动画性能表现良好。

尽管理论上仅用Canvas实现可以进一步优化性能,但考虑到开发时间和调试难度,合理地搭配各种技术来达到效果是更好的选择。

起点读书 515 设计回顾

卡牌游戏和3D场景的动效实现方式分别为为WebGL动画和VAP,较序列帧的实现方式更加清晰和灵活。 

起点读书 515 设计回顾


起点读书 515 设计回顾


起点读书 515 设计回顾

结语


此次活动是第一次将起点世界观这个概念传递给用户。设计师在风格、技法上都力求创新去突破起点固有的“国风”视觉印象,并进一步贴近“起点宇宙“的概念。在项目中感谢业务方和技术方的大力支持。

起点读书 515 设计回顾


视觉设计:YEEY  OM 小双

三维设计:Song  哑铃

文案编辑:YEEY  OM


起点读书 515 设计回顾


起点读书 515 设计回顾


本篇文章来源于微信公众号: 阅文体验设计YUX

UI/UX

CoDesign 用户的「专属福利」来了,500 Q 币快来拿!

2021-10-22 17:30:00

UI/UX

2021Hiiidea|自如设计周开幕倒计时1天!我们明天见!

2021-10-22 19:59:20

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索