表盘是可交互的,并且显示独特的样式。

样式

表盘在显示有用和可行的数据时可能会表现出不同的风格。

多种表盘款式

交互

表盘可能会吸引用户进行互动,从而创建令人愉悦且内容丰富的用户体验。

交互可以改变审美观念,显示新信息并进行操作。

创意视野

Google 的 Wear OS提供了一种数字画布,以重新构想计时方式。 Wear OS 还允许你将数据集成在表盘上,以实现更高级别的个性化和相关性。

易见性是唯一要考虑的重要的原则。表盘设计应传达时间和相关数据的独特表达。尝试使用大胆,简约和富于表现力的设计方向,这些方向在各种距离下以及用户移动身体时都具有很高的可读性。

表盘显示直到用户下一次会议为止的剩余时间。


除表针外,表盘还使用不同的红色阴影显示时间。

方圆设备

Wear OS 设备具有不同的形状和大小。同时考虑方形和圆形表面以及不同的显示尺寸以优化某种格式。这些准则可帮助你的概念在不同设备之间保持一致。

创建灵活的概念

表盘的视觉功能非常灵活,可以在任何一个中正常工作
格式不做任何调整

使用通用的设计语言

尝试使用一组通用的颜色,线宽,阴影和其他设计元素来绘制方形和圆形版本之间的视觉连接。

正方形和圆形的整体外观可以适当地自定义
感觉就像是同一视觉系统的一部分。

调整模拟概念

你的某些概念自然会采用模拟时钟的形式,例如带有时针和分针的中央表盘。


尝试将设计扩展到正方形格式的裸露角的额外空间。

显示模式

Wear OS 设备以两种主要模式运行:始终开启和活动。设计表盘时,请同时考虑这两种模式。通常,如果你的表盘设计在常亮模式下且显示屏变暗(也称为环境光)时看起来很棒,那么在活动模式下显示屏完全向上且具有交互性时,其外观会更好。相反并非总是如此。

活动模式

当用户移动手腕以看一眼手表或触摸显示屏时,屏幕将进入活动模式。在这种模式下,你的设计可以使用全色和流畅的动画。


手表的活动模式

常亮模式

常亮模式有助于设备节省电量。你的设计应向用户表明屏幕处于始终开启模式。背景配色方案仅限于黑色,白色和灰色。如果很明显该设备处于始终开启模式,则您的表盘可能会在支持它的屏幕上使用一些颜色元素。根据经验,颜色元素最多可使用总像素的5%。在此模式下,屏幕每分钟仅更新一次。 仅在长亮模式下显示小时和分钟;不显示秒,否则时间看起来像静止了。当设备切换到常亮启模式时,在表面上会显示一条通知。


手表的常亮模式

特殊屏幕

Wear OS 设备具有多种屏幕模式,每种技术都有自己的优势和考虑因素。在为表盘设计始终开启模式的显示器时,请考虑它如何影响电池寿命和某些屏幕的屏幕老化。根据设备上可用的屏幕类型,配置表盘以显示不同的常亮设计。

常亮屏幕

常亮模式可让您的应用在设备显示屏变暗时保持打开状态,而不会影响电池电量。在常亮模式下,显示屏上点亮像素的数量将大大减少,所有交互都将被禁用,并且显示屏将切换到省电模式。


对于模拟表盘设计,请在指针相交处挖空中心点,以免在这种模式下出现像素烙印。

系统界面元素

为了防止表盘设计的关键部分被遮盖,可以在设计中加入 Wear OS UI 元素。这些元素显示手表状态并显示用户手机上的服务通知。

指针器

指示器向用户显示手表的状态,例如电池使用情况和飞行模式。

在选择固定位置之一放置指示器之前,请考虑指示器在表盘上的显示方式。如果设计使用大型偷看卡,请在屏幕顶部或中央找到指示器。如果状态图标或热词出现在屏幕底部,则系统将强制表盘显示小偷看卡。如果表盘边缘包含强烈的视觉元素(例如刻度或数字),请将指示器放在屏幕中央。


该指示器显示电池使用情况和连接情况。

数据集成表盘

你的表盘可以向用户显示上下文相关的数据,并可以通过更改设计中的样式和颜色来突出显示该数据。

用户需要什么?

你希望用户在浏览你的设计后知道什么?设计数据集成表面的第一步是根据可用数据定义用户结果。生成一个由真实用户需求支持的强大概念或结果。然后,确定如何获取所需数据。

