渐变Gradient

渐变实验台：给首屏 hero 定一个渐变

任务是为「产品发布」hero 定渐变。选方向、拖停靠点，看主标题对比是否通过；开启标题底板或纯色回退，看标题如何独立可读；再用「只靠色相」的状态徽章，看关掉渐变后还能不能区分。背景方向、标题对比徽章和徽章可区分性都长在 hero 物件上。

面板里读到的结论

刚才的背景方向、停靠点、标题对比和状态徽章，对应的是渐变的几条主线：氛围层、亮暗区、独立对比、纯色回退、色相不承载信息。

• 渐变是氛围层：用克制的双色渐变建立情绪，方向（横向 / 纵向 / 对角）只改变亮暗区的朝向，不承担信息含义。
• 停靠点决定亮区占比：停靠点过低时亮段过早占据标题区，白字落在亮段对比不足；标题区要落在暗段或单独保护。
• 标题对比要独立验收：给标题加底板（半透明深色 scrim）让对比由底板承担，不依赖下方渐变的局部亮度。
• 提供纯色回退：打印、低带宽或用户关闭装饰时，渐变应能退成稳定深底，标题与信息仍清晰，不依赖色彩过渡。
• 色相不单独承载状态：状态徽章不能只靠渐变颜色区分；关掉渐变（高对比 / 打印）后要有文字或形状保底。
• 停靠点克制：两到三个停靠点足够；堆叠过多色段会制造色带和错误层级，喧宾夺主。

什么时候用渐变

看到首屏需要氛围、品牌色需要一点情绪、或转化页想要层次时用；正文可读性、关键状态和精确数据别交给渐变。

怎么从需求走到渐变

从「这块是氛围还是信息」倒推写法，再在真实背景和高对比下复测。

1. 先定角色：这块是氛围（可用渐变）还是信息（不用渐变或渐变仅做增强）。
2. 选双色：从品牌或中性色取两段，深浅落差足够让其中一端能压白字；避免三色以上彩虹制造错误层级。
3. 定方向与停靠点：按标题落点选方向，把停靠点放在让暗段覆盖标题区的位置；在面板里拖到 30% 验证失败长什么样。
4. 保护标题：给标题加底板或落在暗段，文字对比独立达标（WCAG AA），不靠渐变局部亮度。
5. 写回退与高对比：提供纯色背景回退，并在 prefers-contrast / print 媒体查询里关闭渐变，确认信息仍成立。

盯这些关注点

调渐变时常只盯「好不好看」，标题对比、回退和色相承载更容易出问题。

• 盯标题对比：渐变亮段会让白字突然落空；标题区要在暗段或加底板，独立验收。
• 盯纯色回退：打印、低带宽、关闭装饰时渐变消失，要退成稳定背景，信息不丢。
• 盯色相承载：状态、错误、成功别只靠渐变颜色；关掉渐变后要有文字或形状保底。
• 盯停靠点数量：过多色段制造色带和错误层级；两到三个停靠点通常足够。

同一张 hero：正例与反例

目标都是让首屏有氛围、标题清晰、状态可辨。差异只在渐变是「氛围」还是「信息和氛围一起扛」。