前言

在我最初接触 B 端产品设计时，我第一个想法就是要去看看世界上经典、优秀的 B 端产品它们是如何被设计出来的。初期，我关注的点很简单：

• 它们是如何处理复杂产品的高交互密度设计难题，是否存在好的「设计模式」值得我学习？

  高交互密度：指单位界面空间里，拥有可交互元素的数量很多，如文档编辑产品、专业绘图软件 PS 产品等。

• 它们是如何处理复杂产品的高信息密度设计难题，是否存在好的「认知设计理论」值得我学习？

  高信息密度：指单位界面空间里，拥有的信息类型和信息量有很多，如代码编辑器产品、可视化报表产品等。

• 复杂产品设计师是如何做到快速深入业务，做到设计驱动，达到业务与专业双成长，是否存在好的「设计工作模式」、「设计思维」值得我学习？

  业务专业双成长：双成长指得就是如何在消耗大量时间深入业务的同时，在专业深度上也能保持精进。

在这样的关注点上，我陆续沉淀了一些很好的设计案例。今天分享的是微软 Office 办公系列产品的设计案例，它的精髓在于 Ribbon（功能区）设计模式。Ribbon 很好的解决了文档类、工具类复杂产品的高交互密度设计难题。

为何要了解 Office 设计

Ribbon 厉害之处在哪？一个事实是，Microsoft Word 通过 Ribbon 取代了传统的菜单栏（menu bar）和工具栏（toolbar）相结合的设计模式，实现了让 2000 多个交互操作有序收纳在一小块界面空间里，并通过测试验证了其卓越的使用效率和清晰度。

Ribbon 设计模式是什么呢？Ribbon 是一种直接、干脆、以结果为导向的现代设计方式。具象来说，是一块固定在软件上部的功能区。对于 Ribbon，我们并不陌生，甚至可以说再熟悉不过。我们常用的 Office 软件，都采用了 Ribbon 设计模式（模式介绍详见下文「Ribbon 设计模式」一节）。

图：Word 2019，一个典型的采取 Ribbon 设计模式的用户界面

尽管 Ribbon 在 2006 年跟随 Office 2007 版一起发布出来，并在微软官网有一大块浓墨重彩的介绍，但在这十几年期间，国内几乎没有任何相关的设计专业文章提及过 Office 产品设计、Ribbon 设计模式，更不论系统性的研究过、分享过。

随着我对 Ribbon 的了解愈加深入，我愈加感受到它的巨大价值，并不时称叹其细节设计的精妙，故觉有必要将我的收获分享给大家，希望能给复杂 B 端产品设计师带来启发，甚至带来面对工具类、文档编辑类产品设计时能「开箱即用」的设计方法。

预习：用户界面发展史

在正式开始 Office 设计考古前，我想先简单介绍用户界面发展史。

在 「Office 设计 40 年」一节中，我会介绍到在 Office 在历史上曾遇到过一个巨大的设计难题。私以为这个难题是由 WIMP 界面范式本身的局限性带来的根本性问题，不论 Office，还是其它大多数工具型、文档型产品在发展过程中也必然会遇到这样的难题。因此，有必要先简单跟大家分享一下 WIMP 界面范式的概念。

人们追求用户界面的革新，本质上是想要拓宽人机交互的带宽，更大程度解放人的生产力。在整个人机交互的发展过程中，出现了三种广泛使用的用户界面类型，从最早的批处理界面，到后来的命令行界面，再到当下最为流行的图形用户界面。基于 WIMP (Window, Icon, Menu, Point Device) 界面范式而生的图形用户界面，最早诞生于 1970 年代的施乐公司，而后在 1980 年代相继被苹果 Macintosh 电脑和微软 windows 电脑借鉴并发扬光大。

图：用户界面的过去、现在及（我认为的）可能的未来

基于桌面隐喻的 WIMP 界面由于其语法极小化，对象可视化和快速语义反馈等优点，持续统治着界面设计领域 40 年有余。如下图案例，我们如今仍在使用的 WIMP 界面，与最早的样子并无本质差异。

图：1981 年施乐之星电脑 (Xerox Star)，首个拥有图形化界面的电脑

