一、缘起：一段视频引发的持续迭代
一切的开端，依然要回到那段刷爆短视频平台的宝宝识车标视频。一个两三岁的孩子，站在停车场里，指着一辆辆驶过的汽车，准确无误地报出每个品牌的名字。评论区里，无数成年人发出了"我开了十几年车还不如一个孩子"的自嘲式感叹。
正是这段视频催生了"我是车标王"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版本，或许会回答"如何将车标知识运用到生活中"的问题。产品迭代的本质，就是不断回答用户更深层次的需求。
八、小程序体验地址
如果你对"我是车标王"感兴趣，欢迎在微信中搜索"我是车标王"体验最新版本。无论是想通过游戏学习车标知识，还是想浏览品牌背后的故事，都可以在这个小程序中找到适合自己的使用方式。
搜索“我是车标王”微信小程序或者搜索“车标大师”微信小程序 |
如果你也是微信小程序开发者，或者对游戏化产品设计、知识图谱构建等话题感兴趣，欢迎在评论区交流讨论。技术选型、数据模型设计、用户体验优化等各个方面，都可以深入探讨。每一个小程序背后都有一段从想法到产品的故事，分享和交流让我们共同进步。
项目持续迭代中，更多技术细节和功能更新，请关注后续文章。
转载自 CSDN-专业IT技术社区
原文链接：https://blog.csdn.net/llooyyuu/article/details/162524894
