最佳做法

本文档将介绍一些设计和信息传递方面的最佳做法。 请尽可能遵循这些准则,以确保提供最佳用户体验。

设计优先,代码优先

开始在 Glass 上开发之前,请先了解设计原则和模式。 如需了解详情,请参阅设计指南。

如需获取早期设计反馈,请创建您的 Glassware Flow 设计,并将其提交给审核团队。

不要将已固定的时间轴项用作启动器

用户调用 Glassware 及其功能的两种主要方式是使用ok glass 主菜单中的语音命令或触摸命令,或时间轴卡片中的上下文菜单。

您绝不应强制用户出于启动 Glassware 的目的而固定包含菜单项的时间轴卡片。镜像 API 设计基于基于用户配置的定期通知

您可以提供菜单项以启动 GDK Glassware 或调用 镜像 API,前提是体验与定期通知设计模式一致,并且不要使用镜像 API 实现即时互动

例如,宠物领养 Glassware 不应插入时间轴卡片,不应强制用户稍后使用该卡(例如,搜索“狗”、“搜索猫”、“搜索鸟”等)。不过,Glassware 应允许用户为其所需的宠物设置条件,并定期提供符合此条件的卡片。然后,这些卡片可以包含用于执行操作的菜单项,例如“读取个人简介”和“领养宠物”。

遵循标准卡片设计和模板

尽可能使用已获批准的卡片设计模板。如果模板不起作用,请执行以下操作:

  • 如果您使用的是 镜像 API,请使用 base_style.css 中的样式。
  • 内边距和间距需遵循常规规则作为内置模板。

遵循媒体要求

如果要投放媒体内容,请遵循以下准则:

  • 所有公开视频都会进行流式传输,且不会附加到时间轴项。
  • 视频的宽高比为 16:9。
  • 视频分辨率为 640×360 像素。
  • H.264 格式

正确捆绑和分页

您可以使用捆绑包和分页功能将卡片组合在一起,但在以下情况下应正确使用它们。

套装

  • 为相似但不应位于同一张的卡片组使用套装。
  • 将捆绑包封面卡片设计为在外观上与套装包含的卡片不同的摘要。
  • 针对每个套装,仅用通知提示音通知用户一次。

捆绑包适合的情况:

  • 电子邮件会话或短消息
  • 同一个人之间有三条短信
  • 五张相距不到一小时的照片
  • 一次性插入相关文章
  • 正在进行的体育比赛的关键事件和得分更新列表

捆绑包效果不佳的情况:

  • 您的服务中的所有内容
  • 一天内发送到 Glass 的许多标题

分页

对于因空间限制而不适合一张卡片的时间轴项,应使用分页,否则应该在同一张卡片上。

适合使用分页的情况:

  • 电子邮件、新闻或类似内容无法放入一张卡片中

分页效果不佳的情况:

  • 一组不同的卡片,例如多个新闻报道或电子邮件

遵循标准菜单设计

自定义菜单项

  • 每个菜单项操作都必须有一个关联的 50 × 50 图标。使用玻璃菜单图标,以与 Glass 界面保持一致。
  • 尽可能将显示名称限制在几个字以内。在有或不使用宾语时使用命令式动词。
  • 请针对内置菜单项使用默认图标和显示名称,除非您将菜单项用于截然不同的操作。
  • 图标采用纯白色,背景为透明。
  • 使用简短且可操作的菜单项显示名称。有或无宾语的命令式动词都效果很好,如以下示例所示。
  • “关闭”菜单项仅会从时间轴中移除时间轴卡片,因此请仅在您需要时为其创建自定义菜单项。一般而言,您应该让时间轴项随着时间自然衰减,不需要用户主动管理您的应用。
  • 名称的长度不得超过 15 个字符。例如:
不好 不错
延长录制时间 扩展视频
给小周发消息 发送消息

内置菜单项

  • Reply 或 Reply All - 语音回复旨在捕获语音输入的自由格式。请勿使用语音回复来捕获有限的选项,例如在游戏中可能采取的动作。

  • Delete - 关闭时间轴卡片,并删除与时间轴卡片在任何位置(本地和服务器存储空间)对应的内容。如果您提供的功能是“关闭”,请不要通过提供“删除”菜单项来迷惑用户。

请勿使用 镜像 API 实现即时互动

镜像 API 不用于接收用户请求并实时或低延迟响应。如果有要求,请使用 GDK。

例如,镜像 API Glassware 非常适合与“添加备注”命令搭配使用,因为用户在调用该命令后,不必等待 Glassware 的响应。

相比之下,“查找食谱:意大利面”不适用于 镜像 API Glassware,因为用户希望立即显示搜索结果。使用 Mirror API,用户{101}必须等待一段时间才能将卡片插入时间轴才能继续使用{101}Glassware,这不是一种良好的用户体验。

此约束条件适用于 Glass Home 卡片上的主要语音指令以及卡片和沉浸式菜单项。

恰当创作内容

为卡片创建内容时,每张卡片都需要简洁并包含一条逻辑信息。此外:

  • 尽可能使用图像而不是文本
  • 以原始宽高比显示图片(可以剪裁)。
  • 将卡片页脚的中间区域留空。ok glass 上下文语音菜单会显示在此处,并屏蔽其下的所有内容。
  • 如果需要,可使用 auto-resize CSS 类根据您的内容自动调整字体大小。
  • 遵守我们的撰写准则