8個實用步驟,教你執行與落地一套設計系統,提升設計價值

1 評論 2366 瀏覽 10 收藏 17 分鐘

編輯導讀:隨著互聯網行業的發展,產品體驗的一致性和開發的效率越來越被重視,設計系統的出現就是為了解決這樣的問題。但在國內,設計系統這一塊還處于初級階段。如果做好了設計系統這塊的工作,是設計師體現自身價值的一個很重要的機會。

本文作者詳盡地分享了她們公司是如何一步一步的構建設計系統的,供大家一起參考學習。

設計系統現在是常用的設計手段,你可能經常能看到這個詞。我在之前做的一個web設計項目中,第一次接觸到“設計系統”。在 99.co 項目中中我僅與另外一位產品設計師合作,資源實在有限。不過我們認為設計系統非常重要,因為它能消除設計不一致、改善設計師和開發未來的工作流程。為了推動這個項目,我們必須要做更多的努力。

為了更好地理解,我在這里定義一下什么是設計系統——具有清晰的使用規范、可重復使用的組件庫,并在設計師和開發者之間共享。它需要標明組件應何時使用,包括隨時可調用的代碼。

我們的設計系統仍在迭代中,但我仍希望通過這篇文章,能把我們的經驗以及一些有用的技巧和工具分享給你。

步驟:

  1. 檢查現有組件
  2. 學習參考優秀的設計系統
  3. 列出組件表
  4. 計劃時間
  5. 完善組件
  6. 創建控件
  7. “設計”設計系統
  8. 設計系統落地

步驟1:檢查現有組件

