搭建設計系統:Lyft 團隊如何定義產品語言與組件庫

0 評論 2910 瀏覽 6 收藏 22 分鐘

編輯導讀:隨著互聯網行業發展,設計系統這一概念越來越熱門。通常設計系統由使用指導文檔和可復用的組件庫組成,對于定調產品設計語言和提升生產效率都極具意義。但設計系統的搭建并不是一件容易的事,本篇文章展現了Lyft 團隊的設計師搭建其設計系統的方法論以及一些小技巧,能夠對各團隊搭建自身設計系統時帶來一定的幫助。

2019 年底,我協助將 Lyft [1] 全部的設計系統從 Sketch 移動到 Figma 。具有 “諷刺” 意味的是,在離開 Airbnb 前,其設計系統的遷移也是我負責的最后幾個項目之一。這兩次經歷幫助我意識到一些在 Figma 中進行共享庫( Shared Library )設計時每個人都該考慮的基本問題。

([1]Lyft 是美國一家網約車公司,于 2012 年創立,類似于 Uber、滴滴)

在這篇文章中,我將介紹在創建多個 Lyft 產品語言和組件庫時,自己運用的一些優秀案例。最后,我還將介紹一些有用的小技巧,幫助各位對設計系統進行高效維護。

一、體系理念:系統中的秩序性

當我們開始著手在 Figma 中創建系統時,需要先退一步,通過幾個例子重新評估 Sketch 中已做的工作,并重新審視此前確定的?布局視覺層次結構?與?命名規則。我們意識到,為了在這些新的庫中建立堅實基礎,必須花時間在系統中再創建一個可適用于文件中每個元素的子系統

左圖為輪播頁面組件的主要組件,右圖為該組件的內部嵌套組件。需要補充的是,文件的畫布區域還存在 #F4F4FA 的背景填充。

我們使用可視層次結構( Visual hierarchy )來設置每個組件頁面,以幫助區分主要組件和內部嵌套組件。所有主要組件都放置在內部輪廓為 4px 且沒有背景填充的框架中。這些框架充當組件標簽紙。

內部嵌套組件?放置在白色背景的框架里。通過顯示所有內部組件,使維護人員可獲取到主組件內部可配置項的快照。這些內部嵌套組件的作用是 讓用戶能夠靈活配置內部嵌套組件?,以此重新配置主組件來達到最終所需的形式。同時內部嵌套組件能促進該主要組件的通用性,提升其維護與使用的效率性。

填充系統語言

在每個框架中,都使用了特定的邊距。建立邊距系統的好處是它可以統一畫布上的所有元素之間(從一個頁面到另一個頁面,從一個庫到另一個庫)的視覺效果。

我們組件庫的邊距系數包括:

  • 60px:內部框架間距(頂部,右側,底部和左側)
  • 40px:框架標題到第一個主要組件之間
  • 24px:框架標題到字幕之間(可選)
  • 24px:垂直方向的主要組件之間
  • 40px:水平方向的主要組件之間

圖層從上到下視覺上重新排列

通常在 Figma 中,新創建的圖層將默認創建在當前圖層上方。而將圖層根據正常的視覺框架層次從上到下、從左到右重新排列是一件繁瑣的任務。

但在管理大量主要組件和內部組件時,以這種方式排列圖層能幫助維護人員快速瀏覽有時比較混亂的畫布

焦點緊湊型按鈕的命名規則

與用戶在 Slack[2]上共同進行快速調研后,我們發現他們中的大多數人使用 資源面板( Assets Panel )來搜索和發現組件。因此組件的命名方式對這個工作流程就變得十分重要。

([2]Slack 是一款企業協作應用軟件,集合聊天群組、大規模工具集成、文件整合以及統一搜索功能于一體。允許團隊和企業通過群組進行溝通,有點類似國內的釘釘和企業版微信。Slack 目前的日活躍用戶數已突破 1000 萬大關,付費人數已達 8.8 萬人,且它的用戶中有 65 家是來自財富 100 強的公司。)

我們創建了以下應用于所有組件的命名結構:

文件名稱 / 頁面名稱 / 框架名稱 / 組件名稱(變量、樣式、類型和狀態)

