Transcript 用户界面设计白皮书
© 2011 FLO interactive & Philips uFLO 浏览器解释 用户界面设计白皮书 © 2011 FLO interactive & Philips 请使用演示模式观看视频 播放视频时，请点击两次进入下一幻灯片 © 2011 FLO interactive & Philips 您如何将绝对定点控制引入您的产品，以获得“令人惊叹”的效果和舒适的应用？ 飞利浦 Media Interaction 和 FLO interactive 已经共同开发出此领域的专业技术。在 本白皮书中，我们提供一些关于基本原则的提示，并且说明一些最佳惯例概念。 FLO interactive 是一家小型设计公司和咨询公司，在设计和实现用于消费者及专业产品和服务的用户界面方面拥有 广泛的经验。 对于飞利浦，我们创建了一个动态的媒体浏览应用程序，可以有效地展示 uWand 技术的质量。 © 2011 FLO interactive & Philips 本报告中说明的原则 是基于 来自 该应用程序的示例。 外观 行为 控制 uWand 遥控触摸技术 © 2011 FLO interactive & Philips Philips Media Interaction 向市场提供创新和自然 的用户交互技术。该业务集团的第一项技术就 是 uWand。 uWand 是一种自然定点技术，为智能电视的导 航提供解决方案。当嵌入遥控器时，它使用户 可以进行流畅和准确的直接定点和 3D 手势控制。 它是点击和手势控制的固有直观体验 通过定点控制的服务获得更高的评价 © 2011 FLO interactive & Philips 焦点小组和实际现场用户测试已经证明，定点 是通过智能电视提供的导航交互服务的一种直 观方式。即使用于传统的上下左右控制界面， 即没有像 uFLO 浏览器已经优化的定点，也能达 到这种效果。 在交互电视的产品留置测试中，uWand 使用户 的满意度大幅提升。当引入 uWand 控制时， “良好”和“优异” 的服务评价由 32% 增长到 72%。 满意度的提升已反映在服务使用的增加上。 uWand 基于消费者行为 定点是最直观的人机交互方式；即使是小孩子也会 使用，是唯一不需要教授的交互模式。飞利浦开发 了这种直观的用户交互范例，使用户可以像使用触 摸屏一样，准确地在屏幕上指出目标。 通过模拟人的正常行为增强直观感 © 2011 FLO interactive & Philips 大量的时间花费在了解人的因素上； 飞利浦先进的算法提供了稳定的光标控制： •消除用户手抖 •调整到电视的定点角度和距离，获得持续的控制感 有鉴于此，uWand 技术可以基于直接定点，提供最佳用 户体验。 uWand 启用新的控制任务 © 2011 FLO interactive & Philips 通过旋转控制变数 易于达到屏 幕边缘 空间选择、网 格和翻页 利用手势玩游 戏 我们对绝对定点及其它输入技术进 行了测试。用户发现这些列举的控 制任务是自然产生的，非常适用于 uWand 技术。 当在用户界面中应用这些任务时， 需要考虑： 用户必须学习它们；视觉线索和反 旋转和平移， 缩放控制（z 轴） 馈至关重要 旋转滚动 结合操作可能会十分棘手，并且可 能会降低性能 一致性至关重要。在一个案例中应 用一种方法，人们期望它能用于其 它案例 Z 轴控制，选择不 同层 (2.5D) 选择移动目标、拖放目 标 即瞄即拍 基本原则 — 布局 基本原则是使用开放式的内容布局， 例如大单元格的网格视图。 © 2011 FLO interactive & Philips 使用内容填充屏幕，而不是文字或 用户界面图形 … 内容丰富多彩色， 而且增添了趣味性。 易于击中目标与屏幕显示项目数量 之间的最优设计 基本原则 — 动态悬停 (Rollover) 在主菜单中，我们运用动态 悬停，展 uWand … 示关于六个功能的更多信息。这种行 为使界面动感十足，并且可以激起用 户探索屏幕的兴趣。 © 2011 FLO interactive & Philips 特别是，悬停原则能够与 uWand 的绝 对定点技术完美配合，相比不能支持 该行为的触摸屏具有明显的优势。 基本原则 — 费兹定律 (Fitts’law) 费兹定律是一种广泛应用的模型，用于 预测用户界面中定点任务的速度。 图例显示一种中心布局，表明： •按钮离起始位置越远，形状就越大 •边缘和角落的目标尤其易于捕捉，并且 尺寸可以变小且不那么碍眼 © 2011 FLO interactive & Philips •径向安排用起来更快速，并且相比线性 安排（例如在弹出菜单中）出错率更低 我们使用费兹定律作为设计新颖布局和 边缘行为的基础。 T =a +b log (d/s+l) T=到目标的移动时间，a=0.230秒，b=0.166秒，d=到指示器和目标的距离，s=目标直径 © 2011 FLO interactive & Philips 基本原则 — 边缘菜单 内容浏览器是边缘菜单的典型示 例： •上边缘可以轻松触到，是隐藏菜 单或标签栏的理想地方 •菜单栏可以通过滚动优雅地扩展 （见下图） •左右边缘通常用于翻页或滚动。 有效面积可以比箭头本身更大 •避免将弹出元素放置于底部区域， 因为那是用户放下手臂时光标停 留的地方 易于达到屏幕边缘 基本原则 — 提供可选择控制 © 2011 FLO interactive & Philips 为迎合个人偏好，有 3 种方式可以在内 容浏览器中滚动： 1. 点击指向页面的箭头， 适合寻找屏幕提示的用 户 2. 拖动网格，适合喜欢直 接操作的用户 3. 轻弹手势，适合喜欢快 捷键的用户 只要用户偏好的方法一直可用，像这种 冗余设计水平就是好的。 基本原则 — 抬头式导航模式 © 2011 FLO interactive & Philips 我们保持清晰的空间模式，帮助用户理 解如何通过屏幕边缘导航，并使遥控任 务完全在抬头的方式下完成。 仅有一个键 就 能 触发导航菜单。每个 屏幕边缘都具有一致的功能。用户可以 看到什么是可用的，并且慢慢地使用就 变成自动行为。这些原则对于减少遥控 器上的按钮数量十分重要。 基本原则 — 直接操纵 在相片浏览器中，我们对相片运用最 丰富的直接操纵方法：拖动 (x/y)、点 击和缩放 (z)，以及点击并旋转（径 向）。 © 2011 FLO interactive & Philips 这是十分强大和自然的功能。用户与 内容互动，不需要像在传统的 4 向(上 左右)界面或鼠标控制一样，需要先启 动一种特定模式。 旋转，平移 （x 和 y 轴） 缩放控制 （z 轴） 拖放 标签云浏览器 (Tag Cloud Browser) 媒体浏览器拥有标签云的径向布局，围 绕文字输入栏而设。 根据费兹定律，这种布局效率较高，并 建议与缩放功能 结合提高视角深度。 © 2011 FLO interactive & Philips 请留意标签云的动画面。这强调了径向 布局，并向浏览器提供娱乐个性。 费兹定律 缩放控制 （z 轴） 节目指南 在节目指南中，结合了一些控制操作。 用户可以点击节目，加注标签。 拖动网格或旋转遥控器，可以滚动查看 时间表。 可以垂直“拆开”节目，并拖至录制按钮。 © 2011 FLO interactive & Philips 以上各项操作对用户而言，都非常有用。 诀窍是在没有干扰和降级的情况下，将 这些操作结合起来。 拖放 旋转滚动 总结 在本白皮书中，我们简单介绍了通过 uWand 技术如何把从用户观察得来的使用模式相连至主要控制 任务。这种流程在通用原则与理论的支持下，产生了新颖的用户界面解决方案。 FLO interactive 的目标在于帮助您构想 和实现为最终用户带来连贯流畅的体验 © 2011 FLO interactive & Philips 我们高度关注外观、行为和控制；并且 在较短周期内，提供快速的原型设计 视觉身份，导航功能， 图标，按钮，动画 外观 导航模式，动态行为， 部件和（动画)原型设 计 行为 设备操作，远程控 制，实际输入和局 部反馈。 控制 我们提供一系列服务，帮助您实现这一 流畅体验，请参见下页。我们可以完全 按照您的需求进行量身定制 FLO interactive 服务 业务创新 价值主张 © 2011 FLO interactive & Philips • 以用户为中心的创新 研讨会 • 新主张场景的半交互 模拟 前概念，原则 • 利益相关者要求分析 • 体验流动分析和最终用户 观察 • 用户界面机会和方向设定 研讨会 • 制作早期用户界面概念故 事板 • 早期用户反馈的快速概念 原型设计 设计／结构 概念，结构 实施 用户界面 规格， 指南 质量控制，资 产，测试 • 创建用户界面的视觉身 份 • 创建屏幕设计、动画 和主文件 • 创意方向 • 概念演示证明与测试， 支持结构选择 • 开发完整的导航结构 • 用户界面资产创建 • 开发和优化新的控制 部件 • 在平台上微调外观与 感觉 • 评估关键使用案例和质 量标准 (CTQ) • 功能性硬件／软件概念 模拟 • 部署研讨会 • 有关形状系数设计和 按键减少的咨询 • 支持验收测试与总结 © 2011 FLO interactive & Philips 外观 行为 控制 作为拥有长期行业经验的创意总监，FLO interactive 的三位合伙 人能够以独特的方式，交付涉及各种跨媒体环境的专业知识，融 入和优化先进的技术，例如 uWand。 期待与您合作！