引子底部 Tab 太丑换成顶部导航星空运势应用有三个页面转盘、星图、塔罗。一开始用的是底部 Tab 导航但放上去发现和暗色主题不搭——Tab 栏的白色背景在深色页面上特别突兀。索性把导航移到顶部用自定义的图标文字下划线实现。效果比底部 Tab 好很多但实现起来有几个细节要注意图标选中时的缩放动画、下划线的宽度过渡、和 Swiper 的联动。完整效果顶部导航栏的结构导航栏分两部分标题区和图标区。┌─────────────────────────────┐ │ 塔罗牌阵 │ ← 标题随页面切换 │ 默念问题·翻开命运之牌 │ ← 副标题 ├─────────────────────────────┤ │ ✨ │ ← 图标选中放大 │ 转盘运势 星座星图 塔罗占卜 │ ← 文字选中变色 │ ━━━━━━━ │ ← 下划线选中显示 └─────────────────────────────┘标题区动态切换Column(){Text(this.navTitle()).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#E8DFF8).animation({duration:250})Text(this.navSub()).fontSize(10).fontColor(#6B5B9A).margin({top:4}).animation({duration:250})}.width(100%).alignItems(HorizontalAlign.Center).padding({top:10,bottom:8})标题和副标题通过this.page状态动态切换navTitle():string{if(this.page0){return命运转盘;}if(this.page1){return星座星图;}return塔罗牌阵;}animation({ duration: 250 })让标题切换时有渐变效果。250ms 是经过考虑的——太短看不清变化太长会觉得卡顿。图标区三栏导航Row(){ForEach([0,1,2],(i:number){Column(){Text(this.navIcon(i)).fontSize(22).opacity(ithis.page?1:0.4).scale({x:ithis.page?1.15:1,y:ithis.page?1.15:1}).animation({duration:300,curve:Curve.EaseOut})Text(this.navLabel(i)).fontSize(11).fontWeight(ithis.page?FontWeight.Bold:FontWeight.Normal).fontColor(ithis.page?#FFD700:#5B4FAF).animation({duration:250}).margin({top:6})Divider().width(ithis.page?24:0).height(2).color(#FFD700).borderRadius(1).margin({top:8}).animation({duration:300,curve:Curve.EaseOut})}.width(90).padding({top:8,bottom:4}).onClick((){this.pagei;})})}.width(100%).justifyContent(FlexAlign.SpaceEvenly)这个导航栏有三个视觉层次图标、文字、下划线。每个层次在选中/未选中状态之间切换带动画。选中状态的三重反馈选中状态通过三个维度反馈给用户1. 图标透明度 缩放Text(this.navIcon(i)).fontSize(22).opacity(ithis.page?1:0.4).scale({x:ithis.page?1.15:1,y:ithis.page?1.15:1}).animation({duration:300,curve:Curve.EaseOut})选中不透明1 放大 15%1.15未选中半透明0.4 原始大小1为什么用 1.15 而不是 1.2放大 15% 刚好能感觉到变化但不会太大导致布局抖动。1.2 会让图标明显跳出视觉上不协调。2. 文字粗细 颜色Text(this.navLabel(i)).fontSize(11).fontWeight(ithis.page?FontWeight.Bold:FontWeight.Normal).fontColor(ithis.page?#FFD700:#5B4FAF).animation({duration:250})选中加粗 金色未选中正常 暗紫色金色#FFD700和暗紫色#5B4FAF是这个应用的主题色选中状态用主题色突出未选中用低饱和度的颜色弱化。3. 下划线宽度过渡Divider().width(ithis.page?24:0).height(2).color(#FFD700).borderRadius(1).margin({top:8}).animation({duration:300,curve:Curve.EaseOut})选中宽度 24px未选中宽度 0隐藏下划线的宽度动画是最明显的反馈——用户一眼就能看出哪个页面被选中。borderRadius(1)让下划线两端圆润不会太生硬。为什么需要三重反馈单独一个维度比如只改颜色也能区分选中状态但三重反馈的好处是容错性即使用户色弱看不清颜色差异也能通过大小和下划线判断层次感三个维度同时变化视觉冲击更强专业感细节到位的应用看起来更精致Swiper 联动导航栏和页面的同步导航栏和 Swiper 的联动通过this.page状态实现// Swiper 的 onChange 回调Swiper(){...}.onChange((idx:number){this.pageidx;})// 导航栏的点击事件.onClick((){this.pagei;})双向绑定滑动 Swiper → 更新this.page→ 导航栏高亮对应图标点击导航栏 → 更新this.page→ Swiper 切换到对应页面这种状态驱动的联动方式比手动操作 DOM 简洁得多。Swiper 的配置Swiper(){this.WheelPage();this.StarPage();this.TarotPage();}.index(this.page).indicator(false).loop(false).duration(300).onChange((idx:number){this.pageidx;}).layoutWeight(1).width(100%).indicator(false)隐藏默认指示器用自定义导航代替.loop(false)禁用循环滑动三个独立页面不需要循环.duration(300)页面切换动画时长.layoutWeight(1)占据剩余空间颜色系统紫色 金色的设计逻辑这个应用的颜色系统以紫色和金色为主调。为什么选这两个颜色紫色神秘感紫色在色彩心理学中代表神秘、灵性、魔法。星座和塔罗都和神秘相关紫色是天然的选择。代码中用了多种紫色颜色用途说明#06060F页面背景最深的紫黑色#08081A导航栏背景略浅的深紫色#0E0B25卡片背景中等深度的紫色#1C1545选中背景较亮的紫色#5B4FAF次要文字中饱和度紫色#8B7BC0辅助文字浅紫色#D4C5F0标题文字亮紫色#E8DFF8导航标题最亮的紫色从深到浅形成了完整的紫色梯度。这种同色系多梯度的设计让界面有层次感不会单调。金色高级感金色代表财富、权力、高级感。在这个应用中金色用于强调和高亮颜色用途#FFD700选中状态、主按钮、重要文字#F59E0B转盘指针、星座图标边框金色和紫色是互补色搭配在一起视觉冲击很强。但金色不能用太多否则会显得土豪。代码中金色只用于关键元素选中状态、按钮、指针比例控制得当。暗色主题的实现暗色主题不是简单地把背景换成黑色而是需要重新设计整个颜色体系背景色不是纯黑 #000000而是深紫 #06060F。纯黑在 OLED 屏幕上会导致发光效果文字色不是纯白 #FFFFFF而是浅紫 #E8DFF8。纯白在深色背景上对比度太高刺眼边框色用低饱和度的紫色 #1C1545而不是灰色。保持色调统一强调色用金色 #FFD700在深色背景上特别醒目颜色的可访问性暗色主题最容易犯的错误是对比度不够。代码中的颜色选择考虑了可访问性标题文字 #E8DFF8 在背景 #06060F 上的对比度约 12:1远超 WCAG AA 标准的 4.5:1次要文字 #8B7BC0 在背景 #0E0B25 上的对比度约 5:1刚好达标弱化文字 #4B3F70 在背景 #06060F 上的对比度约 3:1低于标准但用于装饰性文字可接受踩坑记录坑 1导航栏的高度不固定导航栏的高度取决于标题和副标题的行数。如果标题太长换行导航栏高度会变化导致 Swiper 区域抖动。解决方案是给导航栏设置固定高度或者用aspectRatio限制比例。坑 2图标的缩放导致布局抖动.scale(1.15)会让图标占用更多空间可能挤占相邻元素。代码中给每个导航项设置了固定宽度90避免了这个问题。坑 3动画时长不一致图标动画 300ms文字动画 250ms下划线动画 300ms。这种微小的差异让用户感觉有节奏而不是所有元素同时变化。但如果差异太大比如图标 500ms文字 100ms会显得混乱。坑 4Swiper 的预加载Swiper 会预加载相邻页面如果页面很复杂可能导致内存占用过高。可以通过.cachedCount(1)控制预加载数量。代码改进建议1. 导航栏组件化当前导航栏代码直接写在主组件里如果要复用比如在其他应用中需要提取成独立组件Componentstruct TopNav{Proppage:number0;Proptitles:string[][];Propicons:string[][];Proplabels:string[][];onNavigate:(idx:number)void(){};build(){...}}2. 颜色系统外部化当前颜色值散落在代码各处。建议像骰子应用一样用主题配置文件统一管理constTheme{bg:#06060F,surface:#0E0B25,primary:#FFD700,text:#E8DFF8,// ...};3. 导航栏的响应式设计当前导航栏固定三栏如果要扩展到四栏或五栏需要修改布局。建议用Grid或Flex实现自适应。4. 无障碍支持当前导航栏没有无障碍属性。建议添加accessibilityText让屏幕阅读器能识别导航项。总结顶部导航栏和颜色系统是这个应用的门面——用户第一眼看到的就是导航栏和整体配色。好的导航栏让用户快速理解应用结构好的颜色系统让用户愿意继续使用。适用边界这个部分适合用作 ArkUI 自定义导航和暗色主题的学习案例涵盖了自定义导航栏、动画编排、颜色系统、Swiper 联动等核心知识点。但如果要上架应用商店还需要补充无障碍支持、响应式设计、组件化、主题外部化等内容。建议在此基础上逐步扩展而不是一次性做完所有功能。说白了导航栏就是告诉用户在哪颜色系统就是让用户愿意待着。两个都做好了应用的第一印象就稳了。