跳過導覽
#使用Sketch製作

打造更優異的產品:Sketch 如何協助 Salesforce 維護其業界領先的設計系統

我們與 Salesforce 團隊討論了 Assistants 和大規模設計,以探索優良設計系統的關鍵。

一個好的設計系統能讓每個人的工作更輕鬆。它能提供設計師在核准架構內工作所需的元素和指導方針。它能協助開發人員使用可預測且一致的元件。它還能協助企業更快地設計和建構新產品,同時提供一致的使用者體驗。

如果您了解設計系統,您可能也知道 Salesforce。Salesforce 的 Lightning Design System 是業界的領導者,它擁有數千個元件、清晰的說明,以及關於顏色和尺寸的明智且經過深思熟慮的決策。此外,它還附帶一個 Sketch 元件庫,因此使用起來非常簡單。

Lightning Design System 自 2015 年推出以來已經有了很大的發展,但在與系統的資深產品經理 Kirupa Chinnathambi 交談後,很明顯地,其核心目標至今仍然不變。他說:「正如 Lightning Design System 的創始工程師之一 Stephanie Rewis 所描述的,最初的目標是提供團隊一種可擴展且可維護的方式,以採用我們最新的使用者體驗指導方針。」對團隊而言,這意味著完善的文件、大量的視覺資產、強大的溝通管道以及整個生態系統中的回饋循環等等。

A screenshot of the Lightning Design System homepage.

Lightning Design System 首頁

Kirupa 繼續說道:「如今,我們把這兩個目標及其產出視為理所當然。但在 Lightning Design System 剛上線時,團隊實際上是在幾乎沒有前例可參考的情況下開創了新局面。」如今,團隊不斷地改進 Lightning Design System 的功能,並將這些改進建立在研究、客戶回饋、遙測和產業趨勢的基礎上。但這兩個最初的目標始終是首要之務。

但還有另一個關鍵因素使 Lightning Design System 取得如此巨大的成功,那就是人,而非設計。

使其個人化

Kirupa 表示:「對我們來說,最重要的一點是與使用我們的設計系統建構使用者體驗的團隊保持良好的關係。」對於 Lightning Design System 來說,這包含了 Salesforce 內部團隊(負責改進公司的各種產品)以及使用該平台開發自身解決方案的外部設計師和開發人員。

「對我們來說,最重要的一點是與使用我們的設計系統建構使用者體驗的團隊保持良好的關係。」

「在我們龐大的生態系統中,直接和間接地保持密切溝通是一項耗時的工作。但這也非常值得,因為它能確保我們將時間花在建構正確的事物上。」

這些關係也為團隊帶來了另一個寶貴的益處:提供幕後 Einblicke,了解設計和工程的角色是如何不斷發展的。「我們得到了一個更準確、虛線式的路線圖,讓我們可以在其中發揮創意來填補,」Kirupa 解釋道。「我們對設計和開發工具的投資(這對於設計系統團隊來說相當獨特)就是我們如何以有針對性的方式應對這些見解的一個例子。」

對 Salesforce 來說,這些工具包括一個強大的 Sketch 外掛程式、專用的 UI 設計套件,以及最近推出的新助手 — Lightning Design System Linter。

規則制定就是要遵守

當我們在 Sketch 68 中推出助手時,我們希望幫助您發現文件中存在的問題,與設計系統保持一致,並準備好您的檔案以進行協作。對於 Salesforce 來說,建立一個幫助使用者遵循 Lightning Design System 規則的助手是不費吹灰之力的。

「在我們龐大的生態系統中保持溝通非常耗時。但這也非常值得,因為它確保我們將時間花在構建正確的事物上。」

Lightning Design System 的首席軟體工程師 John Earle 表示:「定義使用系統的規則非常重要,無論是在設計端還是工程端。」但對於 Salesforce 團隊來說,讓這些規則易於遵循同樣重要。

他繼續說道:「對於像 Lightning Design System 這樣龐大的系統,即使是經驗豐富的 Salesforce 設計師也很容易使用與權杖不相符的顏色值或文字大小。」這些小錯誤會產生連鎖反應,導致程式碼中出現硬編碼值。而且因為之後很難更改這些值,所以它會導致最終使用者的體驗不一致。

