放弃原则?天天掰头?来聊聊「龙年第一杯喝什么」
前情提要见这么大一个奶茶红包你看到我放哪了吗结局篇
今年设计活动时记录了非常多的东西,迫不及待想和大家分享,今天就来聊聊设计开发的一些故事。
和去年不一样的是文章少了很多技术内容,但依然是想到哪里就聊到哪里,篇幅有点长,希望你们读得愉快。
AIGC
AI 是 2023 年互联网领域最热的话题,恰好我们新加入了一位设计师,恰好她也对 AIGC 饶有兴趣,于是她结合了我们的祝福语文案,使用 AI 设计了一套龙年的祝福语海报,最终成品可以看下面的图,团队内部都对其都非常满意,这套海报也弥补了去年的活动我一直想要设计一个吉祥物却没有完成的遗憾。
我自己喜欢这一套海报的最大原因,不仅是因为好看,而是画面和祝福语是贴合的,而非「食之无味」的 AI 绘图,这也可以用我最近看到的一段话来回答「所以我恰恰不担心AI 对人情感的剥夺,技术和艺术的紧密结合从来都是答案。AI 并不残酷,它只会为故事增加一双翅膀。」
好的作品必然是建立在良好的审美的基础上的,AI 或者是其他工具只是反射审美的镜子,甚至说,越高效的工具,暴露出来的审美高低差异会越明显。
谜题设计
在今年的谜题设计中,我们的讨论中反复出现最多的一句话绝对是在 3Blue1Brown 频道中《说难不难说简单不简单的大风车问题》出现过的一句话:
没有一个人可以准确说出自己的出题难度
核心设计要点
今年的谜题设计的核心可以概括为这下面几点:
- 都是以格子为主题的谜题
- 每个谜题都要有常规的解法和非常规解法(非常规解法在团队内称呼其为 Trick)
- 提示要同时提示常规解法和 Trick
- 谜题设计要更大众化向
- 谜题的设计要像残局,即完成步数要少
以格子为主题的基础谜题
第 1 关
第 1 关以大家都很熟悉的井字棋作为谜题,很简单,通关率有 85%。
Trick 解读:本关的提示文案里的「它」,既是指上方的格子,也是指「它」这个字本身。
第一关远比谜题设计更重要的是它的引导作用,它无形中传达的内容有:
- 初次呈现整体谜题视觉,区分可交互和不可交互的部分
- 传达明显的格子可以点击
- 传达加粗的文本也可以点击,也是 Trick 的视觉特征之一
- 按钮上方的文字内容会提示过关的方式,同时也指示了本关上方不一样的格子是可以点击的
- 点击格子后,然后点击提交,是关卡的基本交互
第 2 关
有了第 1 关的基础,第二关的就可以开始更关注在谜题设计本身了。
谜题本身来自于绘图方块,详细的介绍可以见去年的文章:聊聊「兔年第一杯喝什么」
过关方式是红色的格子满足对应行列的数字要求。
Trick 解读:数字代表了什么?既然常规方式是要根据数字代表的含义来解读,那么反过来想,如果不存在数字,就不用关心数字代表什么了。
所以这关的 Trick 方式是点击数字,让数字消失,就算通关了。
第 3 关
第 3 关的关灯也是一个经典游戏,9 宫格全都没点亮的关灯游戏最少需要 5 步,而上面提到我们需要一个残局向的游戏,所以我们选了一个关灯游戏的残局,这个残局只需要 2 步就可以完成。
尽管如此,我们预计这依然是会难倒不少人(比如团队里已经有人被难倒了),所以我们留了一个极其简单的过关方式。
Trick 解读:关灯吧
常规方式是要关掉格子里所有的灯,但 5s 后界面上会出现一根拉绳,拉了绳子后就会直接关灯,这是最容易发现的 Trick,因为我们不想让玩家们卡在这里,为什么后面会再提到。
点灯游戏更多的玩法和介绍可以看这个链接:https://www.geogebra.org/m/JexnDJpt#material/uMG8BYsH
第 4 个谜题
前三关的各种设计,从整体的设计上来看,只是 Onboarding,换个说法,这些都是为了吸引大家继续寻找隐藏起来的第四关所做的引导,让你认为到了这一步「我完成了 75%」是我们设计好的心理暗示。
所以有一些朋友和玩家和我反馈第 4 关入口不容易找到,我终于可以说,这就是我们特意设计的,这也是我们上面提到「不想让大家卡在第 3 关」的理由。
至于怎么发现第4个谜题?入口提示有几处:
- 首页标题中小六的问号
- 首页底部的图形
- 收集卡片中的未收集时的图形
入口的提示代表了多次点击标题中的小六,至于为什么是这个答案,可以观察一下标题中小六的细节。
第 4 关谜题最核心的设计:一个6x6 的格子数字谜题,谜面会和奶茶投票格子情况关联变化,即谜面会随着不同的投票结果变化,但是最终答案会保持一致。
旧排名系统的影响
最初的谜题设计是获取 Level 8, Level 7, Level 6 的奶茶的位置,把这 3 个位置对应的数字答案按顺序拼起来作为答案。不过很快发现因为旧排名系统的影响不得不改变设计。
我们曾经写过等级计算规则是:
在去除最高与最低票数后,计算出平均票数,当前项是平均数的多少倍即为多少级,以此保证每一项都有一个确定排名,这个处理方式同时也产生了一个问题,每个等级的数目不固定。
也就是说一共 8 个等级,最高票和最低票分别是 Level 8 和 Level 1。只要有票数差异也就肯定会有这 2 个等级,但中间的 2-7 级数目会十分地随机。
举个例子:按照上面的计算方式可能出现 1 个 Level 8,2 个 Level 4,33 个 Level 1,这个情况下无法确保 6 , 7 , 8 这 3 个等级可以一直出现,以至于最开始的谜题设计思路走不通了。
比如说 2 月 23 号的这个时间点,场上排名分布情况是:
- Level 8 * 1
- Level 7 * 2
- Level 4 * 1
- Level 3 * 4
- Level 2 * 27
- Level 1 * 1
这时候依旧没有 Level 6 的出现,说明 7 和 4 的票数等级相差得太多了。
最终设计方案
根据上面的情况,我们调整了这一个谜题的设计方案,以必然出现的 Level 8 展开设计,使用 Level 8 和其相关的另一个格子作为答案。
提示图表达的意思则是:Level 8 本身所在的位置 + Level 8 所在的列的最下面的的一个位置(箭头所指位置),拼起来就是最终答案。
我们对另外两个情况做了处理,保证本关答案的统一:
- 如果 Level 8 出现在最后一行,提示图的箭头会变成向上,指向第一行。
- 如果有多个 Level 8,那么每个 Level 8 当列的最下(上)一个的格子也会变成一样的数字
最后一点是,在第 4 关我们没有设计 Trick 的过关方式,这是我在今年还有保留「原则」的部分,但是也留了其他方法可以解出来,这点在最后会聊一聊。
第 5 个谜题
按照我们的一贯做事方式,当我们明面上表示有 4 关的时候,那必然还有存在这第 5 个谜题。在前 4 关过关后会拿到几张数字卡片,界面上的卡片排列顺序并不是最终的答案顺序,你还需要重新排列顺序后才能拿到最终的密码。
当我在考虑怎么提示玩家们要注意到「重新排列」这一点时,我的脑海想起了童年时的看过的《龙珠》漫画的书脊设计,于是迅速地把原来的横版卡片修改成了竖版,这就是最后留给大家的谜题。
文案
祝福语
今年出于多了一位策划,我们更新了大部分祝福语,保留自去年的几条祝福语在上面的的 AIGC 部分展示过了一遍,就不重复写了。
任你行:马路戏院商店天空海阔 任你行
来自陈奕迅的《任我行》,今年意料之中没有抢到陈奕迅的演唱会门票。
创造美好:Make Something Wonderful
英文原句来自乔布斯。
敬自己:敬我们自己!敬触网而起的网球!
前半句灵感来自于上海彩虹室内合唱团《醉鬼的敬酒曲》,后半句来自于 JOJO 系列第七部《 飙马野郎》,我尽量不剧透地描述「触网而起的网球」:
这句话出自漫画后半段主角两人因为一些原因失去了几乎所有东西,两人在大雪中喝起唯一剩下的一瓶酒时,说出了这句话。
它其中一点想表达的是因触网而起的网球,会落到哪一侧,是谁也无法知晓的,颇有一种敬未知的前路的意味,再在放到漫画里的情境,极具浪漫主义色彩。
健康靓丽:腰不酸了 腿不疼了 一口气上五楼 不费劲儿
来自新盖中钙广告词。
相爱吧:相爱吧 终有一散的人们
来自声音碎片乐队的歌曲《优美的低于生活》。
多生发:逐渐生发又得 立即生发又得 得咗
灵感来自于美源发彩的经典广告词「逐渐变黑又得,立即变黑又得,得左」。
摸大鱼:指指点点提意见 安安静静摸大鱼 是对的
去年写出自前同事,今年可以写出自我们新加入的设计师。
拥抱自己:从此我不再希求幸福 我自己便是幸福
来自惠特曼《大路之歌》。
平平淡淡:日出又日落深处再深处 一张小方桌有一荤一素
来自毛不易《一荤一素》,很期待他的下一张专辑。
有惊无险:有惊无险 失而复得 虚惊一场 这应该是人生最美妙最快乐的事情
来自李健演唱会 Talking,对这句话我只能说,确实。
卷个锤子:当一个卷王当道时代的不卷王者
灵感来自锤子科技的坚果 Pro 手机的广告文案「圆滑当道的锐丽异类」。
自然醒:一觉睡到自然醒过来 不管这个胡闹时代到底有多坏
来自林宥嘉的《自然醒》。
勿拖延:小孩不能有拖延症 否则会变拖孩
出自小红书,再深一步出处没有考究。
必发大财:吃我祥龙十八掌 命里必定发大财
也出自小红书,再深一步出处也没有考究。
纯真未变:友共情从难扭转 心内那热暖 仍是纯真未变
来自古巨基《友共情》。
有勇气:被人想念的时候不要心慌,想念别人的时候不要害怕
来自安溥演出 Talking 部分,这是我最想看的几位歌手的现场之一,希望今年有机会买到票。
问题不大:只要还活着 就不会有坏结局 我们仍然在故事的中途
来自日剧《火花》,剧中的最后一句台词,拖拉至今年才看完了最后几集,我看过的最好的日剧不为过,但节奏之慢和题材的缘故我觉得不是每个人都能看得下去,但它依然值得我在这里特意推荐。
顺带一提,海报上的英文文案也很特别,都是设计师自己发挥的。
贴纸
今年的贴纸都是上线前一天设计的,上线的压力让我的设计力胡乱膨胀,整出了一些怪异的贴纸,果然越靠近 Deadline 生产力越强,是对的。
以下顺序为从左往右从上往下。
-
我全都要:投了 5 个品牌以上就能获得。这是唯一一张保留了去年设计基础的贴纸,在此之上增加了褶皱和划线的效果,营造出一种从去年贴到现在的感觉,希望大家去年的不能全都要的话,今年继续全都要。
-
蝙蝠侠:0-5 点投票就能获得,梗来自于《蝙蝠侠》,设计上使用了一张经典 meme 图。
-
Always:投了单个品牌 5 次以上就能获得,名称来自于《哈利波特》电影,但是原意有点痛,后来我改成了使用不同颜色的爱心 emoji 来设计。
-
小菜鸡:累计点击了格子 21 次就会获得,设计致敬了侏罗纪公园的电影 logo。
-
醒醒:在游戏内玩了 5 分钟就能获得。设计上使用了像素风格,形象来自于《超级马力欧 惊奇》的闲聊花花,这是我去年玩过最具创意和最让人快乐的游戏,如果你有 Switch,尤其是设计师,绝不应该错过这个游戏。
-
有电东西:1 次回答出最终答案就能获得。本来叫「有点东西」,后来因为我先定好了这个设计就改成了现在这个名字。
-
科学怪人:5 次及以内回答正确就能获得。5 次是我们预计的次数,但看了数据发现没竟然有多少玩家获得这张贴纸,设计上使用了弗兰坎斯坦的经典形象。
-
你再想想:5 次回答错误就能获得。这是设计得最艰难的一张贴纸,我想模仿早期显示器的显像管效果及蓝屏界面。
-
过度思考:10 次回答错误就能获得。来自去年的想法,一个发愁的大卫,一半设计来自于助手 DALL·E 2。
最终答案
至于最终答案是什么,以及最终答案有什么含义,去年也有一些朋友来问过我,我现在直接来揭晓一下今年我们决定最终答案的方式:
有兴趣的朋友看到这里可以重新再去试试解答,再发一次地址:
TBD
无账号系统
我们的投票温馨提示里提到一点:你不需要登录,也不需要关注公众号就可以进行投票,当然关注的话我会很高兴。
而今年的设计中,我们为玩家们增加了一张收集卡片,用以回顾收集到的谜底卡片、贴纸和通关总比例,这是一个需要持续记录数据的过程,上面提到的无账号系统因此带给了我们一些困扰。
实现方式
无账号实现方式是通过 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 获取不及时并且切换了网络,就会丢失掉之前的游戏进度,这个可能会在多次在不同网络下打开会出现,而玩家们基本是相近时间段少次访问网页,所以基本没有收到任何关于这个问题的反馈,仅在团队内部发现了这个问题。
尽管出现了上面的问题,但是受益于我们活动的特殊性:少次访问及玩家体量较小,所以这个无账号的实现方式依然是相对可靠以及对玩家不造成厌恶(不需要登录)的一种形式。
一些有趣的小插曲
大众化向的设计
去年的谜题设计基本完全由我来操刀设计,主要还是偏向于纯解谜,可以说很具有个人化色彩,同时我收到的反馈也很极端,解不出来的朋友,只能对着唯一一个看不懂的谜题望而却步,解出来的少数朋友却又反馈非常满足。
而在今年团队临时加入了两位新的成员,我也戏说我可以「放弃原则」,活动想做什么内容都可以,于是在去年的想法清单上又多了很多新的想法,当然也避免不了四人常在群里掰头。不断地推翻已有的设计,也让我反复去思考怎么做一个大家都能玩得愉快的游戏。
现在再回顾起来,无论是 Trick 的提议,还是各种流程的优化,都让活动减少了一些「我」的味道,往更大众化设计走去,这是我非常感谢其他成员的一件事,而结果也表明了,这是我们做对了的一件事情。
团队合作里大家印象最深刻的一件事
Bluepikachu:上线前一天,凌晨 2 点在群里又发了一些新想法,结果全部人都还在线回复
Jioho:「任你行」祝福语写成了「任你狂」,现在想想都好羞耻😂
King:临上线还在加需求改 Bug 删库
Nicole:明明在群里参与讨论,但通关效率和贴纸收集能力犹如局外人,然后就是红包封面奖励一直无法通过二维码裂变发出,托各位大佬拉了各种关系网测试,最后还是成功钻漏洞发出去 2000个👏(剩下的一万九千个不见天日)
Trick 之外的更多解答方式
除了我们上面提到的谜题的常规解答和 Trick 的方式,其实还有一些别的解答方式,这也是我们预料之中及允许的解答方式:
- 通过文字提示理解了第 4 关的首个数字后,通过枚举法来试出最后一位数;
- 获得前三关的卡片后并明白需要排序后,通过枚举法试出来最后一个数字;
- 使用桌面浏览器,通过修改域名的方式进入第 4 关;
这些从设计或者开发上都很容易处理,但我们认为让玩家们觉得自己「独辟蹊径」也是很不错的一件事情,就没有对这些情况多加限制。
最后
在今年,我们几乎已经把活动做成了一个微型游戏,这相比于去年设计单个谜题来说又是一种新的设计体验,尽管今年的项目开展得狼狈紧凑绞尽脑汁,但结果无论是团队成员和玩家们都是很满意的。
而我松了一口气的是明年终于不用想做什么了,但也伴随着一点担忧,那明年放假的前几天上班摸鱼做什么呢?
最后,谢谢大家来参与投票,谢谢玩我们的游戏,我们迟早会再见。