從經(jīng)典界面到Ribbon，菜單欄與工具欄相愛相殺的那些年

1 評論 1161 瀏覽 1 收藏 21 分鐘

在工業(yè)軟件的漫長發(fā)展史中，用戶界面的演變一直是提高工作效率和用戶體驗(yàn)的關(guān)鍵。從早期的命令行操作到圖形用戶界面（GUI）的興起，再到菜單欄與工具欄的相愛相殺，每一次變革都深刻影響著我們與軟件的互動方式。

上一篇，筆者介紹了工業(yè)軟件中的模型結(jié)構(gòu)樹，模型樹是用來組織和管理數(shù)據(jù)的。工業(yè)軟件中除了數(shù)據(jù)，還有對這些數(shù)據(jù)對象執(zhí)行操作的大量命令。

這些命令又是如何組織和管理的呢？

在圖形用戶界面（GUI）還沒有出現(xiàn)的年代，工業(yè)軟件主要用光筆和命令行進(jìn)行操作，CAD用光筆在屏幕上畫出點(diǎn)線面、CAE用命令行請求求解計算。

從經(jīng)典界面到Ribbon，菜單欄與工具欄相愛相殺的那些年

SketchPad

后來，施樂公司在1973年第一次推出了Alto電腦，并展示了他們的GUI。GUI的出現(xiàn)給了喬布斯很大的啟發(fā)，因此Apple在1983年推出了AppleLisa電腦。微軟也緊隨其后，在1985年推出了第一代Windows系統(tǒng)。個人電腦的出現(xiàn)也帶動了辦公軟件的普及。

從經(jīng)典界面到Ribbon，菜單欄與工具欄相愛相殺的那些年

施樂公司推出的Alto電腦

GUI的出現(xiàn)，將抽象的命令行變成了可以點(diǎn)擊的文本選項(xiàng)。

而隨著系統(tǒng)的快速發(fā)展，很快開發(fā)人員發(fā)現(xiàn)界面不夠用了。于是“菜單”出現(xiàn)了，菜單項(xiàng)大多集中于窗口頂部，點(diǎn)擊后出現(xiàn)下拉列表，將原來的文本項(xiàng)分門別類的置于這些下拉列表中，增加了軟件的功能可擴(kuò)展性。

從經(jīng)典界面到Ribbon，菜單欄與工具欄相愛相殺的那些年

隨著時間流逝，新的功能越來越多，用戶們發(fā)現(xiàn)菜單項(xiàng)里的命令總是需要點(diǎn)擊兩次才能找到，而且不能直接看到，因此總是忘了命令在哪個菜單欄下。因此，1980年代工具欄開始被使用。工具欄把命令從文字選項(xiàng)變成了一個個整齊排列的小圖標(biāo)，放在用戶觸手可及的位置。用戶還可以自定義這些工具欄，把他們變成自己的小助手。

從經(jīng)典界面到Ribbon，菜單欄與工具欄相愛相殺的那些年

就這樣菜單欄和工具欄相互配合了多年，被無數(shù)軟件使用，造就了一個個經(jīng)典界面。

從經(jīng)典界面到Ribbon，菜單欄與工具欄相愛相殺的那些年
從經(jīng)典界面到Ribbon，菜單欄與工具欄相愛相殺的那些年
直到某一天，工具欄開始泛濫，幾乎包圍了軟件的上下左右。菜單欄也不再整潔，多級菜單層層嵌套，用戶找一個命令宛如進(jìn)入一個迷宮。設(shè)計專家們提出設(shè)計要求：菜單最多兩層?？上е螛?biāo)不治本，層級少了就只能加長列表了，而太長的列表會擋住操作界面，于是又有天才設(shè)計出了自適應(yīng)菜單，只有點(diǎn)擊展開才能看到下面。微軟的專家們設(shè)計出任務(wù)窗格，將一些功能放到了側(cè)面的矩形窗格中，這在一定程度上奏效了，可是這樣零零散散地命令分布又令一些用戶找不到任務(wù)窗格里的功能。

從經(jīng)典界面到Ribbon，菜單欄與工具欄相愛相殺的那些年

