为 Windows 8 和 iOS 平板电脑上的 Office Web Apps 引入触控编辑功能

原文发布于 2012 年 8 月 20 日(星期一)

Office Web Apps 触控编辑功能我们在几周前介绍了新的 Office Web Apps(该链接可能指向英文页面)。我们添加了新的功能,改善了应用程序的性能并继续提供在各种常用浏览器中对文档的随处访问。

 

 

 

今天,我们很高兴地向您介绍一种新的输入方法 - 触控 - 完善了支持触控的平板电脑和浏览器(包括 Windows 8 上的 IE 和 iOS 上的移动 Safari)上 Office Web Apps 中的查看和编辑功能。

在针对触控功能设计 Office Web Apps 时,我们打算实现以下目标:

  • 用户应该能够立即使用支持触控的 Office Web Apps
  • 用户不需要学习如何在新的用户界面中导航
  • 用户可以轻松在触控和鼠标/键盘体验之间来回切换
  • 必须能够在诸如平板电脑和触控监视器等触控设备上启用 Office Web Apps 的完整功能集(包括编辑工具)。

构建可触摸且可响应触摸输入的用户界面是一个很有趣的挑战。在本文中,我将介绍我们是如何实现此过程的。

开发触控功能的框架

我们开发了与所支持平台以及适用于 Microsoft Office 桌面应用程序、Windows 8 和 iOS 的触控交互指南一致的统一框架。我们还针对用户使用特定的触控设备时期望拥有的体验和触控项对其进行了平衡。

我们按照以下原则构建跨平台的用户体验:

  • 仅使用触控输入提供舒畅的端对端体验
    • 注重触控设备上的应用场景和体验
    • 确保用户可以自信地触摸用户界面
    • 构建简单且直观的触控项
    • 利用浏览器功能
  • 结合使用触控、鼠标和键盘确保卓越的端对端体验
    • 用户可以轻松在使用触控或鼠标和键盘之间来回切换,与应用程序进行交互
    • 应用程序将响应输入。

让我们分析下其中每项原则:

针对触控优化的应用场景和体验

我花了几天时间撰写本文并多次对其进行修改。和你们大多数人一样,我不总是一直坐在办公桌上,也没有带着笔记本电脑观看我孩子的击剑练习。我在工作用的台式机上开始撰写本文,然后将文档上传至 Skydrive 以便可以在任意位置访问,接下来便在我的平板电脑上继续撰写本文。

从用户调研了解到的使用和行为趋势和模式帮助我们锁定了两种应用场景:

1.        阅读和使用文档内容,以及查看演示文稿和电子表格既快速又流畅。

  • 阅读和使用信息是大多数人在平板电脑上喜欢进行的活动之一。
  • 用户浏览文档和演示文稿并对同事和好友共享的内容进行注释。
  • 有些人想要将所有有关购买汽车的调查研究汇集到他们的 OneNote Web 应用程序中,并在协商其汽车购买时能够在其平板电脑上浏览这些信息。

 2.        轻型编辑将在很大程度上满足用户添加、修改和修订文档的需求

  • 像我一样的母亲都希望在电子表格中快速报名参加孩子学校 PTSA 举办的百乐餐,并为其带去点心。

  • 学生希望能够快速编辑他们撰写的论文,并通过协作的方式对演示文稿进行润色。

自信地触摸

没有什么事情比错按用户界面上的控件更让人沮丧。当能够可靠地触摸用户界面上所需控件或部件时,对于应用程序的信心会增加。我们希望您在使用 Office Web Apps 时能拥有这份自信。

通过鼠标这一工具可以精确控制与用户界面的交互。结合使用物理键盘,让用户拥有信心能够精确放置插入点、进行选择、点击按钮和调用上下文菜单、下拉列表和其他 UI。

比较之下,人类手指的形状和大小各异。它们在放置插入点上略显笨拙,控制与用户界面的交互上则不那么精确。

我们的目标是让用户能够大胆地触摸用户界面并获得他们预期的结果,与使用鼠标时一样。

让触摸变得简单取决于目标的大小。许多用户界面元素(例如功能区控件和上下文菜单)都不位于 Windows 8 和 Microsoft Office 定义的“可触控”大小限制范围之内。

所有这些元素在新的 Office Web Apps 中都已变得易于触摸。我们在增加 UI 的实际大小与保留尽可能多的实际文档内容空间方面进行悉心的平衡。

 

 

注意更大且更简单的触控按钮以及相邻控件之间适宜的间距:

 

 Excel Web App 中的“主页”(Home) 选项卡:

PowerPoint Web App 中的“插入”(Insert) 选项卡:

OneNote Web App 中的“主页”(Home) 选项卡:

Word Web App 中的颜色选取器:

使用简单且直观的触控项

