设计软件时，针对功能区的设计都是比较复杂的
这篇文章，作者分享了一种在国外广泛使用的设计模式——微软的Ribbon设计模式，并从多个角度进行了讲解，希望可以帮到大家
大家应该都接触过编辑器这个功能，比如我们常用的文字编辑器、图形编辑器、流程图编辑器等……但当我们真正拿到一个编辑器需求的时候，却不知道怎么下手
因为编辑器内容通常比较多、零散
我们怎么组织、怎么排列、怎么交互都是需要思考的问题
这个时候我们可以去看看世界上最前沿的产品，他们是怎么思考与设计的
一、微软Ribbon设计模式Ribbon设计模式是一种直接、简洁、以结果为导向的现代设计方法
它是软件界面上固定在顶部的一个功能区域
Ribbon设计模式在我们的日常使用中并不陌生，尤其是在常用的Office软件中，它们都采用了这种设计模式
所谓Ribbon，实际上就是一种功能区，其中包含了各种常用功能和命令的图标、按钮等元素
这种设计模式使得用户可以更直观地找到所需功能，从而提高了软件的易用性和效率
如果你要问为什么学微软，那就看一下他们用研数据：在初期的研究过程中，除了收集定性的用户声音，设计师还充分利用数据驱动设计
他们：从 Office 用户那收集了总计 30 亿份数据集，平均每天收集 2 百万份
在 90 天时间里，跟踪了用户在 Word 的 3.52 亿次点击的情况
跟踪剖析了近 6000 个独立的数据样本
图：部分Word 中的操作使用情况（上）；Office 套件中所有操作的使用情况（下）像这种量级的调研，在国内也没多少公司可以做
所以 AutoCAD 、 3DS MAX，包括国内的万兴科技旗下的产品都有借鉴Ribbon设计模式，当然还有我们经常使用的WPS
下面就来看下微软Ribbon设计模式有哪些优势，让这么多产品都去学习
二、功能区什么是功能区？万兴科技旗下软件——亿图金山软件——WPS功能区是一种新式方式，让用户能够以最少的点击次数，高效地完成他们的任务，从而提高了编辑的效率和愉快程度
功能区可以同时代替传统的菜单栏和工具栏
功能区由选项卡和组组成，组是一组标记的密切相关的命令
除了选项卡和组外，功能区还包含：“应用程序”按钮，其中显示了一个命令菜单，这些命令涉及对文档或工作区执行某些操作，例如与文件相关的命令
快速访问工具栏，它是一个可自定义的小型工具栏，用于显示常用命令
核心选项卡是始终显示的选项卡
上下文选项卡，仅在选择特定对象类型时显示
始终显示的选项卡称为核心选项卡
选项卡集是单个对象类型的上下文选项卡的集合
例如，由于对象可以有多个类型(具有图片的表中的标题是三种类型) ，因此一次可以显示多个上下文选项卡集
模式选项卡，是使用特定临时模式（如打印预览）显示的核心选项卡
库，这些库是图形呈现的命令或选项的列表
基于结果的库说明了命令或选项的效果，而不是命令本身
功能区内库显示在功能区内，而不是弹出窗口
增强的工具提示，可简洁地解释其关联的命令并提供快捷键
它们可能还包括图形和对帮助的引用
增强的工具提示减少了对命令相关帮助的需求
对话框启动器，是某些组底部的按钮，用于打开包含与组相关的功能的对话框
三、丰富的命令丰富命令是指在使用功能区时，用户可以直接看到并与命令进行交互，而不需要额外点击或打开功能区容器
丰富的命令具有以下特征：1、图标
所有命令都提供一目了然的图标，除非图标并不是大家所熟知
这些命令非常广为人知，因此它们不需要标签文字
2、按钮
命令的大小不是统一调整，而是根据其使用频率和重要性进行大小调整
除了使最常用的命令更易于查找和单击外，它还使它们更易于触摸
在此示例中，最常用的按钮比其他按钮大
3、动态大小调整
丰富的命令控件调整自身大小以充分利用可用空间，而不是使用固定大小，在太小时截断或使用溢出
4、拆分按钮
拆分按钮是在需要时合并命令的一组变体的好方法，同时保持最常用的命令的直接性
在此示例中，“另存为”命令使用拆分按钮，其中main按钮执行最常见的变体，菜单部分显示具有命令变体的菜单
5、丰富的下拉菜单和库
下拉菜单、下拉列表和库占用了沟通和区分选项效果所需的空间，通常使用图形和文本说明
类别用于组织大型选项集
在这些示例中，单击菜单按钮会显示显示其效果的选项列表
6、实时预览
每当用户把鼠标放在格式设置选项上时（WPS采用的是点击），程序会立即显示出该格式设置对文本的实际效果
7、增强的工具提示
提示清晰地解释了与命令相关联的内容，并提供了快捷键
此外，它们可能还包括帮助图形和引导动画
增强的工具提示简洁地说明其关联的命令四、可发现性功能区通过提供选项卡和组来帮助你组织命令，从而使其更易于发现和使用
挑战在于，让用户能够轻松地根据选项卡和组的名称找到他们需要的命令，而不会因为混乱或重复而感到困惑
例如：应该确保用户可以通过一个简单、直接的路径来执行命令，而不是让他们在不同的地方寻找同一个功能，或者需要重复多次点击才能完成同一个任务
这样可以提高用户体验，避免混淆和不必要的复杂性
通过多个路径查找命令似乎是一种方便
但请记住，当用户找到他们要查找的内容时，他们就会停止查找
用户很容易认为他们找到的第一条路径是唯一的路径，如果这条路径效率低下，则会是一个严重的问题
在此示例中，你可以通过“页面边框”命令更改段落边框，即使“开始”选项卡上有一个更直接的路径
如果查找段落边框的用户偶然发现了此意外路径，他们可能很容易认为这是唯一的路径
五、组在确定组及其呈现时，需要考虑多种因素：1、分类尽管不同的程序可能有不同的功能和命令，但是一些常用的命令在许多程序中都是通用的
通过在不同的程序中以相同的名称和相似的位置显示这些命令，可以极大地提高用户发现这些命令的能力
2、数量虽然一些组织结构很好，但过多的结构会使用户更难找到命令
合理的组织结构应该既有足够的详细性，又不要过分繁琐，以确保用户能够轻松找到他们需要的命令，而不至于造成混乱
3、组名良好的组名是指能清晰反映其命令或功能用途的名称
比如，你有一个组用于管理项目文件，那么给它起一个像”项目文件管理组”这样的名称就很合适，因为它明确告诉你这个组是用来管理项目文件的
4、浏览虽然我们习惯从左到右阅读，使得最左侧的内容首先显眼，但实际上，选项卡标题下方和内容上方更容易被注意到
将最常用的组放在最突出的位置，并确保整 个选项卡中的组有逻辑流
在此示例中，“字体”和“段落”组比剪贴板组更明显，因为它们是从文档上移时眼睛首先看到的
在此示例中，跟踪（tracking）组受到最多关注，原因是突出显示的“审阅”选项卡充当焦点
5、对比当命令看起来很相似时，用户可能难以辨别它们
为了帮助用户更轻松地识别命令组，可以采取使用不同形状、颜色、大小的图标使它们更易于区分
六、预览你可以通过使用各种类型的预览来显示执行命令的结果
这些预览能够帮助用户更有效地使用程序，减少尝试和错误的学习过程
1、逼真的静态图标和图形当你打开“字体”下拉列表时，里面显示的不是简单的文字列表，而是每种字体最终展示的样子
在此示例中，缩略图展示了不同水印的外观，让用户在选择时可以直观地看到每个水印的样式
2、动态图标和图形这种修改后的图标和图形，会显示当前状态或执行的操作
举个例子，如果你在编辑程序中修改了一些设置，现在想要将另一个项目设置成与上一次相同，这些图标和图形会反映出当前的设置状态，帮助你在作出决定时更加明智
这样的设计让用户更容易理解程序的状态，同时也提高了操作的效率
在此示例中，Microsoft Word更改样式库以反映当前样式
在此示例中，Word更改文本突出显示颜色和字体颜色命令以指示其当前效果
3、实时预览当用户把鼠标移动到格式设置选项上时，屏幕上会立即显示出该格式设置的效果，而不是等到用户真正应用这个设置后才能看到效果
在此示例中，“页面颜色”命令通过鼠标悬停时改变页面背景色，让用户快速看到实际效果
七、页面缩放缩放工具栏很简单：如果窗口太窄而无法显示工具栏，则工具栏会显示适合的内容，并通过溢出按钮访问其他所有内容
工具栏使用溢出按钮进行缩放
没有默认功能区大小
最小大小是单个弹出组图标
谢谢大家观看
参考资料：桌面应用程序的设计基础知识 – Win32 apps | Microsoft Learn设计考古(1)_工具类产品 Office – 知乎 (zhihu.com)本文由人人都是产品经理作者【夜莺YEAH】，微信公众号：【夜莺B端UX设计】，原创/授权 发布于人人都是产品经理，未经许可，禁止转载
题图来自Unsplash，基于 CC0 协议

（图片来源网络，侵删）