鸿蒙文搜图·图境奇旅剧情藏线索搜对图片才能翻页的旅行手账这是一个把「文搜图」做成叙事解谜的 HarmonyOS 应用。你得自己读懂一段旅行故事从字里行间提炼出关键词才能搜出剧情所指的那张图。搜对了才能翻页搜错了……那就再读一遍。六章旅程走完回头解锁整册旅行照片。全程端侧、零网络、零权限。一、效果展示一段完整的解谜流程1. DevEco Studio 中的运行全景项目story-quest在 DevEco Studio 中一键运行到 Mate 90 Pro 模拟器。左侧项目结构、中间 README、右侧运行窗口底部日志显示com.example.storyquest successfully launched。全程端侧、无网络、无权限。2. 开始页旅行手账封面开始页走旅行手账风奶油纸底一张白卡片上用橘红胶带贴条斜贴着「TRAVEL LOG · 六章旅程」标签下面是手写感的「图境奇旅」大标题。副题写着「剧情里藏着线索搜对图片才能翻页。像翻旅行手账一样走完六段故事。」下面三个彩色小标签排成列读剧情蓝、搜图库红、搜分数绿各配一行说明。底部一枚天蓝色「启程翻页」按钮整个页面像一本刚翻开的旅行手账。3. 第一章「启程的清晨」读故事找线索进入第一章顶部是行程节点线——6 个圆点排成一行当前第 1 站用红色高亮其余灰白右端标注「第 1 站 / 共 6 站 · 行囊积分 0」。剧情卡用红色「本章剧情」胶带贴条标记内容是天刚蒙蒙亮行囊已经收拾好。双手捧起一只粗瓷碗姜片和柠檬在水里打着转热气一直烫到心口。喝完这一碗就该出门了。——搜索这碗暖手的东西。线索就藏在故事里粗瓷碗、姜片、柠檬、热气、暖手。玩家需要自己提炼关键词不能靠系统给。下方是自由输入框占位提示「提炼关键词如毛茸茸 宠物」旁边一枚蓝色「翻图」按钮。右下角还有个小字链接「求个提示 · -20 分」——卡关时可以花 20 分看三个提示词。4. 输入关键词手机键盘弹出玩家输入了「宠物」——这是被占位提示「毛茸茸 宠物」带偏了。键盘弹出输入框聚焦还没点「翻图」。这一张截图展示了自由输入检索的交互形态虽然是自由文本搜索但语境完全不同——你不是在找图是在解谜。5. 第一次搜索错搜出「草地与狗」用「宠物」搜出唯一结果「草地与狗」——一个女孩蹲在草地上逗狗。得分角标 3底部标签「宠物」。但这不是剧情所指的图剧情说的是「姜片和柠檬在水里打着转」指向的是「柠檬姜茶」。搜索框下方弹出一条珊瑚红错误提示「『草地与狗』不是这一站的风景再读一遍剧情」。这个设计的核心在于检索结果是对的标签确实命中「宠物」但剧情理解是错的。系统不会告诉你该搜什么词只会告诉你搜错了。6. 第二次搜索搜「茶」仍错选「晨光茶歇」玩家调整关键词为「茶」搜出「晨光茶歇」——一杯茶配一本书晨光洒在桌面上。得分 3标签「茶杯」。点选后依然错误「『晨光茶歇』不是这一站的风景再读一遍剧情」。原因是「晨光茶歇」的标签是「下午茶、书本、阅读」和剧情里的「姜片、柠檬、暖手」并不匹配。真正的目标是「柠檬姜茶」——标签含「姜茶、柠檬、热饮」和剧情完美对应。玩家需要再读一遍故事抓住「姜片和柠檬」这个关键细节搜「姜茶」才能命中。二、产品立意把「读故事」变成「搜图」「图境奇旅」的核心设计只有一句话搜索框里不放关键词放你对剧情的理解。传统的文搜图应用查询词要么自由输入、要么系统给定、要么从词池挑选。而这个应用更进一步——查询词需要玩家自己从一段旅行故事里提炼出来。你不是在操作一个搜索框而是在读一段旅行故事。故事里的每一个细节粗瓷碗、姜片、柠檬、热气都是线索你需要把它们翻译成图库的标签语言。这个设计让「搜索」变成了阅读理解的自然延伸读懂了就能搜到搜不到就说明没读到位。三、六章旅程一段从清晨到归途的完整叙事六章构成一段环形旅程——清晨出发穿过城市、黄昏、星夜、雪山最终回到出发的地方章节标题目标图核心线索1启程的清晨柠檬姜茶粗瓷碗、姜片、柠檬、暖手2城市的告别欧式穹顶穹顶、塔楼、天际线3黄昏的云云天云、傍晚、月亮4荒野的星夜星空下的谷仓星空、夜晚、寂静5雪山的召唤雪山雪山、峰顶、积雪6归途的伙伴草地与狗狗、草地、陪伴每章末尾的破折号给出搜索指令「——搜索这碗暖手的东西」但不给具体词——关键词需要玩家自己从故事里提炼。四、核心机制提炼关键词与错误纠偏1. 自由输入 标签计分检索search(query:string):void{constkeywordsquery.split(/\s/).filter(kk.length0);for(constcardofCARDS){letscore0;for(constkwofkeywords){if(card.tags.indexOf(kw)0)score3;elseif(card.title.indexOf(kw)0)score2;else{/* 部分匹配 */}}if(score0)hits.push(...);}hits.sort((a,b)b.score-a.score);}检索引擎是纯端侧的标签计分匹配标签精确 3、标题包含 2、部分匹配 1关键词不是随手敲的而是从剧情里读出来的。搜索结果的排序本身就是对剧情理解的反馈——目标图排得越靠前说明你提炼的关键词越精准。2. 错误提示不剧透答案只给方向wrongFeedback『${hit.title}』不是这一站的风景再读一遍剧情;点错图后不会弹出「正确答案是 XX」只会温和地提示「再读一遍剧情」。这个设计保护了叙事解谜的核心乐趣——玩家需要自己回头重读故事发现被忽略的细节。3. 提示系统花钱看词每章一次useHint():void{if(this.hintShown||this.hintsUsed1)return;this.hintWordsthis.chapter.hintWords;// 如 [姜茶, 柠檬, 碗]this.hintShowntrue;}卡关时可以花 20 分看三个提示词如第一章的「姜茶、柠檬、碗」。但每章只能用一次且总分扣 20——提示是有代价的。4. 计分一次搜对 100 分多搜多错皆扣得分 max(20, 100 - 搜索次数×10 - 提示×20)第一次就搜对拿满分 100每多搜一次 -10用提示 -20下限 20 分保底。6 章满分 600终局按总分解锁回顾画廊。五、UI 实现旅行手账的视觉体系配色奶油纸底 三色标签色值用途#F5F0E1奶油纸底#2D2926墨色文字#E85D3D橘红胶带/剧情标签/当前站#4A90D9天蓝读剧情/按钮#5CA85C草绿搜分数/成功反馈#D94A4A珊瑚红错误提示/搜图库标签关键视觉元素胶带贴条TRAVEL LOG、本章剧情等标签用微倾斜的色块模拟手账胶带行程节点线6 个圆点连成一线当前站红色高亮已过站灰色未来站灰白拍立得照片搜索结果和解锁图卡用白边圆角卡片微微倾斜模拟拍立得照片钉在手账上的效果便签提示条错误提示用珊瑚红便签条成功提示用草绿便签条六、验证截图与代码逻辑核对截图关键数据代码验证03-chapter1第 1 站 / 共 6 站行囊积分 0CHAPTERS.length 6初始totalScore 0✓05-hit-dog「宠物」搜出草地与狗得分 3草地与狗标签含「宠物」→ 3 分 ✓06-wrong-tea「茶」搜出晨光茶歇错选提示晨光茶歇标签含「茶杯」→ 命中但非目标图 ✓06-wrong-tea错误提示「再读一遍剧情」wrongFeedback文案匹配 ✓三次搜索的词组变化宠物 → 茶 → 姜茶清晰展示了逐步逼近正确理解的过程。七、已知边界六章剧情为固定内容无分支或多结局内置图卡共 12 张部分章节的「目标画面」与剧情的对应带有解读色彩未实现进度持久化退出应用后从头开始提示词为预置未做动态生成——如果玩家搜的词和提示词完全不同提示可能不够有针对性八、小结「图境奇旅」把「读懂一段故事」变成「搜出一张图」把「搜索」变成「理解」的自然延伸。旅行手账的视觉体系 六章环形叙事 自由提炼关键词的检索机制让文搜图这个技术动作第一次有了故事感。全程端侧、零网络零权限模拟器即可完整游玩。