资源 – 阴影

阴影

阴影提供了关于材料深度和运动方向的重要视觉线索。材料的海拔高度决定了阴影的外观。有关 Material Design 中视图的海拔高度和阴影的说明，请参阅设计指南中的 阴影和海拔高度。

Android 和 Polymer 中关于阴影的开发文档：

定义阴影和裁剪视图
阴影由父元素进行绘制和裁剪

纸片阴影
在两个层次中创建阴影，以创造一个比较逼真的效果

Sketch Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Sketch 材料的海拔高度

右侧表格是用于 Sketch 的阴影值列表。

Sketch 中的阴影
0.07 MB (.sketch)

1dp 海拔高度

主阴影

环境阴影

本影

半影

不透明度：

14

12

20

X：

0

0

0

Y：

0

2

1

模糊：

2

2

3

扩展：

0

0

0

2dp 海拔高度

主阴影

环境阴影

本影

半影

不透明度：

14

12

20

X：

0

0

0

Y：

0

3

1

模糊：

4

4

5

扩展：

0

0

0

3dp 海拔高度

主阴影

环境阴影

本影

半影

不透明度：

14

12

20

X：

0

0

0

Y：

3

3

1

模糊：

3

4

8

扩展：

0

0

0

4dp 海拔高度

主阴影

环境阴影

本影

半影

不透明度：

14

12

20

X：

0

0

0

Y：

2

4

1

模糊：

4

5

10

扩展：

0

0

0

6dp 海拔高度

主阴影

环境阴影

本影

半影

不透明度：

14

12

20

X：

0

0

0

Y：

6

1

3

模糊：

10

18

5

扩展：

0

0

0

8dp 海拔高度

主阴影

环境阴影

本影

半影

不透明度：

14

12

20

X：

0

0

0

Y：

8

3

4

模糊：

10

14

15

扩展：

1

3

0

9dp 海拔高度

主阴影

环境阴影

本影

半影

不透明度：

14

12

20

X：

0

0

0

Y：

9

3

5

模糊：

12

16

6

扩展：

1

2

0

12dp 海拔高度

主阴影

环境阴影

本影

半影

不透明度：

14

12

20

X：

0

0

0

Y：

12

5

7

模糊：

17

22

8

扩展：

2

4

0

16dp 海拔高度

主阴影

环境阴影

本影

半影

不透明度：

14

12

20

X：

0

0

0

Y：

16

6

8

模糊：

24

30

10

扩展：

2

5

0

24dp 海拔高度

主阴影

环境阴影

本影

半影

不透明度：

14

12

20

X：

0

0

0

Y：

24

9

11

模糊：

38

46

15

扩展：

3

8

0

Illustrator Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Illustrator 材料的海拔高度

右侧表格是用于 Illustrator 的阴影值列表。

Illustrator 中的阴影
1.65 MB (.ai)

1dp 海拔高度

主阴影

环境阴影

不透明度：

26%

8%

X：

0

0

Y：

.92

0

模糊：

.5

.67

2dp 海拔高度

主阴影

环境阴影

不透明度：

26%

8%

X：

0

0

Y：

1.83

0

模糊：

1

1.33

3dp 海拔高度

主阴影

环境阴影

不透明度：

26%

8%

X：

0

0

Y：

2.75

0

模糊：

1.5

2

4dp 海拔高度

主阴影

环境阴影

不透明度：

26%

8%

X：

0

0

Y：

3.67

0

模糊：

2

2.67

6dp 海拔高度

主阴影

环境阴影

不透明度：

26%

8%

X：

0

0

Y：

5.5

0

模糊：

3

4

8dp 海拔高度

主阴影

环境阴影

不透明度：

26%

8%

X：

0

0

Y：

7.33

0

模糊：

4

5.33

9dp 海拔高度

主阴影

环境阴影

不透明度：

26%

8%

X：

0

0

Y：

8.25

0

模糊：

4.5

6

12dp 海拔高度

主阴影

环境阴影

不透明度：

26%

8%

X：

0

0

Y：

11

0

模糊：

6

8

16dp 海拔高度

主阴影

环境阴影

不透明度：

26%

8%

X：

0

0

Y：

14.67

0

模糊：

8

10.67

24dp 海拔高度

主阴影

环境阴影

不透明度：

26%

8%

X：

0

0

Y：

22

0

模糊：

12

16

Photoshop Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Photoshop 材料的海拔高度

右侧表格是用于 Photoshop 的阴影值列表。

Photoshop 中的阴影
1.09 MB (.psd)

1dp 海拔高度

主阴影

环境阴影

不透明度：

24%

16%

角度：

90

90

距离：

2

1

扩展：

6

2

尺寸：

3

4

2dp 海拔高度

主阴影

环境阴影

不透明度：

24%

16%

角度：

90

90

距离：

3

1

扩展：

6

2

尺寸：

5

7

3dp 海拔高度

主阴影

环境阴影

不透明度：

24%

16%

角度：

90

90

距离：

5

2

扩展：

6

2

尺寸：

7

10

4dp 海拔高度

主阴影

环境阴影

不透明度：

24%

16%

角度：

90

90

距离：

7

3

扩展：

6

2

尺寸：

10

13

6dp 海拔高度

主阴影

环境阴影

不透明度：

24%

16%

角度：

90

90

距离：

10

4

扩展：

6

2

尺寸：

15

20

8dp 海拔高度

主阴影

环境阴影

不透明度：

24%

16%

角度：

90

90

距离：

13

5

扩展：

6

2

尺寸：

20

27

9dp 海拔高度

主阴影

环境阴影

不透明度：

24%

16%

角度：

90

90

距离：

18

9

扩展：

6

2

尺寸：

27

36

12dp 海拔高度

主阴影

环境阴影

不透明度：

24%

16%

角度：

90

90

距离：

20

8

扩展：

6

2

尺寸：

30

41

16dp 海拔高度

主阴影

环境阴影

不透明度：

24%

16%

角度：

90

90

距离：

28

11

扩展：

6

2

尺寸：

40

53

24dp 海拔高度

主阴影

环境阴影

不透明度：

24%

16%

角度：

90

90

距离：

39

15

扩展：

6

2

尺寸：

60

81