图标标记属于空间标注体系,用于标注现实世界中的物体。

设计原则
关联现实:图标标记固定在现实物体或空间中的某个位置上。
表达简洁:用精简的视觉符号表示一个空间锚点。
使用与布局
图标标记的外观类似图标按钮,用来标出用户周围值得关注的物体。它是一种用于空间锚定的空间标记。


图标标记可以与任意其他 Jetpack Compose Glimmer 组件搭配,为用户周围的环境提供更清楚、深入的信息。


内容和标签可以沿不同方向放置。图标标记及其附属界面都应遵循空间界面的行为:使用恒定的角度 dp 尺寸,并让界面尺寸体现被标注物体的实际距离。

标记应清楚易辨,并限制视野内同时出现的标记数量,避免视觉杂乱。如果需要多个标记,应将它们聚合成一个更显眼的标记,再让用户逐步查看。
状态
图标标记与图标按钮非常相似。主要区别在于:图标标记使用“不可交互”状态,而不是“禁用”状态。

使用不可交互状态标注现实世界,例如标出一个兴趣点。
如果还有更多信息可供查看,可以使用带有按钮操作暗示的可交互状态。用户轻点图标标记后,会出现一张包含更多信息的 Glimmer 卡片。
组件构成
图标标记本身是一个小型图标按钮式元素,通过内边距建立固定的界面对齐与朝向关系。标记也可以用大圆点或小圆点替代图标。可交互状态会加入视觉上的操作暗示,让用户认出它具有按钮行为。

内边距
横向或纵向排列的附属界面使用 Medium 内边距;沿对角线方向搭配的元素,默认内边距为 0 dp。

对齐
附属界面可以放在标记的水平、垂直或对角线方向。

朝向
内容应始终面向用户,并保持符合重力方向的姿态,让布局显得有序。
自定义
为保持一致的操作暗示,应避免自定义图标标记。不过,可以调整附属界面元素的朝向与对齐方式。
| 属性 | 可自定义 | 默认值 |
|---|---|---|
| 图标 | 是 | 大圆点、小圆点、图标 |
| 内边距 | 否 | 上中、右中、下中、左中:Medium 左上、右上、右下、左下:0 dp |
| 对齐 | 是 | TopLeft、TopCenter、TopRight、CenterLeft、CenterRight、BottomLeft、BottomCenter、BottomRight |
| 朝向 | 是 | RotateToLookAtUser:无论旋转角度如何,圆点始终朝向用户 |