不僅僅是用戶感覺不爽，開發(fā)者們看到自己辛苦開發(fā)的功能被置于菜單欄里無人問津的角落時，也感到心酸。有些用戶因?yàn)椴涣私猓踔磷约憾伍_發(fā)了一個相同的功能。

這就像我們新買的小房子，一開始東西不多，我們把零零碎碎的東西放在地上、窗臺上，看著都不礙事。而當(dāng)東西越來越多，我們開始買衣柜、床頭柜、櫥柜來分裝我們的衣食住行用品。而后發(fā)現(xiàn)指甲刀、剪子或者衛(wèi)生紙經(jīng)常要用，放在柜子里每次拿都很麻煩，因此我們在墻上粘了幾個鉤子，在門口立了一個衣架，把常用物品掛在方便拿的地方。東西還是越來越多，柜子里的東西已經(jīng)不能隨便放了，不然很容易弄亂，于是又用收納盒把東西分門別類的放好，冬季的衣服和夏天的衣服分開放置。柜子越來越滿，墻上已經(jīng)打滿了柜子，粘鉤也已經(jīng)掛的到處都是，雖然都是按照規(guī)矩分布，可是屋子里還是越來越擠，從二人世界變成三口之家以后，物品倍增。

終于，當(dāng)飯桌下面都放滿了裝東西的紙箱（而你又買不起三室兩廳的大房子并且你無法斷舍離)時，這種日子已經(jīng)到了極限。你只能求助于“魔法柜子”了（原諒我想象力有限找不到實(shí)物對應(yīng)）

“魔法柜子”是一個可以根據(jù)需要切換里面物品的柜子，當(dāng)你需要衣服時，它里面會存放你所有的衣服。當(dāng)你需要剪刀時，它里面又展示出你所有的工具。在量子力學(xué)還沒什么突破的現(xiàn)實(shí)世界，這種柜子似乎造不出來。不過在虛擬世界可不一定。

Ribbon就是微軟給出的“魔法柜子”，在微軟Office2007版本中首次亮相，結(jié)束了菜單欄和工具欄分而治之的歷史，而是將其合二為一，通過選項(xiàng)卡和命令組管理命令，所有深藏不露的功能都有了亮相的機(jī)會，命令也根據(jù)使用頻率調(diào)整為不同的大小，可以配合完成同一項(xiàng)任務(wù)的命令被組織到了一起。每個選項(xiàng)卡都是一種“柜子”，里面的工具再也不用被塞到柜子最深處，而是被分門別類地放在了架子上。

從經(jīng)典界面到Ribbon，菜單欄與工具欄相愛相殺的那些年

站在操作系統(tǒng)的肩膀上，工業(yè)軟件也一直追隨著微軟的步伐。作為用戶量最大的辦公軟件，Office的設(shè)計風(fēng)格一直引領(lǐng)著工業(yè)軟件的變革，Ribbon推出后雖飽受爭議，但AutoCAD、Solidworks等軟件仍緊隨其后，Solidworks2008版加入Ribbon、AutoCAD2009加入Ribbon，Inventor在2010年步入此列，Creo1.0、UG NX10也陸續(xù)加入陣營。

從經(jīng)典界面到Ribbon，菜單欄與工具欄相愛相殺的那些年

Solidworks2008

相比于CAD的步步緊跟，CAE的幾位大哥顯得更加沉穩(wěn)，Ansys在2019R2的版本中才開始采用Ribbon，前處理之光Hypermesh也是在2019年擁抱了Ribbon，Abaqus至今也沒有換成Ribbon，還是傳統(tǒng)的菜單欄加工具欄的組合。

從經(jīng)典界面到Ribbon，菜單欄與工具欄相愛相殺的那些年

Ansys2019R3

盡管習(xí)慣了經(jīng)典界面的老用戶們對Ribbon界面吐嘈聲不斷，但是各大玩家們依然陸續(xù)選擇了Ribbon來管理繁雜的命令。許多軟件提供了恢復(fù)到經(jīng)典界面的選項(xiàng)以供過渡，但是往往過幾個版本以后就不會再提供這種功能。

