聊聊「龙年第一杯喝什么」活动

因为抽奖还没结束,所以 23 号晚才会补完谜题设计和贴纸部分。

简介

惯例先上活动链接:what-to-drink.gitee.io/2024/#/inde...

前两年我们做了一个关于奶茶人气的投票,今年也不例外,我们在农历新年前上线了这个活动的 2024 年版本 「龙年第一杯喝什么」,这表面上依然还是一个很纯粹的奶茶投票抽奖活动。

如无意外,这应该是这个投票活动的大结局篇了,我衷心地觉得在大家天天群里掰头下,今年的活动无论是视觉设计还是玩法设计都已经无法轻易被超越了,这也是三年来上线得最狼狈的一期,连朋友圈里发出去的活动介绍都是我们在地铁和的士上完成的。

今年我们的项目成员临时扩充了 100%,新增了一个策划总监和一个设计总监,设计和玩法也得到了大幅度的提升,在设计途中有非常多的故事迫不及待想和大家分享。

AIGC

AI 是 2023 年互联网领域最热的话题,恰好我们新加入了一位设计师,恰好她也对 AIGC 饶有兴趣,于是她结合我们的祝福语文案,使用 AI 设计了一套龙年的祝福语海报,最终成品可以看下面的图,团队及非常多的朋友都对其非常喜欢,这套海报也弥补了去年的活动我一直想要设计一个吉祥物却没有完成的遗憾。

我非常喜欢这一套海报的最大一个原因,可以用我最近看到的摄影师的一段话来回答「所以我恰恰不担心AI 对人情感的剥夺,技术和艺术的紧密结合从来都是答案。AI 并不残酷,它只会为故事增加一双翅膀。」

优秀的作品必然是建立在良好的审美的基础上的,AI 或者是其他工具只是反射审美的镜子,甚至说,越高效的工具,暴露出来的审美高低差异会越明显。

无账号系统

我们的投票温馨提示里提到一点:你不需要登录,也不需要关注公众号就可以进行投票,当然关注的话我会很高兴。

而今年的设计中,我们为玩家们增加了一张收集卡片,用以回顾收集到的谜底卡片、贴纸和通关总人数,这是一个需要持续记录数据的过程,上面提到的无账号系统因此在带给了我们一些困扰。

实现方式

无账号实现方式是通过 localStorage + IP 地址的方式来标识用户。

token 作为唯一的标识,每次请求都会从 localStorage 获取 token 带在接口上一起请求。

如果新用户或同一用户使用不同浏览器访问(token 不存在的情况),就会切换到使用 IP 地址来标记用户,发生请求的时候会判断数据库是否存在这个IP的记录,然后 返回对应的 token生成新的 token 和记录 token 和 IP。

同时每次切换 IP(切换 WIFI 和流量) 也会动态的记录到,所以 token 和 IP 的对应方式是一对多的。考虑到可能会有 X-Forwarded-For 来伪造IP的情况,这种已经在 nginx 层面做了防护,所以无账号系统理论上是满足了既不用繁琐的登录,也能实现用记录用户信息的需求。

不用登录可靠吗?

我们回答很直接:并不可靠

神奇的进度同步

就在上线的当晚,我的 A 手机清理过了缓存(包括本地存储),接着使用 B 手机在线上验证了一遍流程,通关了全部关卡,获得了部分贴纸。这时候我重新用 A 手机打开,神奇的是 B 手机的进度同步到了 A 手机,这本来是今年没有实现的想法之一,这次属实是阴差阳错的 Bug 变成了特性。

这个问题的原因是我连的是同一个 WIFI(准确来说是同一个带宽账号分出来的网络),在服务器拿到的 IP 地址都是这带宽账号的 IP 地址,根据上面实现的方式,就出现了这样的情况。

游戏进度数据丢失

另一个出现的问题是当本地 token 失效了或 token 获取不及时并且切换了网络,就会丢失掉之前的游戏进度,这个可能会在多次在不同网络下打开会出现,而玩家们基本是相近时间段少次访问网页,所以基本没有收到任何关于这个问题的反馈,仅在团队内部发现了这个问题。

尽管出现了上面的问题,但是受益于我们活动的特殊性:少次访问及玩家体量较小,所以这个无账号的实现方式依然是相对可靠以及对玩家不造成厌恶(不需要登录)的一种形式。

文案

祝福语

今年出于多了一位策划,我们更新了大部分祝福语,保留自去年的几条祝福语就不重复写了(上面的海报展示了一遍)。

摸大鱼:指指点点提意见 安安静静摸大鱼 是对的

去年写出自前同事,今年可以写出自我们新加入的设计师。

勿拖延:小孩不能有拖延症 否则会变拖孩

出自小红书,再深一步出处没有考究。

必发大财:吃我祥龙十八掌 命里必定发大财

也出自小红书,再深一步出处也没有考究。

问题不大:只要还活着 就不会有坏结局 我们仍然在故事的中途

来自日剧《火花》,剧中的最后一句台词,拖拉至今年才看完了最后几集,我看过的最好的日剧不为过,但节奏之慢和题材的缘故我相信也不是每个人都能看得下去。

敬自己:敬我们自己!敬触网而起的网球!

前半句灵感来自于上海彩虹室内合唱团《醉鬼的敬酒曲》,后半句来自于《飙马野郎》,关于触网而起的网球是这样的一个故事:

这句话出自漫画后半段主角两人因为一些原因失去了在冒险中获得的所有东西,两人在大雪中喝起唯一剩下的一瓶酒时,说出了这段话。

它其中一点想讲的是触网而起的网球,会落到哪一侧,是谁也无法知晓的,颇有一种敬未知的前路的意味,再在放到漫画里的情境,极具浪漫主义色彩。

任你行:马路戏院商店天空海阔 任你行

陈奕迅《任我行》。

自然醒:一觉睡到自然醒过来 不管这个胡闹时代到底有多坏

来自林宥嘉的《自然醒》。

相爱吧:相爱吧 终有一散的人们

来自声音碎片的歌曲《优美的低于生活》。

多生发:逐渐生发又得 立即生发又得 得咗

灵感来自于美源发彩的经典广告词。

纯真未变:友共情从难扭转 心内那热暖 仍是纯真未变

出自古巨基《友共情》。

创造美好:Make Something Wonderful

来自乔布斯。

有惊无险:有惊无险 失而复得 虚惊一场 这应该是人生最美妙最快乐的事情

来自李健演唱会 Talking,对这句话我只能说,确实。

平平淡淡:日出又日落深处再深处 一张小方桌有一荤一素

来自毛不易《一荤一素》,很期待他的下一张专辑。

拥抱自己:从此我不再希求幸福 我自己便是幸福

来自惠特曼《大路之歌》

健康靓丽:腰不酸了 腿不疼了 一口气上五楼 不费劲儿

来自新盖中钙广告。

卷个锤子:当一个卷王当道时代的不卷王者

灵感来自锤子科技的坚果 Pro 的文案「圆滑当道的锐丽异类」。

有勇气:被人想念的时候不要心慌,想念别人的时候不要害怕

来自安溥演出 Talking 部分。

最终答案

有兴趣的朋友看到这里可以重新再去试试解答,再发一次地址:what-to-drink.gitee.io/2024/#/inde...

贴纸及其他技术部分敬请期待。

相关推荐
小远yyds16 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱1 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai1 小时前
uniapp
前端·javascript·vue.js·uni-app
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓3 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4113 小时前
无网络安装ionic和运行
前端·npm
理想不理想v3 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云3 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:137971205873 小时前
web端手机录音
前端