十年匠心定制 · 商业建站与技术教学双线并行 咨询热线:400-886-1026 service@lmnt.cn
ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

深夜刷到一条短视频,我花两周做了个车标识别小程序:我是车标王的创作故事与应用场景

深夜刷到一条短视频,我花两周做了个车标识别小程序:我是车标王的创作故事与应用场景 摘要一个两岁宝宝在停车场认全所有车标的短视频让我决定开发我是车标王微信小程序。从最初的车标数据采集、三种游戏模式设计到上线后的用户反馈和持续迭代这是一个从15秒灵感到完整产品的创作故事。本文记录了驾校培训、亲子互动、车友会社交等真实应用场景以及开发过程中那些深夜调试、数据校对、关卡打磨的创作故事分享游戏化学习产品从0到1的完整历程。一、深夜的那15秒短视频2024年冬天的一个深夜我像往常一样刷着短视频打算放松一下就睡觉。然后一条视频让我瞬间清醒了。视频中一个两岁左右的男孩站在一个露天停车场里一辆辆汽车从他面前驶过。孩子伸出小手指着每一辆车嘴里蹦出一个个品牌名字宝马、奔驰、奥迪、丰田、大众……准确率几乎是100%。评论区里几千条留言清一色的感叹我开了十几年车还不如一个两岁孩子。我也给自己做了一次快速测试。宝马、奔驰、奥迪秒认。雷克萨斯、凯迪拉克需要想一想。英菲尼迪和讴歌傻傻分不清。捷尼赛思、玛莎拉蒂、阿斯顿·马丁……这是什么那一刻一个想法像闪电一样击中了我为什么不做一个帮成年人认车标的小程序不是无聊的图鉴翻阅而是像游戏一样好玩、像刷短视频一样上瘾。我打开电脑新建了一个微信小程序项目文件夹命名为我是车标王。时钟指向凌晨1点23分。那个夜晚我是车标王的故事正式开始了。二、80个车标和120杯咖啡做车标识别游戏第一步要有车标数据。看似简单——去网上搜一下不就有了但实际操作时问题接踵而至。第一个问题是图片来源。车标图片需要背景透明、分辨率统一、风格一致。网上能搜到各种车标图片但质量参差不齐有的带白底有的带阴影有的是矢量的有的是位图的。光是筛选和整理80个品牌的合格图片就花了整整三天。第二个问题是数据准确性。每个品牌需要标注国家、中英文名称、品牌别名等信息。看似简单的宝马BMW德国但到了冷门品牌就开始纠结迈巴赫是德国品牌还是独立品牌布加迪是法国品牌还是意大利血统光是品牌归属国的核实就让我翻了大量资料。第三个问题是品牌简介和历史故事的撰写。每个品牌需要100字以内的简介和200-500字的历史故事。80个品牌就是80篇微型文章。我给自己定了三句话原则——简介用三句话说清楚品牌定位、核心特色、市场地位。历史故事则注重趣味性找品牌最有记忆点的故事来写。比如宝马的蓝白标志源自巴伐利亚州旗的颜色这个知识点让很多用户印象深刻。在连续两周、喝掉超过120杯咖啡之后80个品牌的数据终于整理完毕。每个品牌包含品牌名称、中英文别名、车标图片路径、所属国家、价位分类、难度等级、品牌简介、历史故事共8个字段。这个过程让我深刻理解了一句话数据是产品的地基地基不牢上面建什么都会塌。三、三种模式诞生记从不够好玩到三味一体3.1 慧眼识车第一个版本太无聊了最初的慧眼识车模式非常简单展示一个车标图片下方四个选项选对就行。我做了一个原型自己玩了五分钟就觉得无聊了——这和考试有什么区别问题出在干扰项上。如果正确答案是宝马干扰项是布加迪五菱启辰用户闭着眼睛都能排除一半毫无挑战性。于是我花了一个周末重新设计干扰项逻辑优先选择与正确答案同国家、同价位类型的品牌作为干扰项。正确答案是宝马时干扰项变成了奔驰奥迪沃尔沃——这才是真正考验认知水平的题目。3.2 车标破阵反向思维的新维度在慧眼识车基本成型后我发现一个局限它是看图选名的正向识别。但人类记忆有个特点——正向识别容易反向回忆难。你能认出宝马的车标但如果让你凭空画出宝马的标志大部分人画不出来。基于这个认知我设计了车标破阵模式——看名选标的反向识别。屏幕展示品牌名称下方是一个车标图片网格用户需要从网格中找到正确的车标。这个模式比慧眼识车难得多但也更有趣因为它考验的是更深层的记忆连接。3.3 车标重组拼图带来意想不到的深度记忆车标重组模式的灵感来自一个意外发现。有一次我在整理车标图片时不小心把一张图片裁切成了几块。我下意识地想把它们拼回去拼的过程中我发现自己把这个车标的每一个细节都深深记住了——颜色、形状、线条走向、文字位置。这个体验让我意识到拼图过程本身就是一种深度记忆训练。于是车标重组模式诞生了——将车标图片切割成碎片并打乱用户通过拖拽拼回原位。这个模式不仅考验品牌识别能力还考验空间记忆和图形感知能力是三种模式中最具沉浸感的。三种模式各有侧重慧眼识车训练正向识别车标破阵训练反向回忆车标重组训练深度记忆。三者形成了完整的认知训练闭环。四、上线之后那些意想不到的应用场景我是车标王上线后用户量增长超出了我的预期。但更让我惊喜的是用户反馈中浮现出的各种应用场景——有些是我设计时完全没有想到的。场景一驾校教练的秘密武器一位驾校教练在后台留言我把你的小程序推荐给了所有学员科目一里的车标题正确率从60%提到了90%以上。这个反馈让我意识到我是车标王不只是娱乐产品它在驾考培训场景中有实实在在的实用价值。科目一考试中经常出现车标识别类题目很多学员在这类题目上失分。用慧眼识车模式每天练习10分钟两周就能显著提升。场景二宝妈的停车场早教课一位年轻妈妈分享说每次带孩子去商场地下停车场就打开车标重组模式让孩子练习。孩子拼好碎片的同时也记住了品牌名称。她说等电梯的两三分钟足够完成一道拼图题比刷短视频有意义多了。这个场景让我重新思考了碎片化学习的价值——不需要大块时间通勤路上、等电梯时、排队间隙都是学习机会。场景三车友会的破冰游戏这个场景完全出乎意料。一个汽车品牌车友会的会长告诉我他们在车友聚会时用我是车标王做破冰游戏——把手机投屏到大屏幕上大家一起答题答错的罚酒或表演节目。比传统的自我介绍破冰效果好多了气氛一下子就热烈起来了。这个反馈让我思考产品的社交价值往往不是设计出来的而是用户自己创造出来的。我后续考虑增加多人对战模式让社交场景更加顺滑。场景四4S店新员工的品牌培训工具一位4S店销售经理说他们新来的实习生对汽车品牌了解有限面对客户提问经常答不上来。我把图鉴功能当培训工具要求新人在第一周内把所有品牌过一遍特别是品牌简介和历史故事背下来跟客户聊天时用得上。图鉴的按国家分类和按价值类型分类功能帮助新人快速建立了品牌认知框架——知道哪些是德系、哪些是日系哪些是豪华品牌、哪些是大众品牌。这种结构化认知比碎片化记忆高效得多。五、6个关卡背后的心流设计游戏关卡设计是我是车标王最核心的体验设计之一。最初我只想做简单-中等-困难三档难度但在实际设计中发现三档太粗用户在前几关觉得太简单容易放弃在最后一关觉得太难容易挫败。后来我接触到了心理学中的心流理论——当任务难度与用户能力相匹配时人会进入一种高度专注的沉浸状态。难度太低会无聊难度太高会焦虑只有恰到好处的挑战才能让人上瘾。基于心流理论我把关卡扩展到6个设计了一条由易到难的渐进曲线第1关中国中高端车主流车型用中国人最熟悉的品牌建立信心第2关中国大众主流主流车型扩展到更多国产品牌第3关顶级豪车第一次跳出国产品牌接触全球顶级品牌第4关豪华车系统学习德系日系美系豪华品牌第5关中国所有车型深度复习国产品牌第6关世界所有车型终极挑战这个设计的核心思路是先中国后世界先主流后全面。前两关用中国品牌建立信心第3-4关用国际豪华品牌打开视野第5-6关逐步扩展到全品牌考核。每一关的难度只比上一关高一点点用户始终处于刚刚好有挑战的心流通道中。此外还有一个关键设计同一关卡内车标不能重复出现。这意味着第6关的题目会从世界所有车标中抽取不重复的品牌避免了同一品牌反复出现的枯燥感。六、一首钢琴曲的沉浸感实验我是车标王2.0版本加入了背景音乐功能。这个功能看起来是小事但在开发过程中却引发了最头疼的一个Bug。最初的方案很简单在每个页面的onLoad里创建音频实例播放对应的背景音乐。但上线测试时发现页面切换时音乐会重叠——从图鉴页跳到游戏页旧的piano.mp3还没停新的game.mp3已经开始两个音频同时播放体验灾难。我尝试用onHide暂停、onShow播放但快速切换Tab时出现了所有页面都没在放音乐的死状态。最终花了两天时间写了一个全局单例的音频管理器把音频控制权从页面层提升到应用层由一个统一的管理器决定现在该放什么。这个方案稳定运行至今。音乐选择也经过了精心考量。图鉴页面和收藏页面使用舒缓钢琴乐BPM约60营造博物馆式的安静浏览氛围游戏页面使用激昂游戏音乐BPM120以上营造竞技紧张感。同一款产品里不同功能模块的氛围差异完全由音乐来区分——这是投入产出比最高的体验优化。七、用户的反馈改变了产品方向我是车标王的很多功能迭代不是我在办公室里拍脑袋决定的而是被用户反馈推着走的。最典型的一次是图鉴系统的诞生。1.0版本上线时小程序只有三种游戏模式没有图鉴功能。但用户反馈中有一条反复出现玩完之后对车标有了初步认识但想知道更多关于这些品牌的故事和来历。这条反馈让我意识到一个关键洞察1.0版本本质上是一款训练型产品通过游戏化机制帮助用户建立对车标的视觉记忆。但训练结束之后呢用户对一个品牌产生了兴趣却没有渠道去深入了解。这就像教会了一个人认字却没有给他书看。基于这个洞察2.0版本新增了图鉴系统——每个车标都有详细的品牌故事、历史背景和设计灵感。图鉴系统支持按国家和按价值类型两种维度浏览让用户可以系统地了解汽车品牌的全貌。这个功能的用户使用率超过60%很多用户即使不玩游戏也会在图鉴里浏览品牌信息。另一个被用户推动的功能是收藏系统。有用户说认了一个感兴趣的车标想存下来以后再看。于是收藏功能诞生了——用户在任何看到车标的地方都可以点击收藏在收藏页面统一管理。从产品角度看收藏系统承担着三个角色学习笔记、成就展示、留存工具。八、开发过程中那些文档不会告诉你的坑8.1 tabBar图标的命名陷阱2.0版本引入底部Tab导航栏时我把图标命名为game-active.png用连字符。开发工具模拟器里一切正常但真机调试时iOS端加载失败。排查了半天才发现微信小程序对文件名的兼容性要求是只用英文字母、数字和下划线不要用连字符。改为game_active.png后正常。8.2 setData的性能陷阱小程序的setData是性能杀手——每次调用都触发一次从逻辑层到渲染层的通信。最初我在循环中频繁调用setData更新列表项的加载状态导致题目切换动画明显卡顿。后来改为批量合并为一次setData调用卡顿消失。8.3 Storage同步读取的阻塞收藏功能用wx.setStorageSync存储数据。最初在页面onLoad中同时读取多个Storage key收藏列表答题记录用户设置页面会卡在同步IO上。后来改用异步APIwx.getStorage让页面先渲染出来再慢慢加载数据用户体验差距明显。这些坑微信官方文档里没有特别提醒社区里也很少有人讨论。但实际开发中每一个都会消耗你半天甚至一天的时间。希望我的踩坑经验能帮到后来者。九、从0到1的产品思考9.1 为什么要用游戏化的方式学习车标直接翻图鉴也能学车标为什么要做成游戏因为人类大脑天生排斥学习但渴望游戏。同样的内容用考试卷子呈现大部分人看两分钟就困了用游戏呈现能让人不知不觉玩半小时。游戏化的本质不是把学习变成游戏而是利用游戏的机制即时反馈、难度递进、成就感来降低学习的痛苦感。我是车标王的三种模式恰好对应了认知科学中的三种记忆机制慧眼识车训练再认记忆recognition车标破阵训练回忆记忆recall车标重组训练再建记忆reconstruction。三种记忆机制层层递进从浅层识别到深度内化。9.2 碎片化学习的真正价值从用户反馈来看我是车标王最被认可的不是它的游戏性而是它对碎片化时间的利用。通勤地铁上10分钟等电梯3分钟排队5分钟——这些原本被刷短视频消耗掉的时间用来玩几道车标题日积月累效果惊人。一位用户说得好每天地铁上玩10分钟一个月下来停车场里一半的车都认识了。这不是什么高效学习法只是把碎片化时间用对了地方。十、写在最后从一个深夜的15秒短视频灵感到一款覆盖80个车标、三种游戏模式、图鉴系统和收藏功能的微信小程序我是车标王的创作过程是一次从灵感到产品的完整旅程。这个过程中最重要的经验是产品灵感无处不在关键是对生活中的痛点时刻保持敏感数据是产品的地基花在数据整理上的时间永远不会白费游戏化设计的核心不是好玩而是恰到好处的挑战用户反馈是最好的产品经理很多功能迭代是被用户推着走的技术踩坑不可避免但每踩一个坑都是一次成长碎片化时间的价值被严重低估好的产品能让碎片时间产生复利如果你对我是车标王感兴趣欢迎在微信中搜索体验。如果你也是小程序开发者或者对游戏化产品设计、认知科学应用等话题感兴趣欢迎在评论区交流。项目持续迭代中更多技术细节和功能更新请关注后续文章。
返回列表