Ribbon的出現(xiàn)解決了一部分問題，但是也帶來一些質(zhì)疑，比如有人說原來點(diǎn)一次就行的命令現(xiàn)在需要點(diǎn)兩次，有人說Ribbon占用了垂直空間，更多質(zhì)疑來自習(xí)慣傳統(tǒng)界面的老用戶，主要是他們找不到原來的功能在哪里了。

各大軟件廠商在演進(jìn)到Ribbon界面的基礎(chǔ)上，也各顯神通，為了滿足新老用戶的需求，使用戶能夠快速找到目標(biāo)命令，設(shè)計了許多實(shí)用的功能。

01 命令的容器有哪些

從經(jīng)典界面到Ribbon，菜單欄與工具欄相愛相殺的那些年

經(jīng)過調(diào)研，目前大部分工業(yè)軟件中承載命令的容器無外乎以上幾種，設(shè)計師們將命令工具分門別類地安置于這些容器中，以便用戶能夠快速找到他們。

下面，看下各大工業(yè)軟件在此基礎(chǔ)上都有哪些組織和管理命令的好辦法。

02 欣賞下幾款軟件的界面

AutoCAD

從經(jīng)典界面到Ribbon，菜單欄與工具欄相愛相殺的那些年

UGNX

從經(jīng)典界面到Ribbon，菜單欄與工具欄相愛相殺的那些年

Solidworks

從經(jīng)典界面到Ribbon，菜單欄與工具欄相愛相殺的那些年

Creo

從經(jīng)典界面到Ribbon，菜單欄與工具欄相愛相殺的那些年

Hyperworks

從經(jīng)典界面到Ribbon，菜單欄與工具欄相愛相殺的那些年

Ansys

從經(jīng)典界面到Ribbon，菜單欄與工具欄相愛相殺的那些年

03 共同點(diǎn)

Ribbon+快速訪問工具欄

幾家工業(yè)軟件都和微軟Office對齊，均提供Ribbon和快速訪問工具欄，并將幫助中心、命令搜索欄等置于頂部右側(cè)。

與Office不同的是，這幾款工業(yè)軟件中對于Ribbon的可自定義程度較高，不僅可以增減每個選項(xiàng)卡中的命令，定義每個命令放置的位置，還可以調(diào)節(jié)命令圖標(biāo)大小、隱藏文本標(biāo)簽、隱藏功能說明中的動畫、將選項(xiàng)卡像工具欄一樣取消?？康取?/p>

從經(jīng)典界面到Ribbon，菜單欄與工具欄相愛相殺的那些年

圖形工具欄

幾款軟件都把選擇、瀏覽、顯示等與3D對象關(guān)聯(lián)性強(qiáng)的命令放置于離圖形窗口最近的快捷圖形工具欄中，便于用戶鼠標(biāo)不離開圖形窗口就可以執(zhí)行命令。

從經(jīng)典界面到Ribbon，菜單欄與工具欄相愛相殺的那些年

上下文工具欄/上下文菜單

上下文工具欄是根據(jù)選擇的對象類型不同，在鼠標(biāo)位置浮現(xiàn)的小工具欄。如下圖所示，無論在圖形窗口還是模型樹中選中一個對象，都會出現(xiàn)對應(yīng)的工具欄。上下文菜單也是一樣，一般通過右鍵彈出菜單，也會根據(jù)選擇對象的不同而有差異。

幾款軟件均可以自定義每個上下文工具欄中的命令、圖標(biāo)順序、窗口形狀，也可以自定義上下文菜單中的菜單項(xiàng)。

從經(jīng)典界面到Ribbon，菜單欄與工具欄相愛相殺的那些年

04 各軟件有哪些特色

AutoCAD的命令行

AutoCAD相比于其他幾款軟件，最有特色的就是它底部的命令窗口，這是它從初代版本一直沿用至今的功能，是許多高級用戶心里的“白月光”。

通過鍵盤輸入命令，會給予提示，可以執(zhí)行所有命令，并可以在框中直接輸入相關(guān)參數(shù)。對于長期用戶來說，這種操作方式非?？旖荩?dāng)然學(xué)習(xí)難度也比較高。