总体而言，WIMP 界面这些优点确实非常适用于文档处理等相关的应用系统，这也正是它依旧统治界面设计领域的原因所在。微软 Office 相关软件，30 年来的设计都依然是在 WIMP 这个范式里进行迭代。

但 WIMP 界面也有其局限性，这种局限性随着数字化社会的进程，随着软件复杂度的提升将愈加明显：

• 第一，WIMP 范式下的交互组件，如按钮、菜单、窗口等，在单独使用的时候，确实很好用，但倘若把它们按系统需求结合起来，却会使得界面和交互的复杂性迅速增长，这样导致的结果就是用户的认知负担成倍上升。
• 第二，WIMP 界面由于信息维度的局限，对多维信息无法进行自然的表达。一旦涉及到多维场景的设计，只能用多窗口、多菜单、多图标的形式来解决多维信息的呈现。另一方面，在三维交互任务里使用二维的 WIMP 界面显然是不够自然的。
• 第三，正如前两点而言，当交互任务过多或者是多维任务时，大批量应用 WIMP 交互组件导致的结果就是用户将时间全部花费在关注该如何对界面进行操作上，而不是聚焦于任务本身。
• 第四，WIMP 界面通常采用的是鼠标加键盘的输入组合，一方面，这种带有学习成本的不自然的输入方式并非适用于所有用户，如残障人士、小孩、老年人、文盲等；另一方面，这种输入方式仅利用了人的眼睛（看）和手指（敲击），对于拥有多感官的人类而言，效率无疑是低下的。

图：老版 Word 充分发挥了 WIMP 范式的优点，结果却为用户带来可怕的体验

上述局限性正是我认为给 2006年 Office 新版设计带来困境的根本性原因。Ribbon 设计模式的诞生，正是微软在这种困境下反复实验得到的一个临时有效的解决方案。

了解完这个背景，接下来进入本期设计考古的主题。

Office 设计 40 年

从 1980 年左右至今，微软 Office 系列办公软件诞生已约 40 年。

Office 办公套件包括 Word、Excel、Powerpoint、Onenote、Outlook、Access 等，虽然软件类型各不相同，诞生时间也有早晚，但微软设计保持了极其优秀的跨软件一致性。在大部分版本里，不同软件几乎完全采取了相同的设计模式和视觉风格。

Word 文档编辑产品是 Office 套件里最早诞生的软件，也是目前为止应用最广、最被用户熟知的软件。接下来的分享里，会以 Word 为具体描述对象。了解 Word 设计思想与历史等同于了解全部 Office 产品设计的思想与历史。

我个人把 Word 设计史分为三个时代：

• 蛮荒时代（1981-1985）：从字符界面转向施乐公司发明的图形用户界面，初期 Word 尚处于跟随和探索阶段，并未形成自有的设计模式和视觉风格。
• 古典时代（1989-2003）：从跟随和探索跨入到形成自有规范和标准的古典时代，此时的 Word 设计确立了以菜单栏（Menu）、工具栏（Toolbar）、任务面板（Task Panel）相结合的设计模式，呆板但适应时代。
• 摩登现代（2007-2019）：Word 发展出更适应现代软件复杂性的 Ribbon 设计模式，并开辟了领先于时代的扁平化设计视觉风格，不仅实现美且易用，更保障了跨软件、跨终端的体验一致性，为未来设计。

蛮荒时代（1981-1985）

在吸收图形化设计的思想之前，最早的 Word 软件还是一个字符界面。

为 MS-DOS（字符界面操作系统）计算机开发的 Word 第一代于 1983 年底发行。Word for DOS 是为 IBM PC 研发的第一个文本编辑器。用户使用时，屏幕上直接显示的是“黑体”、“斜体”等字体标识符，而不是“所见即所得”。同时，和大多数 DOS 软件一样，程序为执行特定功能，需要用户去记忆各种不同的复杂命令组（如保存文件需要依次执行 Escape-T-S）。

图：Word for DOS，1983 年

