設(shè)計(jì)軟件時(shí)，針對(duì)功能區(qū)的設(shè)計(jì)都是比較復(fù)雜的。這篇文章，作者分享了一種在國外廣泛使用的設(shè)計(jì)模式——微軟的Ribbon設(shè)計(jì)模式，并從多個(gè)角度進(jìn)行了講解，希望可以幫到大家。

大家應(yīng)該都接觸過編輯器這個(gè)功能，比如我們常用的文字編輯器、圖形編輯器、流程圖編輯器等……

但當(dāng)我們真正拿到一個(gè)編輯器需求的時(shí)候，卻不知道怎么下手。因?yàn)榫庉嬈鲀?nèi)容通常比較多、零散。我們?cè)趺唇M織、怎么排列、怎么交互都是需要思考的問題。

這個(gè)時(shí)候我們可以去看看世界上最前沿的產(chǎn)品，他們是怎么思考與設(shè)計(jì)的。

一、微軟Ribbon設(shè)計(jì)模式

Ribbon設(shè)計(jì)模式是一種直接、簡(jiǎn)潔、以結(jié)果為導(dǎo)向的現(xiàn)代設(shè)計(jì)方法。它是軟件界面上固定在頂部的一個(gè)功能區(qū)域。

Ribbon設(shè)計(jì)模式在我們的日常使用中并不陌生，尤其是在常用的Office軟件中，它們都采用了這種設(shè)計(jì)模式。

所謂Ribbon，實(shí)際上就是一種功能區(qū)，其中包含了各種常用功能和命令的圖標(biāo)、按鈕等元素。這種設(shè)計(jì)模式使得用戶可以更直觀地找到所需功能，從而提高了軟件的易用性和效率。如果你要問為什么學(xué)微軟，那就看一下他們用研數(shù)據(jù)：

在初期的研究過程中，除了收集定性的用戶聲音，設(shè)計(jì)師還充分利用數(shù)據(jù)驅(qū)動(dòng)設(shè)計(jì)。

他們：

• 從 Office 用戶那收集了總計(jì) 30 億份數(shù)據(jù)集，平均每天收集 2 百萬份。
• 在 90 天時(shí)間里，跟蹤了用戶在 Word 的 3.52 億次點(diǎn)擊的情況。
• 跟蹤剖析了近 6000 個(gè)獨(dú)立的數(shù)據(jù)樣本。

圖：部分Word 中的操作使用情況（上）；Office 套件中所有操作的使用情況（下）

像這種量級(jí)的調(diào)研，在國內(nèi)也沒多少公司可以做。所以 AutoCAD 、 3DS MAX，包括國內(nèi)的萬興科技旗下的產(chǎn)品都有借鑒Ribbon設(shè)計(jì)模式，當(dāng)然還有我們經(jīng)常使用的WPS。

下面就來看下微軟Ribbon設(shè)計(jì)模式有哪些優(yōu)勢(shì)，讓這么多產(chǎn)品都去學(xué)習(xí)。

二、功能區(qū)

什么是功能區(qū)？

萬興科技旗下軟件——億圖

金山軟件——WPS

功能區(qū)是一種新式方式，讓用戶能夠以最少的點(diǎn)擊次數(shù)，高效地完成他們的任務(wù)，從而提高了編輯的效率和愉快程度。

功能區(qū)可以同時(shí)代替?zhèn)鹘y(tǒng)的菜單欄和工具欄。功能區(qū)由選項(xiàng)卡和組組成，組是一組標(biāo)記的密切相關(guān)的命令。除了選項(xiàng)卡和組外，功能區(qū)還包含：

• “應(yīng)用程序”按鈕，其中顯示了一個(gè)命令菜單，這些命令涉及對(duì)文檔或工作區(qū)執(zhí)行某些操作，例如與文件相關(guān)的命令。
• 快速訪問工具欄，它是一個(gè)可自定義的小型工具欄，用于顯示常用命令。
• 核心選項(xiàng)卡是始終顯示的選項(xiàng)卡。
• 上下文選項(xiàng)卡，僅在選擇特定對(duì)象類型時(shí)顯示。始終顯示的選項(xiàng)卡稱為核心選項(xiàng)卡。
• 選項(xiàng)卡集是單個(gè)對(duì)象類型的上下文選項(xiàng)卡的集合。例如，由于對(duì)象可以有多個(gè)類型
• (具有圖片的表中的標(biāo)題是三種類型) ，因此一次可以顯示多個(gè)上下文選項(xiàng)卡集。
• 模式選項(xiàng)卡，是使用特定臨時(shí)模式（如打印預(yù)覽）顯示的核心選項(xiàng)卡。庫，這些庫是圖形呈現(xiàn)的命令或選項(xiàng)的列表?；诮Y(jié)果的庫說明了命令或選項(xiàng)的效果，而不是命令本身。 功能區(qū)內(nèi)庫顯示在功能區(qū)內(nèi)，而不是彈出窗口。
• 增強(qiáng)的工具提示，可簡(jiǎn)潔地解釋其關(guān)聯(lián)的命令并提供快捷鍵。它們可能還包括圖形和對(duì)幫助的引用。 增強(qiáng)的工具提示減少了對(duì)命令相關(guān)幫助的需求。
• 對(duì)話框啟動(dòng)器，是某些組底部的按鈕，用于打開包含與組相關(guān)的功能的對(duì)話框。