從經(jīng)典界面到Ribbon，菜單欄與工具欄相愛相殺的那些年

從經(jīng)典界面到Ribbon，菜單欄與工具欄相愛相殺的那些年

既要又要的Solidworks

Solidworks可謂既要又要的典范，不僅有Ribbon統(tǒng)領(lǐng)全局，還保留了工具欄和菜單欄這兩個左膀右臂。

其中菜單欄置于窗口最頂部，仍舊是曾經(jīng)的模樣。工具欄除了默認(rèn)保留的快速訪問工具欄外，還有各種類型的工具欄作為補(bǔ)充。這些工具欄很靈活，加載后可以?？吭谒闹埽部梢苑胖迷谌我馕恢?。

從經(jīng)典界面到Ribbon，菜單欄與工具欄相愛相殺的那些年

無功無過的Creo

Creo的工作區(qū)可自定義程度沒有SW和UG那么靈活，不過也夠用了。比較有特點(diǎn)的是Creo在執(zhí)行命令需要設(shè)置參數(shù)時，參數(shù)面板是以上下文選項(xiàng)卡的形式彈出的。

從經(jīng)典界面到Ribbon，菜單欄與工具欄相愛相殺的那些年

愛彈對話框的UG

之前的幾篇產(chǎn)品分析中一直忽略了UG，實(shí)際上UG是一個非常強(qiáng)大且靈活的軟件。UG在細(xì)節(jié)上并不輸給SW，除了Ribbon以外，UG也保留了菜單，不過并不是傳統(tǒng)的主菜單，而是工具欄中一個帶下拉列表的按鈕。

UG的圖形窗口四周，隱藏著一圈可以放置命令的邊框條，除了上邊框條默認(rèn)有命令按鈕外，其它三個均由用戶自定義添加。用戶可以重復(fù)添加，將同樣的功能同時放置在四個工具條上。

從經(jīng)典界面到Ribbon，菜單欄與工具欄相愛相殺的那些年

UG還有個很有意思的圓盤工具欄，狀似圓盤，最多放置八個命令，可自定義更改，操作時是Ctrl+shift+鼠標(biāo)上的三個鍵，分別對應(yīng)三個不同的圓盤工具欄。

從經(jīng)典界面到Ribbon，菜單欄與工具欄相愛相殺的那些年

除此之外，UG采用了大量的彈出式對話框來儲存命令，這些對話框與執(zhí)行的命令相關(guān)，相當(dāng)于SW中的屬性面板、Creo中的上下文選項(xiàng)卡，總之都是設(shè)置參數(shù)的地方。

從經(jīng)典界面到Ribbon，菜單欄與工具欄相愛相殺的那些年

Hyperworks的大圖標(biāo)

因?yàn)槲也皇欠抡婀こ處煟虼艘郧翱吹絼e人用hypermesh時，總會對它底部像儀表盤一樣的操作面板嗤之以鼻，認(rèn)為Altair也是個直男公司。直到我調(diào)研了改版后的Hyperworks，發(fā)現(xiàn)它的界面很漂亮，用戶體驗(yàn)也很友好。相比于其他軟件，HW有著超大號的圖標(biāo)，看起來比小圖標(biāo)更清晰，當(dāng)然代價是Ribbon上的選項(xiàng)卡很多。

從經(jīng)典界面到Ribbon，菜單欄與工具欄相愛相殺的那些年

HW甚至做到了“一魚多吃”，即一個大圖標(biāo)可以實(shí)現(xiàn)多種功能，這種設(shè)計在工業(yè)軟件中還很少見。

從經(jīng)典界面到Ribbon，菜單欄與工具欄相愛相殺的那些年

當(dāng)然，hypermesh底部特色的操作面板仍然保留著，與漂亮的Ribbon共存，相關(guān)的參數(shù)設(shè)置等操作也在底部設(shè)置。這部分的設(shè)計對于一個初學(xué)者來說不太友好，因?yàn)闄M向布置的各類參數(shù)設(shè)置控件看起來有點(diǎn)混亂，不仔細(xì)看的話區(qū)分不出這些控件之間的界限。