在 Sketch 文件中使用 Lightning Design System Linter 非常簡單。新增後,它會在背景中運行,如果您的設計有任何方面不符合 Lightning Design System 的規則,它會顯示通知。

John 繼續說道:「讓使用者了解這些規則,並確保這些規則得到執行,與規則本身一樣重要。我們的大多數規則都直接存在於系統中,位於中繼資料中。API 會發佈這些規則,這就是為什麼我們可以構建和使用執行工具,例如我們的 SLDS Validator,以及現在的 Lightning Design System Linter。」

家族的一份子

當與 Lightning Design System 的 Sketch 外掛程式、Sketch UI 套件,以及 Salesforce 提供的字體、顏色和圖示結合使用時,這是一個非常強大的組合。您不僅擁有設計所需的所有元件和素材,還擁有關於如何正確使用它的資訊,以及一個助手來告訴您是否犯了錯誤。

Kirupa 表示:「我們的設計系統的受眾涵蓋了所有技能水平,從設計師、開發人員和產品經理,到管理員和『非專業』設計師,設計只是他們眾多角色之一。最令人欣慰的是看到我們所有這些不同技能的客戶使用我們提供的指南、工具和現成解決方案,將他們自己的使用者體驗變為現實。」

對於使用者來說,這一切都意味著,無論您是否將所有時間都花在 Sketch 上

A screenshot showing Salesforce’s Lightning Design System plugin being used in Sketch.

或者您是否喜歡撰寫程式碼

A screenshot of someone working on Salesforce content using a code editor.

無論您如何工作,Lightning Design System 都可以幫助您(借用公司的使命宣言)構建美觀、高效能且易於存取的產品體驗。現在,所有這些都由一個強大的助手提供支援。

助手的簡潔性

在我們讓 Salesforce 團隊離開之前,我們想詢問他們構建 Lightning Design System Linter 的經驗。我們的團隊設計的助手易於建立,他們的辛勤工作是否得到了回報?

「建構我們的 Assistant 真是太棒了!」John 笑著說。「設定非常快速 — 我在幾分鐘內就啟動並運行了我的第一個規則。我喜歡 context 物件讓我輕鬆存取文件屬性,這樣我就不需要層層挖掘才能找到我需要的東西。Typescript 環境幫助我遵守正確的介面,並在 VS Code 中以自動完成功能引導我。最重要的是,我可以在開發過程中讓 Jest 監控變更,這樣我就不需要手動重新編譯程式碼。開發體驗有完善的文件記錄且非常現代化 — 工作起來很愉快。」

「建構我們的 Assistant 真是太棒了!開發體驗有完善的文件記錄且非常現代化 — 工作起來很愉快。」

能從像 Salesforce 這樣規模龐大且成功的團隊聽到這樣的回饋真是太好了。但这並不是他們在 Sketch 中進行設計驗證計畫的終點。「我們在 Assistant 的初始版本中真的只是觸及了皮毛,」John 說。「未來我們希望驗證圖層之間和圖層內部的間距。我們也希望將 Assistant 連接到我們的 Lightning Design System Plugin,以便為工程師生成規格。這些規格將會參考設計系統的 token 值和元件藍圖,這樣工程師就不需要費心尋找他們需要使用的東西。」

展望未來

除了 Assistant 之外,Salesforce 的未來一片光明。雖然 Kirupa 不能透露太多他們的計畫,但他還是分享了一些小道消息。「我們將繼續投資於過去一年我們一直在積極討論的重要領域,包括指導和文件工具支援、更豐富的元件樣式(透過樣式鉤子)、無障礙支援(包括 WCAG 2.0 和 2.1)、行動裝置友善的增強功能改進的色彩系統等等。」

但對 Kirupa 來說,比這些未來計畫更令人興奮的是看到人們如何使用 Lightning Design System 來創造出驚人的作品。有時,他們的作品遠遠超出了團隊的預期。「我最喜歡的一個很酷的故事是,有人在 Dreamforce 的攤位上跟我們說明他們如何使用設計系統來建構一個虛擬實境體驗,以瀏覽他們的數據,」他笑著說。「我常常在想他們是不是來自未來!」

您可能也喜歡

免費試用 Sketch

無論您是 Sketch 的新手,還是回來看看有什麼新功能,我們都會讓您在幾分鐘內設定好並準備好開始最佳的工作。

免費開始使用
免費開始使用