Apple Watch系列二：UI元素

Apple Watch 有多种UI元素, 其中包括Labels, Images, Groups, Tables, Buttons, Switchs, Sliders, Maps, Date, Timers, Menus.

Labels

功能: 展示静态文字.和UIKit的UILabel 比较类似.

Images

功能 : 展示一张图片或者组成动画的一些列图片, 其本身没有展现形式,不能响应用户交互,能够产生动画

注意: 1, 用@2x的图片; 2, 不要压缩和拉伸图片, 要合适的大小.

Groups

功能 : 其他对象的容器. 其本身没有默认的展现形式但是能够配置自定义的背景颜色或者图片. Groups 还有其他的布局属性,例如位置,大小,边距等.

1.能够横向和纵向布局子对象

2.能够容纳一到多个子对象

3.具有不同group间的布局属性,例如边距等

4.能够展示一个image或者以颜色作为背景

5.能够设置圆角

可以通过Group中嵌套Group实现复杂的布局:你可能想某些子对象横向排列而其他的纵向排列.或者,需要嵌套Group来利用group间的边距等.

对不同展示大小的Apple Watch创建不同的背景图片: 不要拉伸和压缩图

Tables

功能: 支持多行类型,能够滚动,能够设置背景颜色或者image.

你自己定义table在运行时的行类型. 所有的行必须设置字体. 在运行时确定哪行需要什么类型的行类型.

准确使用行类型:你可能定义不同的行类型,行头和行尾. 使用的时候要一致.

减少一次显示行数: 每次不要显示太多,滚动也得很久

不要把Table放在Group中:Table会动态动态滴改变大小.table会忽视Group的大小限制.

Buttons

功能:执行App特定的操作.

1. 可以有一个自定义的背景

2. 有一个圆角

3.能够包括一个label或者group对象

Button的默认背景像一个浅盘.可以改变颜色或者图片,从而自定义Button

建议一个Button的宽度是屏幕的宽度: 最多不要放超过两个

有多个button在时建议统一高度

button有圆角可以区别于其他对象: 默认6个点

Switches

功能:展示互斥的两个状态或者选择

1.  展示一个元素的两种状态

2. 总是含有一个label

Sliders

功能: slider让用户可以点击两边的图像在一定范围内调整数据.

1. 包含一个横向的轨迹,两端有图片可以点击进行操作

2. 能够显示一些列离散的数据或者连续的数据

3. 总是增加或者减少一个预定义的数据

4. 不会对用户展示数字值

用自定的图片展示是一个Slider: 如果没有,系统默认的是+ 和 - 两个图片

Maps

Map向用户表示地理位置信息。Maps 是一个静态的快照且不具有交互性。点击Map将跳转到Maps app。

配置地图区域到包含感兴趣的地点最小的区域   地图区域在被现实前被WatchKit 框架处理过，选择一个包括感兴趣的地方的最小区域是对用户最用用的。

不要创建一个比可显示区域更大的map对象  用户不滚动的情况下能见到全貌是很重要的。

用标记在地图上高亮显示地址   标记是在map上面的图片，被用来标记地方和调用信息。 一个地图上不要展示超过5个标记

地图内置展示绿，红和紫色的图钉。绿色图钉标记起始点，红色图钉代表目的地，紫色图钉代表可能感兴趣的地点。

也可以用自定义的图片去代替系统的图钉，图片的下面就目的坐标

Dates 和 Timers 

这是展示时间相关的值的特殊label。

Date Labels

展示日期和时间或者两者

能够格式化或者用日历去配置展示形式

日期不需要用WatchKit 扩展去更新

当需要展示当前的日期和时间时请使用Date Label

Time Labels

从特定的时间倒计时或者计时

能够用一系列的格式进行格式化

日期不需要用WatchKit 扩展去更新

当需要倒计时或者计时时请用Timer Label

Menu

Apple Watch上的运动触摸手势(Force Touch gesture)展示当前屏幕的上下文菜单。菜单为当前的屏幕储存相关的动作而不会占据当前的界面的空间。

菜单能够展示1到4个动作  动作按添加进来的顺序展示并从左到右从上到下的展示。菜单不能滚动，并且能够用代码或者特定的时间配置菜单动作。

菜单使用于当前的屏幕   每个屏幕可以有自己的菜单也可以没有。

每个动作必须要有一个图片和一个字符串   菜单图片是应用于背景上的系统样式线艺术。菜单字符串必须一到两行。

菜单是可选的   只有当前屏幕有相关的动作时才有菜单的需要。 如果没有菜单系统会展示一个合适的动画。