為了全面了解我們要做的事,對產品中現有組件進行檢查非常重要。包括每個頁面上的每個元素。這是至關重要的一步,盡管很繁瑣乏味。為此,我們截了一些圖,并使用 Trello(https://trello.com) 對其進行整理。

Trello面板,每一列都是帶有標簽的卡片

每一列(從上到下) 代表我們網站上的一個頁面,例如主頁。每一列的頁面都被截圖,并組織成卡片。每張卡片都有標簽標記(右側的面板),這些標簽表示頁面中存在的每個組件。不同顏色的標簽代表不同組件。例如復選框、單選按鈕等是數據輸入的形式,它們用綠色標記。

通過顏色分類可以過濾出相同類型的組件

通過這種方式進行組織,我們可以輕松地搜索特定頁面,或者使用右側面板按組件進行過濾,并查看所有頁面上當前的用例。它還有助于發現設計不一致之處。

步驟2:學習參考優秀的設計系統

以下是一些標桿級的設計系統,我們將它們作為參考:

  • [Atlassian](https://atlassian.design/)
  • [Ant Design](https://ant.design/)
  • [IBM](https://www.carbondesignsystem.com/)
  • [Zendesk](https://garden.zendesk.com/)
  • [Workday](https://design.workday.com/)
  • [HubSpot](https://canvas.hubspot.co)
  • [Salesforce](https://www.lightningdesignsystem.com/)
  • [Shopify](https://polaris.shopify.com/)
  • [Bootstrap](https://getbootstrap.com/)
  • [QuickBooks](https://designsystem.quickbooks.com/)

我們想汲取這些出色的設計系統中的精華,看看它們是如何做的。下面介紹幾個我最喜歡的——Atlassian 和 Ant Design

Atlassian 設計系統

Altassian將其設計系統分為“品牌”,“營銷”和“產品”。由于不同方面的設計需要不同的準則,所以要滿足各方面的需求以確保公司的設計語言一致。例如,與“產品”相比,“營銷”在設計漂亮的搭配時需要更多的顏色,而”產品” 我們一般只需要一組固定的顏色來展示不同的組件狀態。Altassian還為每個組件標注了非常清楚的使用指引,包括不同的樣式和變化,還有使用案例。

Ant 設計系統

Ant Design 將其組件分為不同的部分,例如數據顯示,數據輸入,導航等等。這確實有助于組織和查找組件。它們在右上角展示這些錨點(譯者注:類似于組件的標簽),這樣用戶無需滾動到底就可以知道每個頁面的組件內容。每個組件的樣式和變化都預先展示,并且每個組件都是可交互的。代碼的提供也使開發人員可以快速獲得代碼,這是非常棒的用戶體驗!

步驟3:列出組件表

在學習了其他的設計系統后,我根據我們在Trello上的研究和篩選標簽,圈出了需要的模式和組件。這樣一來,我們就可以對需要走查的內容有一個大致了解,以便我們能夠時刻跟進并安排時間。

Google Docs上的跟進概述

我根據功能將組件分為以下幾個部分:按鈕、數據輸入、數據顯示、反饋和導航。我們會不斷修訂這個表,討論完一個就勾掉一個。

步驟4:安排時間

接下來,我們根據每個人的任務分工制定了每周時間表。這有助于使參與設計系統的每個人都了解最新的進度,并有助于資源分配。我們從Trello用例中最常用的組件開始。版式,顏色和布局是首要的,因為它們為后面要做的事奠定了基礎。

Google Sheet 上的時間表

日常工作之外的時間有限,我們爭取每周有兩到三次對設計系統的討論,每次大約兩小時。當然這是理想的情況。很多時候,產品設計師都被工作淹沒了,無法抽出時間。在少數情況下,我們能夠投入更多的時間來討論,并盡量彌補失去的時間。

除了每周討論之外,我們還在sketch上把組件作成控件,制作了設計系統的頁面,并讓前端人員來構建這些頁面。我們將根據我們的進展每周不斷更新時間表。

步驟5:完善組件

研究和討論的最終目的是完善組件,設計它們的屬性和狀態,并建立準則。每個組件我們都在Trello上回顧了它的使用案例,并研究最佳用法。

起初,我們在開會時研究組件。但是后來我們意識到研究并不需要兩個設計師都在場。事先各自用自己的時間研究,保證開會時的討論時間,這樣會更好。

Google Drive 里關于討論的文件

我們用Google Docs做了會議記錄,以便跟進決策,也能回顧我們是如何做出這些決策的。有了這些筆記,我們就會想起過去的思考過程和決策,以便更好地進行后續的決策。

步驟6:創建控件

隨著討論的深入,我們開始構建樣式規范。我創建了文本和圖層樣式庫,并在滿足其狀態和變化時對Sketch上的每個組件進行控件化。

Sketch上的文本和圖層樣式庫

Sketch上的組件庫

我們再一次梳理了內容,并參考其他的UI Kits,以比較命名方式。我意識到,實際上不存在完美的命名方式,我們應當找到適合我們的。隨著工具的不斷更新,我們還可能要相應地調整工作流程。

舉個例子,最近的sketch60更新,更新了組件面板和彈窗。我們之前的樣式庫命名方式是根據大小、字重、顏色、對齊方式和線條高度劃分多個層。在新版本的彈窗中,我們必須點擊很多次才能找到特定的樣式。

更新過的命名方式

為了適應這次更新,我拉平了命名結構,現在可以通過[size] [weight] 來搜索那些帶有或不帶默認行高的字體顏色,或通過[colour]來查看按大小和字重排序的此顏色的字體。我們的中性色色板的命名也從[Dark], [Mid] 和 [Light] 縮短為 [D],[M],和 [L],因為彈出框的空間有限。在未來,我預計將會有更多的變化,但總體來說,這些更新肯定會提高我們的效率。

下面是一些有用的文章:

  • 釋放SKETCH控件的全部潛能[Unleashing The Full Potential Of Symbols In Sketch](https://medium.com/sketch-app-sources/sketch-symbols-b36f7355414a)
  • 我們都在等待SKETCH更新[The Sketch Update We’ve All Been Waiting For](https://medium.com/ux-power-tools/the-sketch-update-weve-all-been-waiting-for-plus-a-brand-new-ux-power-tools-72c405fd490d)
  • Sketch58 智能布局[Sketch 58 — Smart Layout!](https://medium.com/sketch-app-sources/sketch-58-smart)
  • 在SKETCH中使用智能布局[Using smart layout in Sketch](https://uxdesign.cc/sketch-smart-layout-bfc8ceeda44c)
  • sketch60 新組件面板使用指南[Sketch 60 & New Components Panel — How to Use It?](https://medium.com/sketch-app-sources/sketch-60-new-components-p)
  • 如何在組件中使用樣式和控件[How to work with Styles & Symbols in Sketch Components Panel](

還有好用的sketch插件:

  • Find and Replace : 快速在圖層和控件中更改文本
  • [Find and Replace](https://github.com/mscodemonkey/Sketch-Find-And-Replace)
  • ?Shared Style Finder : 共享圖層或文本樣式搜索器
  • [Shared Style Finder](https://github.com/sonburn/shared-style-finder)
  • Sketch Runner : 用鍵盤更快的執行 sketch action(宏命令)
  • [Sketch Runner](https://sketchrunner.com/)
  • Symbol Organizer : 按字母順序排序控件,并按控件名分組
  • [Symbol Organizer](https://github.com/sonburn/symbol-organizer)

步驟7:“設計”設計系統

如上所述,我們希望將其他設計系統的精華納入我們的設計系統。在每個頁面的組件控件化之后,我為每個頁面設計了模型,然后給前端人員來實現這些頁面。

Sketch上的設計系統模型

我們很快就發現這并不理想。我們花了大力氣去做這些頁面,但資源實在有限。因此得有個工具來減少我們的工作量。以便可以將資源更好地分配給必要的事——那就是制作組件并在產品中實現它們。

找到一個可以集成到現有工作流程中的工具至關重要,版本控制、品牌定制等功能也很好。我們在 uxtools.co 看到了設計工具功能比較的表格。經過考量,我們決定使用Zeroheight.

Zeroheight設計系統

我在每個頁面中為不同的組件和其變化都設立了使用指南,并且通過插件將sketch控件直接導入zeroheight??梢允褂媒换ナ紿TML代碼段和storybook組件向觀看者顯示實時組件示例,開發人員還能調用API輕松與設計保持同步。

步驟8:設計系統落地

與工程師、產品經理和其他利益相關者的溝通在整個流程中都非常重要,尤其是設計的執行。為了實現設計系統,我們構建新的組件,將他們鏈到zeroheight,并替換現有的舊組件。

Google Sheets上的計劃表

我向數據分析師核對了最常訪問頁面的情況。由于這些頁面的流量最高,因此我們決定在不同階段更新這些頁面的組件。最初的計劃是每兩周進行一次更新。

然而作為一個初創公司,必須優先考慮做功能上的工作,我們無法按計劃堅持下去,而是做了妥協。我們正在做哪個頁面,就將新的組件替換到這個頁面上。

Zeplin上的整體風格指南

Zeplin上的連接組件

我們用于提高設計師和開發人員之間協作的另一個工具是Zeplin,它有 整體風格指南 和 連接組件 。正如上圖所示 ,我們將所有新的組件直接上傳到風格指南中,開發人員就能夠將他們的代碼庫和文檔來源(storybook或 github)鏈接到這些組件。這么做后,每當開發人員在Zeplin上檢查設計時,他們都可以查看這些組件的概述,并可以重復使用它們。

以上就是我們從0開始設計系統的方式。我們仍有許多工作要做,但是進展緩慢總比沒有要好。這是一個持續的挑戰,我們將不斷總結,以更好地完成需求的需求。萬事開頭難,一步一步來!

 

原文鏈接:https://uxdesign.cc/starting-a-design-system-in-a-start-up-3359f2d4784b

原作者:Ruiwen Tay;

翻譯:Scott;公眾號:彩云譯設計

本文由 @彩云Sky 翻譯發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

給作者打賞,鼓勵TA抓緊創作!
更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 厲害

    回復