Google Glass界面设计指南 [MUX团队翻译]

Design for Glass Google Glass界面设计指南 译自20140513版本 MUX团队翻译 MoonMonster校对 目录 1 用户界面 1 1 时间轴概念是 Glass 用户体验的主体 5 1 2 时间轴按照区域进行组织 5 1 3 动态卡片包含丰富 实时的内容 7 1 4 静态卡片显示文字 图像和视频内容 8 1 5 通过Glass应用 Glassware 将内容分享给联系人 9 1 6 沉浸模式提供了一种完全自定义的体验 9 1 7 菜单项允许用户执行操作 10 2 原则 2 1 为Glass而设计 11 2 2 不要妨碍用户 12 2 3 与用户场景关联 12 2 4 避免 惊喜 13 2 5 为用户设计 14 3 设计模式 3 1 设计模式构件 15 3 2 设计模式 18 4 视觉风格 4 1 度量和网格 21 4 2 布局模板 23 4 4 字体 27 4 5 文案 29 附录1 翻译词汇及名词解释 30 附录2 翻译原文 32 附录3 Glass硬件图解 47 4 别忙着开发 先设计 在开发之前 你需要先了解Glass的设计原则和模式 并遵循这些模式以及视觉 风格进行开发 如果运用得当的话 能给用户带来一致的用户体验 学习设计原则 这些设计原则阐明了Glass诸多优秀体验的核心 所以请 将它们用在设计和开发当中 了解更多 选择一个设计模式 我们提炼出一些在Glass上非常行之有效的设计模式 利 用它们能创造出具有一致性的用户体验 了解更多 使用Glass的视觉风格和模板 遵循我们提供的设计指南和模板能够帮助你正确地设计和 开发Google Glass应用 了解更多 5 1 用户界面 本章将介绍Glass的主要UI组件 它们的使用场景 以及用户如何与它们进行交 互操作 1 1 时间轴概念是 Glass 用户体验的主体 Google Glass的主要用户界面是由分辨率为640 x360px的卡片组成的时间轴 它提供了诸多功能 如呈现动态和静态卡片的标准模式 系统级语音指令以及 Glass应用的通用启动方式 用户通过滚动时间轴切换不同区域显示历史 当前和未来的卡片 新近产生的卡 片会在最接近主页卡片的地方出现 而主页卡片是用户唤醒Glass时默认展现的 第一界面 设置 当前 未来 主页 历史 时间轴除用以管理卡片之外 还能处理用户输入 例如通过触控区定位时间轴 以及通过语音启动Glass应用等 大多数卡片有允许用户进行操作的菜单项 如 回复文字消息或分享照片 1 2 时间轴按照区域进行组织 时间轴中的卡片根据其临时程度和类型出现在以下几个区域 6 主页区 默认的主页卡片是 Glass时钟 处于时 间轴的中间位置 用户唤醒Glass的多 数时候都展现该界面 它为用户启动其他的Glass应用提供了 系统级的语音和触控命令 Glass时钟 卡片为整个Glass系统提供了入口 因 此它将一直处于时间轴的主页位置 历史区 Glass 时钟的右侧是历史区 这里仅显示静态卡片 因为动态卡片总被认为是当 前正在进行的 所以不会出现在这里 静态卡片在历史区中自然 衰减 当新卡片进入历史区时 处在离时钟最近的 位置 越早的卡片用户越少使用 因此会被Glass系统依次向右推 Glass 会将 用户7天内没使用过的卡片 或者超出200张上限部分的卡片自动清除掉 当前和未来区 Glass时钟的左侧是当前和未来的区域 这里会展现静态 动态两种卡片 动态卡片展示和用户当前时刻有关的信息 并且此卡片一直处于此区域 如果焦 点在动态卡片上时系统进入休眠 当Glass再次被唤醒时这张动态卡片将会作为 默认卡片显示 7 拥有未来时间戳或被固定位置的静态卡片也会显示在当前和未来区 基于地理位 置 状态 或者其他类型用户信息的Google Now卡片就是一个被固定位置的例 子 Strava Cycling显示了一张能够不断实时更新自行车运 Google Now天气卡片自动展示相关信息 动的时间 距离 速度等数据的动态卡片 设置区 时间轴最左侧是Glass系统级设置 在 这里你能够设置诸如音量和Wi Fi网络 等系统选项 1 3 动态卡片包含丰富 实时的内容 动态卡片能够通过频繁更新自定义图像来给用户展示实时信息 这项功能非常适 合那些需要基于用户数据不断更新的用户界面 动态卡片还能够访问Glass的底层硬件传感器数据 比如加速计和GPS 这些都 是静态卡片所不能实现的新形式交互和功能 8 指南针应用使用了传感器 并且通过渲染自定义图像 创造了独特的用户体验 图文译 肖克利半导体实验室旧址 谷歌总部 另外 动态卡片在时间轴内运行时 用户能够左右滑动查看其他卡片并与之进行 交互 这允许用户执行多任务且无缝地保持动态卡片在后台实时运行 指南针应用运行在时间轴上 用户能够浏览至别的卡片并在需要时返回 1 4 静态卡片显示文字 图像和视频内容 静态卡片是一组简单的使用HTML 文本 图像和视频来构建的信息 它们不能 实时刷新 而是被用来展示快速通知 9 图文译 在公园的欢乐时光 提醒大家我们明天早上9点见面 我会带着飞盘 图文译 电影 120分钟 戏剧类 1 15 2 10 4 15 电影院 1 5 通过Glass应用 Glassware 将内容分享给联系人 静态卡片有分享功能 允许用户将当前卡片内容分享给其他人或Glass应用 Glassware 可将你的应用 Glassware 时间轴卡片设置成共享的 同时 为你的Glass应用 Glassware 定义联系人 这样他就能够接受你分享的时间 轴条目 1 6 沉浸模式提供了一种完全自定义的体验 当需要完全把控用户体验时 你可以利用沉浸模式 它能够在时间轴之外运行 沉浸模式允许渲染你自己的界面并且处理所有的用户输入 沉浸模式非常适合于 那些在时间轴的限制下无法正常工作的Glass应用 Glassware 10 1 7 菜单项允许用户执行操作 卡片和沉浸模式都能承载诸如分享 回复 移除等操作 不限于此 的菜单项 图文译 回复 回复全部 归档 语音播报 沉浸模式暂时接管时间轴以提供定制化的可交互体验 用户在触控区手势下滑返回时间轴 11 2 原则 Glass与现有的移动平台在设计与使用中有着根本的不同 开发Glass应用时遵 循以下原则将为用户带来最佳的体验 2 1 为Glass而设计 在不同的使用场景下 用户会使用不同的设备来存储和显示信息 Glass最适合 简单 实时 与场景紧密相关的信息 不要尝试把为智能手机 平板或者桌上电脑设计的独特功能移植到Glass上 也 不要尝试用Glass代替它们 相反 要关注Glass以及你的服务与上述设备如何 互补 向用户传达独一无二的体验 永久去年上个月现在 Google 在Glass上用布局简洁的卡片表现单条信息 把大部分内容隐藏在 更多 菜单项中 图文译 湾区的交通状况是怎么回事 而在手机与平板上 Google 直接展现嵌入内容的完 整信息流 12 2 2 不要妨碍用户 Glass被设计成这样 需要时就出现 不需要时则消失 设计Glass应用也要采 用同样的理念 为用户提供愉悦的功能补充用户的生活 而不是让他们脱离生 活 Glass显示屏恰好在自然视线的上方 用户既可以感受世界 又能在需要的时候访问Glass Google搜索会帮助 你在当前情景下找到特定信息 图文译 水母是刺丝胞动物门中主要的非水螅体形态 来自维基百科 2 3 与用户场景紧密相关 要在合适的时间和地点为用户推送信息 场景越相关用户越感到神奇 从而增加 用户的使用时长和满意度 13 当用户到达喜欢的杂货店时推送购物清单 是与用户场景紧密相关的体验 在Glass上运用的很好 图文译 萝卜 黄瓜 3根黄瓜 柑橘 2 4 避免 惊喜 由于非常贴近用户感官 Glass上不符合用户预期的功能或者不好的体验会比在 其他设备上更加令用户感到糟糕 别太频繁也别不合时宜地发送内容给用户 让用户明确地知道Glass应用的意 图 不要伪装成不是你的东西 在用户不想看到提示的时候发送通知是一种不好的体验 注意推送信息的时间 频率和地点 14 2 5 围绕人来设计 设计图形化的 能够利用语音和自然手势交互的界面 专注于即用即抛的使用模 式 让用户可以快速行动并继续完成他们正在做的事情 Glass上显示的信息以人像优先 让用户以平时说话的方式回复 说话结束后会自动发送 图文译 那上面的景色如何 15 3 设计模式 使用通用的UX设计模式 让用户在所有的Glass应用中获得一致的体验 在本章 通过一些体验良好的Glass设计模式的案例 你将了解到如何用基本构 件来构建这些模式 3 1 设计模式构件 利用主要UI元素和调用方法 你可以在Glass上构建各种运作良好的使用模式 你还可以根据需要 将多个模式有机整合在你的Glass应用上 UI元素 1 静态卡片 显示文本 HTML 图像和视频 静态卡片可以调用动态卡 片或者沉浸模式 2 动态卡片 显示当前重要信息的卡片 通常会高频更新 3 沉浸模式 显示暂时替代时间轴体验的Android activities 调用方法 1 OK glass 语音或触控指令 2 时间轴卡片中的语音或触控指令 16 3 1 1 语音调用模式 用户与Glass的交互中 语音指令扮演着重要的角色 它能释放用户的双手 让 用户快速 自然地处理事情 语音指令与用户交流的方式 是Glass应用体验中 的一个主要部分 在OK Glass 菜单中 我们基于一套标准精心挑选了语音指令 你可以查看voice command checklist 里边详细描述了什么样才是好的语音指令 通常来说 在 Glass中语音指令会采用以下指导原则 专注于动作 而非机器指令 语音指令应该基于用户想要做什么而不是Glass应用正在实现的行为 例如 ok glass 快拍下来 的指令要优于 ok glass 开启相机 专注于行动 对于用户交互是一种更自然的方式 主要的语音指令都要遵循这条准则 缩短从目的到行动的时间 语音指令应该是尽可能快的实施指令 例如 ok glass 听Led Zeppelin的歌 指令一下达就应该开始播放音乐 而 不是在播放之前强迫用户去选择任何选项 口语化 容易说 语音指令是自然的声音 与通常的指令非常不同 至少是两个词 这些特质让我 们调整语音识别来适应各种各样的指令 17 足够通用 能适用于多个Glass应用 为避免ok glass指令冲突 必要时语音指令应该可以用于多个Glass应用 在这 些情况下 Glass会自动弹出能够完成指令的应用列表 例如 ok glass play a game spellista 的指令要优于 ok glass play spellista 18 3 2 设计模式 3 2 1 周期性通知 周期性通知指的是 不需调用模型而将静态卡片插入时间轴 你的服务将根据用 户定义的设置来发送通知 比如说 每小时发送热点新闻 或是一来邮件就通 知 这一模式调用Mirror API网络服务或Glass上的Android后台服务来将通知推送到 时间轴中 19 3 2 2 持续性任务 持续性任务指的是长时间运行的动态卡片 并且用户可能频繁切换进出这些卡 片 比如说 秒表应用 Stopwatch 通过语音指令 ok glass 来启动计时 用户可以在秒表应用中停留一段时间 然后通过时间轴切换到其他卡片 再返回 到秒表应用 当显示屏从休眠状态被唤起时 秒表应用会是默认展现的卡片 前 提 只要当显示器进入休眠时 秒表处于聚焦状态 用户能通过点击菜单项中 的 停止 来停止计时 注意 所有动态卡片都必须有 停止 或类似功能来移除卡片 再举一个持续性任务的例子 Strava Strava应用为当前的跑步或骑车任务增 加一张带有倒计时的动态卡片 点击卡片展现有大量选项的菜单 当用户结束跑 步或骑行时 能够通过菜单项中的 完成 将卡片从时间轴中移除 20 3 2 3 沉浸模式 沉浸模式以Android activity的形式来呈现沉浸体验 沉浸模式能够暂时性地替代 时间轴模式 用户能通过下滑手势返回到时间轴模式 21 4 视觉风格 Glass有其独特的视觉风格 所以我们提供了标准的卡片模板 颜色 字体 以 及文案方面的指南以便使用 4 1 度量和网格 Glass的用户界面有标准的布局和边距尺寸指南 用于不同类型的时间轴卡片 卡片区域通常如下所示 我们还为你列出了一些用于通用卡片设计的指南 4 1 1 卡片区域 Glass定义了一组常见区域的尺寸 以便于保证不同卡片的设计和显示的一致 性 22 主体内容 卡片的主要文本内容使用Roboto Thin字体 并且在边界需要留出内页边距 Glass会根据内容的量来动态调整字体尺寸 全出血图像 图像全出血时的显示效果最好 而且不必像文本排版那样需要留出内容与边框的 40px间隙 页脚 页脚显示有关卡片的补充信息 例如卡片的来源或者时间戳 页脚文本通常为 26px Roboto Light字体 白色 ffffff 居中显示 状态栏 状态栏有三个部分 滚动条 显示了在一组卡片中当前所处的位置 进度和时 限 显示了可以取消操作的进度和时限 条纹进度条 会在进程中会进行循环动 画 左对齐图片或栏目 左对齐图片或栏目需要调整内页边距和文本内容 请参见4 2 4章节 内页边距 时间轴卡片的文本内容与四周有40px的间隙 这样保证大多数用户能清晰的看见 内容 4 2 布局模板 下面的布局会向你展示一些常用的布局网格和卡片 实现细节请参见 Mirror API playground 4 2 1 主要布局 4 2 2 带文字的全出血图片 24 4 2 3 作者和内容 4 2 4 左对齐图片或栏目 25 4 2 5 列表 26 4 3 颜色 Glass用白色显示大多数文字 并使用以下标准色显示紧急或重要内容 你也可 以在时间轴卡片中使用这些颜色 CSS ClassRGB值 白色 ffffff 灰色 808080 蓝色 34a7ff 红色 cc3333 绿色 99cc33 黄色 ddbb11 注意 如果你在HTML时间轴卡片中使用了CSS样式 Glass会自动使用标准颜 色呈现它们 Glass使用base style css 样式表呈现HTML卡片 以下示例表现了如何使用颜色表现重要信息 比如火车路线和航班状态 27 4 4 字体 Glass显示文本时 默认使用Roboto Thin 首选 或Roboto Light 辅助 字 体 这取决于字体大小 在设计动态卡片或沉浸模式时 也可以选择适合你品牌 形象的字体 首选字体 Roboto Thin 辅助字体 Roboto Light 此字体用于显示大部分文字 此字体用于显示26px的文字 28 4 4 1 可动态缩放的文本 Glass在显示大多数时间轴卡片时 尽可能使用最大字号 以下卡片是根据文本 量进行调缩放的示例 29 4 5 文案 文字的显示空间有限 所以在为Glass应用 Glassware 撰写文案时 请遵守 以下规则 保持简短 简洁 简单并准确 寻找长文本的替代品 比如朗读内容 用图片或视频呈现 或者删除功能 保持简单 假装你正在与一个聪明能干的人对话 但他不了解技术术语 英文不是很好 使 用短语句 主动动词及常见名词 保持友好 使用缩写 直接使用第二人称 你 与用户交流 如果你的表述不是日常对话会 使用的语句 那么它不适用于此处 先放最重要的 前两个单词 包括空格在内约11个字符 应该至少包括此句的一个最重要的信 息 如果不是这样 请重新开始 只描述最重要的信息即可 别再试图解释细微 的差别 因为这些解释文字会被大部分用户忽略 避免重复 如果一个重要词语在某个界面或某段文本内多次重复 想办法只用一次 30 附录1 翻译词汇及名词解释 accelerometer 加速计 Android activity 保留原文 activity是Android组件中最基本也是最为常见的四 大组件之一 building block 构件 full bleed 全出血 在打印机领域中全出血打印指的就是无边距打印 在界面 设计中指四边不留白的设计 Google Glass Glass 保留原文 也有其它译文译作 谷歌眼镜 Glassware Glass应用 immersion 沉浸模式 invocation method 调用方法 invocation model 调用模型 live card 动态卡片 live cards menu items 菜单项 Mirror API 保留原文 是Google Glass的开发者API notification 通知 ongoing task 持续性任务 patterns 设计模式 模式 periodic notification 周期性通知 static card 静态卡片 static card 31 Strava Strava应用 是一款风靡欧美的测速应用 其主要功能是把自行车爱 好者们的成绩和名将们的成绩加入到同一个排名中 让自行车爱好者或者跑步爱 好者们能和世界名将们一较高下 style 视觉风格 timeline 时间轴 UI 保留原文 即User Interface 用户界面 的简称 UX 保留原文 即User Experience 用户体验 的简称 voice command 语音指令 writing 文案 32 附录2 翻译原文 原文地址 1 User Interface This section goes over the major UI components of Glass when they are use ful and how users interact with them 1 1 The timeline controls most of the user experience The timeline is the main user interface that is exposed to users and is com prised of 640 360 pixel cards It provides many features such as a standard way to present live and static cards system wide voice commands and a common way to launch Glassware Users scroll through different sections of the timeline to reveal cards in the past present and future The most recent items reside closest to the Home card which is the default card users see when they wake Glass up In addition to managing timeline cards the timeline processes user input such as navigating the timeline with the touchpad and starting Glassware with voice commands Most cards also have menu items that let users carry out actions such as replying to a text message or sharing a photo 1 2 The timeline is organized into sections Timeline cards appear in the following sections based on the card s temporal ity and type 33 Home The default Home card is the Glass clock and it resides in the center of the timeline For the most part it appears whenever users wake Glass up It provides system wide voice and touch commands for users to start other pieces of Glassware The Glass clock card never leaves the Home area of the timeline because it provides access to the entire Glass system Past To the right of the Glass clock is the history section which displays only static cards This is because live cards are always considered to be in the present so they never appear here Static cards naturally decay in the past section As new cards enter the past section they appear closest to the clock Glass pushes older cards farther to the right where users rarely scroll and removes cards older than 7 days or when the 200 card limit is reached Present and Future To the left of the Glass clock is the present and future section which contain both static and live cards Live cards display information that is relevant to users at the current mo ment and always appear in this section When a live card has focus and Glass sleeps that card becomes the default card that appears when Glass wakes up Static cards that have future timestamps or are pinned also appear in the 34 present and future section Google Now cards are an example of pinned cards that appear based on location status or other types of user information Settings At the farthest left of the timeline is the Settings bundle where you can config ure system wide Glass settings such as volume and Wi Fi networks 1 3 Live cards contain rich real time content Live cards can update frequently with custom graphics to show users re al time information This functionality is great for UIs that need to constantly update based on some user data Live cards also have access to low level sensor data like the accelerometer and GPS which unlocks new types of user interactions and features that aren t possible with static cards In addition live cards run inside the timeline so users can scroll left and right to view and interact with other cards while the live card is running This allows users to multitask and seamlessly maintain the live card s running state in the background 1 4 Static cards display text images and video content Static cards are simple chunks of information that you can build with HTML text images and video They do not update frequently if at all and are de signed for quick notifications 35 1 5 Contacts allow users to share content with Glassware Static cards can have a share menu item that allows users to share the card with people or other Glassware You can declare your Glassware timeline cards to be shareable and also define a contact for your Glassware that can accept shared timeline items 1 6 Immersions offer a fully customized experience When you momentarily need full control over the user experience immersions can run outside of the timeline experience This allows you to render your own UI and process all of the user input Immersions are great for Glassware that cannot function within the constraints of the timeline 1 7 Menu items allow users to carry out actions Both cards and immersions can contain menu items that carry out associated actions such as sharing replying dismissing and much more Last updated April 15 2014 2 Principles Glass is fundamentally different than existing mobile platforms in both design and use Follow these principles when building Glassware to give users the best experience 36 2 1 Design for Glass Users typically have multiple devices that store and display information for specific time periods Glass works best with information that is simple rele vant and current Don t try to replace a smartphone tablet or laptop by transferring features de signed for these devices to Glass Instead focus on how Glass and your ser vices complement each other and deliver an experience that is unique Google on Glass shows a single card for each post with a simple layout and most content behind a Read more menu item Google on phones and tablets shows a full stream of post with content inline 2 2 Don t get in the way Glass is designed to be there when you need it and out of the way when you don t Your Glassware must function in the same way Offer engaging function ality that supplements the user s life without taking away from it The Glass display rests just above your natural line of sight allowing people to experience the world and access Glass when they need to Google Search lets you find specific information in context 2 3 Keep it relevant Deliver information at the right place and time for each of your users The most relevant experiences are also the most magical and lead to increased engage ment and satisfaction 37 Delivering a shopping list when users arrive at their favorite grocery store is an experience that is relevant and works well on Glass 2 4 Avoid the Unexpected Unexpected functionality and bad experiences on Glass are much worse than on other devices because Glass is so close to your users senses Don t send content too frequently and at unexpected times Always make it clear to users what the intention of your Glassware is and never pretend to be something you re not Sending notifications when users don t want to see them is a bad experience Be aware of time frequency and location when you are delivering information 2 5 Build for people Design interfaces that use imagery colloquial voice interactions and natural gestures Focus on a fire and forget usage model where users can start actions quickly and continue with what they re doing Messaging on Glass prioritizes images of people lets you reply by speaking naturally and sends automatically when you stop talking Last updated April 24 2014 38 3 Patterns Use common UX patterns to give users a consistent experience across all Glassware Here you ll learn about the basic building blocks to build these patterns along with examples of patterns that we feel work great on Glass 3 1 Pattern building blocks By using the major UI elements along with an invocation method you can build a wide variety of usage patterns that work well on Glass You can then com bine multiple patterns together in your Glassware for the use cases that you require UI elements 1 Static card Displays text HTML images and video Static cards can invoke live cards or immersions 2 Live card Displays cards that are important at the current moment usually rendered at a high frequency 3 Immersion Displays Android activities that take over the timeline experi ence Invocation methods 1 ok glass touch or voice menu 2 Contextual voice or touch menu on a timeline card 39 3 1 1 Voice invocation model Voice commands are a major part of user interaction with Glass and allow users to do things hands free quickly and naturally How a voice command starts the interaction with users is an integral part of the Glassware experi ence We carefully select voice commands to include on the ok glass menu based on a set of criteria See the voice command checklist for complete details about what we look for in a good voice command In general voice commands ad here to the following guidelines on Glass Focus on the action not the agent Voice commands should be based on what users want to do and not what Glassware is carrying out the action For instance ok glass take a picture is preferred over ok glass start cam era Focusing on the action is a more natural way for user interaction and all of the main voice commands follow this guideline Decrease time from intent to action Voice commands should carry out the action as quickly as possible For instance ok glass listen to Led Zeppelin starts playing music by default and doesn t force users to select options before playing 40 Is colloquial and easy to say Voice commands are natural sounding are different enough from existing commands and are at least two words This lets us tune our voice recognition to work well with a wide variety of commands Is general enough to apply to multiple Glassware To avoid clutter on the ok glass voice and touch menus voice commands should work for multiple Glassware if necessary In these situations Glass au tomatically shows a menu with the names of the Glassware that can carry out the command For instance ok glass play a game spellista is preferred over ok glass play spellista 3 2 Patterns 3 2 1 Periodic notifications This pattern describes inserting static cards in the timeline without an invoca tion model Your service delivers notifications based on settings that the user defines For example delivering top news stories every hour or emails as they are received Notifications leverage Mirror API web services or Android background services on Glass to push notifications to the timeline 3 2 2 Ongoing task 41 Ongoing tasks are long running live cards that users leave and come back to frequently For example the Stopwatch sample that is shipped with the GDK starts the stopwatch with an ok glass command Users can view the stopwatch for some time navigate through the timeline to check other cards and come back to the stopwatch If the display sleeps the stopwatch is the default card that displays when the display wakes up as long as it had focus when the display went to sleep Users can stop the stopwatch by tapping on a Stop menu item Note All live cards must have a Stop menu item or similar to dismiss the card Another example of an ongoing task is Strava Strava inserts a live card that contains a timer for a current run or bike ride Tapping on the live card reveals menus to carry out a wide array of options A finish menu item removes the live card from the timeline when users are fin