User Interface Guidelines 用户界面指南

5 篇文章 0 订阅
3 篇文章 0 订阅

User Interface Guidelines 用户界面指南

User Interface Guidelines  用户界面指南

自己的一点意见:看到google glass的崭新的交互规则时, 我就明白计算机工业下一轮革命就要开始了,在此为各位时代的弄潮儿介绍下,很多学计算机的同学尤其是
Glass 提供了一系列崭新的界面。像一切新生事物一样,机遇的同时也带来了新的挑战。我们在开发和使用Glass的时候, 发现了一些东西,再此分享给大家,请按照这些指南创建自己的服务

Creating well-formatted timeline cards 创建格式良好的时间轴卡片

时间轴卡片是用户和Glass交互的核心元素。 它们不仅用于显示你的内容,也是用户和glass上的用户交互的元素。所以创建格式风格清晰,漂亮,可读性好的时间轴卡片非常重要。
Mirror API 提供三中设计卡片的方式:文字,使用已有的HTML模板,使用自定义的HTML模板。
Using text 文本
提供文本是最简单的方式,可以在Glass上做出漂亮清晰的卡片。 你只需要告诉API你想要显示的文本和图片,Glass会保证给你创建出看起来很不错的卡片。你的Glassware能指定时间轴文本卡片上的文本
  Eea079a9fa123b65e776c87edd824d3c

在以下情况下使用文本卡片:

  • 你要显示的内容主要是文字.
  • 你想要Glass决定如何把内容展现给用户。你内容的展现方式会跟着我们的整体的界面改进而改进,不需要额外的工作量。
  • 你希望你的内容保持实时并跟Glass整体体验保持一致。

Using Glass HTML templates 使用Glass的HTML模板

不是所有的内容都能可以由几行文字显示。有时候你需要一些特殊的结构化内容来显示到用户的时间轴上,或者你需要自己控制格式。为了适应这样的需求,Mirror API在 timeline items提供一个  html 字段接受HTML标记。
  0eed726ac902abefecc5b1fab7f08370
为了节省你的开发时间同时确保为你用户提供一致的用户体验,我们创建了一系列能指定内容的HTML模板,用于平时显示在Glass上。我们强烈建议你以这些模板为指南创建自己的HTML卡片。你可以在 Mirror API Playground找到所有的模板。

在以下情况使用这些内置的HTML模板:

  • 你想显示一些结构化内容时,比如:列表或者表格.
  • 你想为你的设计提供更大的灵活性。

Displaying your own custom HTML 显示自定义HTML

有时,你需要发送给Glass内容,以上方式没法满足时。你可以设计自己的HTML模板,把它放到 timeline items 的  html 字段。
制作自己模板给你最大的自由度去显示你的内容。但是给你权力的同时也带来责任。保持内容风格一致性并且避免意外的情况是非常重要的。您可以创建自己的自定义HTML来显示内容,但我们强烈建议您使用我们的HTML模板,因为他们是我们的实践经验最优化后的结果。如果你必须制定一个新的模板,遵循这些原则。
  • 使用 base_style.css提供的样式。这Glass 时间轴上所有卡片都符合这个文件里定义的风格.
  • 间距和隔行规则 请遵照内检模板的规则,如下面几张图所示:

9856f802f059655d1297a76da1cf82cd10b22f4403ccd52385f544430caf5e4b

Ab128a1b824ab092f55dfb7661c3ba8d

Delivering photos and video 发送图片和视频

你可以把图片和视频当附件放到时间轴卡片中。图片会作为对应时间轴卡片作为背景显示在文本后面。视频也类似,但是视频播放时候前面的文本会暂时消失。

为了确保最优的体验:

  • 请按16:9的比例发送全屏图片和视屏.
  • 目标分辨率640*360
  • 确保指定图片的高度和宽度。

另外还有些内建菜单项的指南:

REPLY(回复), REPLY_ALL(回复全部) –  音频回复Voice replies are intended to capture free form input by voice. Do not use voice replies to capture a limited set of options, such as possible moves in a game.

Offering menu items to remove content from a user’s timeline – 提供菜单项从用户时间线上删除内容

有两种方法从用户的时间轴上删除内容, dismissing和deleting:
     ”Dismiss” 菜单项会从时间轴上删除卡片。总体来说,时间轴卡片是自我消除的,一个新的卡片出现,旧的自动消除,正常情况下不需要提供这个功能。你应该确保用户交互尽可能的简单,所以不应该把 “Dismiss” 功能作为你的Glassware的主功能并要求用户主动管理你的应用。
     “Delete”删除菜单项消除当前时间轴卡片并删除存储地方删除对应时间轴卡片的内容(本地或者远端的服务器存储)。别迷惑你的用户,提供一个”Delete“菜单项,却是”dismiss“功能

 

Sharing content to contacts — 分享内容给你的联系人

联系人表示你的用户可以分享内容给的对象,一个人或者而一个虚拟实体。遵从如下规则,提供最佳的体验给你的用户:
  • 联系人全屏显示,所以用640*360的图标.
  • 指定acceptTypes 来保证你的联系人能用用户分享的内容做些有用的事情.

Delivering timeline cards appropriately — 恰当的发送时间轴卡片

漂亮的卡片只是成功的一半。要提供很棒的体验,他们还要在正确的时间正确的大小。
  • 在用户认证了你的Glassware发送一个”Welcome“欢迎卡片到Glass设备上。 这让你的用户知道你的安装已经成功了。
  • 收到指令时立刻发送内容,特别是你发出了一个音频通知.
  • 有时候发送摘要会比较好。 如果你要发送一个摘要,最好是后台默默的发送。

Quick Reference

这里有一些你需要了解的规范:

  • Screen aspect ratio 屏幕比例
    • 16×9
  • Screen resolution 屏幕分辨率
    • 640 x 360 pixels
  • Share contact icon size 分享联系人Icon尺寸
    • 640 x 360 pixels
  • Menu option icon size 菜单选项icon尺寸
    • 50 x 50 pixels
  • Supported media format 支持的多媒体格式
    • Container: MP4
    • Video: H.264 baseline and H.263 baseline
    • Audio: AAC and MP3
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值