我们核心目标之一就是让用户能够使用简单且直观的触控项立即在平板电脑上开始使用 Office Web Apps,而无需学习和记忆复杂的手势。

实现此目标只需五种操作:

 

让我们看一下如何在 Office Web Apps 中使用这些操作:

滚动和浏览文档

当您需要快速浏览文档时,可以通过快速滚动动作轻扫屏幕。文档内容将以快速且流动加速的方式滚动,只需点按即可中断此操作。

我们使用了本地浏览器功能以实现 Word Web App 阅读和编辑视图中的加速滚动。

在 PowerPoint Web App 中,可以使用相同的轻扫操作变换幻灯片。  

放大和缩小:

可以通过展开和并拢两根手指来放大和缩小用户界面。

键入:

点按一下 Office Web Apps 的编辑视图可以放置一个插入点并显示键盘以开始键入。

 

Word Web App 中的插入点:

 

请注意,插入点看起来与使用鼠标和键盘时的不同。圆形“抓手”的插入点允许轻松抓住并拖曳以进行选择。

键入是编辑的基本元素,因此确保良好的体验是重要的受支持应用场景。

放置插入点

由于手指不是精确的输入工具,因此我们必须找出如何可靠地在用户打算输入的位置放置插入点。

大多数用户不是从单词的开始位置进行修改,就是从结尾位置进行修改。

因此,我们使用“书挡”方法放置插入点:

点按一下现有单词,计算最近的端点(单词的开始位置或单词的结尾位置)并将插入点放置在该处。再次点按同一单词,将插入点精确到触摸指定的正确位置。

选择

通过选择文本和对象可以操控、应用格式设置,或对它们执行其他操作。用户可以使用鼠标和键盘上的 Control 和 Shift 键高效执行这些操作,因为它们提供精确的目标锁定。

在触控环境中,插入点上的“抓手”可以充当句柄,可抓住该句柄拖曳并创建一个新的选区。还可以通过使用每个端点的抓手缩小和扩大选定的范围来修改现有选区。

在 Word Web App 中拖曳抓手以选择文本:

 

  拖曳选择维度以插入表格:

 

在上下文中应用操作:

上下文菜单提供快速且简单的方式在特定的上下文中应用操作。您可能已熟悉在 Office Web Apps 中通过鼠标使用上下文菜单。右键单击鼠标时会显示这些菜单。

Word Web App 编辑视图中使用鼠标的右键单击上下文菜单:

 

我们让您可以轻松访问上下文菜单,只需点按选区即可显示上下文菜单。点按上下文菜单的外部区域即可隐藏该菜单。

 

点按选区显示上下文菜单:

 

 

请注意上下文菜单上方便触摸的控件之间的适宜间距。

在插入点,可以通过简单地向下按住手指不动来显示上下文菜单:

 

在 Word Web App 阅读视图中,点按一下选择一行。点按一下选区显示上下文菜单。

 

Word Web App 查看器中的选区和上下文菜单:

 

结合使用触控、鼠标和键盘确保卓越的端对端体验

平板电脑可以配合触控、鼠标和键盘输入使用。

在 Windows 8 上,Office Web Apps 可以配合触控、鼠标和键盘,或者两者的组合使用。在 iOS 中,Office Web Apps 使用触控输入时工作状态最佳。

触控模式

在 Office Web Apps 中,用户界面可以分为:

  • 固定用户界面

此用户界面永远存在并显示在应用程序中。

示例:OneNote Web App 导航窗格,功能区

  • 上下文用户界面

此用户界面根据需要显示和隐藏。

示例:上下文菜单

当位于触控设备上时,Office Web Apps 默认以触控模式显示固定用户界面。可以通过切换“触控模式”按钮更改此模式以通过鼠标使用用户界面。

触控模式按钮显示在 Office Web Apps 左上方的快速访问工具栏中,允许您在触控和精确/鼠标模式之间切换。

触控模式按钮:(切换为打开)显示可触控的用户界面:

 

触控模式按钮的特写镜头:

 

上下文菜单、功能区弹出式菜单以及各种仅按需显示的菜单都以调用它们的输入方法(例如触控或鼠标)显示。

摘要:

建议您在 skydrive.com(该链接可能指向英文页面)上或在 Windows 8 触控设备和 iPad 的 iOS 上的 Office 365 Preview 中试用新的 Office Web Apps Preview。

我们想了解您的体验,所以建议您向我们提供反馈。应用程序右上角以及“文件”(File) 菜单中都提供“提供反馈”选项。

通过积极了解您喜欢和不喜欢的内容,我们将不断优化和改善相关体验。

 Renu Devi

项目经理,Office Web Apps

 

这是一篇本地化的博客文章。请访问 Bringing touch editing to Office Web Apps on Windows 8 and iOS tablets 以查看原文