一、缘起一段视频引发的持续迭代一切的开端依然要回到那段刷爆短视频平台的宝宝识车标视频。一个两三岁的孩子站在停车场里指着一辆辆驶过的汽车准确无误地报出每个品牌的名字。评论区里无数成年人发出了我开了十几年车还不如一个孩子的自嘲式感叹。正是这段视频催生了我是车标王1.0版本的诞生。在之前的文章中我详细记录了从创意萌芽到产品上线的全过程。1.0版本上线时小程序包含三种游戏模式慧眼识车车标破阵和车标重组。这三种模式分别从视觉匹配、反向识别和深度记忆三个维度帮助用户学习车标知识。图1引发项目灵感的宝宝识车标视频图2评论区成年人的自嘲与惊叹1.0版本上线后用户反馈远超预期。然而在众多好评中有一条反馈反复出现且极为一致玩完之后对车标有了初步认识但想知道更多关于这些品牌的故事和来历。这条反馈引发了我的深入思考。1.0版本本质上是一款训练型产品它通过游戏化机制帮助用户建立对车标的视觉记忆但训练结束之后呢用户对一个品牌产生了兴趣却没有渠道去深入了解。这就像教会了一个人认字却没有给他书看。基于这一洞察我决定启动2.0版本的大版本升级核心目标有三个第一增加图鉴系统让每个车标都有详细的品牌故事第二增加收藏功能让用户可以建立自己的专属车标库第三增加背景音乐为不同功能模块营造差异化的沉浸体验。从游戏到百科从娱乐到知识我是车标王不再只是一个游戏它正在成为一部掌上车标辞典。二、2.0版本核心升级从游戏到百科2.0版本是一次架构层面的全面升级。如果说1.0版本是一栋精心建造的游戏大厅那么2.0版本就是在旁边加盖了一座知识博物馆并用走廊将两者相连同时在大厅和博物馆里都播放着风格各异的背景音乐。本次升级包含四大核心模块模块功能说明图鉴系统品牌百科支持按国家和价值类型两种维度浏览每个品牌提供详细的品牌简介和历史故事收藏系统个人车标库用户可以收藏感兴趣的车标随时回顾查看打造专属的车标收藏背景音乐沉浸体验图鉴与收藏页面播放舒缓钢琴乐游戏页面播放激昂游戏音乐导航架构底部Tab栏新增底部四Tab导航挑战/图鉴/收藏/我的统一入口管理接下来我将逐一拆解每个模块的设计思路和技术实现。三、图鉴系统构建车标知识图谱图鉴系统是2.0版本中最核心、也是工作量最大的新功能。它的定位不是简单的图片列表而是一个结构化的车标知识图谱帮助用户系统地了解汽车品牌的全貌。3.1 双维度分类体系图鉴系统采用双维度分类方式用户可以从两个不同的视角浏览车标数据。第一个维度是按国家分类。目前收录的品牌覆盖了中国、德国、日本、美国、意大利、英国、法国、瑞典、韩国等多个汽车工业国家。按国家浏览可以直观感受不同国家汽车工业的特点和风格差异比如德国品牌偏重工程精密感意大利品牌则更具艺术气质。第二个维度是按价值类型分类。这个维度将品牌按照市场定位分为五个层级从高端到入门形成完整的汽车品牌价值图谱价值类型品牌数量代表品牌顶级豪车10个布加迪、劳斯莱斯、宾利、迈巴赫豪华车28个保时捷、奔驰、宝马、奥迪、雷克萨斯、路虎中高端14个沃尔沃、凯迪拉克、林肯、英菲尼迪、讴歌大众主流38个丰田、本田、大众、福特、别克、日产、比亚迪经济型11个五菱、宝骏、启辰、长安商用车两种分类维度可以随时切换。用户可以先按国家浏览意大利的所有品牌感受这个汽车之国的品牌全貌也可以直接跳转到顶级豪车分类看看全球最顶级的汽车品牌有哪些。双维度的设计让图鉴系统既是学习工具也是探索工具。图鉴主页支持按国家和按价值类型两种分类方式3.2 车标详情页不只是图片图鉴系统的灵魂在于车标详情页。一个品牌展示页面如果只有一张车标图片那就和1.0版本的游戏界面没有本质区别。2.0版本的详情页做了三个层次的信息架构。第一层是基础信息展示。页面顶部居中展示品牌车标高清图片下方是品牌中英文名称。车标图片右侧显示两个标签一个是国家标签如法国另一个是价值类型标签如顶级豪车。这两个标签用不同颜色区分国家标签使用蓝色系价值类型标签根据级别使用金色到灰色渐变。顶级豪车分类下的品牌列表第二层是品牌简介。每个品牌都有一段简洁的品牌介绍涵盖品牌的创立时间、创始人、核心产品线等基本信息。品牌简介的撰写遵循三句话原则第一句说明品牌来历第二句说明品牌特色第三句说明品牌现状。控制在100字以内确保用户能在几秒内快速了解品牌全貌。第三层是历史故事。这是详情页最吸引人的部分。每个品牌都有一个精心撰写的车标故事讲述车标的设计灵感、演变历程和背后鲜为人知的趣闻。比如布加迪的车标中那些红白相间的菱形格子并非纯粹装饰而是源自创始人埃托雷-布加迪对赛车运动的热爱劳斯莱斯车标上的欢庆女神雕像经历了多次设计迭代每个版本背后都有一个关于优雅与速度的故事。车标详情页展示布加迪的品牌简介和历史故事页面底部设置了收藏按钮用户看到感兴趣的品牌可以直接收藏跳转到收藏页面查看。整个详情页的信息架构遵循从视觉到文字、从概要到详情的认知递进规律让用户既能快速浏览也能深度阅读。四、收藏系统打造个人车标库收藏功能的灵感同样来自用户反馈。很多用户表示在游戏过程中会遇到一些特别有趣或从未见过的车标希望能有一个地方集中查看这些新发现。收藏系统正是为了满足这个需求而设计的。收藏系统的设计原则是轻量高效。用户在任何看到车标的地方图鉴详情页、游戏结果页都可以点击收藏按钮一键添加到个人收藏库。收藏操作无需确认弹窗点击即收藏再次点击即取消操作极其流畅。收藏页面以卡片式网格布局展示所有已收藏的车标。每个卡片包含品牌车标图片、中文名称和收藏时间。用户可以按照收藏时间排序也可以按国家或价值类型筛选。点击任意收藏卡片可以直接跳转到该品牌的详情页方便随时回顾品牌故事。从产品角度看收藏系统不仅仅是一个简单的标记功能它承担着三个重要的产品角色第一它是用户的学习笔记帮助用户聚焦最感兴趣的品牌第二它是用户的成就展示收藏数量本身就代表着用户的车标知识积累第三它是产品的留存工具用户收藏的品牌越多离开产品的成本就越高。收藏页面查看已收藏的车标五、背景音乐用声音营造沉浸体验背景音乐是2.0版本中最容易被忽视、但对用户体验影响最大的功能之一。声音是空间感知的重要维度一段恰到好处的背景音乐可以让用户在进入不同功能模块时在潜意识层面感受到氛围切换。2.0版本为不同的功能模块设计了两种完全不同风格的音乐图鉴页面和收藏页面使用舒缓的钢琴乐曲。这两个页面的核心场景是阅读和浏览用户需要安静、放松的环境来吸收信息。钢琴曲的旋律平缓悠扬节奏控制在每分钟60拍左右与人类静息心率接近能帮助用户进入专注阅读的沉浸状态。游戏页面则使用节奏感强烈的激昂游戏音乐。游戏的核心场景是挑战和竞技需要刺激用户的兴奋感和紧迫感。游戏音乐节奏偏快BPM控制在120以上配合答题倒计时机制营造出紧张刺激的竞技氛围。技术实现上使用微信小程序提供的wx.createInnerAudioContext()接口进行音频管理。核心逻辑是当用户在不同功能模块之间切换时自动检测当前应该播放的音乐类型如果与当前正在播放的不同则进行切换相同则继续播放。以下是音乐管理器的核心实现代码// 背景音乐管理器 class BgMusicManager { constructor() { this.audio wx.createInnerAudioContext(); this.currentType null; } switchTo(type) { // type: piano | game if (this.currentType type) return; this.audio.src type piano ? /audio/piano_bg.mp3 : /audio/game_bg.mp3; this.audio.loop true; this.audio.play(); this.currentType type; } }这段代码的核心设计思想是类型驱动切换。MusicManager不关心用户当前在哪个具体页面只关心这个页面属于哪种类型。图鉴和收藏都属于浏览类型统一播放钢琴曲游戏页面属于挑战类型统一播放游戏音乐。这种抽象层的设计使得未来新增页面时只需要标记页面类型音乐系统就能自动适配。另外还做了一些细节优化音乐文件采用低码率MP3格式单个文件控制在500KB以内确保首次加载速度通过this.audio.loop true设置循环播放避免音乐中断影响体验同时尊重用户的静音设置首次进入不自动播放需要用户手动开启。六、技术实现要点2.0版本的升级不仅仅是功能增加更涉及底层数据模型和页面架构的调整。以下三个技术要点是本次升级的关键。6.1 图鉴数据模型扩展1.0版本的车标数据模型主要服务于游戏字段相对简单只有名称、车标图片URL和难度系数。2.0版本的图鉴系统需要展示更丰富的品牌信息因此对数据模型进行了大幅扩展// 2.0版本扩展后的车标数据模型 { _id: String, name: String, // 品牌中文名称 nameEn: String, // 品牌英文名称 logoUrl: String, // 车标图片CDN地址 country: String, // 所属国家 valueCategory: String, // 价值类型顶级豪车/豪华车/中高端/大众主流/经济型 difficulty: Number, // 游戏难度系数 1-6 brandIntro: String, // 品牌简介100字以内 history: String, // 历史故事200-500字 tags: [String], // 标签 description: String // 简短描述 }新增的核心字段是valueCategory、brandIntro和history。valueCategory字段是图鉴系统双维度分类中按价值类型维度的数据基础brandIntro字段用于详情页的品牌简介展示history字段用于历史故事的展示。这三个字段的数据录入工作量非常大每个品牌都需要查阅大量资料确保信息准确、故事有趣。数据迁移方面由于从1.0升级到2.0需要为所有已有品牌补充新增字段。为此编写了一个数据迁移脚本批量读取云数据库中的现有记录通过品牌名称匹配预设的数据映射表自动填充brandIntro和history字段对于映射表中没有的特殊品牌再进行人工补录。6.2 收藏功能的本地存储方案收藏数据采用微信小程序本地存储方案核心API是wx.setStorageSync和wx.getStorageSync。选择本地存储而非云数据库的原因有两个第一收藏是纯个人数据不需要跨设备同步第二本地存储的读写速度远快于网络请求用户收藏和取消收藏时可以实现即时响应。// 收藏管理模块 const FAVORITES_KEY car_logo_favorites; function getFavorites() { return wx.getStorageSync(FAVORITES_KEY) || []; } function toggleFavorite(brandId) { const list getFavorites(); const index list.indexOf(brandId); if (index -1) { list.splice(index, 1); // 取消收藏 } else { list.push(brandId); // 添加收藏 } wx.setStorageSync(FAVORITES_KEY, list); return list; } function isFavorite(brandId) { return getFavorites().includes(brandId); }收藏数据以品牌ID数组的形式存储在本地。这种设计的优势在于数据结构极简一个数组就能表达用户的全部收藏状态。toggleFavorite函数同时处理添加和取消两个操作减少了代码复杂度。isFavorite函数则用于在图鉴详情页判断收藏按钮应该显示已收藏还是收藏状态。6.3 底部导航栏架构2.0版本引入了底部Tab导航栏这是整个小程序架构层面变化最大的部分。1.0版本是单页面应用所有功能集中在一个页面2.0版本变成了多Tab应用需要在Tab之间进行状态管理和页面切换。底部导航栏包含四个Tab挑战、图鉴、收藏、我的。挑战Tab对应的是1.0版本的全部游戏功能图鉴Tab对应新增的图鉴浏览功能收藏Tab对应新增的收藏管理功能我的Tab用于用户个人信息和设置管理。// app.json - tabBar 配置 { tabBar: { color: #999999, selectedColor: #333333, backgroundColor: #ffffff, list: [ { pagePath: pages/challenge/index, text: 挑战, iconPath: images/tab/game.png, selectedIconPath: images/tab/game-active.png }, { pagePath: pages/collection/index, text: 图鉴, iconPath: images/tab/book.png, selectedIconPath: images/tab/book-active.png }, { pagePath: pages/favorites/index, text: 收藏, iconPath: images/tab/star.png, selectedIconPath: images/tab/star-active.png }, { pagePath: pages/profile/index, text: 我的, iconPath: images/tab/user.png, selectedIconPath: images/tab/user-active.png } ] } }新版底部导航栏四大功能模块入口Tab切换时的音乐自动切换逻辑在app.js中全局管理。通过监听onShow生命周期函数在每个Tab页面的onShow中调用全局音乐管理器的switchTo方法传入当前页面的音乐类型。这样无论用户以何种顺序在Tab之间跳转背景音乐都能无缝切换。七、从1.0到2.0的思考从1.0到2.0的升级过程让我对产品迭代有了更深的理解。这不仅仅是在原有产品上叠加新功能而是一次产品定位的重新校准。1.0版本是一款纯粹的答题游戏。它通过三种游戏模式和六级关卡系统帮助用户建立对车标的视觉记忆。这款产品的核心价值是训练用户打开小程序的目的很明确做题、闯关、拿三星。当用户通关之后产品的价值就基本耗尽了。2.0版本改变了这个局面。图鉴系统的加入让产品从训练工具升级为知识工具。用户不再只是被动地做题而是可以主动探索。当一个用户在游戏中遇到一个陌生的品牌他可以在图鉴中深入了解这个品牌的故事把认车标这个行为从记忆层面提升到认知层面。游戏主界面三种模式依然保留背景音乐的加入则是我认为投入产出比最高的优化。一段不到500KB的音频文件就能彻底改变用户在使用产品时的主观感受。在图鉴页面浏览品牌故事时舒缓的钢琴曲让人不自觉地放慢节奏仔细阅读每一个细节切换到游戏页面时激昂的音乐瞬间点燃竞争欲望手指不自觉地加快答题速度。这种体验上的差异不需要任何复杂的代码逻辑仅仅通过声音就能实现。关于未来的规划我有几个方向正在思考中1.AI车标识别接入图像识别能力让用户可以拍照识别现实中的车标将线上学习与线下场景打通真正实现随时随地学车标的产品愿景。2.社区分享功能允许用户分享自己的收藏集和通关成就加入排行榜机制通过社交裂变带来更多用户。3.品牌知识持续扩充目前收录了100多个品牌未来计划扩展到200个以上同时引入更多国产品牌和新兴新能源品牌保持题库的时效性。4.每日挑战模式每天推送一组限时挑战题目结合积分体系提升用户日活和粘性培养用户的学习习惯。从我是车标王这个项目出发我越来越确信一件事好的产品不是一蹴而就的而是在持续倾听用户声音的过程中不断进化的。1.0版本回答了如何通过游戏学车标的问题2.0版本则回答了如何更深入地了解车标的问题。而未来的3.0版本或许会回答如何将车标知识运用到生活中的问题。产品迭代的本质就是不断回答用户更深层次的需求。八、小程序体验地址如果你对我是车标王感兴趣欢迎在微信中搜索我是车标王体验最新版本。无论是想通过游戏学习车标知识还是想浏览品牌背后的故事都可以在这个小程序中找到适合自己的使用方式。搜索“我是车标王”微信小程序或者搜索“车标大师”微信小程序如果你也是微信小程序开发者或者对游戏化产品设计、知识图谱构建等话题感兴趣欢迎在评论区交流讨论。技术选型、数据模型设计、用户体验优化等各个方面都可以深入探讨。每一个小程序背后都有一段从想法到产品的故事分享和交流让我们共同进步。项目持续迭代中更多技术细节和功能更新请关注后续文章。