編輯導讀：職場工作中，熟悉快捷鍵能夠幫助你更快地處理事情，但同時，它也是帶有一定門檻的操作。B端産品需不需要設計快捷鍵？如果要，怎麼設計？本文作者根據自身工作經驗，給出了一些方案，一起來看看吧。
鍵盤，在很多人的眼中，就是一個信息錄入的硬件設備。但你卻不清楚完整的鍵盤當中，字符按鍵 隻占到了整個鍵盤數量的 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 的系統統一進行講解，大家可以優先看看關于兩個系統之間的映射關系：
想要知道我們快捷鍵的差異，我們必須了解每一個按鍵的基本定義：
Windows 系統當中的核心快捷鍵，可以理解為是各項操作的快速觸發。我們可以使用它去實現各種組合快捷鍵，比如使用 Ctrl C（複制） Ctrl D （創建副本），算是用戶使用最高頻的快捷鍵。同樣，在 Mac OS 當中，你會發現 Mac 的 Control 幾乎很少使用，因為系統本身就沒有給它 “安排太多任務” 取而代之的是飽經風霜的 Command 鍵。
Command 作為 Mac 獨有的按鍵，它的地位幾乎等同于 Win 當中的 Ctrl ，并且兩者的快捷鍵方式都極為類似，因此也就造成兩個系統當中的按鍵差異。
Shift 也叫上檔鍵，可将其意為 連續 的按鍵，因為在連續選擇時會用到，它的功能主要有兩點：
Tab 也叫制表鍵，不過現如今已不再是制表的含義，更多可以為 切換 按鍵，比如我們經常使用 Command Tab 來對軟件進行切換。其用途主要有兩點：
Win 系統當中的 Alt 與Mac 系統的 Option 基本一緻。他們的主要用途有兩點
在我們的設計快捷鍵之前，需要考慮清楚是否真的需要快捷鍵。就像我們在網上沖動消費一樣，購買的東西總會有當時覺得有用，然後立馬吃灰的産品。所以明确需求的目的就顯得尤為重要。因為 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 架構，不然則反之。
隻有我們确定了具體的産品架構之後，你才能夠知道你設定的快捷鍵是否與浏覽器本身到快捷鍵有所沖突。因為浏覽器自身的快捷鍵權限肯定是會高于你頁面當中的快捷鍵，所以在設計上我們需要格外留意。
這裡總結了一份浏覽器的快捷鍵彙總，可以通過這個方式避浏覽器的踩坑。
但客戶端的快捷鍵設定，相對會更加開放，因為客戶端不會受到浏覽器的限制，在快捷鍵的設定的空間則會大很多。
三、快捷鍵的設定明确清楚上面的訴求與限制過後，接下來我們可以從三個方面，來對快捷鍵進行設定。
在電腦快捷鍵設定的早期，最常使用的辦法便是通過翻譯英文單詞首字母，進而實現快捷鍵的設定。比如我們經常使用的 Command D 進行複制，D 便是 Duplication 的首字母、Command N 進行新建，N 便是 New 的首字母。這樣的設定方式其實源于國外，同樣也是我們日常設定最為常見的一種方式。
流程法就是去思考整個快捷操作的具體流程，比如 我們最常使用的 Command C 與 Command V 就是一個例子。因為如果按照常規的設計思路，粘貼在大家的印象當中一定會是 Paste ，但是由于 複制、粘貼 本身就是高頻操作，并且兩者按鍵相互關聯，再加上 P 也是 Paint 的縮寫，Command P 打印的含義，因此通過用戶使用流程上的思考，最後将粘貼放在字母 V 上面。Viscidity 的縮寫，它是一個名詞，具有粘聚性、黏性的意思。
如果假設目前設計的産品當中已經存在許多競品，它們就已經有了相對應的解決方案，這個時候可以考慮借鑒 直接競争對手 的按鍵設計，因為你可以通過這樣的競品設計，讓你的用戶的切換成本更低，也能夠讓他們快速上手。舉一個例子，比如 Sketch 與 Figma ，Figma的出現本身就是與 Sketch 進行競争，因此沒有必要在快捷鍵上進行特立獨行，反而會增加用戶的使用門檻。
四、在哪使用快捷鍵既然上面講到了如何設計，咱們還是不得不提一提在B端産品當中，哪些地方可以使用快捷鍵？好方便在讀文章的同學們直接抄作業，用在自己的系統當中。
詳情頁幾乎是每一個B端産品必備的頁面。它能夠幫助用戶進行詳細數據的閱讀，其核心訴求會分為兩種：
這樣的優化就算是完了麼？
其實這也是市面上絕大多數課程不會涉及的點。因為他們缺乏B端的實際工作經驗。也就導緻隻會教大家如何依葫蘆畫瓢，教學員去實現某一個頁面的具體布局，根本不考慮實際的項目當中的各種訴求與邏輯關系。
這也可能是我上課隻喜歡去畫草圖的原因，因為 B端的“形”很簡單，有太多的組件可以支撐你進行設計，但是B端的“意”則會過于複雜，很難理解。
說了這麼多，我們來看看究竟應該如何進行優化？也就是在這個功能新增之下，還會有哪些存在的漏洞？
簡單列三點：1.在用戶進入到詳情頁，但并沒有編輯權限時，點擊了按鍵 E 應該怎麼辦？2.在整體的頁面當中，就隻綁定編輯操作嗎？其他操作需要綁定按鍵嗎？如果需要你會怎麼設計？3.讓用戶知道快捷鍵的存在？是簡單的信息外漏？還是會有一整套 “機制” 來去輔佐進行解釋。
這樣不斷完善，設計方案才能更加完整。大家要記住，雖然得到一個設計結論很簡單，但是 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
如何設計快捷鍵？首先要去判斷是否需要快捷鍵，共有三種判斷方法、高頻使用、核心功能、沉浸場景其次要去歸納用戶的快捷鍵訴求想清楚快捷鍵的使用場景，避免與其他軟件沖突接着去想想究竟怎麼設計快捷鍵？可以使用語義法、流程法、競品法。
最後我們可以在哪使用快捷鍵，能不能抄一抄作業？可以在詳情頁編輯操作、表格頁新建操作、導航菜單的快速切換、以及全局的功能操作。
CE青年，CE青年，人人都是産品經理專欄作家。專注B端設計領域，一個2B行業的2B設計師。
本文原創發布于人人都是産品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議。
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