在「用户界面发展史」一节中提到，图形用户界面发明于 PARC（施乐帕罗奥多研究中心），微软是借鉴者和发扬者之一。再往后版本的 Word 吸收了很多施乐公司的图形用户界面文本编辑器 Bravo 的概念和想法，Bravo 创始人 Charles Simonyi 早在 1981 年离开 PARC 后就加入了微软。

此后 Word 设计焕然一新。1985 年 Word 3.01 for Macintosh 诞生了，这是第一版真正采用图形界面设计的“所见即所得”文档编辑器。

图：Word version 1.05 for Macintosh

蛮荒时代的 Word 设计从字符界面跨越到图形用户界面，并首先在苹果的 Macintosh 电脑上得到实践。但此时的 Word 设计其实还看不出拥有体系化的设计思路和独有的设计风格（也许当时的思路还只是跟随苹果电脑的设计风格吧）。

而后，Windows 1.01 于 1985 年发布，Word 有了本家土壤，在这之后，Word 快速生根发芽，并开始形成属于自己的设计模式和设计语言，从蛮荒时代的跟随和探索跨入到形成自有规范和标准的古典时代。

古典时代（1989-2003）

第一个 Windows 版本的 Word 发售于1989年，价格是 500 美元。

同此前 Word 设计相比，Word for Windows 1.0 的诞生，基本确立了以菜单栏（Menu）、工具栏（Toolbar）、任务面板（Task Panel）相结合的设计模式。

界面中默认会呈现常用的几条工具栏，位置处于界面的顶部或底部。至于其它更多针对不同操作对象和任务类型的工具栏，用户需要通过菜单栏等地方去唤起。这些工具栏，用户拥有完全的控制权，可以将其放置在界面中的任意位置。但类似这种未经审视的交互自由度给用户带来的往往是混乱，而非和谐。

图：Microsoft Word 97（1996）

这种简单的将菜单栏（Menu）、工具栏（Toolbar）、任务面板（Task Panel）线性结合的图形界面设计模式，一直沿用到 Word 2003，历时 14 年和 10 个设计版本。在这些设计中，大型变化屈指可数，如：

• Word 97 版开始出现「回形针」帮助助手，解决帮助引导问题。
• Word 2002 版开始出现快速开始任务面板，解决易学性问题。
• Word 2003 版在拟物视觉风格上更进一步，跟随显示屏能力的发展全面彩色化。

图：1989 年到 2003 年期间 Word 经历了 10 个版本的迭代

但就设计模式而言，毫无变化。框架层的设计模式决定了产品是否能长远的健康发展，换句话说，当产品的功能越来越复杂，面临的任务场景越来越复杂的时候，产品是否还能拥有良好的可用性、易用性、易学性。

在设计艺术学领域，古典主义意味着崇尚理性，克制个人情欲，有严格的艺术规范和标准。1989 年至 2003 年期间的 Word 设计，形成了自有设计模式，这种模式在局部有着严谨定义和标准，但在全局层面却考虑不周，对于菜单栏、工具栏及任务面板等要素间的组合关系没有进行全局思考，无法适应未来。

因此，这期间我称之为 Office 古典设计时代，有很强的时代局限性。

设计难题

2003 年， Word 2003 版发布，微软设计腾出手来，开始着手下一代 Word 设计。当时 Word 承载的功能命令数已多达 2000 个，这个数字背后隐藏的问题是：

• 产品不断添加新功能，但很少有用户发现并使用这些功能。
• 随着功能的增长，软件变得越来越复杂，体验一年不如一年。
• 用户期待有更好的交互方式出现，帮助他们高效完成任务。

因此，如何让用户发现这些功能、学会使用、高效办公成为当时不得不解的设计难题，而这个难题正是由旧有设计模式带来的，旧有模式下的设计现状是：

• 菜单栏中的菜单项从最初的不到 50 项，发展到 250 多项。
• 工具栏从最初的 2 条，发展到 30 多条。
• 任务面板从最初的 0 个，发展到近 20 个。

图：随着 word 的发展，界面中的菜单栏、工具栏及任务面板的数量爆发式增长

