UI 元素 列表、按钮、开关以及滑杆

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

列表

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

table_list_2x.png

列表对象具有以下特性:

  • 支持多行内容展示类型

  • 可滚动

  • 可设置背景色或图片

  • 支持用户交互

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

行类型使用要一致。您可能会创建不同的行类型来展示您的内容、页眉和页脚等。要确保行类型使用一致。

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

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

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

----------------------------------------------------------------------------------------------------------------------

按钮

按钮用以执行app特有的操作

86.png

按钮具有以下特性:

  • 有可自定义的背景

  • 圆角

  • 可包含标签和组对象(group object)

按钮的背景被称为platter。在运行时,你可以更改展示在按钮platter中的自定义颜色或图片。

创建横跨整个屏幕宽度的按钮。强烈建议使用全宽(full-width)按钮。如果你在同一水平空间上必须放置一个以上的按钮,那要将数量限制在两个以内。

尽可能保持按钮高度一致。如果您在一个屏幕上集中放置了多个按钮,那么每个按钮要使用相同的高度。

使用默认的圆角半径。标准的按钮圆角半径是6 points。

----------------------------------------------------------------------------------------------------------------------

开关

开关代表两种互斥的选择或状态。

700.png

开关具有以下特性:

  • 指示项目的二元状态

  • 通常包含标签

使用开关让用户选择两个选项中的其中一项,比如yes/no或on/off.

----------------------------------------------------------------------------------------------------------------------

滑杆

滑杆允许用户在一系列离散值上做出调整。用户通过点击滑杆任意一端的图片来更改值的大小。

47.png

滑杆具有以下特性:

  • 在任意一端使用水平轨道图片来操作滑杆值。

  • 通过离散的或者连续的进度条展示当前值。

  • 通过预定的量值来增减数值。 

  • 不会向用户展示具体数值。

使用自定义图片让滑杆的目的更明显。如果你没有提供任何自定义图片,系统会展示“+”和“-”的图片。