引子导航栏的差不多和刚刚好其实 Index.ets 里的导航栏代码经过了好几轮调优——图标的缩放比例从 1.15 改到 1.2透明度从 0.4 改到 0.3动画时长从 300ms 改到 350ms下划线从内联改成了独立的 Row Blank 结构。每次改动都不大但叠在一起差别明显。导航栏是用户一进应用就看到的东西做好了是刚好舒服做不好是说不上来但就是不对。完整效果代码结构总览Index.ets 的导航栏分四个区域┌─────────────────────────────────┐ │ 命运转盘 │ ← 标题区居中 │ 转动转盘 · 揭晓今日运势 │ ← 副标题 ├─────────────────────────────────┤ │ ✨ │ ← 图标区三栏 │ 运势 星图 塔罗 │ ← 文字标签 ├─────────────────────────────────┤ │ ━━━━━ │ ← 下划线区独立 Row └─────────────────────────────────┘对应代码的四个Column/Row块逐个分析。标题区居中对齐与呼吸感Column(){Column(){Text(this.navTitle()).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#E8DFF8).animation({duration:300})Text(this.navSub()).fontSize(10).fontColor(#6B5B9A).margin({top:6}).animation({duration:300})}.width(100%).alignItems(HorizontalAlign.Center).padding({top:14,bottom:12})}为什么嵌套两层 Column外层 Column 是导航栏的容器内层 Column 专门放标题和副标题。内层设了alignItems(HorizontalAlign.Center)让文字居中外层负责整体布局。如果不嵌套直接在内层 Column 上设居中和下面的图标区会冲突——图标区需要justifyContent(FlexAlign.SpaceEvenly)分散排列不能居中。padding 的选择padding({ top: 14, bottom: 12 })给标题区留了呼吸空间。top 比 bottom 大 2px是因为标题文字本身有下伸部比如字母 g、y 的尾部底部留少一点视觉上更平衡。动画时长标题切换动画 300ms。这个时长是反复试过的——200ms 太快看不清变化400ms 太慢觉得卡。300ms 刚好能感知到文字从一个变成另一个又不会让用户等待。图标区缩放、透明度与动画曲线Row(){ForEach([0,1,2],(i:number){Column(){Text(this.navIcon(i)).fontSize(24).scale({x:ithis.page?1.2:1,y:ithis.page?1.2:1}).opacity(ithis.page?1:0.3).animation({duration:350,curve:Curve.EaseOut})Text(this.navLabel(i)).fontSize(10).fontWeight(ithis.page?FontWeight.Bold:FontWeight.Normal).fontColor(ithis.page?#FFD700:#5B4FAF).animation({duration:250}).margin({top:8})}.width(100).padding({top:8,bottom:4}).onClick((){this.pagei;})})}.width(100%).justifyContent(FlexAlign.SpaceEvenly)缩放比例1.2 而不是 1.15选中时图标放大 20%1.2未选中保持原始大小1。之前试过 1.15但和 1 差别太小用户不容易感知。1.2 是明显但不夸张的临界点——再大到 1.3 就会挤占相邻图标的空间。透明度0.3 而不是 0.4未选中图标的透明度从 0.4 降到了 0.3。0.4 太亮和选中图标的差距不够大用户需要仔细看才能分辨哪个选中了。0.3 让未选中图标几乎退到背景里选中图标的视觉权重更突出。动画曲线EaseOut图标动画用了Curve.EaseOut——开始快结束慢。这符合物理直觉选中状态的切换是快速聚焦不是慢慢移动。如果用Curve.Linear匀速图标缩放会显得机械如果用Curve.EaseInOut两端减速开始也慢感觉不够果断。动画时长350ms vs 250ms图标动画 350ms文字动画 250ms。为什么不一样图标有缩放动画变化幅度大1 → 1.2需要更长时间让用户感知文字只有颜色和粗细变化变化幅度小250ms 足够如果都用 350ms文字变化会拖如果都用 250ms图标变化会急。错开时长让动画有节奏感。固定宽度 100每个导航项设了width(100)确保三栏等宽。如果不设宽度文字长度不同会导致栏宽不一致运势比塔罗短视觉上参差不齐。下划线区独立 Row 的精妙之处Row(){ForEach([0,1,2],(i:number){Divider().width(28).height(2).color(#FFD700).borderRadius(1).opacity(ithis.page?1:0).animation({duration:300,curve:Curve.EaseOut})Blank()})}.width(60%).margin({top:6})为什么下划线要独立成 Row之前的版本把下划线放在图标区的 Column 里和图标、文字混在一起。问题是要控制下划线的对齐比较麻烦——图标区用SpaceEvenly分散排列下划线也跟着分散但下划线应该居中对齐在图标下方。独立成 Row 后下划线有自己的布局空间可以用width(60%)控制整体宽度用Blank()控制间距。Blank() 的作用Blank()是 ArkUI 的弹性空白组件会自动填充剩余空间。在 ForEach 里用Divider() Blank()的组合[Divider] [Blank] [Divider] [Blank] [Divider]三个 Divider 被两个 Blank 分隔自动居中分布在 Row 里。不需要手动计算间距。下划线的样式width(28)固定宽度 28px太宽会显得笨重太窄看不清height(2)高度 2px细线更有精致感borderRadius(1)圆角 1px避免直角的生硬color(#FFD700)金色和选中文字颜色一致opacity 动画下划线的显示/隐藏用opacity动画而不是width动画。原因是opacity动画淡入淡出视觉柔和width动画从 0 到 28 的伸展视觉生硬选中时 opacity 从 0 变 1淡入切换时从 1 变 0淡出配合 300ms 的 EaseOut 曲线效果很自然。margin({ top: 6 })下划线和图标区之间留 6px 间距。太近会和图标粘在一起太远会和图标脱节。6px 是反复调整后的经验值。整体布局的层次导航栏整体用 Column 从上到下排列三个区域Column (导航栏容器) ├── Column (标题区) — 居中对齐 ├── Row (图标区) — 等宽分散 └── Row (下划线区) — 60% 宽度居中背景色的选择导航栏背景#08081A页面背景#06060F。两者都是深紫色但导航栏略浅形成微妙的层次感。如果用同一个颜色导航栏和页面内容会融为一体用户分不清边界。padding({ top: 6, bottom: 2 })导航栏整体的 padding 很小——top 6pxbottom 2px。这是因为导航栏本身已经有内部 padding标题区 14/12图标区 8/4外部只需要微调。bottom 特别小是因为下划线本身就有 margin再加 padding 会显得太松。动画编排的节奏感导航栏的动画不是同时触发的而是有先后顺序图标缩放350msEaseOut文字颜色250ms下划线淡入300msEaseOut用户点击导航项时先看到图标放大最明显的视觉变化然后文字变色最后下划线出现。这种主次分明的动画编排比所有元素同时变化更有层次感。踩坑记录坑 1ForEach 里的 Blank() 不能省如果把Blank()去掉三个 Divider 会紧挨在一起视觉上像一条长线而不是三条短线。Blank()的弹性填充是实现等间距排列的关键。坐 2下划线的 width 不能用百分比width(28)是固定值不能用width(20%)之类的百分比。因为百分比是相对于父容器的而父容器宽度是60%计算出来的下划线宽度会很小屏幕宽度 × 60% × 20% ≈ 40px视觉效果不好。坑 3scale 的 x 和 y 必须同时设置.scale({ x: 1.2, y: 1.2 })不能写成.scale(1.2)ArkUI 不支持简写。如果只设 x 不设 y图标会变形。坑 4导航栏高度不固定导航栏的高度取决于内容没有设固定高度。如果标题太长换行导航栏会变高导致 Swiper 区域抖动。解决方案是给标题设maxLines: 1和textOverflow: TextOverflow.Ellipsis。与之前版本的对比属性旧版本新版本改动原因图标缩放1.151.2差别更明显未选中透明度0.40.3选中/未选中对比更强图标动画时长300ms350ms缩放幅度大需要更长时间下划线实现内联在图标 Column独立 Row Blank布局更灵活下划线宽度24px28px稍宽一点更醒目导航栏背景#08081A#08081A保持一致代码改进建议1. 导航数据外部化当前导航的图标、标签都写在navIcon()和navLabel()函数里。如果以后要加第四个导航项比如设置需要同时改三个地方。建议用数组统一管理constNAV_ITEMS[{icon:,label:运势},{icon:✨,label:星图},{icon:,label:塔罗},];2. 动画参数常量化动画的时长、曲线散落在各处如果要统一调整比如所有动画改成 400ms需要逐个修改。建议提取成常量constANIM_DURATION_FAST250;constANIM_DURATION_NORMAL300;constANIM_DURATION_SLOW350;constANIM_CURVECurve.EaseOut;3. 导航栏组件化当前导航栏代码直接写在 Index.ets 里如果要复用比如在详情页加一个返回导航栏需要提取成独立组件。4. 无障碍支持当前导航栏没有accessibilityText属性屏幕阅读器无法识别导航项。建议添加Text(this.navIcon(i)).accessibilityText(this.navLabel(i))总结Index.ets 的导航栏代码看似简单但每个属性都经过了反复调优——缩放比例、透明度、动画时长、布局结构。这些细节单独看差别不大但叠在一起决定了用户的第一印象。导航栏的核心是视觉层次选中图标最突出放大不透明未选中图标退后缩小半透明下划线提供位置确认金色淡入。三个层次配合动画节奏让用户一眼就知道我在哪。适用边界这个部分适合用作 ArkUI 导航栏精细化设计的学习案例涵盖了动画曲线、视觉层次、布局结构、交互细节等核心知识点。但如果要上架应用商店还需要补充无障碍支持、组件化、数据外部化、响应式布局等内容。建议在此基础上逐步扩展而不是一次性做完所有功能。