爆发式的功能发展，给界面带来了极大负担，超过了旧有设计模式的能力范围，导致体验每况愈下。在使用过程中，用户需依据当前任务不断唤起、切换、放置不同的菜单项、工具栏、任务面板，使得界面复杂度伴随着任务深入而愈加复杂。对当时用户来说，Word 的最大使用感受是：

“I’m sure there’s a way to do this, but I can’t figure out how.” “Office is so powerful, I would be better at my job if I knew how to use it more.” “There must be a way to do this…” “I don’t even know where to start looking.”

图：让人望而生畏 Word 2003 界面

为解决这些问题，微软设计曾在 1996 年引入了帮助助手，正是我们所熟知的“回形针”角色，但这种“曲线救国”的效果有限，完全无法解决根本性问题（事实上，Word 2007 版就把帮助助手砍掉了）。

图：旧有设计模式下，跟工业领域机舱控制面板看起来一样复杂的 Word 界面

在这样的困扰下，微软投入 3 年时间来了一次设计大变革，适应时代的 Ribbon 设计模式应运而生。

Ribbon 设计模式诞生

Ribbon（功能区）是一种直接、干脆，以结果为导向现代设计方式。具象理解，它就是一块固定在软件上部的功能区。

模式简介

Ribbon 中的选项卡（tab）由群组（group）构成，一组密切相关的操作命令构成一个带有标签描述的群组。除了选项卡和群组之外，ribbon 还有：

• 应用主按钮（Application button）。它提供了一个命令菜单，其中包含对文档或工作区执行的某些操作，例如与打印等与文件相关的命令。
• 快捷工具栏（Quick Access Toolbar）。是一个小型的可被用户自定义的工具栏，提供了最常用的一些命令。
• 核心选项卡（Core tabs）。常驻在界面中的选项卡。
• 情景式选项卡（Contexual tabs）。非常驻在界面中的选项卡，只有在特定对象被选中的时候才会出现。
• 选项卡组（tab set）。由多个情景式选项卡的组成，因为某些对象包含多种类型（例如，表格中包含有图片的表头，这个对象包含三种类型），所以会出现多个情景式选项卡的情况，此时需要用选项卡组进行合并。
• 模态选项卡（Modal tabs）。是核心选项卡的一种临时形态，例如打印预览。
• 陈列室（Galleries）。以图形化方式显示的命令或选项列表。一个结果导向的陈列室能清晰告诉用户使用该命令后会发生的效果。Ribbon 陈列室显示在 ribbon 区域之中，而不是弹出窗口中。
• 增强提示框（Enhanced tooltips）。用简洁语言解释了相关命令的含义并给出快捷键，有时候也包含有图形化说明和帮助链接。增强提示框能减少用户关于命令操作相关的帮助需求。
• 弹窗触发器（Dialog box launchers）。一个位于某些群组（groups）底部的操作按钮，能将该组的内容用弹窗的形式承载。

图：一个 Ribbon 的构成

有别于先前通过菜单栏、工具栏、任务面板以多种方式、多种位置呈现操作，Ribbon 将操作统一组织在一系列位于窗口顶部的选项卡（tab）中。同时，通过层层组织操作、结果导向的理念、随用随取的巧妙手法，让高交互密度的复杂产品的设计能够得心应手，用户使用起来依然能够轻巧方便。

具体来说，Ribbon 有以下优势：

• 提供足够显示海量命令的空间。
• 丰富有序的布局帮助用户更快的找到重要的、常用的功能，提升可发现性和易学性。
• 结果导向、实时效果预览的富按钮设计，让用户更易理解操作、直达操作目标，提升使用效率。
• 用户在探索产品功能的过程中，既无需反复试错，也无需寻求帮助，在体验过程中拥有更强的控制感。
• 适合触屏操作，流式布局保障了跨终端的体验一致性。
• 广泛的应用型和强大的兼容性，保障了跨软件设计的一致性。

对于 Ribbon 设计模式的具体介绍，以及其与上一代设计模式的差异点，可阅读：[中文翻译by 梓义] Ribbon 设计模式官方介绍。

诞生过程

那么，Ribbon 是如何诞生的呢？从立项到正式发布，微软设计团队耗时 3 年多：

