2022-6-14 博博
鍵盤，在很多人的眼中，就是一個信息錄入的硬件設備。但你卻不清楚完整的鍵盤當中，字符按鍵只占到了整個鍵盤數量的 60% （完整鍵盤共 108 鍵，字符鍵 65 鍵）
你會發現，鍵盤除了打字之外，還會有其他很多用途。快捷鍵，就是不可忽視的一部分。（注：完整的快捷鍵會包含，快捷組合鍵與快捷按鍵兩部分，文章就不做過多糾結，意在討論這樣的交互形式，這里簡單統稱為快捷鍵。）
無論是設計師常見的三件套：Photoshop、Sketch、Figma，還是很多協作類型的產品：Word、PPT。
快捷鍵，仿佛早已是許多產品的標配。但是我們在做 B 端設計時，又時常忽略掉快捷鍵這一特殊的交互形式。今天我們就來聊聊 B 端產品與快捷鍵之間的關系。
在實際的工作當中，如何設計快捷鍵？我會產生這些疑惑：
我們就帶著問題一起來了解快捷鍵之間的差異。
開始之前，還是先科普一下桌面端與移動端，雖然他們之間存在很多差異，比如，頁面布局、交互方式等等… 這些咱們以后再聊。但是今天想貼合主題，聊聊錄入設備之間的差異。
在移動端的設備當中，我們多數情況下，采取的是軟鍵盤的形式，也就是手機錄入是以虛擬鍵盤的形式存在。
這樣也就導致虛擬鍵盤存在一些常見問題
總結下來就是整體信息錄入效率低，準確率低。比如我們最常使用的復制粘貼，到了手機當中，只能夠通過點擊光標的方式來解決。對于桌面端鍵盤而言，由于我們錄入信息的方式是通過雙手與實體鍵盤進行交互，可以實現更多信息的點擊。因此快捷鍵就會有很大的發展空間，這時候就會很好奇，快捷鍵究竟是如何誕生的？
我們簡單回顧一下計算機發展的早期，發現快捷鍵設定其實是源自 “硬件設計上的無奈”。早在 1980 年，IBM 所研發的個人電腦 Acorn，在當時遇到了一個棘手的問題，在電腦產生系統故障過后，它都需要通過手動重啟，并且需要很長的時間來進行內存測試，驗證計算機是否出現問題。但在公司內部進行系統測試時，并不是需要這樣的一個機制。因此工程師 Bradley 在當時創造了一個快捷鍵：Ctrl+Alt+Del 可以在不需要內存測試的情況下將系統進行快速恢復重置。
我們現在回顧，當時作為工程師，他在快捷鍵的設定上也是進行了很多思考，因為 Ctrl+Alt 鍵靠得很近，但 Del 則在鍵盤上的另一邊，這樣可以避免一些用戶在日常使用的過程當中進行誤觸。
而后續 Windows 電腦遭遇藍屏死機，而 Ctrl+Alt+Del 這樣一組快捷鍵便留在很多人的心中。
隨著個人電腦的不斷發展，你會發現快捷鍵的設計也越來越復雜，因為我們想要了解如何設計快捷鍵，必須先知道，常見的按鍵分類有哪些？
目前共有 Windows MacOS 兩大操作系統，在快捷鍵的設定上也會有著許多差異化，文章部分會將 Win/Mac 的系統統一進行講解，大家可以優先看看關于兩個系統之間的映射關系：
想要知道我們快捷鍵的差異，我們必須了解每一個按鍵的基本定義：
Ctrl / Command
Windows 系統當中的核心快捷鍵，可以理解為是各項操作的快速觸發。
我們可以使用它去實現各種組合快捷鍵，比如使用 Ctrl + C（復制） Ctrl + D （創建副本），算是用戶使用最高頻的快捷鍵。
同樣，在 Mac OS 當中，你會發現 Mac 的 Control 幾乎很少使用，因為系統本身就沒有給它 “安排太多任務” 取而代之的是飽經風霜的 Command 鍵。
Command 作為 Mac 獨有的按鍵，它的地位幾乎等同于 Win 當中的 Ctrl，并且兩者的快捷鍵方式都極為類似，因此也就造成兩個系統當中的按鍵差異。
Shift
Shift 也叫上檔鍵，可將其意為連續的按鍵，因為在連續選擇時會用到，它的功能主要有兩點：
在中文輸入的場景下，可以組合按鍵進行中英文的切換
在文件選中的場景當中，對文件的內容進行快捷選擇的操作
Tab
Tab 也叫制表鍵，不過現如今已不再是制表的含義，更多可以為切換按鍵，比如我們經常使用 Command + Tab 來對軟件進行切換。其用途主要有兩點：
在信息錄入時，按下 Tab 鍵來實現字符的縮進
在表格頁面當中，通過 Tab 鍵實現對單元格的快速切換
Alt / Option
Win 系統當中的 Alt 與 Mac 系統的 Option 基本一致。他們的主要用途有兩點
WIN：呼出菜單或點擊按鈕的組合鍵
MAC：快速訪問系統偏好設置中某個選項的組合鍵
在我們的設計快捷鍵之前，需要考慮清楚是否真的需要快捷鍵。就像我們在網上沖動消費一樣，購買的東西總會有當時覺得有用，然后立馬吃灰的產品。所以明確需求的目的就顯得尤為重要。
因為 B 端產品存在太多產品類型，在每一個產品類型當中，我們也會有不同的使用場景。這里我總結了幾個維度去思考。
1. 高頻使用
俗話說得到，好鋼得用到刀刃上，快捷鍵的設定，一定是需要用戶使用頻率高才會有意義。因為快捷鍵的使用本身就會有使用門檻，如果你做在一些用戶本身就不會頻繁操作的地方，對于用戶而言感知并不強烈。其次你也不想自己花費了精力，到頭來設計思路并沒有落地。
2. 核心功能
這里的核心功能其實是針對不同的角色。比如一個在線教育的產品，老師需要每天在產品當中去點評同學們的作業，也就意味著老師需要高頻的在點評學生作業，這個時候其實作業點評就是老師的核心功能。那你對這個功能上的操作進行優化，大概率就不會存在太多問題。
比如我們以 figma 為例，如果它現在在 Darfts 首頁增加了很多快捷操作，如：Command + N 新建畫板 、Command+O 打開通知。
但是 Figma 并未對核心功能，編輯區域頁面當中添加快捷鍵，我想這對于很多人而言，就是一個糟糕的設計。
3. 沉浸場景
B 端產品的使用大致會分為三種狀態：暫留、沉浸、配置（這里就不展開講了）。而最常見的便是專注于用戶使用的沉浸場景，也就是說，我們必須要讓用戶在沉浸場景下使用產品，這些快捷鍵才會變得更加有意義。
沉浸及專注，專注就需要高效，因此高效使用快捷鍵就顯得合情合理。
當我們明確真的需要快捷鍵的訴求過后，我們可以去思考，究竟應該設計哪些快捷鍵？哪些操作是屬于高頻操作？是否會存在操作之間的先后順序？
首先可以通過實地觀察，先去判斷用戶在某一頁面當中，具體使用順序或者流程，然后通過流程圖將數據內容進行整理。這其實是我們設計快捷鍵的基礎依據。
然后通過對頁面當中不同操作進行數據埋點，能夠得到用戶具體的操作信息。通過這些數據信息，能夠保證我們在做的設計都是有理有據，而不是拍腦袋的自己隨意 YY 出來的。最后拿到數據進行分析，在數據當中并不能夠單純的去看它的點擊量，而是要深入了解這個數據它背后的意義是什么？
這也是我不建議初級的設計師去做數據埋點的原因。因為我見過有太多設計師拿到數據過后直接不分析上手就看，導致出現太多數據背后的問題。
在快捷鍵的設定，我們應該考慮避免與其他快捷鍵重復。想要解決這個問題，我們必須先搞清楚，產品究竟采取什么架構方式。通常會分為 BS 架構與 CS 架構。
這里簡單解釋一下 BS 架構與 CS 架構的區別
BS 架構：（Browser/Server,瀏覽器/服務器模式）web 應用，可以實現跨平臺，但是個性化能力低，響應速度較慢
CS 架構：（Client/Server,客戶端/服務器模式）桌面級應用，響應速度快，安全性強，個性化能力強，響應數據較快
可以簡單理解為，目前產品是否需要通過瀏覽器才能夠打開。需要瀏覽器打開，那就是 BS 架構，不然則反之只有我們確定了具體的產品架構之后，你才能夠知道你設定的快捷鍵是否與瀏覽器本身到快捷鍵有所沖突。因為瀏覽器自身的快捷鍵權限肯定是會高于你頁面當中的快捷鍵，所以在設計上我們需要格外留意。
這里總結了一份瀏覽器的快捷鍵匯總，可以通過這個方式避瀏覽器的踩坑
但客戶端的快捷鍵設定，相對會更加開放，因為客戶端不會受到瀏覽器的限制，在快捷鍵的設定的空間則會大很多
明確清楚上面的訴求與限制過后，接下來我們可以從三個方面，來對快捷鍵進行設定：
1. 語義法
在電腦快捷鍵設定的早期，最常使用的辦法便是通過翻譯英文單詞首字母，進而實現快捷鍵的設定。比如我們經常使用的 Command+D 進行復制，D 便是 Duplication 的首字母、Command+N 進行新建，N 便是 New 的首字母。這樣的設定方式其實源于國外，同樣也是我們日常設定最為常見的一種方式。
2. 流程法
流程法就是去思考整個快捷操作的具體流程，比如我們最常使用的 Command + C 與 Command + V 就是一個例子。
因為如果按照常規的設計思路，粘貼在大家的印象當中一定會是 Paste，但是由于復制、粘貼本身就是高頻操作，并且兩者按鍵相互關聯，再加上 P 也是 Paint 的縮寫，Command + P 有打印的含義，因此通過用戶使用流程上的思考，最后將粘貼放在字母 V 上面。Viscidity 的縮寫，它是一個名詞，具有粘聚性、黏性的意思。
3. 競品法
如果假設目前設計的產品當中已經存在許多競品，它們就已經有了相對應的解決方案，這個時候可以考慮借鑒直接競爭對手的按鍵設計，因為你可以通過這樣的競品設計，讓你的用戶的切換成本更低，也能夠讓他們快速上手。
舉一個例子，比如 Sketch 與 Figma，Figma 的出現本身就是與 Sketch 進行競爭，因此沒有必要在快捷鍵上進行特立獨行，反而會增加用戶的使用門檻。
既然上面講到了如何設計，咱們還是不得不提一提在 B 端產品當中，哪些地方可以使用快捷鍵？好方便在讀文章的同學們直接抄作業，用在自己的系統當中。
1. 詳情頁編輯
詳情頁幾乎是每一個 B 端產品必備的頁面。它能夠幫助用戶進行詳細數據的閱讀，其核心訴求會分為兩種：
對表格頁當中的信息不太清楚，想要通過詳情頁進行更為仔細的閱讀；
對存儲的數據有所質疑，想要更改幾條數據；
因此，分析完了這兩種情況過后，我們可以使用快捷鍵，去滿足用戶對詳情頁編輯的訴求，進而可以實現對某一個頁面的快速操作。具體做法我們可以按照上一章節講的，如何設計快捷鍵的思路。我也舉幾個例子
比如現在對紛享銷客這樣一款 CRM 產品的詳情頁進行編輯時，除了思考初級 B 端設計師需要處理的視覺部分之外，你還可以使用快捷鍵，將詳情頁的編輯，與按鍵的字母 “E” 進行綁定，這樣可以配合鼠標來完成頁面的快速操作，提高 “高級用戶” 的操作效率。
這樣的優化就算是完了么？
其實這也是市面上絕大多數教程不會涉及的點。因為他們缺乏 B 端的實際工作經驗。也就導致只會教大家如何依葫蘆畫瓢，教學員去實現某一個頁面的具體布局，根本不考慮實際的項目當中的各種訴求與邏輯關系。這也可能是我上課只喜歡去畫草圖的原因，因為 B 端的“形”很簡單，有太多的組件可以支撐你進行設計，但是 B 端的“意”則會過于復雜，很難理解。
說了這么多，我們來看看究竟應該如何進行優化？也就是在這個功能新增之下，還會有哪些存在的漏洞？
簡單列三點：
這樣不斷完善，設計方案才能更加完整。
大家要記住，雖然得到一個設計結論很簡單，但是 B 端系統本身就不是簡單去刪除列表，去增加更多視覺上的引導。而是你增加了一個功能模塊過后，有沒有考慮到它在整個產品當中的合理性，是否有具備思考完整的設計思考。不扯那么多了，我們繼續～
再舉兩個真實落地的例子：
1. 在網頁端的 B 站視頻播放頁面（你可以理解為是視頻的詳情頁），用戶可以通過點擊 W 為投幣、D 為彈幕開關、E 為添加收藏夾、F 為全屏播放，實現對視頻的快速操作。而投幣、彈幕開關、收藏夾、全屏播放都是屬于 B 站最為核心的功能操作，因此這樣的設計非常的贊。
但 B 站的處理，還是會有小小的瑕疵。會有很多用戶對于這樣的快捷操作并不知情，可以考慮在入口提示上，進行對應的簡單優化。當然這樣的產品還會有很多，比如 Youtube、抖音網頁版都采取了這樣的設計，大家可以自己去查看總結一下不同產品的特點。
2. Salesforce，還沒開始對它進行調研的時候，我其實就能夠猜到作為世界上如此出名的產品，肯定會有快捷鍵的設計。但隨著調研的深入，發現在早些年間，它并沒有進行快捷鍵的設計，因此受到很多用戶的 Diss。隨之便有人自行開發一款瀏覽器插件來實現對應的功能。
而在后續的產品迭代當中，SF 逐步更進了這一功能，通過快捷按鍵，可以實現多個功能。逐漸將快捷鍵的方式放在整個系統當中，得到更多人的認可。目前形成了這樣的一個完整快捷鍵體系。
在表格頁當中，我們最常使用的便是新建操作。同樣可以按照詳情頁的思路，將整個頁面當中的新建操作進行鍵盤按鍵綁定，實現快捷操作的效果。
比如在飛書管理后臺的成員與部門頁面當中，我是否可以通過點擊 N 實現快速添加成員的操作？通過這樣的方式就能夠保證，用戶的快速按鍵操作。其實這里還可以將問題再稍稍加深，我們是否還可以考慮一些新的方式？比如全局新建，在整個系統當中提供一個全局新建的入口，讓入口更為統一，甚至可以實現全局鍵盤操作的“夢想”。又或者是通過快捷鍵呼出全局搜索，進行實現對應的操作？類似于 Notion 這樣的產品，這些都是可以去思考的方向。
在 B 端產品當中，導航菜單的設計是最痛苦的一件事。因為一個員工，想要完成自己的工作，就必定會在不同的導航菜單之間進行來回切換。在 2022 年的趨勢這篇文章里也講到，越來越多的 B 端產品開始變得臃腫。也就意味著用戶需要不斷尋找、不停的切換導航菜單，來完成這個角色自身的工作，因此針對臃腫的 B 端產品，我們可以使用快捷鍵來實現導航菜單的切換。這里給到幾個產品的思路，大家可以學習借鑒一下：
比如常見的飛書，因為本身是 CS 架構（客戶端），因此可以通過組合鍵的形式，來實現對導航菜單的快速切換。
飛書通過按住 command + 1、2、3 … 來實現切換。
釘釘則在這部分就缺少了這樣的設計。而薪人薪事的做法則會有所不同，它的入口非常特殊，采取全局導航的形式（這個后面會單獨出導航菜單的文章來進行講解），將整個入口進行綁定，通過雙擊 command 對導航中心進行呼出，并且后續可以支持更多導航菜單的切換，這也是一個不錯的思路，值得大家借鑒。
在你的系統當中，一定會存在一些全局影響的功能。它會影響到系統當中的每一個角落。比如 CRM 系統里面的通訊錄、消息、郵件。它本身和主營業務差別不大，但是由于業務發展等其他關系，需要單獨處理。因此會有很多全局使用的功能，這時候便可考慮將其與快捷鍵進行綁定。比如明道云，因為在明道云的整體設計當中，消息、通訊錄都是游離產品架構之外的一些協作內容。因此名道云將其通過快捷鍵的方式進行查看，進而實現頁面的快速呼出，能夠加大用戶的使用效率
分享了過后，最后再嘮一嘮我的自己感受。其實快捷鍵是一個非常立竿見影的設計提升方式，我們除了去想清楚快捷鍵應該如何設計之外，更多還需要讓用戶能夠發現有這樣快捷鍵。雖然 B 端產品我們可以通過客戶培訓、新手引導、幫助文檔的方式來教會用戶，但是快捷鍵這樣的一個功能本身是針對中、高熟練度的用戶，也就意味著，你需要不斷的去培養用戶養成快捷鍵的習慣，這樣才能夠保證，快捷鍵能夠真正的被用戶所接受。
其實現如今出現了很多無障礙的設計，大多數情況下都是在討論如何脫離鼠標進行快捷的操作。其實比起無障礙，快捷鍵應該能夠出現在更多 B 端產品當中。
最后做個總結：
我們常見的常見快捷鍵會分為：Ctrl、Command、Shift、Tab、Alt、Option
如何設計快捷鍵？
首先要去判斷是否需要快捷鍵，共有三種判斷方法、高頻使用、核心功能、沉浸場景。其次要去歸納用戶的快捷鍵訴求，想清楚快捷鍵的使用場景，避免與其他軟件沖突。接著去想想究竟怎么設計快捷鍵？可以使用語義法、流程法、競品法。最后我們可以在哪使用快捷鍵，能不能抄一抄作業？可以在詳情頁編輯操作、表格頁新建操作、導航菜單的快速切換、以及全局的功能操作。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
