从经典界面到Ribbon，菜单栏与工具栏相爱相杀的那些年

人人都是产品经理

2024-11-08 09:07发布于广东人人都是产品经理的官方账号

在工业软件的漫长发展史中，用户界面的演变一直是提高工作效率和用户体验的关键。从早期的命令行操作到图形用户界面（GUI）的兴起，再到菜单栏与工具栏的相爱相杀，每一次变革都深刻影响着我们与软件的互动方式。

图片

上一篇，笔者介绍了工业软件中的模型结构树，模型树是用来组织和管理数据的。工业软件中除了数据，还有对这些数据对象执行操作的大量命令。

这些命令又是如何组织和管理的呢？

在图形用户界面（GUI）还没有出现的年代，工业软件主要用光笔和命令行进行操作，CAD用光笔在屏幕上画出点线面、CAE用命令行请求求解计算。

图片

SketchPad

后来，施乐公司在1973年第一次推出了Alto电脑，并展示了他们的GUI。GUI的出现给了乔布斯很大的启发，因此Apple在1983年推出了AppleLisa电脑。微软也紧随其后，在1985年推出了第一代Windows系统。个人电脑的出现也带动了办公软件的普及。

图片

施乐公司推出的Alto电脑

GUI的出现，将抽象的命令行变成了可以点击的文本选项。

而随着系统的快速发展，很快开发人员发现界面不够用了。于是“菜单”出现了，菜单项大多集中于窗口顶部，点击后出现下拉列表，将原来的文本项分门别类的置于这些下拉列表中，增加了软件的功能可扩展性。

图片

随着时间流逝，新的功能越来越多，用户们发现菜单项里的命令总是需要点击两次才能找到，而且不能直接看到，因此总是忘了命令在哪个菜单栏下。因此，1980年代工具栏开始被使用。工具栏把命令从文字选项变成了一个个整齐排列的小图标，放在用户触手可及的位置。用户还可以自定义这些工具栏，把他们变成自己的小助手。

图片

就这样菜单栏和工具栏相互配合了多年，被无数软件使用，造就了一个个经典界面。

图片
图片
直到某一天，工具栏开始泛滥，几乎包围了软件的上下左右。菜单栏也不再整洁，多级菜单层层嵌套，用户找一个命令宛如进入一个迷宫。设计专家们提出设计要求：菜单最多两层。可惜治标不治本，层级少了就只能加长列表了，而太长的列表会挡住操作界面，于是又有天才设计出了自适应菜单，只有点击展开才能看到下面。微软的专家们设计出任务窗格，将一些功能放到了侧面的矩形窗格中，这在一定程度上奏效了，可是这样零零散散地命令分布又令一些用户找不到任务窗格里的功能。

图片

不仅仅是用户感觉不爽，开发者们看到自己辛苦开发的功能被置于菜单栏里无人问津的角落时，也感到心酸。有些用户因为不了解，甚至自己二次开发了一个相同的功能。

这就像我们新买的小房子，一开始东西不多，我们把零零碎碎的东西放在地上、窗台上，看着都不碍事。而当东西越来越多，我们开始买衣柜、床头柜、橱柜来分装我们的衣食住行用品。而后发现指甲刀、剪子或者卫生纸经常要用，放在柜子里每次拿都很麻烦，因此我们在墙上粘了几个钩子，在门口立了一个衣架，把常用物品挂在方便拿的地方。东西还是越来越多，柜子里的东西已经不能随便放了，不然很容易弄乱，于是又用收纳盒把东西分门别类的放好，冬季的衣服和夏天的衣服分开放置。柜子越来越满，墙上已经打满了柜子，粘钩也已经挂的到处都是，虽然都是按照规矩分布，可是屋子里还是越来越挤，从二人世界变成三口之家以后，物品倍增。

终于，当饭桌下面都放满了装东西的纸箱（而你又买不起三室两厅的大房子并且你无法断舍离)时，这种日子已经到了极限。你只能求助于“魔法柜子”了（原谅我想象力有限找不到实物对应）

“魔法柜子”是一个可以根据需要切换里面物品的柜子，当你需要衣服时，它里面会存放你所有的衣服。当你需要剪刀时，它里面又展示出你所有的工具。在量子力学还没什么突破的现实世界，这种柜子似乎造不出来。不过在虚拟世界可不一定。