• 2003 年 08 月立项。
• 2005 年 09 月新版 Office 界面第一个 Demo 诞生。
• 2005 年 11 月完成 Beta 1 版本。
• 2006 年 06 月完成 Beta 2 版本。
• 2006 年 11 月正式上线发布。

整个设计流程经历了「用户调研 -> 设计原则 -> 原型制作 -> 评估迭代」四大过程，与现在流行的设计思维（Design Thinking）其实无本质差异。

用研与数据驱动

在初期的研究过程中，除了收集定性的用户声音，设计师还充分利用数据驱动的设计方法。他们：

• 从 Office 用户那收集了总计 30 亿份数据集，平均每天收集 2 百万份。
• 在 90 天时间里，跟踪了用户在 Word 的 3.52 亿次点击的情况。
• 跟踪剖析了近 6000 个独立的数据样本。

图：部份 Word 中的操作使用情况（左）；Office 套件中所有操作的使用情况（右）

除了立马能想到的使用率等指标，最让我佩服的是，在那个时代他们就已经建立了动态的数据视角，重点分析了各功能间联动操作关系等数据，以便重组操作之间、操作与界面时空之间的关系。具体的数据视角如下：

• [单点分析] 哪些操作人们用的最多?
• [任务流分析] 这些操作的使用顺序是怎么样的，它们之间有关系吗？
• [交互途径分析] 用户是怎么访问这些操作的，通过工具栏、鼠标还是键盘？
• [可发现性分析] 哪些功能是用户想要用却找不到的？

设计目标与原则

在完成用户研究之后，整个设计团队重新审视了 Word 的使命，将设计时的核心关注对象从产品功能身上转移到了用户身上，也因此重新树立了此次改革的目标：

• 让软件更易用。
• 帮助用户节约时间。
• 帮助用户发现 Office 更多的能力。
• 帮助用户创建美观且强大的文档。

有了目标之后，进而确立了设计原则。他们倡导要像信仰宗教一样，去信仰设计原则。在整个设计过程中始终围绕这些原则进行，绝不跑偏。用他们的原话来说，就是——“Design tenets have to be religion”。以下是当时确立的设计原则：

• 一个人的注意力应该放在内容上，而不是UI上。要帮助人们不受干扰地工作。
• 无论何时何地，减少让用户选择的数量。
• 效率为王。
• 拥抱一致性，但并非同质性。
• 给操作一个永久的家。比起“智能 UI”，人们喜欢有固定位置的 UI。
• 直接胜过聪明。

这里简单聊两条原则。

第一条原则，对于我们现代设计师而言，应是常识。但当时还是 2003 年，那时的设计师普遍关注的是 UI 而非内容。回想以下，扁平化视觉风格打败拟物化视觉风格，也就这几年的事。而扁平化视觉风格倡导的正是以内容为主的设计理念。微软的设计理念，总是领先于整个行业，不得不让人佩服。

最后一条设计原则，我们印象深刻的「回形针帮助助手」就死在这条原则下。“回形针”生于 Word 1997，卒于 Word 2003。如果软件系统并非 100% 智能，而又提供很多主动介入性的服务，如帮助，则往往让用户感受到的是智障而不是智能。因此，与其用帮助助手去解决难用的痛点，曲线救国，不如通过更合理的设计模式，提供直接干脆的交互方式，让操作更不言自明，让交互高效简单。

原型制作

在确立好设计原则之后，整个团队进行了充分的脑暴和原型创作，他们大开脑洞，不被旧有设计所局限。在这个过程中，从白板上的划痕到精心制作的 Flash 原型，约有上百个原型被创造出来，累计约 25,000 张原型界面。

图：当时的一些原型

事实上，Ribbon 设计模式的原型而是团队经过不断的讨论、测试、验证之后才最终从上百个原型中脱颖而出，并继续深入优化才得到的。我们现在看到的 Ribbon 设计模型，最早原型态的时候长这个样子：

图：应用 Ribbon 设计模式的原型

评估测试

上面提到过，Ribbon 是经过严谨的讨论和测试才最终脱颖而出的。事实上，微软使用了十几种的评估手段，去全面验证设计的有效性：

