鸿蒙实战分段书写引导与进度设计前言必读图鸿蒙实战分段书写引导与进度设计第 80 篇 运行效果截图HarmonyOS NEXT手写输入有一个独特的问题用户不知道写多少才够分析。3 个字300 个字为解决这个不确定性WritePage 设计了3 段式书写进度引导——用户每写一笔自动前进一段当三段写满时系统认为已获得充足分析样本。本文深入讲解这个交互模式的状态设计。图3 段式书写进度引导——状态机驱动的分段书写交互流程用户开始书写点击下一段点击下一段点击完成点击清空点击清空点击清空点击撤销点击撤销点击撤销初始状态segment0 isWritingfalse书写段落1进度条1/3书写段落2进度条2/3书写段落3进度条3/3完成跳转 AnalyzingPage清空当前段画板撤销最后一笔一、3 段式进度交互1.1 状态定义StatesegmentsWritten:number0// 已写段数0 → 1 → 2 → 3StatetotalSegments:number3// 总段数固定 3 段1.2 提示文案动态切换privategetSegmentHint():string{consthints[随便写写 · 慢慢进入状态,// segmentsWritten 0未书写继续写 · 更多细节浮现,// segmentsWritten 1开始书写正在收尾 · 已足够分析// segmentsWritten 2接近完成]constidxMath.min(this.segmentsWritten,hints.length-1)returnhints[idx]}1.3 三段提示设计阶段段数提示文案语气目的开始前0/3「随便写写 · 慢慢进入状态」轻松、无压力降低用户门槛进行中1/3「继续写 · 更多细节浮现」鼓励、正向激励深入书写接近完成2/3「正在收尾 · 已足够分析」温和、提示暗示可以结束完成3/3继续复用「正在收尾」提示—不再变化二、自动推进机制2.1 主逻辑// Touch End 时自动推进privatetouchEnd():void{this.isDrawingfalseif(this.currentPoints.length0){// 保存笔画到历史this.history.push([...this.currentPoints])this.currentPoints[]// ★ 关键逻辑自动推进 ★if(this.segmentsWrittenthis.totalSegments){this.segmentsWritten// State 变更 → 触发 UI 重渲染}}}2.2 与撤销的联动// 撤销时回退进度privateundo():void{if(this.history.length0){this.history.pop()this.redraw()if(this.segmentsWritten0)this.segmentsWritten--// 回退段数}}操作segmentsWritten 变化提示文案初始0随便写写 · 慢慢进入状态写第一笔0 → 1继续写 · 更多细节浮现写第二笔1 → 2正在收尾 · 已足够分析撤销x22 → 1 → 0回到「慢慢进入状态」清空→ 0回到「慢慢进入状态」三、UI 渲染build(){Column(){// 顶部导航栏TitleBar()// 分段圆点指示器Row(){ForEach(Array(this.totalSegments),(_,i){Circle().width(ithis.segmentsWritten?10:6)// 已完成段更大.height(6).fillColor(ithis.segmentsWritten?AppColors.PRIMARY// 已完成品牌色:AppColors.LINE)// 未完成灰色描边.margin({right:6})})}.justifyContent(FlexAlign.Center).margin({top:12})// 动态提示文案Text(this.getSegmentHint()).fontSize(AppFonts.CAPTION).fontColor(AppColors.TEXT_2).margin({bottom:12})// 画板Canvas(this.context).onTouch(...)// 底部工具栏BottomToolbar()}}四、进度 UI 设计意图4.1 圆点指示器○ ○ ○ → 0/3 未开始灰色 ● ○ ○ → 1/3 开始书写 ● ● ○ → 2/3 接近完成 ● ● ● → 3/3 完成每个圆点的状态变化已完成 品牌色 10px未完成 灰色描边 6px。明显的尺寸和颜色差异让用户一眼就能看出进度。4.2 为什么是 3 段而非 5 段3 段的设计理由 1. 认知负荷低用户不需要数段数大致的 3 步就能感知 2. 时间适中每段约 10-20 秒3 段 ≈ 30-60 秒书写 3. 与 3 种提示文案匹配开始→进行→结束 的完整体验 4. 分析算法的最低样本AI 需要至少 30-50 字手写样本4.3 不设上限的设计意图虽然 UI 展示了 3 段进度但用户写 4 笔、5 笔也可以——segmentsWritten不会超过totalSegments但history会继续增长。进度只是引导不是限制。五、完整交互流程用户看到 WritePage ↓ ○ ○ ○ 随便写写 · 慢慢进入状态 ↓ 用户写下第一笔 → Touch End ↓ segmentsWritten 1 ○ → ●首个圆点填满 提示 → 继续写 · 更多细节浮现 ↓ 用户写下第二笔 → Touch End ↓ segmentsWritten 2 ○ → ●第二个圆点填满 提示 → 正在收尾 · 已足够分析 ↓ 用户点击「完成」→ router.back() ↓ Canvas 内容 → 图片 → 分析流水线六、工程价值// 整个分段功能的核心代码只有 3 行StatesegmentsWritten:number0// ① 状态if(this.segmentsWrittenthis.totalSegments){this.segmentsWritten// ② 自增 (Touch End 时)}privategetSegmentHint():string{returnhints[Math.min(this.segmentsWritten,2)]// ③ 映射文案}3 行核心代码 3 句提示文案 完整的分段书写引导体验。八、注意事项与常见问题8.1 开发注意事项在实际开发过程中需特别注意以下几点API 兼容性部分接口仅在特定 HarmonyOS NEXT 版本中可用需做版本条件判断权限模型采用静态声明module.json5 动态申请requestPermissionsFromUser的两阶段授权生命周期合理使用aboutToAppear()和aboutToDisappear()管理资源初始化与释放状态同步跨页面数据通过 AppStorage 共享组件内状态使用State/Prop/Link装饰器8.2 常见错误与解决方案常见问题快速排查表问题类型排查方向参考方法应用崩溃查看 hilog 错误日志hilog.error(TAG, ..., e.message)状态丢失检查 AppStorage 键名拼写统一使用常量管理键名动画不流畅避免在 animateTo 回调中执行 I/O动画与数据操作分离总结✅3 段式进度0/3 → 1/3 → 2/3 → 3/3每写一笔自动前进一段✅三段提示文案「慢慢进入状态」→「更多细节浮现」→「已足够分析」✅自动推进在 touchEnd 中无感推进用户不需要手动操作✅撤销联动undo 时回退段数保持状态一致性✅圆点指示器品牌色/灰色 10px/6px 区分已完成/未完成✅开放上界进度只作引导不限制继续书写下一篇将讲解报告详情页 ReportDetailPage 业务逻辑。 收藏提示3 段进度是足够好的心理锚点——不要求写 10 段太多也不只写 1 段不够3 段刚刚好。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源ArkUI 组件参考animateTo 显式动画Progress 进度条组件TextInput 文本输入HarmonyOS NEXT 开发指南第79篇 手写板 WritePage第59篇 入场动画设计第58篇 animateTo 基础七、分段书写的完整实现7.1 核心状态设计EntryComponentstruct WritePage{StatecurrentSegment:number1;// 当前段落1~3StatetotalSegments:number3;// 总段落数StatesegmentImages:string[][];// 各段保存的图片路径StatehasContent:booleanfalse;// 当前段是否有内容StateisTransitioning:booleanfalse;// 是否正在段落切换动画// 进度条值0~1getprogress():number{returnthis.currentSegment/this.totalSegments;}// 是否为最后一段getisLastSegment():boolean{returnthis.currentSegmentthis.totalSegments;}}7.2 进度条 UI 设计分段进度通过三个圆点 连接线实现BuildersegmentProgressBar(){Row({space:0}){ForEach([1,2,3],(i:number){// 圆点状态完成/当前/未来Circle({width:12,height:12}).fill(ithis.currentSegment?AppColors.accentMain// 已完成棕色:ithis.currentSegment?AppColors.accentLight// 当前浅棕:AppColors.bgSecondary)// 未来灰色// 连接线最后一个圆点后不需要if(i3){Column().width(60).height(2).backgroundColor(ithis.currentSegment?AppColors.accentMain:AppColors.bgSecondary)}},(i:number)i.toString())}.justifyContent(FlexAlign.Center).margin({bottom:16})}7.3 段落切换动画privateasyncgoNextSegment(){if(!this.hasContent||this.isTransitioning)return;this.isTransitioningtrue;// 1. 保存当前段图片constpixelMapawaitthis.saveCurrentCanvas();this.segmentImages.push(pixelMap);// 2. 画板淡出animateTo({duration:200,curve:Curve.EaseIn},(){this.canvasOpacity0;});awaitsleep(200);// 3. 清空画板推进段落this.ctx.clearRect(0,0,this.canvasWidth,this.canvasHeight);this.currentSegment;this.hasContentfalse;// 4. 画板淡入animateTo({duration:200,curve:Curve.EaseOut},(){this.canvasOpacity1;});this.isTransitioningfalse;}7.4 引导文案设计每一段显示不同的引导文案帮助用户写足分析样本段落引导文案设计目的第 1 段「写下今天的心情文字或任意一段话」降低焦虑随意书写第 2 段「再写一段可以是数字、符号或字母」引导书写样本多样性第 3 段「最后一段写完即可开始分析」明确终点减少放弃7.5 防重复提交保护最后一段点击完成时设置防重复标志privateasyncfinishWriting(){if(this.isSubmitting)return;// 防止重复点击this.isSubmittingtrue;constlastImageawaitthis.saveCurrentCanvas();this.segmentImages.push(lastImage);router.pushUrl({url:pages/AnalyzingPage,params:{segmentPaths:JSON.stringify(this.segmentImages)}});}7.6 分段进度的持久化中途离开恢复用户中途退出 App 后返回应恢复进度aboutToAppear(){// 尝试恢复未完成的分段进度constsavedProgressAppStorage.getWritingProgress(writingProgress);if(savedProgresssavedProgress.startTimeDate.now()-3600000){// 1小时内的未完成进度才恢复this.currentSegmentsavedProgress.segment;this.segmentImagessavedProgress.images;promptAction.showToast({message:已恢复第${this.currentSegment}段书写});}}onPageHide(){// 保存当前进度到 AppStorageAppStorage.set(writingProgress,{segment:this.currentSegment,images:this.segmentImages,startTime:Date.now()});}设计小结3 段式进度设计的核心价值在于「可预期性」——用户知道总共有 3 步当前在哪一步还差多少。清晰的进度信息直接降低了用户放弃率是提升任务完成率的关键 UX 设计。7.7 相关阅读第79篇 WritePage 手写板触摸绘图第91篇 AnalyzingPage 分析流程分段书写是本项目 UX 设计的核心创新点之一它将「写多少」的焦虑转化为「还差几步」的清晰进度感是提升用户完成率的关键设计决策。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力