Ribbon就是微软给出的“魔法柜子”，在微软Office2007版本中首次亮相，结束了菜单栏和工具栏分而治之的历史，而是将其合二为一，通过选项卡和命令组管理命令，所有深藏不露的功能都有了亮相的机会，命令也根据使用频率调整为不同的大小，可以配合完成同一项任务的命令被组织到了一起。每个选项卡都是一种“柜子”，里面的工具再也不用被塞到柜子最深处，而是被分门别类地放在了架子上。

图片

站在操作系统的肩膀上，工业软件也一直追随着微软的步伐。作为用户量最大的办公软件，Office的设计风格一直引领着工业软件的变革，Ribbon推出后虽饱受争议，但AutoCAD、Solidworks等软件仍紧随其后，Solidworks2008版加入Ribbon、AutoCAD2009加入Ribbon，Inventor在2010年步入此列，Creo1.0、UG NX10也陆续加入阵营。

图片

Solidworks2008

相比于CAD的步步紧跟，CAE的几位大哥显得更加沉稳，Ansys在2019R2的版本中才开始采用Ribbon，前处理之光Hypermesh也是在2019年拥抱了Ribbon，Abaqus至今也没有换成Ribbon，还是传统的菜单栏加工具栏的组合。

图片

Ansys2019R3

尽管习惯了经典界面的老用户们对Ribbon界面吐嘈声不断，但是各大玩家们依然陆续选择了Ribbon来管理繁杂的命令。许多软件提供了恢复到经典界面的选项以供过渡，但是往往过几个版本以后就不会再提供这种功能。

Ribbon的出现解决了一部分问题，但是也带来一些质疑，比如有人说原来点一次就行的命令现在需要点两次，有人说Ribbon占用了垂直空间，更多质疑来自习惯传统界面的老用户，主要是他们找不到原来的功能在哪里了。

各大软件厂商在演进到Ribbon界面的基础上，也各显神通，为了满足新老用户的需求，使用户能够快速找到目标命令，设计了许多实用的功能。

01 命令的容器有哪些

图片

经过调研，目前大部分工业软件中承载命令的容器无外乎以上几种，设计师们将命令工具分门别类地安置于这些容器中，以便用户能够快速找到他们。

下面，看下各大工业软件在此基础上都有哪些组织和管理命令的好办法。

02 欣赏下几款软件的界面

AutoCAD

图片

UGNX

图片

Solidworks

图片

Creo

图片

Hyperworks

图片

Ansys

图片

03 共同点

Ribbon+快速访问工具栏

几家工业软件都和微软Office对齐，均提供Ribbon和快速访问工具栏，并将帮助中心、命令搜索栏等置于顶部右侧。

与Office不同的是，这几款工业软件中对于Ribbon的可自定义程度较高，不仅可以增减每个选项卡中的命令，定义每个命令放置的位置，还可以调节命令图标大小、隐藏文本标签、隐藏功能说明中的动画、将选项卡像工具栏一样取消停靠等。

图片

图形工具栏

几款软件都把选择、浏览、显示等与3D对象关联性强的命令放置于离图形窗口最近的快捷图形工具栏中，便于用户鼠标不离开图形窗口就可以执行命令。

图片

上下文工具栏/上下文菜单

上下文工具栏是根据选择的对象类型不同，在鼠标位置浮现的小工具栏。如下图所示，无论在图形窗口还是模型树中选中一个对象，都会出现对应的工具栏。上下文菜单也是一样，一般通过右键弹出菜单，也会根据选择对象的不同而有差异。

几款软件均可以自定义每个上下文工具栏中的命令、图标顺序、窗口形状，也可以自定义上下文菜单中的菜单项。

图片

04 各软件有哪些特色

AutoCAD的命令行

AutoCAD相比于其他几款软件，最有特色的就是它底部的命令窗口，这是它从初代版本一直沿用至今的功能，是许多高级用户心里的“白月光”。

通过键盘输入命令，会给予提示，可以执行所有命令，并可以在框中直接输入相关参数。对于长期用户来说，这种操作方式非常快捷，当然学习难度也比较高。

图片

图片

既要又要的Solidworks

Solidworks可谓既要又要的典范，不仅有Ribbon统领全局，还保留了工具栏和菜单栏这两个左膀右臂。

