图标标记

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

独立图标标记及与其他界面元素组合的图标标记

设计原则

关联现实:图标标记固定在现实物体或空间中的某个位置上。

表达简洁:用精简的视觉符号表示一个空间锚点。

使用与布局

图标标记的外观类似图标按钮,用来标出用户周围值得关注的物体。它是一种用于空间锚定的空间标记。

使用图标标记标注现实中的物体。
建议:使用图标标记标注现实中的物体。
将图标标记用作装饰,或用于与现实物体无关的标注;这类情况更适合使用图标按钮。
避免:将图标标记用作装饰,或用于与现实物体无关的标注;这类情况更适合使用图标按钮。

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

通过渐进呈现,让用户进一步查看详细信息。
建议:通过渐进呈现,让用户进一步查看详细信息。
在标记上附加过多界面内容,以免加重对现实视野的干扰。
避免:在标记上附加过多界面内容,以免加重对现实视野的干扰。

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

与相关物品对应的 Glimmer 卡片和空间标记

标记应清楚易辨,并限制视野内同时出现的标记数量,避免视觉杂乱。如果需要多个标记,应将它们聚合成一个更显眼的标记,再让用户逐步查看。

状态

图标标记与图标按钮非常相似。主要区别在于:图标标记使用“不可交互”状态,而不是“禁用”状态。

图标标记的不可交互与可交互状态

使用不可交互状态标注现实世界,例如标出一个兴趣点。

如果还有更多信息可供查看,可以使用带有按钮操作暗示的可交互状态。用户轻点图标标记后,会出现一张包含更多信息的 Glimmer 卡片。

组件构成

图标标记本身是一个小型图标按钮式元素,通过内边距建立固定的界面对齐与朝向关系。标记也可以用大圆点或小圆点替代图标。可交互状态会加入视觉上的操作暗示,让用户认出它具有按钮行为。

图标标记的构成、交互状态与焦点状态

内边距

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

横向与纵向元素默认保留 12 dp 内边距

对齐

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

附属 Glimmer 界面位于标记上方正中或右上方

朝向

内容应始终面向用户,并保持符合重力方向的姿态,让布局显得有序。

自定义

为保持一致的操作暗示,应避免自定义图标标记。不过,可以调整附属界面元素的朝向与对齐方式。

属性可自定义默认值
图标是大圆点、小圆点、图标
内边距否上中、右中、下中、左中:Medium
左上、右上、右下、左下:0 dp
对齐是TopLeft、TopCenter、TopRight、CenterLeft、CenterRight、BottomLeft、BottomCenter、BottomRight
朝向是RotateToLookAtUser:无论旋转角度如何,圆点始终朝向用户