渐变Gradient
视觉效果与操作状态让颜色在两个或多个色值间连续变化
渐变可以建立方向、焦点或背景层次，常见形式有线性和径向渐变。颜色带来的感受会随明度、面积和品牌变化；覆盖文字时要在整个区域检查对比度。
线性 · 活力
径向 · 聚焦
双色 · 潮流
同色 · 克制
什么时候用
- 线性渐变做 Hero 背景：方向感带来向前的活力
- 径向渐变做聚焦：光晕把视线聚到主体上开始径向光晕，视线聚到中间
- 双色调 / 多色：活动页、年轻品牌的潮流感撞色渐变 = 年轻、潮流
- 同色系深浅：卡片 Card、背景的高级感，克制不抢戏同色系深浅，高级又克制
什么时候不用
- 高饱和撞色渐变当正文背景：又晃又土，文字没法读正文写在撞色渐变上又晃又土，根本读不下去
- 文字压渐变不保对比度：前半看得清，后半消失了前半看得清，后半消失了渐变上压文字，对比度没保住
- 渐变方向和色系各用各的：全站没有统一的流动感
- 一个页面每块都渐变：处处是重点等于没有重点每块都渐变，处处重点 = 没有重点
组成结构 · Anatomy
⟶
1起点色Start渐变从它开始
2方向Direction线性渐变的角度，决定流动感
3色标Color Stop中途的停靠色，能做三色以上
4终点色End渐变到它结束
常见变体 · Variants
线性渐变Linear
Hero 背景，方向感带来活力
径向渐变Radial
聚焦主体，营造光晕氛围
双色调Duotone
年轻潮流的品牌活动页
同色系深浅Tonal
想保持克制、又需要轻微层次时
典型使用场景
Hero 区大背景
品牌活动页
图标与头像点缀
消息
＋
林
林小满 把终稿发你了
10:24
✦
灵感订阅 本周精选已更新
09:02
卡片微渐变底色
本月活跃用户
12,408
↑ 8.2% 较上月
平均停留时长
6分42秒
↑ 3.1% 较上月