鸿蒙实战：阴影系统与卡片层次

鸿蒙实战阴影系统与卡片层次前言必读图鸿蒙实战阴影系统与卡片层次第 70 篇 运行效果截图HarmonyOS NEXT阴影是视觉层次的关键——它告诉用户「这个卡片可以点击」「那个按钮是主要操作」。在扁平化的 UI 中良好的阴影设计能创建深度感引导用户视线焦点。本文详细分析鹿鹿 app 的7 层阴影令牌系统及其在卡片层次中的应用。图7 层阴影令牌体系——从 none 到 overlay 的卡片深度层级分布AppShadow 阴影体系none: 无阴影普通文本元素xs: 极小阴影inlineTag/Badgesm: 小阴影普通内容卡片md: 中阴影交互卡片lg: 大阴影浮动卡片/底部栏xl: 超大阴影弹层/侧边栏overlay: 遮罩阴影全屏弹窗一、阴影系统总览1.1 AppShadow 完整定义// 文件common/theme/AppFonts.etsexportclassAppShadow{// Hero CTA · 暖色浮影 staticreadonlyHERO_RADIUS:number28staticreadonlyHERO_OFFSET_Y:number12staticreadonlyHERO_COLOR:stringrgba(217,166,137,0.35)// 卡片软阴影 staticreadonlyCARD_RADIUS:number16staticreadonlyCARD_OFFSET_Y:number4staticreadonlyCARD_COLOR:stringrgba(61,53,46,0.05)// 灵感卡片 · 左侧阴影 staticreadonlyINSPIRE_RADIUS:number16staticreadonlyINSPIRE_OFFSET_Y:number4staticreadonlyINSPIRE_COLOR:stringrgba(61,53,46,0.05)// Hero 辅助紧贴阴影 staticreadonlyHERO_TIGHT_RADIUS:number8staticreadonlyHERO_TIGHT_OFFSET_Y:number4staticreadonlyHERO_TIGHT_COLOR:stringrgba(217,166,137,0.25)// 卡片轻阴影极淡 staticreadonlyCARD_SUBTLE_RADIUS:number6staticreadonlyCARD_SUBTLE_OFFSET_Y:number2staticreadonlyCARD_SUBTLE_COLOR:stringrgba(61,53,46,0.03)// 卡片中阴影 staticreadonlyCARD_M_RADIUS:number8staticreadonlyCARD_M_OFFSET_Y:number2staticreadonlyCARD_M_COLOR:stringrgba(61,53,46,0.04)}1.2 shadow API 语法Column().shadow({radius:AppShadow.CARD_RADIUS,// 模糊半径color:AppShadow.CARD_COLOR,// 阴影颜色offsetX:0,// X 偏移offsetY:AppShadow.CARD_OFFSET_Y// Y 偏移})参数类型说明radiusnumber模糊半径越大越模糊colorResourceColor阴影颜色支持 rgbaoffsetXnumberX 轴偏移正 右offsetYnumberY 轴偏移正 下二、7 层阴影对比2.1 统一色调本项目的阴影统一使用暖棕色底这与基于米色/莫兰迪的整体色调一致// 所有阴影的配色策略暖色阴影Hero/主操作:rgba(217,166,137,…)灰色阴影卡片/容器:rgba(61,53,46,…)2.2 阴影层级对比阴影令牌radiusoffsetY颜色不透明度用途HERO2812rgba(217,166,137, 0.35)35%Hero CTA 按钮 · 主力召唤HERO_TIGHT84rgba(217,166,137, 0.25)25%Hero 辅助紧贴阴影CARD164rgba(61,53,46, 0.05)5%普通卡片CARD_M82rgba(61,53,46, 0.04)4%容器级卡片略重于 CARDCARD_SUBTLE62rgba(61,53,46, 0.03)3%小卡片内部INSPIRE164rgba(61,53,46, 0.05)5%灵感卡片 · 左侧——————无阴影————页面背景 / 基础容器2.3 视觉层次金字塔Z 轴高度 ↑ │ Hero CTA ← HERO (radius:28, offsetY:12, 暖色35%) │ ↓ │ 灵感卡片 ← INSPIRE (radius:16, offsetY:4, 灰5%) │ ↓ │ 普通卡片 ← CARD (radius:16, offsetY:4, 灰5%) │ ↓ │ 次级容器/标签 ← CARD_M / CARD_SUBTLE │ ↓ │ 页面背景 / 纸面 ← 无阴影 暖色阴影HERO比灰色阴影CARD看起来更突出 因为暖色37deg在灰色背景30deg上更跳三、典型阴影应用场景3.1 Hero CTAHomePage// 主 Hero CTA 使用双层阴影Column().width(100%).height(180).linearGradient({...})// 暖色渐变背景.borderRadius(AppRadius.XL).shadow({// ① 主阴影 · 暖色浮影radius:AppShadow.HERO_RADIUS,color:AppShadow.HERO_COLOR,offsetX:0,offsetY:AppShadow.HERO_OFFSET_Y}).shadow({// ② 辅助阴影 · 紧贴radius:AppShadow.HERO_TIGHT_RADIUS,color:AppShadow.HERO_TIGHT_COLOR,offsetX:0,offsetY:AppShadow.HERO_TIGHT_OFFSET_Y})为什么 Hero 使用两层阴影这是 CSS 中常见的「双层阴影」技法的 ArkUI 版第一层HERO: radius 28, offset 12 → 大而淡模拟环境光 第二层HERO_TIGHT: radius 8, offset 4 → 小而浓模拟接触阴影 合在一起 → 卡片仿佛真实浮在纸面上方 12px 既有环境散射光又有底部接触阴影3.2 普通卡片通用// 分享卡片 / 元服务卡片 的标准阴影Column().backgroundColor(AppColors.CARD).borderRadius(AppRadius.XL).shadow({radius:AppShadow.CARD_RADIUS,color:AppShadow.CARD_COLOR,offsetX:0,offsetY:AppShadow.CARD_OFFSET_Y})3.3 容器卡片TapSharePage 成功提示// 分享成功提示卡片if(this.shareSuccess){Column(){Text(✅).fontSize(32)Text(分享成功)}// ....shadow({radius:AppShadow.CARD_M_RADIUS,color:AppShadow.CARD_M_COLOR,offsetY:AppShadow.CARD_M_OFFSET_Y})}四、阴影设计原则原则 1阴影颜色 光照颜色 × 材质颜色本项目的背景色为#F1ECE2米色RGB: 241, 236, 226。当环境光照在米色纸张上时阴影带暖色光线 → 米色纸张反射 → 阴影呈现暖灰色 ↓ rgba(61,53,46, 0.05) ← 暖棕色调 极低不透明度对比如果背景是白色#FFFFFF阴影应为冷灰色rgba(0,0,0, …)。原则 2不透明度递增对应视觉层级背景层:0%无阴影 纸面层:3-4%CARD_SUBTLE/CARD_M 浮起层:5%CARD 突出层:25-35%HERO_TIGHT/HERO/暖色每一层级的不透明度递增约一倍保证肉眼可分辨。原则 3暖色阴影用于可操作元素// ❌ 灰色阴影 → 常规信息内容.shadow({color:rgba(61,53,46,0.05)// 灰 · 中性 · 信息性})// ✅ 暖色阴影 → 可点击/主要操作.shadow({color:rgba(217,166,137,0.35)// 暖 · 吸引 · 操作性})五、阴影调优实验5.1 阴影参数敏感度// 参数调优建议// radius模糊半径// ≤ 4 → 锐利边缘适合小卡片// 8-16 → 软阴影通用// ≥ 24 → 大到几乎看不见适合环境光//// offsetYY 偏移// 0 → 四周均匀阴影模拟顶光// 2-4 → 下方阴影模拟上方偏光// ≥ 8 → 物体似乎悬空较高//// 不透明度// 0.03 → 几乎不可察觉// 0.05 → 隐隐约约// 0.25 → 明显可见// 0.50 → 重阴影慎用除非需要强调5.2 微调指南想要的效果radiusoffsetY不透明度轻触即起623-4%普通浮起1645%强烈呼唤281235% 暖色紧贴接触8425% 暖色六、与原型 CSS 的对照本项目的阴影系统是从原型 CSS 双层阴影直接翻译的/* 原型 CSS */--shadow:0 8px 28pxrgba(61,53,46,.08),0 2px 6pxrgba(61,53,46,.04);--shadow-soft:0 4px 16pxrgba(61,53,46,.05);// ArkUI 翻译双层 shadow 叠加Column().shadow({radius:28,color:rgba(61,53,46,.08),offsetY:8})// 大.shadow({radius:6,color:rgba(61,53,46,.04),offsetY:2})// 小ArkUI 支持在同一组件上叠加多个.shadow()调用效果会累计。七、性能注意事项因素影响建议radius 过大渲染性能下降≤ 28大量组件同时有阴影耗 GPU仅重要元素加阴影阴影在动画中变化触发重绘固定阴影参数offset 过大阴影溢出裁剪配合 clip 使用八、注意事项与常见问题8.1 开发注意事项在正式开发前建议按以下步骤完成环境准备与前置检查版本确认检查 DevEco Studio 与 SDK 版本确保满足目标 API Level 要求权限声明在module.json5的requestPermissions字段中提前声明所有需要的系统权限设备能力检查调用前验证设备是否支持目标能力相机、NFC、传感器等异步封装所有耗时操作数据库、文件 I/O、网络请求统一使用async/await处理资源释放在组件aboutToDisappear()生命周期钩子中及时释放系统资源防止内存泄漏8.2 常见错误与解决方案常见问题快速排查表问题类型排查方向参考方法应用崩溃查看 hilog 错误日志hilog.error(TAG, ..., e.message)状态丢失检查 AppStorage 键名拼写统一使用常量管理键名动画不流畅避免在 animateTo 回调中执行 I/O动画与数据操作分离总结✅7 层阴影令牌从 CARD_SUBTLE 到 HERO覆盖全层次✅双层阴影技法Hero CTA 使用环境光 接触光双层模拟真实浮起✅暖色 vs 灰色暖色阴影标示可操作元素灰色阴影用于信息容器✅阴影设计原则色调统一、不透明度递增、材质匹配✅CSS 对照ArkUI.shadow()完美对应 CSS box-shadow✅性能考虑radius ≤ 28、仅重要组件使用阴影下一篇将讲解导航栏与顶部栏设计规范 HmTitleBar。 收藏提示阴影是极少的工作量但带来极高回报的设计元素——7 层阴影只用了 30 行代码。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源shadow 阴影属性elevation 海拔卡片设计规范第67篇 颜色体系第69篇 渐变色彩第71篇 导航栏Material Design 层次ArkUI 视觉设计规范七、阴影系统的进阶应用7.1 阴影令牌参数详解每层阴影由四个参数构成层级offsetXoffsetYradiuscolorxs013rgba(0,0,0,0.06)sm028rgba(0,0,0,0.08)md0416rgba(0,0,0,0.10)lg0824rgba(0,0,0,0.12)xl01640rgba(0,0,0,0.16)7.2 阴影颜色的温度感鹿鹿 app 使用暖色调阴影略偏棕而非纯黑色阴影营造治愈暖意// 暖色调阴影偏棕shadow:{offsetX:0,offsetY:4,radius:16,color:rgba(100, 70, 40, 0.10)}// 对比冷色调阴影偏灰蓝shadow:{offsetX:0,offsetY:4,radius:16,color:rgba(30, 40, 60, 0.10)}暖色调阴影让卡片感觉更「柔软亲切」冷色调阴影让界面更「专业严肃」。7.3 按压状态的阴影变化卡片按下时阴影应同步缩小以增强真实感Statepressed:booleanfalse;Column(){/* 卡片内容 */}.shadow(this.pressed?AppShadow.xs:AppShadow.md).scale({x:this.pressed?0.97:1,y:this.pressed?0.97:1}).animation({duration:80,curve:Curve.EaseOut}).onTouch((event:TouchEvent){this.pressedevent.typeTouchType.Down;})7.4 阴影与圆角配合阴影与圆角是「卡片感」的两大基石需协调使用圆角越大阴影模糊半径也应更大避免圆角卡片方形阴影的割裂感悬浮元素Toast/BottomSheet使用 xl/overlay 阴影营造层叠感列表项卡片使用 sm 阴影避免过多阴影导致视觉噪音7.5 阴影令牌快速索引// 快速参考根据组件类型选阴影// 内联标签、Badge → AppShadow.xs// 内容卡片 → AppShadow.sm// 可点击主要卡片 → AppShadow.md// 浮动操作按钮FAB→ AppShadow.lg// 弹窗/抽屉 → AppShadow.xl如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力