Block Kit：Slack 對構建更好的協作 UI 的貢獻
已發表: 2022-03-10（這是一篇贊助文章。）在過去的幾年裡，公司的工作方式發生了重大轉變。 隨著越來越多的企業變得獨立於位置，協作工具已成為團隊開會和完成工作的標準方式。
也就是說，僅僅因為我們擁有集成了我們互聯業務流程和工具的協作應用程序，這並不意味著這種體驗總能帶來最佳效率或生產力。 為什麼？ 好吧，有時不友好的用戶界面會妨礙您。
這就是為什麼今天我要討論 Block Kit，它是 Slack 為構建更好的協作 UI 所做的貢獻。
對於那些構建了自定義 Slack 應用程序（用於應用程序目錄或內部用途）的人，這將是您對新設計工具的介紹。 對於那些沒有的人，沒關係。 有一些有價值的經驗教訓可以從這方面吸取，這些經驗教訓可以幫助人們打造一個可以改善協作的引人入勝的工作空間。
開發人員，你知道 Slack 一直在做什麼嗎？
自 2013 年推出以來，Slack 取得了長足的進步。最初是一個消息應用程序，現在已經發展成為一個強大的協作平台。
在撰寫本文時：Slack 每天有超過 1000 萬活躍用戶——他們生活在世界各地（準確地說是 150 多個國家）。
使用 Slack 的不只是個人——近 585,000 個三人或三人以上的團隊在該平台內進行協作。 財富 100 強公司中有 65 家也恰好在 Slack 上。
這一切都歸功於 Slack API，它為開發人員創建和發布可擴展 Slack 工作區功能的公開可用應用程序打開了大門。
這樣，Slack 用戶就不必在他們最常用的業務工具之間來回切換。 相關流程可能全部發生在 Slack 內部。
但是，有時，Slack 應用程序目錄中可用的內容不足以滿足您組織內部的需求。 您或許可以在您的業務工具與現有工具之間架起一座橋樑，但您也可能會找到構建自己的自定義 Slack 應用程序的理由。
介紹來自 Slack 的 Block Kit
事情是這樣的：雖然 Slack 成功地允許開發人員製作自己的應用程序以增強平台內的協作，但開發人員應該如何知道如何使用它創造良好的體驗？
直到最近，Slack 的 API 和應用程序目錄還提供了有限的靈活性和控制力。 正如平台總經理 Brian Elliott 所解釋的：
“今天，所有應用程序都被迫採用一組有限的方式來顯示豐富的信息。 如果您在 Slack 中查看並使用過所有不同的應用程序，那麼無論他們嘗試部署哪種功能，它們中的許多最終都具有相同的佈局。 實際上，您需要的是一組組件，這些組件可以讓您構建豐富的交互式顯示，讓人們更容易理解、消化和採取行動。”
因此，Slack 開發了 Block Kit。
Block Kit 是一個 UI 框架，使開發人員、設計人員和前端構建者能夠通過豐富、交互式和直觀的 UI 顯示他們的消息傳遞應用程序。 此外，通過提供一組可堆疊的 UI 元素或塊，Block Kit 現在為開發人員提供了對其應用程序設計和佈局的更多控制和靈活性。
注意：如果您希望看到 Block Kit 的實際應用，請加入即將到來的 Slack 會議“使用 Block Kit 構建”，您將在其中獲得現場產品演示，並了解自定義應用程序設計是多麼容易。
Block Kit 包含兩個關鍵組件：
1. 塊套件生成器
請注意此構建器工具與我們用於為客戶創建網站和應用程序的許多其他工具之間的相似之處：
建築組件在左側。 只需單擊您要包含的那個，然後觀看它被添加到中心的應用程序預覽中。
想要進一步定制？ 查看右側的文本編輯器。 雖然 Block Kit 提供了遵循設計消息應用程序的最佳實踐的預製元素，但如果您願意，您可以將它們製作成您自己的元素。
2. 塊工具包模板
雖然您當然可以自己從 Builder 製作消息傳遞界面，但我建議您也探索提供的模板：
Slack 團隊已經看到了真正有用的 Slack 應用案例。 不用說，他們知道您的組織可能想要利用哪些類型的東西來改善協作。
這就是為什麼您會發現已經為您構建的以下常見操作：
- 審查批准請求；
- 對新通知採取行動；
- 運行民意調查和監測結果；
- 進行搜索。
Guru 就是這樣一種工具，它利用 Block Kit 來改進其 Slack 應用程序：
Guru 在 Slack 中提供了數據庫搜索功能。 結果現在可以快速檢索並更清晰地顯示在 Slack 的前端。
構建更好的協作 UI 的關鍵
既然我們已經了解了 Block Kit 的未來發展趨勢，那麼我們需要談談它將如何幫助您創建能夠帶來更高效協作的應用程序。
塊
我最近談到了古騰堡的主題以及設計師如何利用它來發揮自己的優勢。 儘管新的 WordPress 編輯器顯然存在缺陷，但毫無疑問 WordPress 團隊為何做出改變：
塊構建器是網頁設計的未來。
“
我知道塊構建器往往是網頁設計師和 DIY 用戶的首選工具。 構建器允許可視化前端設計，並且通常包含豐富的自定義選項。
但 Block Kit 的作用遠不止於此，這意味著設計人員和開發人員都可以輕鬆構建自定義應用程序。
代碼
網站構建器和 Block Kit 構建器之間的關鍵區別在於編碼方面。
在大多數情況下，設計人員使用頁面構建器，因此他們不必為代碼而煩惱。 他們可能會添加一些自定義 CSS 類或將 HTML 添加到他們的文本中，但通常就是這樣。 開發人員不會那樣工作。
Block Kit 包括一個帶有預先編寫的 JSON 的面板，開發人員可以在準備就緒後將其複制並粘貼到他們自己的 Slack 應用程序中。 Slack 並沒有讓開發人員編寫自己的代碼，而是提供了利用速度和設計最佳實踐的代碼。
這使開發人員能夠專注於進行自定義，而不必從頭開始構建他們的應用程序。
一致性
當 Slack 用戶進入平台時，他們知道會發生什麼。 從工作空間到工作空間，每個界面都是相同的。
但是，當 API 允許開發人員構建應用程序以與這些空間集成時，就會存在引入不合時宜的元素的風險。 發生這種情況時，界面的不可預測性會給最終用戶帶來困惑和猶豫。 不合適的佈局選擇也會損害體驗。
Block Kit 使開發人員能夠使用經過嘗試和測試的可堆疊 UI 組件構建應用程序。 在已經建立的平台中定制體驗時，可能很難知道您能走多遠——或者它是否會奏效。 Slack 已經將這些問題排除在外。
間距
這就是傳統的 Slack 交易所的樣子：
它往往是單列的來回交換。 這對於協作簡單的 Slack 渠道非常有效。 員工關於任務狀態的消息。 客戶上傳丟失的資產。 首席執行官分享了提及該公司的新聞稿的鏈接。 但並非所有工作空間都那麼簡單。
Block Kit 可幫助您最大化和增強應用程序功能佔用的空間。 例如，Block Kit 使 Optimizely 等公司能夠以兩列格式顯示相關信息，以提高可讀性。
這確實是在團隊的 Slack 應用程序中共享相關詳細信息的更好方式。
豐富的互動
提升您的應用程序的另一種方法是將集成轉變為具有豐富交互的集成。
Blocks 是專門為增強 Slack 協作中最常用的元素而開發的。 例如：
- 使用截面塊更好地組織。
- 使用文本塊自定義消息的顯示方式。
- 使用適當大小的圖像塊，這樣您就不必擔心它們是否會正確顯示。
- 使用上下文塊顯示關於消息的署名或附加上下文（如作者、評論、更改等）
- 使用分隔塊來改善應用程序的外觀。
- 使用菜單選擇、按鈕選擇和日曆日期等操作塊為您的應用程序帶來更好的功能並使它們更直觀地顯示。
- 使用2 部分塊以獲得更清晰的佈局。
Doodle 有一個漂亮的例子，說明使用 Block Kit 可以通過豐富的交互來完成什麼：
如您所見，用戶可以像使用第三方日曆一樣有效地安排會議。 唯一的區別是他們現在可以在 Slack 工作區中完成所有這些工作。
包起來
協作是任何組織成功的重要組成部分，無論是 3 人團隊還是 300 人團隊都無關緊要。但一起工作和高效協作之間存在很大差異。
多虧了 Slack 的 API，開發人員創造了一些很棒的方法來將相關流程和工具集成到平台中。 多虧了 Block Kit，如果元素設計不足，這些外部貢獻不會破壞體驗。
憑藉直觀的塊構建功能、開發人員友好的編碼選項等，Block Kit 將幫助開發人員為 Slack 平台帶來更豐富的體驗和更好的協作。
最後要提一件事：
Slack 的 Frontiers 會議即將召開。 它將於 4 月 24 日至 25 日在舊金山舉行。如果您打算參加，請注意，開發者賽道將包括一整天的 Block Kit 培訓，包括研討會、新功能演示、教程以及一個 -一對一輔導。 如果您正在考慮 Block Kit，那麼這是您不容錯過的機會。