其中菜单栏置于窗口最顶部，仍旧是曾经的模样。工具栏除了默认保留的快速访问工具栏外，还有各种类型的工具栏作为补充。这些工具栏很灵活，加载后可以停靠在四周，也可以放置在任意位置。

图片

无功无过的Creo

Creo的工作区可自定义程度没有SW和UG那么灵活，不过也够用了。比较有特点的是Creo在执行命令需要设置参数时，参数面板是以上下文选项卡的形式弹出的。

图片

爱弹对话框的UG

之前的几篇产品分析中一直忽略了UG，实际上UG是一个非常强大且灵活的软件。UG在细节上并不输给SW，除了Ribbon以外，UG也保留了菜单，不过并不是传统的主菜单，而是工具栏中一个带下拉列表的按钮。

UG的图形窗口四周，隐藏着一圈可以放置命令的边框条，除了上边框条默认有命令按钮外，其它三个均由用户自定义添加。用户可以重复添加，将同样的功能同时放置在四个工具条上。

图片

UG还有个很有意思的圆盘工具栏，状似圆盘，最多放置八个命令，可自定义更改，操作时是Ctrl+shift+鼠标上的三个键，分别对应三个不同的圆盘工具栏。

图片

除此之外，UG采用了大量的弹出式对话框来储存命令，这些对话框与执行的命令相关，相当于SW中的属性面板、Creo中的上下文选项卡，总之都是设置参数的地方。

图片

Hyperworks的大图标

因为我不是仿真工程师，因此以前看到别人用hypermesh时，总会对它底部像仪表盘一样的操作面板嗤之以鼻，认为Altair也是个直男公司。直到我调研了改版后的Hyperworks，发现它的界面很漂亮，用户体验也很友好。相比于其他软件，HW有着超大号的图标，看起来比小图标更清晰，当然代价是Ribbon上的选项卡很多。

图片

HW甚至做到了“一鱼多吃”，即一个大图标可以实现多种功能，这种设计在工业软件中还很少见。

图片

当然，hypermesh底部特色的操作面板仍然保留着，与漂亮的Ribbon共存，相关的参数设置等操作也在底部设置。这部分的设计对于一个初学者来说不太友好，因为横向布置的各类参数设置控件看起来有点混乱，不仔细看的话区分不出这些控件之间的界限。

图片

HW还有控制台，可以输入Tcl/Tk脚本执行命令，这里我默认需要输入脚本的功能都比较适合高级用户。

Ansys的模型树

Ansysworkbench 自打2019年推出了Ribbon界面后，易用性广受好评，据说对仿真一无所知的人也能搞出个云图出来。相比于APDL陈旧的界面，新版的Ansys界面对于新手用户友好许多。

Ansys没有提供浮在鼠标位置的上下文工具栏，而是把Ribbon中第二个选项卡的位置（位置可以修改），放置了一个上下文选项卡，这样只要用户选中一个对象，上下文选项卡就会显示与该对象或命令相关的操作按钮。

图片

除了Ribbon，Ansys用模型树和右键菜单的组合拳也打出了不错的效果，Ansys模型树的节点就是按照工作流程从上到下的，选中节点后右键菜单中几乎有所有相关的命令。

至于参数设置，在Ansys中是在详细信息窗口中完成的，不同于Creo弹出的选项卡，UG各种各样的弹窗，也不同于Hypermesh横置的操作面板，Ansys的详细信息窗口是一个纵向列表的固定窗口，命令间的界限十分清晰。并且只有选中时才会出现控件，比如复选框、下拉列表、确认取消按钮等。CAE软件中各种参数设置还是比较多的，这部分命令这样设计虽然看着死板但是很清晰。

图片

05 结语

本篇文章本来没打算分析这么多软件，不过越调研越发现各家公司的“大同小异”，为了寻找它们的差异一下子写了6个。顺便也把整个GUI的发展历史回顾了一遍，受益匪浅。工业软件数量很多，功能都很庞大，笔者也缺乏足够的时间把每个软件都体验一遍，因此在分析时不免有偏颇之处，还请大家多指正。巨头软件的用户体验其实不一定比冷门小公司做的好，如果大家有觉得体验不错的工业软件，也可以评论区补充。

作者：石寒，公众号：工业软件产品分析

本文由 @石寒 原创发布于人人都是产品经理，未经许可，禁止转载。

题图来自 Pixabay，基于CC0协议。

查看原图 174K