UI 元素 列表、按钮、开关以及滑杆
列表
列表以单列形式分行展示数据。可使用列表展示动态更改的内容。
列表对象具有以下特性:
支持多行内容展示类型
可滚动
可设置背景色或图片
支持用户交互
在设计阶段指定列表行类型。所有行类型都必须提前设计好。运行时,您可以选择您真正需要的行类型。
行类型使用要一致。您可能会创建不同的行类型来展示您的内容、页眉和页脚等。要确保行类型使用一致。
避免混合使用内容类型截然不同的列表行。当展示内容时,要确保您所使用的行类型的一致性。只有当列表分为不同的section,或者出于组织内容行目的时才能使用其他的列表行类型。在内容上使用相同的列表行类型可确保列表行大小一致,并易于导航。
限制每次显示的列表行数。超过20行的列表会因需要滚动而变得笨重。可只显示最相关的子集行,并给用户提供加载更多行的选择。
不要在分组(Groups)内嵌入列表。列表会基于其所包含的行数动态调整大小。由此,列表会忽略Groups对其高度上的限制。
----------------------------------------------------------------------------------------------------------------------
按钮
按钮用以执行app特有的操作
按钮具有以下特性:
有可自定义的背景
圆角
可包含标签和组对象(group object)
按钮的背景被称为platter。在运行时,你可以更改展示在按钮platter中的自定义颜色或图片。
创建横跨整个屏幕宽度的按钮。强烈建议使用全宽(full-width)按钮。如果你在同一水平空间上必须放置一个以上的按钮,那要将数量限制在两个以内。
尽可能保持按钮高度一致。如果您在一个屏幕上集中放置了多个按钮,那么每个按钮要使用相同的高度。
使用默认的圆角半径。标准的按钮圆角半径是6 points。
----------------------------------------------------------------------------------------------------------------------
开关
开关代表两种互斥的选择或状态。
开关具有以下特性:
指示项目的二元状态
通常包含标签
使用开关让用户选择两个选项中的其中一项,比如yes/no或on/off.
----------------------------------------------------------------------------------------------------------------------
滑杆
滑杆允许用户在一系列离散值上做出调整。用户通过点击滑杆任意一端的图片来更改值的大小。
滑杆具有以下特性:
在任意一端使用水平轨道图片来操作滑杆值。
通过离散的或者连续的进度条展示当前值。
通过预定的量值来增减数值。
不会向用户展示具体数值。
使用自定义图片让滑杆的目的更明显。如果你没有提供任何自定义图片,系统会展示“+”和“-”的图片。