三、豐富的命令

豐富命令是指在使用功能區(qū)時(shí)，用戶可以直接看到并與命令進(jìn)行交互，而不需要額外點(diǎn)擊或打開功能區(qū)容器。

豐富的命令具有以下特征：

1、圖標(biāo)。所有命令都提供一目了然的圖標(biāo)，除非圖標(biāo)并不是大家所熟知。

這些命令非常廣為人知，因此它們不需要標(biāo)簽文字。

2、按鈕。命令的大小不是統(tǒng)一調(diào)整，而是根據(jù)其使用頻率和重要性進(jìn)行大小調(diào)整。

除了使最常用的命令更易于查找和單擊外，它還使它們更易于觸摸 。

在此示例中，最常用的按鈕比其他按鈕大。

3、動(dòng)態(tài)大小調(diào)整。豐富的命令控件調(diào)整自身大小以充分利用可用空間，而不是使用固定大小，在太小時(shí)截?cái)嗷蚴褂靡绯觥?/p>

4、拆分按鈕。拆分按鈕是在需要時(shí)合并命令的一組變體的好方法，同時(shí)保持最常用的命令的直接性。

在此示例中，“另存為”命令使用拆分按鈕，其中main按鈕執(zhí)行最常見的變體，菜單部分顯示具有命令變體的菜單。

5、豐富的下拉菜單和庫。下拉菜單、下拉列表和庫占用了溝通和區(qū)分選項(xiàng)效果所需的空間，通常使用圖形和文本說明。 類別用于組織大型選項(xiàng)集。

在這些示例中，單擊菜單按鈕會(huì)顯示顯示其效果的選項(xiàng)列表。

6、實(shí)時(shí)預(yù)覽。每當(dāng)用戶把鼠標(biāo)放在格式設(shè)置選項(xiàng)上時(shí)（WPS采用的是點(diǎn)擊），程序會(huì)立即顯示出該格式設(shè)置對(duì)文本的實(shí)際效果。

7、增強(qiáng)的工具提示。

提示清晰地解釋了與命令相關(guān)聯(lián)的內(nèi)容，并提供了快捷鍵。此外，它們可能還包括幫助圖形和引導(dǎo)動(dòng)畫。

增強(qiáng)的工具提示簡(jiǎn)潔地說明其關(guān)聯(lián)的命令

四、可發(fā)現(xiàn)性

功能區(qū)通過提供選項(xiàng)卡和組來幫助你組織命令，從而使其更易于發(fā)現(xiàn)和使用。

挑戰(zhàn)在于，讓用戶能夠輕松地根據(jù)選項(xiàng)卡和組的名稱找到他們需要的命令，而不會(huì)因?yàn)榛靵y或重復(fù)而感到困惑。

例如：應(yīng)該確保用戶可以通過一個(gè)簡(jiǎn)單、直接的路徑來執(zhí)行命令，而不是讓他們?cè)诓煌牡胤綄ふ彝粋€(gè)功能，或者需要重復(fù)多次點(diǎn)擊才能完成同一個(gè)任務(wù)。這樣可以提高用戶體驗(yàn)，避免混淆和不必要的復(fù)雜性。

通過多個(gè)路徑查找命令似乎是一種方便。但請(qǐng)記住，當(dāng)用戶找到他們要查找的內(nèi)容時(shí)，他們就會(huì)停止查找。用戶很容易認(rèn)為他們找到的第一條路徑是唯一的路徑，如果這條路徑效率低下，則會(huì)是一個(gè)嚴(yán)重的問題。

在此示例中，你可以通過“頁面邊框”命令更改段落邊框，即使“開始”選項(xiàng)卡上有一個(gè)更直接的路徑。如果查找段落邊框的用戶偶然發(fā)現(xiàn)了此意外路徑，他們可能很容易認(rèn)為這是唯一的路徑。

五、組

在確定組及其呈現(xiàn)時(shí)，需要考慮多種因素：

1、分類