• 发布 β 测试（测试范围为内部员工和 300 万外部用户）。
• 坊间的用户反馈（博客、论坛)。
• 数据观测基准和指标。
• 观察和访谈。
• 可用性测试（在全世界范围内进行）。
• 卡片分类和纸张原型。
• 问卷调查。
• 纵向可用性研究。
• 长期的跟踪部署（5个月以上)。
• 楚门秀（Traman Show）。
• SQM (客户体验改善计划)。
• 眼动追踪。

简单介绍一下应用这些测试的目的。利用纵向可用性研究去测量产品在几个月时间里对用户产生的影响，了解产品的学习曲线、功能使用深度、效率等；利用卡片分类等手段帮助组织功能操作，找到它们之间的联系；利用眼动跟踪技术，通过热点图和视线跟踪了解用户是如何与 UI 进行交互的，同时能帮助理解跨文化的异同，比如从左到右的阅读习惯以及垂直文本的阅读习惯。

图：卡片分类探索各功能间的组织关系

图：眼动分析

在评估测试完毕后，并非意味着产品到达了最终可发布的状态。在整个设计管理的过程中，微软设计在团队中植入“迭代文化”，在开发计划中充分考虑了迭代优化的时间。这种文化充分保障了设计师在前期工作中能抓大放小，去探索最核心的设计解决思路，而把体系化的思考、完整的结构设计留在迭代周期的后期进行迭代。

以上正是 Ribbon 诞生的过程，当我了解完后，被其做设计的耐心、严谨和持续打磨的工匠精神所折服。想要了解更多 Ribbon 的前世今生，请观看演讲：The story of ribbon 官方演讲。

图：最终确定下来的 Word 2007 界面

最后，表达一下个人看法。我觉得 Ribbon 能诞生出来最重要的一点是，微软设计师转变了传统工业时代的设计思维，从原先关注功能设计转向关注用户行为设计。可以认为，旧有设计模式的是在传统设计思维下的产物，而 Ribbon 是全新设计思维下，以用户行为结果为导向的设计（Results-Oriented Design）。

摩登现代（2007-2019）

2007 版 Ribbon 设计模式诞生，突破了古典时代的设计局限性，有效解决了先前提到的设计难题。解决的有多好呢？Office 2007 上线之后，微软在全世界 4 个国家跟进了一波调研，用户样本是所有技能水平的用户，使用时间皆超过两个月。整体来说，相较老版本，用户新版 Office 的认可度还是非常高的。

在发布的当年，Office 2007 也取得了很多成就，包括：

• PC World：#1 Most Innovative Product of 2007。
• Consumer Electronics show（CES）：2007 Innovations Award in Software。
• Amazon.com software: #1。

2007 版本的发布，意味着 Office 设计进入了摩登时代。这个时代的设计有两个核心特征：一是 Ribbon 设计模式，二是在 2013 版本引入的扁平化设计语言)。Ribbon 设计模式更适应现代软件的交互复杂性，而扁平化设计视觉风格则进一步确立以内容体验为主的设计思想，二者相辅相成，不仅实现 Office 美且易用，更保障了跨软件、跨终端的体验一致性，为未来蓬勃发展的终端设备设计做好准备。这是一件看似简单，实则伟大的成就。

图：Word 2007 - Word 2019 五个版本的 Word 界面

在设计艺术学领域，现代主义设计反对装饰主义，推崇功能主义，是针对传统设计意识形态的一场革命。这一时代的 Office 设计转变了传统工业时代的设计思维，从原先关注功能设计转向关注用户行为设计，从而诞生了以用户行为结果为导向的设计（Results-Oriented Design） 产物——Ribbon 及扁平化视觉风格。因此，我将这个时代的 Office 设计称为摩登现代。

Ribbon 的影响力

在微软产品中，除了 Office 全家桶都采用了 Ribbon 设计，其它如画图工具、写字板工具，设置资源管理器也都全部采用了 Ribbon设计模式。

图：采用 Ribbon 设计的 Office 全家桶，坐上至右下依次为 Excel、Powepoint、Outlook、Onenote

