首页四个功能卡片立体效果方案及实施记录

需求

保留四个功能卡片现有尺寸、间距、图标和文字, 增加克制的渐变、描边、系统投影和按压下沉反馈。

设计方案

真机反馈调整

首版静止总高度层次约为 12px,在高亮蓝色背景和设备屏幕上不够明显。 根据真机反馈,将基础 elevation 从 8 基准提升为 16 基准,静止状态继续叠加 4 基准, 最终形成约 20px 的柔和投影;按下时回落到约 16px。本次只增强阴影, 不改变卡片尺寸、网格间距、图标和文字。

二次真机反馈仍不明显后,将静止态 translationZ 从 4 基准提升到 16 基准。 当前静止态总高度层次约为 32px;按下时仍回落到基础 16px, 使静止与按压之间的高差更明显。

视觉参数

项目参数作用
表面顶部#FFFFFF保持卡片干净明亮
表面底部#F1F6FC提供轻微纵向明暗层次
边框#406FADE8约 25% 透明蓝灰色轮廓
基础 elevationadaptive_size_16强化真机基础投影
静止 translationZadaptive_size_16强化静止悬浮投影
按下 translationZ0dp按压下沉
动画时长80ms / 120ms迅速自然的状态反馈

默认与 hdpi 资源继续复用项目现有自适应尺寸,两种设备最终均保持约 16px + 16px 的静止高度层次。

实施内容

  1. 解除功能网格及两行容器对子元素阴影的裁剪。
  2. 四张功能卡片增加圆角阴影轮廓和状态高度动画。
  3. 卡片背景改为白色到浅蓝灰色渐变,并增加蓝灰细边框。
  4. 新增统一的 translationZ 状态动画资源。

文件范围

验证记录

兼容说明:当前老编译链不识别布局中的 android:clipToOutline,因此移除该非核心属性; 阴影、渐变、描边及按压高度动画不受影响。

边界与验收