【共创季稿事节】从毕业设计到鸿蒙开发者我把求职焦虑做成了一张技能成长地图【共创季稿事节】方向三毕业季 · 鸿蒙同行毕业季最让人焦虑的不一定是“我不会什么”而是“我会的东西很散不知道下一步该补什么也不知道如何把它们讲给面试官听”。于是我用 HarmonyOS 6.1 做了一个面向毕业生的应用——技能成长地图 Skill Path。它把 ArkTS、ArkUI、AI 应用、多端协同等能力从一串模糊的关键词变成可视化星图、可完成任务、可执行的 7 日计划和可沉淀的作品轨迹。本文完整复盘项目的产品思考、ArkTS/ArkUI 实现、声明式状态管理、沉浸式界面、AI 规划边界以及为什么我认为毕业生学习鸿蒙时最重要的不是“刷完多少课”而是建立自己的能力证据链。图 1首页不是普通待办清单而是把“本周我成长了什么”变成可见、可积累的成长仪表盘。一、毕业季的真实问题知识很多路线很少对很多应届毕业生来说求职准备会陷入一种非常熟悉的循环收藏了大量学习路线下载了很多课程做过几个 Demo简历上也写了“熟悉 ArkTS、ArkUI、AI 应用开发”但真正投递时却很难回答三个问题我距离目标岗位还差什么接下来一周应该做什么才能产生真正有价值的进步这些学习和项目怎么变成能被面试官理解的作品证据这不是学生不努力而是学习过程缺少一条从“知识点”到“能力”再到“作品”的闭环。以 HarmonyOS 应用开发为例ArkTS、ArkUI、Ability、网络、存储、响应式状态、多端适配、AI 服务接入、构建调试任何一个词都可以学很久。但岗位并不只考察“是否看过概念”而是更关心能否用 ArkTS 写出类型清晰、可维护的业务代码能否用 ArkUI 做出状态驱动、尺寸自适应的体验能否完成一个有真实数据流、异常处理和完整交互的应用能否说明技术选择、踩坑与迭代过程能否把 AI 或全场景能力落进具体用户问题。因此Skill Path 不把毕业生当成需要“打卡”的用户而把他当成正在构建职业能力的开发者。项目的核心命题是将碎片化学习转译为可验证、可回顾、可行动的成长路径。二、产品设计把“我要找工作”拆成三层可执行系统整个应用只保留三个页面首页、星图、计划。表面上功能不多但这三个页面分别对应毕业生成长中的三个问题。页面回答的问题核心内容首页我今天做什么成长能量、连续学习、今日冲刺、继续学习星图我现在会什么、缺什么鸿蒙能力模块、进度、状态、下一目标计划我如何朝岗位推进目标岗位、AI 冲刺建议、7 日行动轨迹这不是为了凑三个 Tab而是刻意把信息层级拆开当下行动Today ↓ 能力画像Skill Graph ↓ 职业方向Career Plan如果首页直接堆满能力卡、岗位要求、课程、任务和项目用户会重新回到“信息很多不知道先做什么”的状态。Skill Path 的策略是首页给动作星图给诊断计划给方向。图 2每项任务都包含时间成本、任务性质和 XP 回报避免“学习鸿蒙”这种无法执行的大目标。三、为什么选择“成长能量”而不是简单的完成率学习类应用很容易把用户变成进度条的奴隶完成率、排名、连续天数、徽章越来越多真正的能力却没有增加。Skill Path 中的 XP 也可能被误解为游戏化装饰因此设计时必须先定义它代表什么。项目把成长能量视为能力证据的轻量反馈而不是学习时长的代称。一个任务能够增加 XP需要至少满足其中一个条件产出了可以运行的代码解决了一个明确错误完成了一次可复盘的技术练习为作品集补充了可展示的项目材料形成了可解释的设计选择或技术总结。例如“完成 ArkUI 自适应布局练习”比“观看 20 分钟课程”更适合作为任务因为前者会留下页面、断点策略或复盘记录“复盘一次 ArkTS 编译错误”则鼓励开发者把踩坑变成知识资产。this.MissionRow(完成 ArkUI 自适应布局练习,20 分钟 · 推荐任务,80 XP,...)this.MissionRow(为作品集补一段项目介绍,15 分钟 · 求职加分,50 XP,...)this.MissionRow(复盘一次 ArkTS 编译错误,10 分钟 · 查漏补缺,30 XP,...)从毕业生视角看这种任务设计有两个现实意义第一它把“求职焦虑”转换成今天能完成的一件小事第二它让学习成果天然能够沉淀到简历、作品集和面试表达中。四、HarmonyOS 6.1 工程结构先控制复杂度再扩展能力项目当前是一个轻量但完整的 HarmonyOS 应用核心页面集中在IndexPage.ets同时保持清晰的数据类型和组件边界skill-path-demo/ ├── AppScope/ 应用级配置与资源 ├── entry/src/main/ │ ├── ets/ │ │ ├── entryability/EntryAbility.ets │ │ └── pages/IndexPage.ets │ ├── resources/ │ └── module.json5 ├── build-profile.json5 └── hvigorfile.ts为什么没有一开始拆成十几个文件因为当前版本的重点是验证三件事成长任务是否可理解、星图是否能呈现能力差异、AI 计划是否真正有行动价值。过早拆分会增加样板代码和状态同步成本。但“先集中”不等于“无边界”。页面内部仍然按功能使用Builder分区HomeContent 首页容器 HeroCard 成长能量与总进度 DailyMissions 今日任务 MapContent 技能星图 Constellation 星图可视化 SkillList 能力轨迹 PlanContent 职业计划 AiPlanCard AI 冲刺计划 BottomBar 固定底部导航这让后续演进很直接当接入真实数据时可以把SkillNode、TaskItem、PlanService分别抽到model/和service/当页面变复杂时再把HomeContent、MapContent、PlanContent提取为独立组件。先用清晰边界验证产品再根据复杂度拆分工程是毕业生做项目时非常实用的节奏。五、ArkTS 类型设计能力地图先是一份数据契约星图页面的核心不是画几个发光圆点而是让“能力”拥有可被 UI、任务、AI 计划共同理解的结构。interfaceSkillNode{icon:string;name:string;subtitle:string;progress:number;color:string;glow:string;status:string;}其中最值得注意的是progress、status和视觉字段progress用于进度条与总体完成度计算status用于把数字翻译成“进阶中”“突破点”“下一目标”color与glow不是硬编码在组件里而是能力领域模型的一部分。constSKILLS:SkillNode[][{icon:⌘,name:ArkTS,subtitle:类型与工程基础,progress:82,color:#A98BFF,glow:#D5C7FF,status:进阶中},{icon:✦,name:ArkUI,subtitle:声明式界面与动效,progress:68,color:#FF8DBB,glow:#FFC6DD,status:持续成长},{icon:◈,name:AI 应用,subtitle:结构化输出与服务接入,progress:54,color:#58DBD0,glow:#B5FFF7,status:突破点},{icon:↗,name:多端协同,subtitle:响应式布局与任务流,progress:39,color:#79A8FF,glow:#C7DAFF,status:下一目标}];对毕业生而言这张表实际上也是一份自我评估模板。它不是要求每个人都具备完全相同的能力而是提醒大家把“我会鸿蒙”拆成可解释的维度语言与工程基础、UI 与交互、AI 应用能力、全场景协同能力。面试时也更容易围绕这些模块讲清自己的作品和成长过程。六、声明式 UI状态不应该藏在组件内部ArkUI 的优势在于状态驱动 UI。Skill Path 的三栏切换、选中能力、任务完成、AI 生成中与计划展示都由State明确描述StatecurrentTab:number0;StateselectedSkill:number0;StateaiLoading:booleanfalse;StateaiPlanVisible:booleanfalse;Statestreak:number12;StatecompletedTasks:number2;这段代码表达了一个很重要的开发原则UI 是状态的函数不要让 UI 自己偷偷保存业务真相。例如任务完成时不需要手动寻找某一行文字然后改颜色只需更新completedTasks与streak任务行、统计文案和成长指标会根据状态重新计算.onClick((){if(!completed){this.completedTasks;this.streak;promptAction.showToast({message:任务完成成长能量已增加,duration:1200});}})对应的 UI 判断也保持简单Text(completed?✓:(index1).toString()).backgroundColor(completed?#B9F6D8:#503474)Text(${this.completedTasks}/3 已完成)当前 Demo 的任务数据是预置的。若扩展为真实应用建议把任务列表改为State tasks: TaskItem[]完成任务时通过不可变更新数组再用 Preferences 做本地持久化。此时关键不是“能否点击”而是让任务状态可恢复、可计算、可被 AI 规划服务读取。七、三栏导航与全屏沉浸让学习流不被页面结构打断Skill Path 的导航采用Stack BottomBar内容在上固定底栏叠在最下方Stack({alignContent:Alignment.Bottom}){if(this.currentTab0){this.HomeContent()}elseif(this.currentTab1){this.MapContent()}else{this.PlanContent()}this.BottomBar()}三个内容区各自是Scroll并预留了底部空间.padding({left:18,right:18,bottom:105})这是移动端布局常见但很重要的细节。因为底栏实际高度为 78px如果滚动内容不留出额外安全距离最后一项行动轨迹会被导航遮挡。很多初学者把这类问题误认为“底部留白”实际是叠层布局缺少内容安全区。窗口层面应用支持phone、tablet、2in1deviceTypes:[phone,tablet,2in1]并通过沉浸式窗口让系统栏与深色页面保持视觉连续mainWindow.setWindowLayoutFullScreen(true);mainWindow.setWindowSystemBarEnable([status,navigation]);mainWindow.setWindowSystemBarProperties({statusBarColor:#07131F,navigationBarColor:#07131F,statusBarContentColor:#FFFFFF,navigationBarContentColor:#FFFFFF});这里没有粗暴隐藏系统栏。学习、求职类工具不需要抢占用户的系统操作更合理的体验是保留系统栏同时让背景颜色连为一体。对毕业生项目而言这也是一个值得写进复盘的细节好的全屏不是“看起来酷”而是兼顾视觉、可用性和设备兼容性。图 3把课程放进成长路径中而不是把课程完成率当成能力本身。八、能力星图把抽象技能变成可被看见的关系“技能树”并不是新概念但毕业生常见的技能树只有一串标签Java、Python、ArkTS、数据库、AI。它看起来丰富却无法说明掌握深度、关联关系与下一步方向。Skill Path 采用星图隐喻每项能力是一颗星星与星之间通过虚线构成路径颜色区分能力领域进度与状态说明当前阶段。图 4星图不是装饰而是让毕业生看见“我已经点亮什么、下一颗星在哪里”。实现上星图没有引入复杂图形库而是用 ArkUI 的Stack做相对定位Stack(){Text(✦).fontSize(108).fontColor(#49326F).margin({left:22,top:35})Text(· · · · ·).fontSize(26).fontColor(#8064AB)this.StarNode(⌘,ArkTS,#A98BFF,28,22)this.StarNode(✦,ArkUI,#FF8DBB,204,58)this.StarNode(◈,AI,#58DBD0,104,145)this.StarNode(↗,协同,#79A8FF,237,166)}这是一种非常适合毕业生项目的取舍先用原生组件实现完整视觉和交互再在确有必要时引入 Canvas 或图形引擎。对于只有少量固定节点的场景Stack结构更容易调试、适配和维护。而在能力轨迹列表中点击卡片会更新selectedSkill选中项通过背景和边框突出.backgroundColor(this.selectedSkillindex?#34204B:#211532).border({width:1,color:this.selectedSkillindex?skill.color:#49305E}).onClick((){this.selectedSkillindex;})这段交互很小却传递出一个产品态度能力不是一个静态评分而是可以被关注、被展开、被持续投入的对象。图 5ArkTS 82%、ArkUI 68%、AI 应用 54%、多端协同 39%数字的意义在于帮助决定优先级而不是制造排名焦虑。九、为什么把“作品”放进能力体系而不是只放在简历末尾毕业生最容易低估的一项能力是把做过的项目说清楚。很多同学的简历有项目名称但项目介绍只写“使用 ArkTS 和 ArkUI 实现了一个应用”。这不足以证明能力。一个项目应该能够反向映射到技能节点AI 智能菜谱 ├─ ArkTS接口模型、JSON 解析、异常处理 ├─ ArkUI食材输入、结果卡片、详情页面 ├─ AI 应用结构化提示词、服务端安全边界 └─ 工程能力构建、模拟器验证、状态管理 跨屏演讲台 ├─ ArkUI手机遥控器与大屏展示 ├─ 多端协同共享演讲状态、任务角色拆分 └─ 产品设计不同设备各司其职这样作品集不再是一堆截图而是一组能力证据。Skill Path 首页中的“3 个作品沉淀”就是这个思路的入口未来可为每个技能节点关联项目、代码片段、技术文章、构建记录和复盘笔记。这也是“毕业生的鸿蒙特点”之一不只是学习 API而是在毕业设计、创新赛、社团项目、实习任务中把技术能力做成真实可运行的应用再通过文章和作品集将过程讲出来。十、AI 成长教练AI 不是替毕业生规划人生而是帮助收敛下一步计划页是项目中最容易被误解为“AI 万能规划”的部分。实际上AI 成长教练的目标非常克制它不替用户决定职业不生成空泛鸡汤而是根据已知的能力缺口、目标岗位、已有作品给出一周内可执行的建议。图 6目标岗位不是一句标题而是后续技能筛选、任务排序和作品打磨的依据。页面当前包含三个关键输入目标岗位HarmonyOS AI 应用开发工程师已有能力ArkTS、ArkUI、AI 应用当前短板多端协同等进度更低的模块。点击生成后应用显示一个 900ms 的分析状态再呈现建议。当前是端侧本地模拟目的是完成 UI 和交互验证privategeneratePlan():void{if(this.aiLoading)return;this.aiLoadingtrue;setTimeout((){this.aiLoadingfalse;this.aiPlanVisibletrue;promptAction.showToast({message:你的 7 天冲刺计划已生成,duration:1400});},900);}生成结果强调具体行动补强多端协同、把 AI 菜谱项目整理成作品集案例、用模拟面试检验表达。它比“建议继续学习鸿蒙”更有用因为每一条都有明确产出。图 7AI 的价值不是给更多信息而是帮助毕业生从多个待办中找到优先级。10.1 真实大模型接入应该如何设计要把本地模拟替换为真实大模型不能直接在客户端放入密钥。推荐链路是HarmonyOS App ↓ HTTPS目标岗位、技能状态、作品摘要 业务服务端 ├─ 身份校验与限流 ├─ 维护提示词模板与版本 ├─ 调用模型服务 ├─ 校验结构化响应 └─ 返回 7 日计划 JSON请求可定义为{targetRole:HarmonyOS AI 应用开发工程师,skills:[{name:ArkTS,progress:82},{name:ArkUI,progress:68},{name:AI 应用,progress:54},{name:多端协同,progress:39}],projects:[AI 智能菜谱,跨屏演讲台],availableMinutesPerDay:60}模型响应不要返回长篇散文应返回端侧可消费的契约{summary:本周优先补强多端协同并完成一个可展示的作品迭代。,focusSkill:多端协同,days:[{day:1,title:拆解跨设备状态,minutes:40,output:状态流图},{day:2,title:实现响应式布局,minutes:60,output:可运行页面}],portfolioAction:为 AI 智能菜谱补充结构化输出和异常兜底说明}端侧根据 JSON 渲染行动轨迹服务端控制模型、密钥和内容策略AI 负责基于输入提出候选计划。这是 AI 应用最稳妥的分工模型给建议系统保证结构用户保留决定权。十一、7 日行动轨迹让计划必须落到产出任何计划如果没有时间维度和输出定义最后都只是“看起来很努力”。因此Skill Path 的计划页将一周拆成按日推进的轨迹this.TrackRow(DAY 01,ArkUI 自适应布局,已完成,true)this.TrackRow(DAY 02,作品集项目提炼,已完成,true)this.TrackRow(DAY 03,多端状态同步练习,今天,false)this.TrackRow(DAY 04,AI 接口异常兜底,明天,false)this.TrackRow(DAY 05,模拟面试与复盘,待解锁,false)图 8一条合格的成长计划必须同时包含学习、动手、沉淀和表达。这条轨迹刻意没有把七天都塞满课程而是覆盖四种不同性质的任务学习理解 ArkUI 自适应布局动手实现多端状态同步练习工程化处理 AI 接口异常兜底表达模拟面试、复盘项目讲法。对于毕业生来说最后一项尤其容易被忽略。很多项目直到答辩或面试前才想起来准备讲解结果无法在有限时间内说清问题、方案、技术难点和结果。把表达纳入技能地图不是包装而是开发能力的一部分。十二、视觉系统为什么选择“紫粉霓虹”而不是常规教育蓝成长地图的视觉没有采用传统课程平台常见的蓝白色。原因不是为了“花里胡哨”而是希望把学习从严肃、被动的任务转化为更有个人归属感的成长空间。视觉系统包含几组稳定关系角色颜色含义页面基底#10091F深夜学习、专注和沉浸感成长主卡#332052能量、阶段感、个人成就ArkTS#A98BFF工程与语言基础ArkUI#FF8DBB创意、界面、表达AI 应用#58DBD0智能化、连接与未来感多端协同#79A8FF设备连接、空间延展这些颜色不是随机散落在页面中的装饰而是绑定在SkillNode数据中。这样能力卡、星图节点、进度条和选中边框能够使用同一套视觉语义。同时深色界面对文字对比度提出更高要求标题使用接近白色的#FFF8FF说明文字使用低饱和浅紫辅助信息再降一级。毕业生项目常见的视觉问题是“颜色很多信息层级却不清楚”。解决它的关键不是继续加特效而是先保证标题、正文、辅助说明、禁用状态之间有稳定的明度差。十三、从模拟器到构建一名毕业生如何证明项目“真的能跑”作品展示不应该停留在设计图或代码截图。Skill Path 已通过 HarmonyOS 工程构建并安装到模拟器验证交互。构建时使用 DevEco Studio 提供的 SDK、JDK 与 Hvigorcdskill-path-demounsetNODE_OPTIONSexportDEVECO_SDK_HOME/Applications/DevEco-Studio.app/Contents/sdkexportJAVA_HOME/Applications/DevEco-Studio.app/Contents/jbr/Contents/Home/Applications/DevEco-Studio.app/Contents/tools/node/bin/node\/Applications/DevEco-Studio.app/Contents/tools/hvigor/bin/hvigorw.js\--modemodule-pmoduleentrydefault-pproductdefault\-prequiredDeviceTypephone assembleHap产物位置为skill-path-demo/entry/build/default/outputs/default/entry-default-unsigned.hap实际开发中遇到过一个很典型的 API 差异问题尝试为Progress组件链式调用.strokeWidth()时当前 SDK 的ProgressAttribute不支持这个属性ArkTS 编译器会明确报错。最终移除不支持的链式属性保留color与backgroundColor完成视觉表达。这个案例很适合写入毕业生作品复盘不是为了展示“我没出错”而是说明我知道如何根据编译错误定位 API 约束、进行最小修改并重新构建验证。真正的工程能力经常就体现在这些看似普通的细节中。十四、后续演进让成长地图从 Demo 变成可持续使用的工具当前版本已完成三页交互、任务状态、能力选择和 AI 计划展示。若继续演进我会按以下优先级推进。14.1 本地持久化使用 Preferences 保存连续学习天数、完成任务、目标岗位、技能进度、AI 历史计划。这样应用关闭后不会回到初始状态也能为“连续学习”提供真实基础。14.2 作品证据库为每个能力节点关联项目仓库链接、截图、技术文章、构建包、个人复盘。用户点击“AI 应用”时不只看到 54%还可以看到智能菜谱、路况视觉助手等项目证据。14.3 可解释的能力评估进度不是用户手填的分数而应由任务、项目、测验、代码练习、复盘等证据加权得出并展示“为什么当前是 54%”。这比一个好看的百分比更值得信任。14.4 多端协同学习场景HarmonyOS 的全场景能力很适合成长类产品手机用于每日任务提醒和碎片记录平板用于技能星图和课程学习PC 或 2in1 用于作品整理、代码练习和面试模拟。不同设备不必展示同一屏而应围绕同一成长任务各司其职。14.5 AI 服务端化与隐私保护真实大模型接入必须放在服务端密钥不下发到客户端计划生成有频控和审计用户的简历、项目描述、目标岗位属于个人信息需要最小化收集与传输。AI 可以辅助规划但不能替用户对职业选择做断言更不能制造“你不够好”的焦虑。结语毕业不是技能学习的终点而是第一次主动定义自己做 Skill Path 的过程中我不断回到一个问题毕业生需要的到底是更多课程还是更清楚的方向答案不是二选一。课程提供知识项目提供实践复盘提供理解作品集提供证据面试表达提供连接机会。真正缺少的是把这些东西串起来的路径。对正在学习 HarmonyOS 的学生来说ArkTS、ArkUI、AI 应用、多端协同不是几块孤立的知识标签。它们可以从一份毕业设计、一次创新赛、一个校园生活痛点或一段求职经历开始最终长成可运行的应用、可讲述的项目和可持续的职业能力。Skill Path 想做的就是把这条路画出来今天完成一个小任务点亮一颗能力星明天完善一次项目异常处理增加一条工程证据下周把作品讲给面试官听让成长被真正看见。从学生到鸿蒙开发者不是一夜之间获得某个称号而是在一次次动手、构建、修复、复盘和表达中逐渐拥有“我可以解决一个真实问题”的底气。