其中:

  • 文件名稱( file name )是特定庫的名稱,用戶需要在資源面板中啟用該名稱的庫才能使用其模型文件中的組件(例如,核心 UI 組件( Android / iOS ),核心 UI 組件( Web ), 核心用戶界面顏色等)。
  • 頁面名稱( page name )是組件的名稱(即 “輪播頁面指示器( Carousel Page Indicator )”,“按鈕”( Button ),“列表項( List Item )等”。
  • 框架名稱( frame name )是組件的最高級分組,通常是按大小命名(即按鈕的 4 種大小:Focus ,Focus Compact ,Drive 和 Drive Compact )。
  • 組件名稱( component name )是主要組件及其變體的名稱。由于變體的數量眾多,我們使用反斜杠(/)將它們按照不同的類型定義并分類,例如按 “狀態” 等。事實上即使這些變體被放在更多的類目里,也有助于相似變體組件的存儲。它們更容易在「實例」下拉列表中靈活切換,或者更容易在「資源」( Assets ) 文件夾中查找。

「實例」下拉列表中的文件夾顯示結構

二、更具靈活性的組件

創建原子元素( atomic elements )是設計系統的基礎。我們將 Lyft 的產品語言分解為原子元素,然后用于創建特定的組件。這些內部嵌套組件(即前文的原子元素)有助于大型團隊之間保持設計的一致性(例如按鈕這類原子元素)以及降低維護成本,尤其當這些內部嵌套組件在多個復雜組件(例如文本字段,文本區域,下拉列表等)之間共用時。

列表項組件包括 3 個操作區域:開始區,中間區和結束區

這個示例展示了內部組件是如何構成列表項組件的。我們為該組件設置了多個區域,以便對其進行重新配置從而創建不同的變體。在每個區域下,可以選擇不同的內部組件。另外,還可以將其設置為相同大小,并使每個區域僅允許使用固定幾種選擇(例如駕車頁面開始區域默認僅使用 4 個內部組件)。

起始區域所允許使用的內部組件

中間區域所允許使用的內部組件

結束區域所允許使用的內部組件

對于像「列表項」這樣的復雜組件,內部組件非常有用,可以靈活地重新配置組件以適應各種情況。

三、“響應式設計” 相關

當我們在創建靈活的共享組件時,還要考慮讓這些組件可以按照你想要的方式進行響應。我們可以在 Figma 界面的「設計」(Design)面板中設置這些選項。

Figma中的「設計」面板

由于大多數應用程序都需要支持各種屏幕尺寸和平臺,為了更好將程序普及到所有用戶,創建響應式組件( Responsive components )極為重要。而實現這一目的的方法是通過適當的定義,讓組件圖層根據你所設置的 “水平” 和 “垂直” 約束值,相應調整大小。

水平約束

1. 水平約束

  • 左側:將圖層固定在框架的左側。
  • 右側:將圖層固定在框架的右側。
  • 左右拉伸:圖層沿x軸增長或收縮。
  • 居中:圖層在框架的水平中心浮動。
  • 縮放:圖層按框架尺寸的百分比增長或收縮。

舉一個設置水平約束的例子。例如在調整列表項組件的大小時,你希望圖標保留在同一位置的同時允許文本層增大或縮小。這時只需將下方圖例內「Start」層的水平約束設置為 “左側”,并將「Middle」層設置為 “左右拉伸” 即可。

列表項組件的水平約束設置示例

垂直約束

2. 垂直約束

  • 頂部:將圖層固定在框架的頂部。
  • 底部:將圖層固定在框架的底部。
  • 上下拉伸:圖層沿y軸增長或收縮
  • 居中:圖層在框架的垂直中心浮動。
  • 縮放:圖層按框架尺寸的百分比增長或收縮。

再舉一個設置垂直約束的例子,例如在調整文本區域組件的大小時,你希望消息層固定在底部的同時文本區域增大或縮小。這時只需將下方圖例內「Message」層設置為 “底部” 垂直約束,并將「Text」框架層的垂直約束設置為 “上下拉伸“ 即可。

「Text Area」組件的垂直約束設置示例

調整大小選項(見 8 號標注):設置「自動寬度」,「自動高度」和「固定大小」(從左往右)

還有一些與此類似的約束功能可以在圖層類型內設置,以適應內容的縮小或放大。這些約束項可以跟你之前設置的約束項共存。

3. 自動寬度適配

「自動寬度適配」選項可以 使文字圖層的寬度根據所填的內容而自動調整。當我想要「文本」圖層根據內容增長時,通常會將「文本」圖層的寬度設置為「自動寬度適配」。即通過設置左側「水平約束」( horizontal constraints )和「自動寬度適配」( auto width ),文本圖層將根據文字內容相應地調整大小

文本區域組件的自動寬度適配文本設置示例

4. 自動高度適配

「自動高度適配」選項可以 使文本圖層的高度根據所填的內容而自動增加。原始文字圖層的寬度將決定內容何時換行。當我希望將內容換行到組件中的第二行時,通常將文本圖層的高度設置為「自動高度適配」。通過將「水平約束」與「自動高度適配」選項一起設置為左右約束,文本層將按照我的意圖進行包裝。

文本區域組件的自動高度適配文本設置示例

5. 固定尺寸

無論內容如何,該選項的參數都會設置在文本圖層的寬度和高度中。文字圖層的寬度設置項將決定內容何時換行,而超出文字層的高度設置的內容將不會被剪切

創建靈活組件的另一種方法是利用自動布局功能( Auto Layout feature ),該功能會根據內容做出相應的調整。很多組件與「自動布局」配合使用得非常好,其中包括按鈕、列表和面板。但是此功能有其局限性,如何展示其優勢取決于你的組件使用場景。

使用自動布局的響應式按鈕

「自動布局」能夠統一設置間距、描邊和圓角半徑,而這正是創建按鈕所需的全部元素。當你輸入內容時,「自動布局」會在保持內邊距不變的基礎上自動調整大小。這同樣適用于設置了「自動布局」的按鈕堆疊場景。

其他元素隨文字內容變化而調整

當你將文字內容復制粘貼到文本圖層中時,設計中的其余元素會隨之調整,這正是「自動布局」功能的強大之處,同時這也是進行本地化測試的好方法。

自動布局使自動排序變得簡單

有沒有發現對列表或菜單中重復的 UI 元素重新排序很麻煩?通過「自動布局」,你可以通過簡單地拖放或使用鍵盤上的上、下箭頭鍵來對它們進行重新排序。

四、設計技巧

在管理設計系統團隊的所有組件庫時,我通常會 使用鍵盤快捷鍵來幫助我更有效地工作。其中一部分快捷鍵用法同其他設計軟件相同,另一部分則需要些巧妙的專業提示,使其在 Figma 中更加容易發揮功效。

「選擇所有相同實例」功能( Select All with Same Instance )。當需要在包含主要組件的頁面中重命名許多內部組件時,只需導航至「編輯」菜單,然后選擇「選擇所有相同的實例」即可

編輯 > 選擇所有相同的實例

「創建組件」功能。任何一個做設計系統設計師都知道最后總歸是要創建組件的。我經常鍵入 Option + Command + K 以快速創建組件。

「重命名圖層」功能。Figma 的默認重命名功能非常強大。選擇多個圖層并輸入Command + R 會觸發一個「重命名圖層」模式,它具有更多的重命名選項,包括查找和替換,數字的升序和降序以及在當前名稱前添加或附加。

Command + R when multiple layers are selected

選擇多個圖層并輸入Command + R

「粘貼所選內容」功能。粘貼是我最常使用的功能。在 Figma 中,只需鍵入 Shift + Command + V(當已經選擇了某些內容時)即可完成此操作。

「放大圖層」功能。要快速放大圖層,只需在「圖層」菜單中雙擊該圖層的圖標即可。

在任意圖層上實現快速縮放

「組件說明」功能。這是一種傳達有關組件特定詳細信息的方式。將鼠標懸停在 “資源” 和 “代碼” 面板中的實例上時就會顯示。我們利用該區域為我們的工程合作伙伴提供移交信息。

放置在組件描述中的工程切換信息

「忽略約束」功能。當想暫時忽略組件層上的水平 / 垂直約束設置項時,你可以在調整組件大小時按住 Command 鍵。想要繼續使用約束,松開 Command 即可。

「防止自動嵌套」功能。我在畫布上移動圖層時發現的一件令人沮喪的事情 —— 移動的圖層會自動被放置在其他框架中。想要防止這種情況發生,可以在拖動圖層時按住空格鍵。

「替換實例」功能。這是一個專業的小提示,可用于替換任何實例,但我專門用它來替換圖標;從 “資源” 面板中拖動組件時,按住 Option 鍵。你也可以使用 “資產” 面板搜索字段,從而提高效率。

方便地替換圖標

五、最終思考

第一次構建 Airbnb 組件庫時期,也是我第一次接觸到設計系統相關內容。在過程中我收獲良多。正是一開始就采用了 “?系統的秩序性?” 這一理念,我才有能力搭建出設計系統如此復雜的東西,并得以讓設計系統以一種 一致、高質量、靈活的?方式呈現。而這種理念,以及上文提及的所有內容,就是我在 Figma 中構建 Lyft 設計系統的秘訣。

 

作者:Jeremy D.

原文:https://design.lyft.com/building-a-design-system-library-3a1f0d09088f

譯者:邵俊森,審核:李澤慧、張聿彤,編輯:徐小淇

本文由 @三分設 翻譯發布于人人都是產品經理,未經許可,禁止轉載

題圖來自?Unsplash,基于 CC0 協議

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