深度与投影

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

类型

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

浅色容器投影

白色/浅灰色容器,在浅色面板的投影系数。图例灰色用了冷调灰,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,应用于模态弹窗投影。