图：Windows 自带画图工具，左为旧版，右为新版

图：Windows 自带写字版工具，左为旧版，右为新版

在第三方应用中，我们熟知的 WPS 撇开不说，著名的 Autodesk 的 AutoCAD、3DS MAX 软件中，也全部采用了 Ribbon 设计。

图：借鉴 Ribbon 设计的 WPS 软件。只将 Ribbon 中的快捷工具栏（Quick Access Toolbar）移了个位

图：采用 Ribbon 设计的 AutoCAD（左） 及 3DS MAX（右）软件

开箱即用，用 Ribbon 做设计

在我仔细阅读过 Ribbon 的设计规范后，确信在面对复杂工具类、文档编辑类产品设计时，即时再小白的设计师也能做到开箱即用。在没有经验的情况下，使用“巨人”成熟的设计方法是比较靠谱的一件事。

当然，想真正做到开箱即用，建议你花半天时间仔细阅读 Ribbon 设计规范。这里搬运一些核心的 Ribbon 设计法则，并简单讨论一下 Ribbon 在设计细节上带来的启发。

上手法则

在面对一个工具类产品设计时，如果你在考虑是否使用 Ribbon，那这些核心建议可以先看一下：
**

1. 想清楚 Ribbon 是否真的适合你的产品。如果使用 Ribbon 不能让你的程序变得更简单、更高效、更易用，请考虑其它解决方案。
2. 不要低估了设计一个高效的 Ribbon 的难度。不要期望它是你现有菜单栏和工具栏的简单端口，也不要想当然认为 Ribbon 会自动把你的程序变得更好。做好心理准备，创造一个高效的 Ribbon 需要付出长时间的打磨思考。
3. 遵循让命令操作可被发现的原则。设计标签卡时，要让其中的命令操作和标签描述具备清晰、明确、唯一的映射关系。用户在寻找目标操作的时候应能够快速、果断自信的选择包含该目标操作的标签卡。
4. 借助富按钮让命令操作的作用不言自明。通过标签说明、图标、提示框和实时预览等方式，让用户能够理解命令操作的作用，而非通过不断尝试或去阅读帮助说明。
5. 让命令操作高效使用起来。用户应该大部分时间都花在主选项卡上（home tab）；在常见任务中，用户几乎不需要反复切换选项卡（tab）；当界面窗口最大化且聚焦在正确的选项卡上时，最常用到的命令操作在视觉上要有所突出以便用户通过一次单击就能激活该操作；最多不超过四次点击用户就能触发所有其它的操作命令；在常见任务中，不要让用户通过打开的对话框（dialog boxes）来触发命令操作或进行一些参数设置。
6. 帮助用户在选择命令操作或选项时能更加自信，同时降低试错的频次。无论何时何地，只要条件允许都应使用结果导向的命令操作（results-oriented command）设计，如陈列室（gallery）和实时预览（live preview）。
7. 确保ribbon在最大窗口尺寸到最小窗口尺寸间都能缩放自如。保障跨终端设计。

动人细节

Ribbon 不愧是打磨 3 年的成果，阅读它的设计规范，竟不断能遇到打动内心的细节。虽然很多细节对于体验的提升不会很大，但这种工匠的态度，让人倾佩。

比如，在考虑标签卡（tab）的位置排布时，我们可能会认为在最左侧的群组是最容易被用户注意到的。然而在 Ribbon 的定义里认为，被选中高亮的标签卡名称以及窗口的主体内容充当了“视觉焦点”的角色（我解释一下，眼睛是通过边缘模糊区域来确定下一步阅读对象，并通过跳动来实现注意力转移的，因此适当的视觉引导能帮助用户快速实现注意力转移），因此标签卡中居中的那个群组通常会比最左侧的群组来得更引人注目。

在下图案例，Foot 群组和 Paragraph 群组比 Clipboard 群组更容易被察觉，因为当用户视线从内容区上移时，它们是最先被注意到的。

如下图案例，Tracking 群组受到最多的关注，因为某种程度上被选中高亮的标签卡名称充当了“视觉焦点”的角色。

