Material Design-Surface平面第一篇

最新推荐文章于 2024-09-23 14:07:37 发布

原创

最新推荐文章于 2024-09-23 14:07:37 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #设计

本文介绍了Material Design中的平面概念，包括屏幕平面、平面阴影、平面使用规范及平面触摸响应。通过阴影来表现平面的相对高度，引导用户注意力。平面触摸响应包括波纹效果和元素抬升。文章还探讨了自定义添加水波和表面高度的方法，强调了合理使用平面以提升UI体验的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

知识点

理解 Material Design 中屏幕的平面阴影和触摸响应

熟悉平面的使用规范

掌握 Material Design 样式的自定义平面创建过程

参考资料

udacity-在 Android 应用中使用材料设计

屏幕平面

屏幕上的一切都在其中的一个平面上，包括所有文字、图标、照片、按钮等人和 UI 元素。虽然这些平面具有表明现实行为的实体属性，但它们又不像现实世界的行为一样收到限制。我们可以通过平面的一小部分的物理性，来显示事物之间的差异性和相关性。

平面阴影

一般来说，物体离我们越近就越容易在视觉上引起我们的注意，根据物体的尺寸，以及它们覆盖和投射阴影的方式，我们能区分哪些物体离我们更近，根据它们背后的物体来做出判断。所以我们可以在 UI 中使用深度列表将注意力引导至重要的元素。

在 2D 屏幕中如何运用这些概念呢？

我们使用阴影来传递一个平面相对于另一个平面的高度，离你更近的平面将投射出更大的阴影。要正确绘制出这些阴影，需要进行大量复杂的数学运算。而我们只需在 Android 上对代码进行少量编辑，就能动态绘制出这些阴影来。

具体可查看官方文档-高度和阴影

使用平面

一个平面就是一个容纳内容的容器，它能够实现与其它元素的分组和分离。

根据内容创建平面

从经验上讲，如果内容属于同类，浏览和对比就十分重要，所以应该将它们放在同一个平面上，如果我们需要展现不同类型的条目，将它们放置在各自的平面上是最合适的。

引导注意力是一门强大的技术。但是需要恰当的使用，平面上一次性出现过多的独立平面会分散注意力。从经验上讲，最好不要一次性在屏幕上出现 5 个以上的平面。

实现平面

要创建平面，关键是设置高度值(elevation)。高度是指平面与背面之间的距离（the distance above the back plane），数值越大，阴影越大(higher values produce larger shadows)，也越分散，有一种离底面更高更远的视觉感。