023 年 2 月 28 日
我對進入這個項目的鍵盤知之甚少。作為 Figma 編輯器可用性團隊的一名軟件工程師,我的日常工作通常專注于設計編輯器體驗。事實證明,鍵盤快捷鍵是其中的重要組成部分。這些預設組合鍵對于高效、直觀的工作流程至關重要,并且具有許多可訪問性優勢,例如可以更輕松地訪問菜單和功能。然而 Figma 的許多快捷鍵最初是基于美國鍵盤設計的,這意味著它們不適用于許多其他類型的鍵盤。
我們的團隊開始看到源源不斷的與快捷方式相關的錯誤報告,因為用戶在 Figma 中遇到指令,例如“按下? + \以切換 UI”——盡管他們的鍵盤沒有\(反斜杠)鍵——或者禁止人們進行光標聊天對話,因為它是他們不可能按/(正斜杠)來啟動消息。Figma 用戶熱衷于他們的工作流程,進而熱衷于他們的鍵盤快捷鍵。我們希望確保任何地方的每個人都能獲得相同的鍵盤效率。我們召集了一個跨職能團隊,開始致力于使 Figma 快捷鍵對國際鍵盤更友好,這一章程將帶我們踏上明年的曲折旅程。
當您按下任意鍵時,瀏覽器會向 Figma 標準發送KeyboardEvents有關按下哪個鍵的信息。我們收到 a 后的第一步KeyboardEvent是將其翻譯成我們的編輯可以解釋的內容。另外,我們在 JSON 文件中指定可能的鍵盤快捷鍵和它們觸發的操作。這些操作根據快捷方式本身是啟用還是禁用而有所不同,這取決于用戶和產品狀態、偏好、它們所在的產品、操作系統 (OS) 等方面。一旦我們收到用戶的按鍵操作,我們就會針對可能的快捷鍵列表運行它。如果匹配,我們執行關聯的操作(如果不匹配,則什么也不會發生)。Et voila ? 粘貼了一個框架,切換了 UI,出現了一個光標聊天氣泡。
從表面上看,似乎我們需要做的就是向 JSON 文件添加一些新的快捷方式定義。如果用戶使用瑞典語鍵盤,請為他們提供Meta + ?“Bring forward”而不是? + ]. 如果用戶使用韓語鍵盤,請為他們提供“切換 UI”的映射,?而不是? + \.
這是兔子洞開始的地方。
在德語鍵盤上,“減少文字粗細”的快捷方式是Meta + Alt + ?。看起來很簡單,但是當插入我們的鍵盤快捷鍵 JSON 時,這個特定的鍵盤快捷鍵不起作用。事實證明,當我們嘗試通過大寫來規范化快捷方式時,我們看到它"?".toUpperCase()變成了SS,在將單個關鍵字符轉換?為兩個時導致意外行為SS。最不直觀的是,這意味著"?".toUpperCase().toLowerCase()不給我們?,原始字符。
謹防!我們通過使用新的大寫 eszett 字符解決了這個問題,?謝天謝地,它在大寫時保持不變。
什么?一個新的大寫字母?2017 年,新的大寫 eszett 字符被德國拼寫委員會正式采用,盡管該字符在此之前已經存在于字體中。編碼語言似乎還沒有完全趕上來。
由于存在大量可能的鍵盤布局,我們希望首先支持用戶最常使用的鍵盤布局的快捷方式。通過桌面應用程序可以更輕松地收集此信息,我們可以在其中檢測操作系統鍵盤設置。但是,在瀏覽器上,我們最多只能根據涉及實驗性鍵盤 API 的啟發式方法進行猜測,這有其自身的局限性。以下是我們的啟發式方法的工作原理:此 API 告訴我們與當前用戶的每個位置鍵代碼關聯的字符,然后我們將其映射到已知的鍵盤布局。例如,我們可能會得到鍵盤代碼Quote具有?字符,并且結合其他此類映射,我們可以推斷用戶可能使用瑞典語鍵盤。
通過鍵盤檢測日志記錄,我們在 30 天內看到 Figma 上使用了超過 2500 種不同的布局!我什至不知道有這么多鍵盤布局,原來鍵盤布局一直有成千上萬種。Marcin 向我們介紹了這些具有百年歷史的 Remington 打字機布局,適用于國內、瑞士標準和瑞典語。在這個細節上放個大頭針,因為鍵盤檢測的困難稍后會回來。
將我們的檢測數據與論壇反饋帖子相結合,我們將我們的初始工作縮小到(不是很短)標準鍵盤的候選名單:德語、法語 AZERTY、日語、英國、瑞典、芬蘭、丹麥、挪威、意大利、西班牙語、西班牙語 LATAM 、中文、葡萄牙語和韓語。
確定鍵盤后,下一步是審核哪些鍵盤快捷鍵有問題,原因可能是缺少鍵、物理上無法訪問或與其他快捷鍵沖突。幾乎所有這些快捷方式都涉及符號字符(而不是羅馬字母),這減少了要調查的快捷方式的數量。
作為存在于瀏覽器領域(也存在于操作系統中)的圖形工具和文本編輯器——Figma 繼承了每個空間的所有快捷方式,其中許多已經相互沖突。在開發會影響用戶工作流程的快捷方式時,全面了解 Figma 在這些不同生態系統中的位置非常重要。例如,我們希望保持用戶可能已經從其他工具獲得的運動記憶,將我們的快捷方式與類似的操作(例如,復制、粘貼、縮放)對齊。同時,我們不僅需要避免現有 Figma 快捷方式之間的重復快捷方式沖突,還需要避免操作系統或其他主要桌面應用程序定義的快捷方式之間的重復快捷方式沖突。
此外,在將現有的美國 QWERTY 鍵盤快捷鍵調整為一系列新鍵盤布局時,還有許多其他注意事項:
我們的下一個產品問題之一是如何存儲用戶的鍵盤首選項。我最初的直覺是,與大多數偏好一樣,鍵盤布局偏好也應該為每個用戶分配。但鍵盤首選項不僅僅是一個軟件產物,它們與物理對象有著不可磨滅的聯系:鍵盤本身。因此,我們必須考慮同一用戶可能擁有多臺設備的情況,可能一臺在工作,一臺在家里,鍵盤布局各不相同。
我們決定將鍵盤布局偏好存儲在 device 上localStorage,以便不同的設備可以具有不同的默認 Figma 鍵盤布局——同時還將用戶偏好寫入數據庫。如果用戶清除了他們的瀏覽器緩存(包括localStorage),或者登錄到全新的設備,我們仍然可以從我們的后端加載他們最近的偏好。雖然這個存儲系統很復雜,但我們知道它會帶來更好的用戶體驗。
回到重新映射這些快捷方式的挑戰:在法語 AZERTY 鍵盤上,“Unindent text”的快捷方式是Meta + ^。更明確地說,如果用戶按下Meta + ^,我們希望他們的文本取消縮進,而不是輸出^字符。不幸的是,^是一個變音鍵,這意味著它在另一個字符之上添加了一個字形。當^在 AZERTY 鍵盤上按下時,瀏覽器會告訴我們,“這是一個死鍵”*,表示我們正在等待將其與另一個鍵組合,并向我們拋出一堆我們需要按順序處理的其他鍵盤事件以防止^出現。
但是,當然,瀏覽器是不一致的,特別是Safari 交換變音鍵的順序keydown和事件,導致我們在應該執行操作時compositionstart發出字符。^
因此,盡管 Chrome 對事件進行了排序:
Safari 命令它們:
我們依靠 keydown 事件來了解快捷方式是否被接受,并基于此,將拒絕input事件偵聽器中的字符。在 Safari 上,如果這些事件亂序,邏輯就會中斷。實際上,這意味著我們取消縮進的快捷方式在 Safari 上不起作用。
*除了我們的常駐鍵盤專家 Marcin:“死鍵”來自打字機世界,其中一個鍵會輸出重音,但不會推進馬車 - 因為它們沒有移動,所以它們是“死的”。正確的事件順序是通過先輸入一個死鍵來“組裝”一個字母,將重音放在頁面上,然后再在上面輸入一個普通字母。
在所有鍵盤上,“縮放重置”是Shift + 0.一個無害的快捷方式,除非您廣泛使用鍵盤上的小鍵盤。Shift與小鍵盤鍵組合使用會覆蓋 numlock,也許令人驚訝的是,這意味著“縮放重置”不起作用。Marcin在 2021 年發布了關于這個錯誤怪癖的推文,這是其他設計師/制造商幾十年前做出的決定的結果——簡而言之,這基本上就是鍵盤的故事。
一旦我們完成了對所有這些鍵盤布局的所有這些新鍵盤快捷鍵的支持,我們仍然勉強完成了一半。我們需要通知非 QWERTY 用戶他們現在有更多的鍵盤快捷鍵覆蓋范圍,而不打擾 QWERTY 用戶,因為他們沒有任何變化。此外,如果用戶更改了他們的物理或操作系統鍵盤布局,我們不想混淆為什么現在他們的 Figma 鍵盤快捷鍵與他們在指尖看到的內容不匹配。該團隊制定了幾個處理此類情況的流程圖,其中路徑分支基于 Figma 桌面應用程序與瀏覽器、用戶現有的 Figma 鍵盤布局首選項(如果有)以及用戶的系統鍵盤布局。
重新輸入用戶鍵盤布局檢測的不確定性。
在 Figma 桌面應用程序上,我們可以看到用戶的操作系統鍵盤布局作為他們的字符串名稱:com.apple.keylayout.ABCor00004009或org.sil.ukelele.keyboardlayout.armenianphonetic.armenian-phonetic。
鑒于這些信息,我們還不清楚應該向用戶推薦什么樣的 Figma 鍵盤布局。我們不得不忍受不確定性,其中明顯的匹配——com.apple.keylayout.US是 Figma 上的美國 QWERTY 布局,0000040C是 Figma 上的法國 AZERTY 布局——可以用來幫助引導用戶的 Figma 鍵盤布局偏好,但否則我們會退回到什么都不做. (甚至這也有它的缺陷:在這個項目的中間,Apple 改變了它的一些日文布局的名稱,這打破了我們的本地內部映射。
具體來說,變成了 。這導致我們切換到前綴匹配com.apple.inputmethod.Kotoeri.Japanese,com.apple.inputmethod.Kotoeri.KanaTyping.Japanese.Katakana雖然仍然不完美,比精確的字符串匹配要好。)
在瀏覽器上,這個決策樹變得更加模糊,因為在實際檢測用戶的鍵盤布局方面存在挑戰。我們不僅因為 KeyboardLayout API 并非在所有瀏覽器上都可用而獲得較少的覆蓋,而且彌合該數據與實際布局之間的差距也是一個不完美的過程。在瀏覽器上,我們根本無法通過這種方法檢測到幾種布局。
更復雜的是,在操作系統級別定期和頻繁地在羅馬字符鍵盤布局和非羅馬字符布局之間切換是一種常見模式。例如,對于日本用戶來說,在一個會話中多次在日語和 ABC 布局之間切換是很常見的,同時使用相同的物理鍵盤。您的鍵盤快捷鍵可以使用與您的文字不同的語言;并非所有鍵盤布局更改都需要更改 Figma 鍵盤布局設置。
這是一個秘密:我們非常接近推出一個國際鍵盤快捷鍵支持版本,該版本帶有一個選項,可以在檢測到系統鍵盤更改時自動更新用戶的鍵盤布局。但是,所有上述關于我們的鍵盤檢測技術有多直接的挑戰讓我們停下來思考我們實際想要完成的事情。最后,我們放棄了這個想法。最好的情況是,它會在人們切換鍵盤布局時提醒他們,最壞的情況是,會導致他們的設置發生意外更改。我們對我們的入職和鍵盤檢測決策樹進行了幾次迭代,旨在盡可能減少干擾。
我們最終的設計風格?在設置窗格中添加鍵盤布局的可視化。有大量的鍵盤布局(并且可以為那些喜歡的人定制),所以僅僅通過名稱來識別一個并不總是那么容易。我們的解決方案:繪制所有支持的 Figma 鍵盤布局圖,從而為人們提供一種直觀的方式來確認他們的 Figma 鍵盤與他們的物理鍵盤相匹配。
好的,現在讓我們Shift + -(“縮小”):在 11 月,我們為一組非美國 QWERTY 鍵盤提供了鍵盤快捷鍵支持。我們從兔子洞的另一邊出現了。話雖這么說,這項工作永遠不會完成!我們繼續添加新的快捷方式,改進現有的快捷方式,并添加護欄以防止回歸。我們的鍵盤布局覆蓋范圍遠非全面,我們歡迎您通過此 Google 表單提出請求。
非常感謝整個團隊:Marcin Wichary(設計師和常駐鍵盤專家)、KC Oh(產品經理)、Rachel Miller(工程經理)、Sula Yang(產品營銷經理)和Michael Feldstein(工程師)。
作者:Dorothy Chen - Software Engineer
出處:https://www.figma.com/blog/behind-the-scenes-international-keyboard-shortcuts/
產品功能概覽
CS82U PS/2-USB KVM多電腦切換器是一套桌面式控制設備,其能讓用戶從單一KVM控制端(PS/2或USB接口的鍵盤、鼠標與VGA顯示器)訪問2臺電腦。CS82U擁有ATEN的視頻動態同步顯示(Video DynaSync?)技術,能避免開機時會產生的顯示器顯示問題,并保持顯示器的高清分辨率。
CS82U安裝簡易且快速,僅需將線纜連接至適當的連接端口,不需設定或安裝軟件,且不會有不兼容的問題;此外,CS82U可直接擷取鍵盤輸入信號,能支持跨平臺的運作。
主要功能
1. 一組PS/2-USB VGA控制端能管理2臺VGA接口的電腦
2. 雙接口–支持配備PS/2或USB鍵盤與鼠標的電腦
3. 可通過前面板按鍵、熱鍵與鼠標切換電腦
4. 跨平臺支持–Windows, Linux, Mac與Sun
5. 高視頻分辨率–2048 x 1536; DDC2B
6. 視頻動態同步顯示(Video DynaSync?)技術–ATEN獨家技術能避免開機會產生的顯示器顯示問題,并在切換連接端口時保持最佳顯示器顯示分辨率
7. 控制端鼠標端口仿真/by pass功能,可支持大多數的鼠標驅動程序與多功能鼠標
8. 支持與仿真Mac/Sun鍵*
9. 支持多國語言鍵盤–英文、日文與法文
10. 支持游戲鍵盤
11. 自動掃描功能可監控所有電腦
12. 支持固件更新
13. 無須外接電源
* 1. PC鍵盤組合可仿真Sun/Mac鍵盤
2. Mac/Sun鍵盤僅能與Mac/Sun電腦搭配使用
應用場景
1、 工業設計工作室
2、 游戲設計工作室
連接拓撲圖