Apple Watch人机交互指南:UI元素--列表、按钮、开关以及滑杆

列表

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

table_examples_2x.png

列表对象具有以下特性:

· 支持多行内容展示类型

· 可滚动

· 可设置背景色或图片

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

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

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

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

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

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

按钮

按钮可执行app特有的操作

buttons_shot_2x.png

按钮具有以下特性:

· 有可自定义的背景

· 圆角

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

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

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

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

按钮用圆角将自身和其他元素区别开来。按钮标准的圆角半径是6 points。

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

开关

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

switches_shot_2x.png

开关具有以下特性:

· 指示项目的二元状态

· 通常包含标签

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

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

滑杆

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

sliders_shot_2x.png

滑杆具有以下特性:

· 通过在任意一端包含一个水平的轨道图片来操作滑杆的值。

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

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

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值