再如，Ribbon 中建议避免使用过于详细的标签卡名和群组名。一方面我们肯定是希望标签卡和群组的命名能够清晰具体，但 Ribbon 认为命名不应该过于详细以致于吸引用户过多的注意力，因为用户在寻找目标的过程中，通常采用的是排除法。

再如，我们通常愿意提高软件的交互自由度，但 Ribbon 建议要避免为同一个命令操作提供多条访问路径，尤其是当该路径不可预料或是操作需要多次点击才能激活时。看起来我们为同一个命令操作提供多条访问路径是很方便的，但请注意当用户找到其中一条路径时，他们便不再继续探索其它方式。同时，用户会把他们第一次发现的路径当作唯一的访问路径。这是一个严重的问题，尤其当这条路径是低效且不直观时。而且，存在多个重复的命令会降低用户通过扫视来寻找其它命令的效率。

在下面这个案例中，虽然在主选项卡（home tab）中存在更直接的访问路径，你依然可以使用「页面边框」按钮去改变段落边框的效果。如果用户偶然发现这条意外路径，他们可能很容易认为这是惟一的路径。

诸如上述这些细节考虑在 Ribbon 的设计规范中非常之多，很受启发，待各位自己发现，此处就不再赘述。

案例分析

以我手上在用的超好用的语雀（专业云端知识库）的文档编辑器为例，虽然它的操作命令还比较少，工具条还能暂时满足用户需求。但还是有一些细节设计可以借鉴 Ribbon 的理念做到更好。

CASE 1
**
使用拆分按钮，实现平级操作，保证最常用命令的直接性。

语雀的排版按钮：

Ribbon 中的拆分按钮。如示例，另存为命令被设计成拆分按钮，默认主按钮执行的是最常见的操作，展开的菜单部分则承载其它存在细微差异的操作。

CASE 2

对于工具条的缩放，比较简单，可以通过一个容易触达的溢出按钮（overflow button）来承载无法自然显示的命令操作。

语雀的工具条暂未考虑小屏幕情况：

一个溢出按钮的案例：

Ribbon 没有所谓的默认尺寸，必须放在一个宽度范围内来考虑，在这个范围中的每一个宽度都有可能是用户最常使用的界面宽度。通过群组和差异化组织呈现按钮规模，来确保无论在任何尺寸下，重要按钮总是易触达的。

CASE 3
**
可添加下拉 icon 提供更多系列功能的隐喻。且可在展开面板里通过多种预览方式来展示命令操作的使用效果，提高使用效率并降低用户反复试错的概率，实施预览还能鼓励用户进行尝试和创新。

语雀的插入按钮，通过色彩提升用户注意力，提升功能的可发现性：

Ribbon 使用下拉 icon 隐喻“更多功能”，在面板里提供以结果为导向的、带有逼真图标的操作按钮，并进行进一步分组组织：

后记

技术的发展导致界面载体和界面本身都将出现翻天覆地的变化，而人类本身对于数字社会的了解和深入也势必产生新的界面体验的诉求。可以预见 Ribbon 设计模式也终有过时的一天，下个时代 Office 设计又会演化成何样？最近微软提出的 Fluent Design 设计体系最终会全面重塑 Office 吗？至少现在，除了视觉的变化，我还没有看到 Fluent Design 给微软系产品、给用户带来的真正价值。下一代 Office 的演变，我预期会很快到来，拭目以待吧。

另一方面，关于微软 office 设计与苹果办公三件套 iWork 的设计差异点，我也很想聊聊。有人说 office 的设计有点傻大粗，把所有功能都平铺开来，而 iWork 则是按需展现。也有人说 office 的设计直接干脆，更有控制感，而 iWork 的操作效率比较低下。针对这个话题，我将在《设计考古(2)_工具类产品 iWork》中与大家分享我的见解。

有任何疑问或观点想要探讨，请不要犹豫，留下你的评论或私信，我会尽快答复。

参考文献

• Ribbon 设计模式_官方介绍
• The story of ribbon 官方演讲
• Ribbon 维基百科
• Microsoft Word 维基百科
• Microsoft Office 维基百科
• Metro Design Language)
• Fluent Design System