盡管不同的程序可能有不同的功能和命令，但是一些常用的命令在許多程序中都是通用的。通過在不同的程序中以相同的名稱和相似的位置顯示這些命令，可以極大地提高用戶發(fā)現(xiàn)這些命令的能力。

2、數(shù)量

雖然一些組織結(jié)構(gòu)很好，但過多的結(jié)構(gòu)會(huì)使用戶更難找到命令。合理的組織結(jié)構(gòu)應(yīng)該既有足夠的詳細(xì)性，又不要過分繁瑣，以確保用戶能夠輕松找到他們需要的命令，而不至于造成混亂。

3、組名

良好的組名是指能清晰反映其命令或功能用途的名稱。

比如，你有一個(gè)組用于管理項(xiàng)目文件，那么給它起一個(gè)像”項(xiàng)目文件管理組”這樣的名稱就很合適，因?yàn)樗鞔_告訴你這個(gè)組是用來管理項(xiàng)目文件的。

4、瀏覽

雖然我們習(xí)慣從左到右閱讀，使得最左側(cè)的內(nèi)容首先顯眼，但實(shí)際上，選項(xiàng)卡標(biāo)題下方和內(nèi)容上方更容易被注意到。將最常用的組放在最突出的位置，并確保整 個(gè)選項(xiàng)卡中的組有邏輯流。

在此示例中，“字體”和“段落”組比剪貼板組更明顯，因?yàn)樗鼈兪菑奈臋n上移時(shí)眼睛首先看到的。

在此示例中，跟蹤（tracking）組受到最多關(guān)注，原因是突出顯示的“審閱”選項(xiàng)卡充當(dāng)焦點(diǎn)。

5、對(duì)比

當(dāng)命令看起來很相似時(shí)，用戶可能難以辨別它們。為了幫助用戶更輕松地識(shí)別命令組，可以采取使用不同形狀、顏色、大小的圖標(biāo)使它們更易于區(qū)分。

六、預(yù)覽

你可以通過使用各種類型的預(yù)覽來顯示執(zhí)行命令的結(jié)果。這些預(yù)覽能夠幫助用戶更有效地使用程序，減少嘗試和錯(cuò)誤的學(xué)習(xí)過程。

1、逼真的靜態(tài)圖標(biāo)和圖形

當(dāng)你打開“字體”下拉列表時(shí)，里面顯示的不是簡(jiǎn)單的文字列表，而是每種字體最終展示的樣子。

在此示例中，縮略圖展示了不同水印的外觀，讓用戶在選擇時(shí)可以直觀地看到每個(gè)水印的樣式。

2、動(dòng)態(tài)圖標(biāo)和圖形

這種修改后的圖標(biāo)和圖形，會(huì)顯示當(dāng)前狀態(tài)或執(zhí)行的操作。

舉個(gè)例子，如果你在編輯程序中修改了一些設(shè)置，現(xiàn)在想要將另一個(gè)項(xiàng)目設(shè)置成與上一次相同，這些圖標(biāo)和圖形會(huì)反映出當(dāng)前的設(shè)置狀態(tài)，幫助你在作出決定時(shí)更加明智。這樣的設(shè)計(jì)讓用戶更容易理解程序的狀態(tài)，同時(shí)也提高了操作的效率。

在此示例中，Microsoft Word更改樣式庫以反映當(dāng)前樣式。

在此示例中，Word更改文本突出顯示顏色和字體顏色命令以指示其當(dāng)前效果。

3、實(shí)時(shí)預(yù)覽

當(dāng)用戶把鼠標(biāo)移動(dòng)到格式設(shè)置選項(xiàng)上時(shí)，屏幕上會(huì)立即顯示出該格式設(shè)置的效果，而不是等到用戶真正應(yīng)用這個(gè)設(shè)置后才能看到效果。

在此示例中，“頁面顏色”命令通過鼠標(biāo)懸停時(shí)改變頁面背景色，讓用戶快速看到實(shí)際效果。

七、頁面縮放

縮放工具欄很簡(jiǎn)單：如果窗口太窄而無法顯示工具欄，則工具欄會(huì)顯示適合的內(nèi)容，并通過溢出按鈕訪問其他所有內(nèi)容。

工具欄使用溢出按鈕進(jìn)行縮放。

沒有默認(rèn)功能區(qū)大小。最小大小是單個(gè)彈出組圖標(biāo)。

謝謝大家觀看！

參考資料：

桌面應(yīng)用程序的設(shè)計(jì)基礎(chǔ)知識(shí) – Win32 apps | Microsoft Learn

設(shè)計(jì)考古(1)_工具類產(chǎn)品 Office – 知乎 (zhihu.com)