UI元素

标签

标签显示静态文本。

标签:

  • 可以显示任意数量的静态文字
  • 不支持直接的用户交互
  • 可以由程序更新
  • 可以夸越多行

使用标签给用户显示短消息。标签是你应用中最常见的元素之一。尽管标签可以显示任意数量的文本,最好还是用它们显示相关的短文本。

使你的标签可读。为你的标签文本使用强对比色,并使用动态类型来确保你的标签文字对你的用户来说大小适中。系统文字在Apple Watch上有最好的可读性,推荐使用。如果你选择使用自定义文字,不要为了精美的字体或艳丽的颜色而牺牲清晰度。

尽可能使用内建风格。内建风格自动支持动态类型,被设计用于方便使用。

更多关于在应用中使用文本的额外参考,包括关于使用动态类型的信息,查看颜色和字体。

图片

图片对象显示一张图片或一系列动画的图片。

图片对象:

  • 它本身是没有内容的,仅仅显示图片
  • 不支持用户交互
  • 提供开始和停止动画的程序控件

为每一款Apple Watch的显示尺寸制作适当的图片。尽可能使用一张图片资源,但是如果这样做会使图片看起来难看,就不要为了适应不同尺寸的屏幕而拉伸或压缩图片。取而代之,为相关设备提供恰当像素尺寸的图片资源。

以@2x大小制作所有图片资源。没有制作非Retina图片的必要。

组是一个在你的界面中布局内容的重要工具。组对其他对象来说相当于容器。组没有默认内容,但是可以设置自定义背景色或图片。组拥有指定位置,大小,边距以及其他与布局相关的属性。

组对象:

  • 可以横向或纵向布局元素
  • 包含一个或多个其他界面元素
  • 组元素间拥有指定边距和间距的属性
  • 可以用图片或纯色作为背景
  • 它的背景和内容拥有可配置的圆角半径

组是管理布局的主要工具。然而,正因为组可以拥有背景色或图片,你也可以把它当做可视的元素。

在其他组中嵌套组来建立复杂的布局。你可能需要通过嵌套组来横向和纵向放置元素。你也可能需要通过嵌套组来利用外部组的边距或间距选项。

为每一款Apple Watch的显示尺寸制作适当的图片。尽可能使用一张图片资源,但是如果这样做会使图片看起来难看,就不要为了适应不同尺寸的屏幕而拉伸或压缩图片。取而代之,为相关设备提供恰当像素尺寸的图片资源。

列表

列表在一列中展现了多行数据。使用列表展现的内容可以动态改变。

列表对象:

  • 支持多行类型
  • 可滚动
  • 可以拥有背景色或图片
  • 每行支持用户交互

在设计时为你的列表行类型指明布局。所有行必须预先设计好。运行时,你可以选择你实际需要使用行类型。

一致地使用行类型。你可能需要根据内容、标题或脚注建立不同的行类型。如果这样做,不要使用内容行来显示标题信息,反之亦然。根据设计初衷来使用行类型。

避免将内容截然不同行混在一起。显示内容时,内容应与使用的行类型一致。仅当章节(section)断开或整理内容行时,使用其他行类型。使用统一的列表类型,确保行被统一调整大小且更易浏览。

限制列表行一次显示的数目。超过20行内容的列表变得不方便滚动浏览。仅显示一部分直接相关的行,并让给用户选择是否加载更多行。

不要将列表嵌入组中。列表根据包含的行数目动态调整大小。结果,列表忽略一切组对于高度的限制。

按钮

按钮执行应用指定的一个动作。

按钮:

  • 拥有可自定义的背景
  • 拥有区分于其他元素的圆角
  • 可以包含一个标签或组对象

按钮的背景被称为盘子。运行时,你可以改变按钮背景的自定义颜色或图片。

创建跨越屏幕宽度的按钮。强烈建议使用全宽的按钮。如果你必须在水平方向放置多于一个按钮,最多放置两个。

尽可能保持按钮高度一致。如果你在一屏有多个按钮,每个按钮使用相同的高度。

使用默认圆角半径。按钮的标准圆角半径为6镑。

开关(switch)

开关呈现两种相互独立的选择或状态。

开关:

  • 表明一个元素的二元状态
  • 始终包含标签

使用开关让用户指明两种选择中的一种,例如是/否,或开/关。

滑块

滑块让用户对一段范围内不连续的值进行调整。用户通过点击滑块两端的图片来改变值。

滑块:

  • 由一个横向轨道以及两端控制滑块值的图片组成。
  • 可以通过一系列不连续的步骤或连续的进度条显示当前值
  • 增加和减少的值始都是预设好的
  • 不要让用户看到数值

使用自定义图片让滑块的功能一目了然。如果你不提供自定义图片,系统会显示加、减号图片。

地图

使用地图给用户呈现其当前位置。地图是静态截图,并且在你的应用内不可交互。用户点击地图会进入地图应用。

设置地图范围为包含相关位置的最小区域。WatchKit扩展包程序化地设置地图显示范围。选择一个包含所有需要的兴趣点,但又足够小且对用户有用的范围。

不要创建比可用内容区域更大的地图对象。为当前Apple Watch屏幕适当地调整地图大小,以便用户不用滚动便能看到整幅地图。

使用注释突出在地图上的位置。注释是显示在地图上的图片,用来标记位置或唤出信息。最多使用五个注释。

地图提供内建绿色、红色和紫色的图钉显示支持。

你还可以使用自定义图片创建注释。WatchKit扩展包可以调整图片相对地图坐标的位置,让你可以将图片放到当前位置的旁边或上面。

日期和定时器

日期和定时器对象是一种Apple Watch上与时间相关的特殊标签。

日期标签

日期标签:

  • 显示日期,时间或两者的结合
  • 可以使用各种格式、日历和时区来设置日期和时间的显示
  • 不需要由WatchKit扩展包更新

无论任何时候你想显示日期或时间,使用日期对象。

计时器标签

计时器标签:

  • 倒数到指定的时间或从指定的时间开始计时
  • 可以使用多种格式来设置其计数值的显示
  • 不需要由WatchKit扩展包更新

始终使用计时器标签来执行精确的倒数或正数计时。

菜单

在Apple Watch的Retina屏幕上使用force touch手势,会显示当前页面的上下文菜单,如果有的话。菜单存储当前页面相关动作(action)而不占用界面控件。

菜单:

  • 显示一到四个应用于当前页的动作
  • 从上到下,从左到右,按增加到菜单的顺序显示
  • 非层级且不可滚动
  • 可以由在设计时配置或程序配置

仅当当前页有相关动作时才添加菜单。菜单可选择。如果没有菜单可展示,当用户在屏幕上执行force touch手势时,系统会播放一段动画。

不要仅仅为选中的元素或部分界面原色创建动作。动作应用于整个页面。

给每一个动作配一张图和一段标签字符串。菜单图片是应用于标准背景的系统风格的黑白线条。标签字符串要短且最多两行。图片和字符串同时需要。

关于创建菜单图标的信息,查看菜单图片。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,921评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,635评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,393评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,836评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,833评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,685评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,043评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,694评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,671评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,424评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,027评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2 343

推荐阅读更多精彩内容