深度与投影 Depth and Shadow

投影可以帮助信息容器在页面中形成自然的空间关系。该指南意在帮助设计师合理运用投影，构建清晰的信息层次关系。

类型

由于人眼视差，深/浅色物体在深浅色背景上的投影需要区分规范：深色物体的投影需要比浅色物体的投影更浓。

浅色容器投影

白色/浅灰色容器，在浅色面板的投影系数。图例灰色用了冷调灰，G80=#2D2F33。

SHADOW	COLOR	ALPHA	X	Y	BLUR
SL1	G80	10%	0	1	5
SL2	G80	14%	0	6	18
SL3	G80	18%	0	10	32
SL4	G80	24%	0	12	42

深色容器投影

深灰色容器，在浅色/深色面板的投影系数。G100=#000000。

SHADOW	COLOR	ALPHA	X	Y	BLUR
SD1	G100	30%	0	1	7
SD2	G100	42%	0	6	18
SD3	G100	54%	0	10	32
SD4	G100	72%	0	12	42

场景scene

根据行业规范对投影进行了四个层级分类，并规范出四个投影类型的使用场景。帮助设计师合理运用投影。下述S1包含SL1和SD1，以此类推。

SHADOW	TYPE	SCENE
S1	Basic	信息容器默认态投影
S2	Raised	信息容器激活态投影
S3	Overlay	模态弹窗的投影
S4	Pop-over	浮层容器的投影

S1

S1是基础投影basic shadow，应用于默认状态的卡片、导航栏、组件里局部投影等。

S2

S2是升起投影raised shadow，应用于悬停状态的卡片等，是S1的激活态。

S3

S3是覆盖投影overlay shadow，应用于信息提示等投影。

S4

S4是弹出投影pop-over shadow，应用于模态弹窗投影。