观看5000步的目标完成情况

将表盘作为时间线

你的表盘概念可能包括使用超出时间的数据,例如天气,日历和健身数据。考虑通过时间的方式创造性地集成数据,而不是使用仅带有额外数据覆盖的基于时间的表盘。

例如,与其将与天气相关的表盘设计为带有当前温度(以度为单位)的覆盖面的时钟,不如设计一个表盘来描述温度在一天中的变化情况。

Wear 2.0 提供了一种全新的方式来整合表盘上的数据。 阅读有关表盘并发器的更多信息。

表盘显示白天温度如何变化

坚持一条信息

确立概念或所需目标后,请开始形象化表盘。最强大的设计非常容易浏览,并提供独特的数据表达方式。

要查找一条主要消息,请确定最重要的支持数据点。 例如,只显示下一个即将发生的事件,而不是显示整个月的日历事件。

表盘设计显示了可查看数据的抽象表示

开始时先进行一些观察和测试

确保你的方法始于洞察用户的需求和期望。

  • 与用户一起测试设计,以检查您可能做出的任何假设。
  • 在纸上画一个粗略的草图,然后请朋友告诉你这意味着什么。
  • 使用许多不同类型的数据和方案来尝试您的概念。
  • 开始编程之前,请使用实际的手表屏幕测试设计。

表盘交互

只要没有另一个UI元素也可以响应用户的点击手势,你的表盘表面就可以对其做出响应。 与表盘交互的一些可能用例包括:

  • 在表盘上引起视觉变化,例如反转配色方案
  • 在表盘上在线显示更多信息,例如显示详细的步数
  • 内联或在后台完成操作,例如启动计时器
  • 启动特定的活动,例如在消息传递应用程序中开始对话

可用手势

仅单点可用。 此限制对于保持清晰和一致的系统交互并使表盘交互尽可能简单很重要。你和用户都不应该将表盘视为成熟的应用程序。 图1总结了手势的类别及其用法。

通常,表盘的交互应轻巧,用户只需触摸一次或两次即可完成所需的操作。

点击目标

如果要在表盘表面引起简单的状态变化(例如,纯粹的视觉变化),则可以将表盘表面的整个画布用作拍打目标。

对于更重要的更改或操作(例如启动活动或向朋友发送消息),请将目标尺寸保持较小,在 48-90dpi 之间,以避免误拍。目标之间至少应有 8-16dpi 的距离。 为了获得最佳的可点击体验,一次最多显示7到9个目标。

点击区域

你还可以使用屏幕的不同区域来触发表盘的不同更改。例如,在整个画布上点击可以切换整个表盘的状态。轻按特定目标可能会内联显示与目标有关的信息。最后,在目标外轻击可以将表盘恢复为默认状态。

视觉反馈

当用户的手指在表盘上点击时提供视觉反馈。 在用户抬起手指之前,不会触发轻击事件,但是对轻击的视觉反馈有助于指示系统已接收到触摸,还可以帮助用户知道轻击落在何处。

警告:请勿在点击时立即启动UI。轻按时启动的UI与用于与系统UI元素(包括表盘选取器,通知流,设置阴影和应用启动器)进行交互的手势发生冲突。

视觉反馈确认用户的触摸并显示触摸的位置。

设计实例

以下是交互式表盘方法的一些示例:

应用于视觉变化

点击时,表盘表面颜色会改变。

切换状态

轻按一下,天气符号将从云层和太阳变为华氏温度。

更改目标用户界面元素

UI元素在点击时会更改颜色。

内联显示信息

点击显示更多详细信息

Wear OS 配套 App

Wear OS配套应用程序使用户可以访问所有已安装的表盘。


表盘
Wear OS配套应用程序使用户可以访问所有已安装的表盘。


表盘设置

不要使用启动器图标

可从 Wear OS 配套应用程序或捆绑的第三方应用程序访问所有可用的表盘。对于Wear OS表盘,不需要独立的启动器图标。

将表盘直接安装在手表上,不要在手机上留下任何痕迹。 如果你不依赖手机的传感器或表盘数据,或者不将表盘与手机侧应用捆绑在一起,则建议使用此选项。



WearOS

本博客所有文章除特别声明外,均采用 CC BY-SA 3.0协议 。转载请注明出处!