深度与投影 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,应用于模态弹窗投影。