googleglass界面设计指南[mux团队翻译].docVIP

Design for Glass Google Glass界面设计指南 译本 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 别忙着开发，先设计 在开发之前，你需要先了解Glass的设计原则和模式，并遵循这些模式以及视觉 风格进行开发，如果运用得当的话，能给用户带来一致的用户体验。 习设计原则 些设计原则阐明了Glass诸多优秀体验的核心，所以请 它们用在设计和开发当中。了解更多 择一个设计模式 们提炼出一些在Glass上非常行之有效的设计模式，利 它们能创造出具有一致性的用户体验。了解更多 用Glass的视觉风格和模板 循我们提供的设计指南和模板能够帮助你正确地设计和 发Google Glass应用。了解更多 4 1 用户界面 本章将介绍Glass的主要UI组件、它们的使用场景，以及用户如何与它们进行交 互操作。 1.1 时间轴概念是 Glass 用户体验的主体 Google Glass的主要用户界面是由分辨率为640x360px的卡片组成的时间轴。 它提供了诸多功能，如呈现动态和静态卡片的标准模式，系统级语音指令以及 Glass应用的通用启动方式。 用户通过滚动时间轴切换不同区域显示历史、当前和未来的卡片。新近产生的卡 片会在最接近主页卡片的地方出现，而主页卡片是用户唤醒Glass时默认展现的 第一界面。 设置 ← 当前/未来 主页 历史 → 时间轴除用以管理卡片之外，还能处理用户输入，例如通过触控区定位时间轴， 以及通过语音启动Glass应用等。大多数卡片有允许用户进行操作的菜单项， 如，回复文字消息或分享照片。 1.2 时间轴按照区域进行组织 时间轴中的卡片根据其临时程度和类型出现在以下几个区域： 5 主页区 默认的主页卡片是 Glass时钟，处于时 间轴的中间位置。用户唤醒Glass的多 数时候都展现该界面。 它为用户启动其他的Glass应用提供了 系统级的语音和触控命令。Glass时钟 卡片为整个Glass系统提供了入口，因 此它将一直处于时间轴的主页位置 。 历史区 Glass 时钟的右侧是历史区，这里仅显示静态卡片。因为动态卡片总被认为是当 前正在进行的，所以不会出现在这里。 静态卡片在历史区中自然“衰减”。当新卡片进入历史区时，处在离时钟最近的 位置。越早的卡片用户越少使用，因此会被Glass系统依次向右推，Glass 会将 用户7天内没使用过的卡片，或者超出200张上限部分的卡片自动清除掉。 当前和未来区 Glass时钟的左侧是当前和未来的区域，这里会展现静态、动态两种卡片。 动态卡片展示和用户当前时刻有关的信息，并且此卡片一直处于此区域。如果焦 点在动态卡片上时系统进入休眠，当Glass再次被唤醒时这张动态卡片将会作为 默认卡片显示。 6 拥有未来时间戳或被固定位置的静态卡片也会显示在当前和未来区。基于地理位 置、状态、或者其他类型用户信息的Google Now卡片就是一个被固定位置的例 子 。 Strava Cycling显示了一张能够不断实时更新自行车运 Google Now天气卡片自动展示相关信息。 动的时间、距离、速度等数据的动态卡片。 设置区 时间轴最左侧是Glass系统级设置，在 这里你能够设置诸如音量和Wi-Fi网络 等系统选项。 1.3 动态卡片包含丰富、实时的内容 动态卡片能够通过频繁更新自定义图像来给用户展示实时信息。这项功能非常适 合那些需要基于用户数据不断更新的用户界面。 动态卡片还能够访问Glass的底层硬件传感器数据，比如加速计和GPS，这些都 是静态卡片所不能实现的新形式交互和功能。 7 指南针应用使用了传感器，并且通过渲染自定义图像，创造了独特的用户体验。 [图文译] 肖克利半导体实验室旧址 谷歌总部 另外，动态卡片在时间轴内运行时，用户能够左右滑动查看其他卡片并与之进行 交互。这允许用户执行多