灰阶系统与投影层级
收录 2026-10
定义从页面底到浮层的灰阶与阴影,让层级不加边框也能被看出来。
界面有 [5] 层高度:页面底、卡片、下拉、弹窗、通知。请设计一套灰阶与阴影:每层的背景色值、阴影的位移模糊扩散和不透明度(写成一条完整 box-shadow)、是否需要描边兜底。要求相邻层的差异在亮色和暗色屏幕上都能看出,且不用纯黑阴影。用表格输出,并说明卡片层为什么适合用描边代替阴影。
本站原创
中文原文
使用示例
示例输入
界面有页面底、卡片、下拉、弹窗、通知五层,帮我设计一套灰阶和阴影,不要纯黑阴影。
输出应包含
- 每层背景色与完整阴影值给出
- 相邻层在亮屏暗屏都能看出差
- 说明卡片为何可用描边代替
复制前替换这些占位符 1
把方括号里的内容换成你的具体信息,替换后再粘贴给 AI。
[5]
使用建议
阴影带一点主色的色相会更自然,纯黑灰影会显脏。
可以这样改
- 把风格词换成可测参数:光位、焦段、材质、构图。
- 要求同一提示词出 3 个变体,再对比差异。
交付物(这次应拿到什么)
- 可直接执行的参数表(光线/镜头/材质/构图)
- 2–3 个备选方向,并说明各自取舍
常见错法
- 堆「高级感、电影感、8K」这类词,结果每次都不一样。
- 要真实品牌或明星的样子,得到近似但不可用的图。
输出验收(怎么判断能用)
- 参数可执行:能直接写进工具或交给设计执行。
- 有取舍说明:为什么这样布光/构图,而不是只给结果。
适用场景与注意
- 适合:把模糊的“高级感”拆成光线、材质、镜头、构图等可执行参数。
- 注意:涉及真实品牌、明星、他人作品时改用等价描述,避免侵权与不合规。