從經(jīng)典界面到Ribbon，菜單欄與工具欄相愛相殺的那些年

HW還有控制臺，可以輸入Tcl/Tk腳本執(zhí)行命令，這里我默認(rèn)需要輸入腳本的功能都比較適合高級用戶。

Ansys的模型樹

Ansysworkbench 自打2019年推出了Ribbon界面后，易用性廣受好評，據(jù)說對仿真一無所知的人也能搞出個云圖出來。相比于APDL陳舊的界面，新版的Ansys界面對于新手用戶友好許多。

Ansys沒有提供浮在鼠標(biāo)位置的上下文工具欄，而是把Ribbon中第二個選項(xiàng)卡的位置（位置可以修改），放置了一個上下文選項(xiàng)卡，這樣只要用戶選中一個對象，上下文選項(xiàng)卡就會顯示與該對象或命令相關(guān)的操作按鈕。

從經(jīng)典界面到Ribbon，菜單欄與工具欄相愛相殺的那些年

除了Ribbon，Ansys用模型樹和右鍵菜單的組合拳也打出了不錯的效果，Ansys模型樹的節(jié)點(diǎn)就是按照工作流程從上到下的，選中節(jié)點(diǎn)后右鍵菜單中幾乎有所有相關(guān)的命令。

至于參數(shù)設(shè)置，在Ansys中是在詳細(xì)信息窗口中完成的，不同于Creo彈出的選項(xiàng)卡，UG各種各樣的彈窗，也不同于Hypermesh橫置的操作面板，Ansys的詳細(xì)信息窗口是一個縱向列表的固定窗口，命令間的界限十分清晰。并且只有選中時才會出現(xiàn)控件，比如復(fù)選框、下拉列表、確認(rèn)取消按鈕等。CAE軟件中各種參數(shù)設(shè)置還是比較多的，這部分命令這樣設(shè)計雖然看著死板但是很清晰。

從經(jīng)典界面到Ribbon，菜單欄與工具欄相愛相殺的那些年

05 結(jié)語

本篇文章本來沒打算分析這么多軟件，不過越調(diào)研越發(fā)現(xiàn)各家公司的“大同小異”，為了尋找它們的差異一下子寫了6個。順便也把整個GUI的發(fā)展歷史回顧了一遍，受益匪淺。工業(yè)軟件數(shù)量很多，功能都很龐大，筆者也缺乏足夠的時間把每個軟件都體驗(yàn)一遍，因此在分析時不免有偏頗之處，還請大家多指正。巨頭軟件的用戶體驗(yàn)其實(shí)不一定比冷門小公司做的好，如果大家有覺得體驗(yàn)不錯的工業(yè)軟件，也可以評論區(qū)補(bǔ)充。

作者：石寒，公眾號：工業(yè)軟件產(chǎn)品分析

本文由 @石寒 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Pixabay，基于CC0協(xié)議。

該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

更多精彩內(nèi)容，請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
石寒
B端產(chǎn)品經(jīng)理，關(guān)注智能制造與前沿技術(shù)。 公眾號：工業(yè)軟件產(chǎn)品分析
5篇作品 17402總閱讀量
11-071145 瀏覽
產(chǎn)品的起點(diǎn)是發(fā)現(xiàn)并理解問題
10-113285 瀏覽
【智能座艙的用戶體驗(yàn)評測】30位行業(yè)大佬分享了這些有價值的觀點(diǎn)和啟發(fā)！
12-226761 瀏覽
產(chǎn)品改版應(yīng)該這樣做！
11-134322 瀏覽
當(dāng)我在為新行業(yè)領(lǐng)域產(chǎn)品規(guī)劃發(fā)愁時，總監(jiān)給了我這五點(diǎn)思路！
09-261910 瀏覽
云盤產(chǎn)品的贈送式聯(lián)合會員：核心指標(biāo)解讀
評論
評論請登錄

  1. 其實(shí)photoshop也是一個很好的例子。

    來自重慶 回復(fù)