UI 元素 标签、图像、Groups

优质
小牛编辑
142浏览
2023-12-01

标签展示静态文本

305.png

标签可以:

  • 展示任何数量的静态文本

  • 不允许用户直接交互

  • 可以以编程形式更新

  • 可以跨多行展示

使用标签向用户展示短信息。标签是应用程序中最常用的元素之一。虽然标签可展示任意数量的文本,但最适合展示数量相对较少的文本。

标签应当清晰可见。为标签文本使用高对比度颜色,并使用Dynamic Type以确保标签文本会相应地缩放。内置的系统字体为Apple Watch提供了最清晰可见的字体。如果您使用自定义字体,不要为了使用花哨的字体和浮华不实的颜色而牺牲字体的清晰易读性。

尽可能地使用内置的文本样式。内置样式自动支持Dynamic Type,并且易于使用。

更多关于在app中使用文本的指南,以及使用Dynamic Type,请查看Color and Typography

图像

图像对象(image object)展示一个图片或者动态的图片序列。

306.png

图像对象:

  • 没有自己的外观,仅展示它的图片。

  • 不支持用户交互

  • 为动画开始和结束提供了程式控制

针对Apple Watch每个尺寸适当调整图片。可以的话使用单个图片资源,不要为适应不同尺寸屏幕而拉伸或者压缩图片,看起来会非常糟糕。相反应该为设备提供像素大小正确的图片资产。

按照@2x创建所有图片资产。无需为非Retina屏设备创建图片。

列表

列表以单列形式分行展示数据。可使用列表展示可动态更改的内容。

307.png

列表对象具有以下特性:

  • 支持多行内容展示类型

  • 可滚动

  • 可设置背景色或图片

  • 支持用户交互

在设计阶段指定列表行类型的布局。所有行类型都必须提前设计好。运行时,您可以选择真正需要的行类型。

行类型使用要一致。您可能会创建不同的行类型来展示内容、页眉和页脚等。如果你有这种需求,请不要使用内容行展示标题信息,反之亦然。针对设计目的使用每个行类型。

避免混合使用内容类型截然不同的列表行。当展示内容时,要确保您所使用的行类型的一致性。只有当列表分为不同的section,或者出于组织内容行目的时才能使用其他的列表行类型。在内容上使用相同的列表行类型可确保列表行大小一致,并易于导航。

限制每次显示的列表行数。超过20行的列表会因需要滚动而变得笨重。可只显示最相关的子集行,并给用户提供加载更多行的选择。

不要在分组(Groups)内嵌入列表。列表会基于其所包含的行数动态调整大小。由此,列表会忽略Groups对其高度上的限制。