用户体验改善计划: Office Ribbon(R) 用户界面简介

最新推荐文章于 2025-12-16 16:40:57 发布

原创最新推荐文章于 2025-12-16 16:40:57 发布 · 4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#office #工具 #windows #工作 #delphi #化工

文章介绍了 Microsoft Office 2007 引入的 Ribbon 用户界面，解决了传统菜单和工具栏占用过多屏幕空间的问题，通过选项卡式的布局提高工作效率。

用户体验改善计划: Office Ribbon(R) 用户界面简介

周融，2007 年 3 月

自从 Windows 开创经典图形用户界面（GUI）布局后，菜单和工具栏一度成为经典界面布局的代名词。而随着用户界面艺术和软件功能的进步，过多的菜单项和长长的工具栏已经不能满足他们的需要，他们需要一种更能够扩大工作区空间的用户界面。Ribbon 为实现这一切提供了解决方案。本文介绍 2007 Microsoft Office System 引入的 Office Ribbon 界面，并介绍关于它的一些技术知识和资源。

在本文中：
1、Office(R) Ribbon(R) 用户界面的起源
2、Ribbon 的构造和布局
3、实现 Ribbon
4、结论

Office Ribbon 用户界面的起源

用户在使用 Microsoft Office 软件时普遍感到一个棘手的问题就是可用工作区太小。整个 1280 * 1024 的屏幕分辨率被大量的工具栏和侧边拦占据，留给用户可使用的工作区非常小。从 Word 95 到 Word 2003，可用工作区越来越小，由 75% 左右下降到 66.1%。这些工具栏不仅占用大量屏幕资源，还阻碍用户视线，让用户寻找相应的功能更加困难，用户不得不利用“自定义工具栏”的方式隐藏大量的功能按钮，将自己习惯的按钮放置于其上。

2007 Microsoft Office 在引入大量新功能的同时也考虑到这个问题，由 Office 团队一位设计师设计的 Ribbon 用户界面取代了 Office 2003 的菜单和工具栏。Ribbon 是由选项卡形式的多组功能区组成，还有快速访问工具栏和应用程序菜单作为辅助组成部分，一个 2007 Microsoft Office Word 的主用户界面如图所示。

Ribbon 界面将动态增加的工具栏按钮固定在屏幕顶部的一部分区域上，保持了用户可用区域最大化，并且在新增加功能（如基于上下文的设计功能工具栏、图片工具栏等）时，不增加这个区域（而是增加选项卡），这种用户界面具备更多的灵活性，它的主要
有点在于：
1、固定的区域，是的用户不回感到可用工作区域在减少。
2、方便根据上下文提供对应的功能组。
3、包含快速访问工具，用户可以将常用功能放置于上面，类似于 Windows 快速启动。
4、应用程序菜单，集中式放置针对应用程序的主要功能（一般以经典文件菜单作为蓝本），类似于 Windows “开始”菜单。
5、功能分组，在每一个选项卡中的功能都被分组，更加有利于查找用户所需要的功能。

为更加详细的了解 Ribbon，我们分析一下它的布局和结构。

Ribbon 的风格和布局

按照图 1 的 Ribbon 界面，我们为它定义各个部件的布局和名称。

1、应用程序菜单（Application Menu）
这个菜单是类似于 Windows 开始菜单的经典“文件”菜单的改进。在这个菜单中提供“新建”、“打开”、“保存”、“打印”、“选项”和“退出”等主要功能，并显示最近使用的文件列表。这个菜单设计使得应用程序的主要常规功能更加直观和易于查找
2、快速访问工具栏（Quick Access Toolbar）
该工具栏位于应用程序窗口的顶部，在窗体标题的左边，这个工具栏放置用户在使用应用程序的过程中最常用的功能，如保存、打印、属性等，这个区域可以被用户自定义，并可改变其显示位置。

3、功能区（Ribbon）
功能区是 Ribbon 的主区域，包含了应用程序主要功能。在 Ribbon 区域的上方是功能区分组，以标签的形式将功能进行了分组（如开始、插入、页面等）。在每一个分组下面又对具体的功能进行了更详细的分组（如插入中的文本和格式、图片和表格等），每一个功能组对应一些具体的功能按钮（如开始中的格式分组，就包含文本字体、颜色、段落等设置按钮），有的分组的下方还有一个选项按钮，可以综合设置该功能分组内的部分功能。

另外，当用户执行某些上下文敏感（Context-Sensitive）操作，如选择一个图片时，Ribbon 区域会自动根据此上下文自动增加对应于该上下文的功能区。如用户单击图片后，图片设计和图片格式功能区就会出现。

Ribbon 包括如下形式的功能按钮。
大按钮：常用的，以 32 * 32 大图标显示的按钮。
小按钮：次要常用的，以 16 * 16 小图标显示的按钮。
带菜单的按钮：单击按钮组打开一组菜单。
带自定义区域的按钮：单击按钮打开一个自定义下拉框，如颜色按钮。

初次之外，Ribbon 还有如下特性。
1、用户可打开/关闭 Ribbon 功能区。
2、功能区的工具提示信息包含更多的内容(SuperTips)。

伴随着 Ribbon 的发展，出现了一些新的 UI 自动化技术，如：
1、可自定义 Ribbon UI 的 XML 配置文本。
2、Live Preview(TM) 技术，如选择字体、字号的时候，Live Preview 自动对将要设置的文本进行预览。
3、主题技术，Ribbon 可以根据用户习惯自定义显示主题。

实现 Ribbon

Ribbon UI 已经被许多第三方开发商实现，如图，这张图使用 DevExpress Ribbon UI 实现的 LeafPSP 3.0 用户界面。从这个用户界面看到，Ribbon 确实带给用户以耳目一新的感觉和最大化工作区体验。

以下是实现 Ribbon 的一些第三方组件。
组件        平台      开发商
DevExpress(R) DXprience Suite 2007 Vol. 1 v7.1   Microsoft .NET 2.0, 3.0, 3.5  DevExpress Inc. http://www.devexpress.com
TMS Components Suite v4.1    Delphi 5, 6, 7, 8, 2005, 2006, 2007  TMS Software http://www.tmssoftware.com
Codejeck Ribbon Controls      Microsoft .NET 2.0, ActiveX, MFC  Codejeck Inc. http://www.codejeck.com

这些组件很容易被获取，我们推荐使用 DevExpress 的组件，它包含文档、SDK 和大量示例。

结论

Ribbon 用户界面为现代功能密集型应用程序提供了 UI 参考，人们在使用了近 15 年的菜单和工具栏后，首次被 Ribbon 界面冲击。今后，Ribbon 将应用到更多产品的设计和开发工作中，开发人员和 IT 专业人士都应当了解并尝试使用这个全新的用户界面。