分享

细品RibbonX(1):MS Office界面发展简史

 yuxinrong 2009-11-10
  • 引子
    功能区(Ribbon)是Microsoft Office的新一代用户界面,完全改变了Office界面风格。从推出以来就饱受争议,褒贬不一,我们估且不论其好坏,自待时间来评说,我们关注的是如何有效地使用功能区,如何掌控功能区,从而提升Office的使用效率。
    从现在开始,我将细细研究Ribbon及其开发,并形成一系列文章,与大家分享自已的学习成果。
    开始进入正题之前,让我们先花点时间来了解Office的界面发展史、熟悉新界面的核心——功能区(Ribbon)以及新界面中的一些组件,从而逐步进入Ribbon开发的世界。
  • 前言
    本文以Microsoft Office界面的历次发展和改进为线条,揭示了为什么在Office 2007中引入全新的用户界面的一些原因。本文在Jensen Harris的一系列文章的基础上编写,也参考了Office系统的帮助知识,大部分截图直接采用了原文中的截图,参考文章链接附后。
    Jensen Harris是掌管MS Office UI开发团队的程序设计负责人,在Microsoft工作已近八年。开始的5年从事Outlook邮件和PIM设计程序,之后领导团队重新设计了发布在Office 2003中的Outlook 2003用户界面。在完成了Office 2003后,来到Office 用户体验团队工作。
  • Office界面的源头
    Microsoft使用早期的Apple雏形开发了Word 1.0,它于1984年发布在最初的Mac中。Multiplan和Chart也在512K Mac下开发,最后它们于1985年合在一起作为Microsoft Excel 1.0发布:第一个在Macintosh上使用的轰动一时的零售程序。
    因此,早期的Microsoft Office程序根源于Mac,当然,也反映在用户界面上。作为Mac的第一个和最大的软件提供者,在最初的Macintosh上做的一些UI决定受Microsoft开发团队的要求影响。当然,Office图形化用户界面(特别是顶级菜单条)的最基本的轮廓有它在第一个Macintosh版本中的根源。
  • Office界面的演变
    下面首先以Word为例,介绍Office用户界面的演进过程。
    (1) Microsoft Word 1.0 for Windows于1989年发布,运行在Windows 386上。Word 1.0有一个应用程序级的菜单栏,这是从Mac的顶级菜单栏和显示在Microsoft DOS程序底部菜单发展形成的。同时,Word 1.0也包含了新的界面元素:工具栏(在Microsoft Excel中首先使用过)。在Word 1.0的界面中,看起来好像有两个工具栏,实际上仅仅上面的一栏称作工具栏。有趣的是,底部的按钮行称作“Ribbon”。Word 1.0的界面如下图1所示。
    RibbonX(1)图1 Word 1.0
    图1 Word 1.0界面
    (2) Word 2.0于1992年投放市场,此时,Word用户界面的基本结构已经固定下来了,就像当前的Word 2003一样。菜单栏为:文件、编辑、视图、插入、格式、工具、表格、窗口、帮助,下面是“常用”工具栏和“格式”工具栏。下图2所示为15年前设计的Word 2.0界面,一直沿用到今天。
    RibbonX(1)图2 Word 2.0
    图2 Word 2.0界面
    (3) Word 6.0运行在当时流行的Windows 3.1上,它的发布给Office市场带来了巨大的冲击,这也是Word与WordPerfect竞争的转折点。Word 6.0中增加了一些新的用户界面:右击上下文菜单(right-click context menu)、标签选项卡对话框(tabbed dialog box)、向导(wizard)、以及沿屏幕底部的工具条。Word 6.0的工具栏数量从原来的2个增加到了6个,因为添加了新功能,菜单也变得更加丰富。Word 6.0的界面如下图3所示。
    RibbonX(1)图3 Word 6.0
    图3 Word 6.0界面
    (4) Word 95是第一个32位Word应用程序版本,虽然它只是Word 6.0的过渡版本,但也引入了受大多数人欢迎的一个小的创新的功能:带有红色曲线的下划线的拼写检查。有些人将Word 95作为简单的、缩减的、互联网之前的最后一代文字处理器。
    RibbonX(1)图4 Word 95
    图4 Word 95界面
    (5) Office 97是一款轰动一时的产品,不仅对个人还是公司都带来了巨大的冲击,创下了软件销售的记录。Word 97标志着一个新的超丰富生产力应用程序时期的开始。
    Office 97引入了“命令栏”,一个完全定制的用户界面,实际上与菜单和工具栏相同。每个菜单和工具栏能够拖放到屏幕的任何地方,可以浮动或者停靠。但是可以认为,在Word 97中最重要的用户界面(UI)是引入了层级菜单。而在所有以前的Word版本中,菜单是一个单独的项目列表,容易浏览和导航。而Excel从1-2-3复杂的用户界面(UI)中吸取了线索,已经引入了层级菜单,最后Excel模式成功了,于是Word 97采取了多层次的层级菜单。Word 97的界面如下图5所示。
    RibbonX(1)图5 Word 97
    图5 Word 97界面
    Office 97也引入了“Office 助手”,它更像是为用户提供上下文的帮助而设置的。“Office助手”如图6所示。
    RibbonX(1)图6 ClippyGoodbye
    图6 Office助手
    (6) Office 2000引入了几个新的UI机制,即:
    “自适应菜单(Adaptive Menus)”或“拟人化菜单(Personalized Menus)”。在菜单中首先显示的是最常用的菜单项(“短”菜单),而当光标停留在菜单中一会儿后,会自动展开显示所有的菜单项(“长”菜单),或者单击下方向下的双向箭头,也会展开显示所有的菜单项。并且,当用户使用菜单中不在默认的“短”菜单中的功能时,下次会自动将该菜单项添加到“短”菜单中。用户可以在“自定义”选项框中选中“始终显示整个菜单”关闭该功能。“自适应菜单”见图14所示。
    “压缩的工具栏(rafted toolbars)”。两个或多个工具栏能够容纳在屏幕的同一行中,默认情况下,“常用”工具栏和“格式”工具栏“被压缩”在同一行中。由于在同一行中没有空间监控两个工具栏,因此最少使用的命令会在最后溢出的区域中,当用户使用该命令后又会出现在可见的工具栏空间中,就像“自适应菜单”一样。“压缩的工具栏”见图15所示。
    RibbonX(1)图7 Word 2000
    图7 Word 2000界面
    (7) 在Office XP和Office 2003中引入了任务窗格(Task Pane),在其中放置新的功能。
    RibbonX(1)图8 Word 2002
    图8 Office XP界面
    RibbonX(1)图9 Word 2003
    图9 Office 2003界面
  • 为什么要改进界面
    正如Jensen Harris先生所说,Office UI开发团队的目的就是帮助用户能够“无缝地”找到和使用Office中的功能。我想,这可能是界面不断改进的一个最主要的原因。
    (1) 功能越来越多,用途也越来越复杂
    在Word 2.0中,有不到100个命令,工具栏也是简单有效地复制了在菜单结构中能找到的功能,没有仅存在于工具栏中的任何其它功能,因此,当时的Word开发团队能够较容易地计划理想的菜单结构,并使它们组织得更有意义。在Word 2.0的界面中能直接且快速地浏览菜单,因为大多数菜单少于10项,而且没有子菜单项。
    而Word 6.0的工具栏数量从原来的2个增加到了6个。
    在Office 97中,丰富的功能使它变得更复杂。其工具栏的数量迅速达到了18个,在顶级菜单中的命令数几乎增加了双倍。再以Word为例,其顶级菜单已满,虽然一些一直增加的功能仅仅能在工具栏中执行,但是一些功能仍然需要添加到菜单项中,可是已没有空间给它们了,而将命令添加到多级菜单中将为新的命令提供更多的空间,这样也能提供更多的功能,再加上在Excel中的成功应用。因此,在Word 97中也引入了层级菜单。
    虽然功能越来越多,但用户的需求是无止境的。因此,Office的每个版本都使开发者集中精力开发新的功能,但这些新功能放在哪里呢?每次都很难决定这些新功能的位置。
    如果仍然按照以前的用户界面结构,则在Office 2007中将有比Office 2003多10倍的任务窗格,而在Word 2007中则将发布约100个任务窗格。如何排列和组织呢?因此,任务窗格是最后一次试图找到调整老样式UI的一种方法。
    下面的图10和图11演示了从Word 1.0到Word 2003中所包含的顶级菜单项、工具栏和任务窗格的数据对比。
    RibbonX(1)图10 MenuItemsInWord
    图10 Word各版本中的顶级菜单项数
    RibbonX(1)图11 ToolbarsAndTaskPanesInWord
    图11 Word 各版本中的工具栏和任务窗格数
    可以看出,在每个版本中功能数持续增加。下图采用饼图来演示Word在过去15年中的成长过程,可以很清楚地对比各版本Word所带有的功能。
    RibbonX(1)图12 FeaturesByVersion
    图12 Word在每个版本中所添加的功能所占的比例
    (2) 难以发现、查找和不方便使用一些命令
    前面提到过,在Word 97中引入了层级菜单,但这也带来了一些不利的方面,即增加了复杂性。层级菜单使得用户难以浏览命令,每次都必须记住已访问过哪层菜单,没有访问过哪层菜单。曾经一个可视化的简单的菜单结构,现在由于带有分支结构而变得更复杂。浏览功能已不像查看商品列表,更像在研究一个复杂的数据结构。这样,对命令不仅难以查找,也不方便使用。
    在Office 2000中的菜单栏和工具栏实质上都是充满的,这样在其中所添加的额外的项目只是整个结构中的很小的一部分,从一个版本到另一个版本时,用户根本不会注意到新添加的命令,也使得用户难以发现他们曾经要求的已添加到Office中的功能。总之,这种菜单结构使用户难以发现和使用新功能。
    Office XP引入的任务窗格试图通过在屏幕中增加一个新的矩形框并在其中放置新的功能。任务窗格完全是一个附加物,它不试图改变现有的菜单栏和工具栏结构,大多数传统的功能都在菜单和工具栏中,而在任务窗格中放置新的功能。PowerPoint开发团队在利用任务窗格方面做了大量的工作,一些传统的功能例如幻灯片切换也迁移到了任务窗格中。但增加的任务窗格并未改进用户界面,相反,用户又多了一个要查找功能的地方,给查找某个命令带来了不方便。
    RibbonX(1)图13 TaskPane-10-17-2005
    图13 任务窗格
    (3) 越来越给人一种“臃肿的”感觉
    Office 97是一个里程碑式的产品,增加了很多新的功能,但随之也给用户界面增加了复杂性,使人开始觉得Office是“雍肿的”。实际上,应用程序本身并不是“雍肿的”,至少,用户所需求的大量功能表明人们希望UI团队在这个空间做更多的事情。然而,菜单和工具栏开始显得与产品的丰富功能不太相称,这使用户界面开始感到臃肿。这样,在Office 2000中引入了新的UI机制来减少这种“臃肿的”感觉,这也标志着最终在Office 2007中重新设计新UI的开始。
    Office 2000中的“自适应菜单”试图通过首先显示最常用的菜单项使顶级菜单更短,当用户使用菜单时,经常使用的菜单项将创建在“短”菜单中,而很少使用的菜单项会创建在“长”菜单中,如下图14所示。然而,自适应菜单是不成功的,实际上给界面添加了复杂性。首先,默认的“短”菜单中包含的菜单项是建立在“每个人在Office中仅仅使用同样的一些功能”假设的基础上的,但事实是,用户使用一个很广范围内的功能,而不仅仅限于“短”菜单中的功能,因此,某人的理想的“短”菜单并不代表着其它人也常常使用这样的“短”菜单。其次,如果用户不能在默认的“短”菜单中找到所需的功能,则必须浏览整个菜单,而这个过程需要先浏览“短”菜单,再单击下方的双向箭头浏览“长”菜单,而在“长”菜单中的菜单项在“短”菜单项之间,因此需要重新浏览,这使得工作效率降低。再次,自动定制的功能(即上次使用的菜单项将会出现在默认的“短”菜单中)也使得菜单项更混乱,因为开始时某菜单项在某个位置,之后某个时候它又不在那里了。因此,即使在Office 2007中的一些应用程序(例如Publisher、Project和Visio)仍使用老的用户界面样式,但已关闭了默认的“自适应菜单”。
    RibbonX(1)图14 AdaptiveMenus-10-8-2005
    图14 自适应菜单
    Office 2000中“压缩的工具栏”(如图15所示)也是为了减少“臃肿的”感觉,但与“自适应菜单”一样,也给用户界面添加了复杂性。命令的顺序不再固定,浏览功能也变得低效。
    RibbonX(1)图15 RaftedToolbars-10-8-2005
    图15 压缩工具栏
    因此,大多数用户,特别是公司用户,关闭了这两项功能。
    Office XP和Office 2003中的任务窗格也有一些缺点。增加了任务窗格后,所有的菜单和工具栏仍然必须存在,这样,任务窗格占用了空间而没有取代任何现有的用户界面(UI)。并且,Office中现在有“短”菜单、“长”菜单、层级菜单、可视的工具栏、工具栏列表,还有任务窗格,这使得用户仍然要在多处查找命令,增加了产品的复杂性。任务窗格的出现,也使得每个设计团队都想将他们的功能作为一个任务窗格,毕竟任务窗格是一个全新且干净的可放置功能的矩形框。这虽然使得设计者方便了,但却给用户带来了不便。一些任务窗格类似带多页的向导,一些事实上是对话框,一些只是带有一串说明文本的命令。没有真正考虑如何使所有的任务窗格协调一致,如何在老的UI中发现相关联的功能,如何一次使用两个功能。实际上,每个单独的功能都需要它自已的矩形框。因此,为减少复杂性,在Office 2003中已将任务窗格作为一个可管理的用户界面(UI)。
    (4) Microsoft一直在努力改进,使产品适应发展的需求
    正如在前面所看到的,Office界面一直在改进,在向着更方便用户的方向改进。例如,在Office 2000中引入的“自适应菜单”和“压缩的工具栏”,原本是试图改变应用程序给人的“臃肿的”感觉,但适得其反,未获成功。就像整理房间一样,只是把一些自认为不常用的东西藏到了床底下,乍一看是好的,但实际上不是。事后分析,这可能与没预料到计算机硬件和软件的迅速发展有关。还有更重要的一点是,仅考虑到了一个非常“窄”的范围的用户的需求,并且Office也是“保守的”,这点可以从自1989年以来其顶级菜单结构从未发生过变化看出来。但这对一些用户来说也是好事,因为节省了他们需要重新培训所付出的代价。但是,无论怎样改变,如果用户界面的结构没有发生变化,所有的功能扩充都处在矛盾之中,换句话说,考虑到了这一方面,可能会造成另一方面的不便。这样,给人“臃肿的”感觉仍然会存在。而且每次添加一个新的UI机制时,它都会被塞满,因为我们仅仅是添加,而从没有重新组织和移除它们,所以每个版本的复杂性都在持续增加。
  • Office 2007用户界面设计基础和思路
    菜单和工具栏并不是不好,只是Office已经取得了长足的发展,使得菜单和工具栏不能很好的适应,因此,需要对新版本的Office界面进行重新设计,目标是为这些具备完整功能的高效的应用程序创建一个新标准的用户界面。而今天的Office 2007的用户界面在很大程度上受益于之前的版本,汲取了以前版本对用户界面所作改进的经验和教训。
    (1) Office 2007改进的思路
    有几种方式来改进菜单和工具栏不成比例的问题。一种是从产品中裁剪掉一半的功能,剩下的作为用户界面,这实际上要花大量的功夫来重新设计取消的另一半功能命令,但要取消哪一半命令呢?这很难取舍,因为无法想象哪些功能可能是一些人特别喜爱的。
    另一种方式是将产品分解,例如,Word将会分成8个独立的应用程序:文本编辑器、打印/页面预览程序、表格制作、图片编辑、画图程序、拼写/语法检查器、邮件合并引擎和信封/标签打印机,每一个应用程序都有一个易管理的菜单和工具栏结构。这样,当安装Office时,将会在开始菜单中放置65个图标。但这样做的话,将完全背离了用户的要求。因为用户经常希望UI开发团队能对应用程序做更多更好的整合。
    因此,Office UI开发团队决定不能够使Office 2007变得更笨重或更“支离破碎”,相反,要使应用程序成为一个整体,并重新创建用户界面以便于在未来十年里能够增加更丰富的功能。这也是为什么诸如上下文相关(contextualization)和图形目录(组,galleries)等概念对新的UI是如此重要的原因,它们将Office的功能分成更多可管理的单元但又维持着其整体性,从而使产品更强大。
    (2) 大量收集和分析数据,为界面设计提供依据和基础
    在用户安装Office 2003后不久,一个小气球会弹出来询问您是否想“帮助Office做得更好”,如果您单击它,将会登录到Microsoft Office用户体验改进程序(Microsoft Office Customer Experience Improvement Program)中,此后,您如何使用Office的一些数据信息(匿名的)就会间断地传送到Microsoft(注:不必担心,只是收集使用信息,如软件如何被使用、在什么硬件上使用等,您个人的数据信息不会被采集)。这些数据汇集到一个巨大的服务器中,供分析和作出决定。
    下面是所收集的数据类型:命令的使用频率、经常使用的键盘快捷键、是否定制了工具栏、……等等。简而言之,所收集的只是软件本身的使用,决不会涉及到用户私人的信息。
    在Office 2003发布后,共收集了大约13亿次会话。在前90天Word中超过3.52亿单击的命令栏。当然,这些数据只是一小部分,不可能保留收集到的所有数据。
    因此,这些数据也是帮助Office UI开发团队做出明智的决定,即为Office 12开发新的用户界面的最主要的原因之一。
    当然,数据只是辅助,但从中也可以了解到:用户经常使用哪些命令和不使用哪些命令、哪些命令在其它一些命令之前使用、哪些命令是使用键盘操作而很少使用鼠标、用户的屏幕多大、多少次使Excel最大化、哪些文档仅使用一次、哪些命令从未使用、东亚地区的用户经常使用哪些命令、……等等。
    (3) Word 2003中最常使用的5个命令
    经过大量的数据分析和调查,在Word 2003中最常用的5个命令是(依先后顺序列出):
    粘贴、保存、复制、撤销、加粗
    在Word 2003中,使用这5个命令的次数大约占所有使用的命令数的32%,仅“粘贴”就占11%,是“保存”所使用次数的2倍。
    然而,最常使用的10个命令的统计曲线是相当不平坦的。在使用率排第100位的命令(“接受变化”)和第400位的命令(“重设图片”)之间的命令的使用比例是不同的,但与排在第1位的命令和第11位的命令(“改变字体大小”)之间的命令的使用比例不同大致相同。这表明用户事实上使用Office的幅度的相当大的,这也给创建新的用户界面带来了挑战。
    (4) 使用数据来影响和组织Office 2007用户界面
    下面是使用这些数据帮助设计Office 2007用户界面的一个例子。最初,Office UI开发团队并没有认真考虑将剪切/复制/粘贴按钮放在“带形功能区(Ribbon)”中,每个人都自认为用户最常的就是使用快捷键Ctrl+X/C/V来做这些操作,鼠标用户则使用单击右键后弹出的上下文菜单项来执行这些操作。直到Office UI开发团队分析数据后才知道,用户虽然使用Ctrl+V和在上下文菜单中使用“粘贴”菜单项,但是使用工具栏中的“粘贴”按钮更多。因此,一旦认识到了“粘贴”按钮的重要性后,它就被放置在了界面中第一个选项卡左侧的第一个大按钮中。这也是Office 2007界面设计的一个特点,即把最常用的命令放在最显眼的位置。
    如果将Office应用程序所使用的命令绘制在一张图表中,将会得到一条曲线,一些命令的使用将占得多数,而慢慢地每个命令的使用数将逐渐变缓。通过曲线可得知,用户经常使用哪些命令,也表现出了大多数用户使用产品的总的格局和平均“深度”。而在一些方面,Office 2003用户界面已经很好的实现了。因此,现在所需要做的是分析数据并理解它们,使用它们配合设计以达到要实现的更好的目的。
    一是要寻找值得保留但却很少使用的功能,帮助用户找到它们不知道放在哪里的那些有用的功能。这些功能一般是Office已有的,但用户却由于不知道而没有使用,而是在别的地方寻求帮助或者自定义。因此,如果用户能发现这些功能,他们可能就会喜欢使用它们。例如,在Word中可以在文档后设置水印图案,很多人不清楚该功能而询问如何实现,因此在Word 2007中将其放在了突出的位置,这使得很多用户将该功能视为“很好的新功能”。当然也有一些例外,如低质量或设计差的功能不管在UI中能够如何容易发现它们,都将是不成功的,因此,重新增强一些旧功能而使得它们更引人注目;又如,用户很少会使用有着不合适名称的功能,因此,在新UI中变换了一些功能的名称,让更多的用户了解和使用它(但感到矛盾的是,有些用户已经在使用这些功能,若更换名称,会给他们带来不变)。
    二是寻找不在显眼的界面中却频繁使用的功能。例如,Word中的“上标”,在Word 2003中,虽然它必须通过自定义手动添加到工具栏中,但它的单击量占“格式”工具条的30%。新的用户界面不仅突出了用户喜欢的功能,而且让更多的用户能知道并使用它。
  • 现在的Office 2007界面
    RibbonX(1)图16 Word 2007
    图16 Office 2007界面
    (1) 简洁明了的设计。程序更简单易用,命令更容易找到。
    各个按钮分布在窗口顶部且以分组形式显示,所需命令就是呈现在用户眼前,也不会让包含命令的隐藏工具栏隐藏在菜单或单独的窗格中,而是提供了一个控制中心,将各种要素集中在一起,使得它们极易被看到。按钮总是显示在相应位置,也不会消失。
    (2) 将命令集形式提供的命令精简为最常用的命令。用户最喜欢使用且反复使用的命令被放在了最显眼的位置。
    (3) 在“功能区(Ribbon)”中划分核心任务,每个任务由一个选项卡表示。
    (4) 许多命令按功能排列形成各个命令集(即组),将完成某类任务的所有可能需要的命令集中在一起。
    (5) 许多命令仅在需要时才显示。即某些命令仅在执行相应操作时才会出现,而不是始终显示每个命令。
    (6) 可以自定义“快速访问工具栏(QAT)”,使它像以前版本中的工具栏一样。
    (7) 可以方便的在窗口中切换视图。
    (8) “功能区”会自动调整以适应屏幕的大小。
  • 结语
    从上面所述可以看出,Office的每一个版本都是尽量融合用户的需求,朝用户满意的方向改进,虽然说有时候可能适得其反。此外,随着Office的发展,必须有新的用户界面相适应,而重新设计的Office 2007用户界面,可以说是一个质的飞跃和创新。
    Office软件本身就是一门艺术,是发展和智慧的结晶。

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多