▲點(diǎn)擊 "TCC翻譯情報(bào)局" 關(guān)注，回復(fù) "社群" 加入我們

本文共 5416 字，預(yù)計(jì)閱讀 14 分鐘

TCC 情報(bào)局的 第 32 篇 干貨分享

2021 年的 第 20 篇

TCC推薦：大家好，這里是 TCC 翻譯情報(bào)局，我是張聿彤。隨著互聯(lián)網(wǎng)行業(yè)發(fā)展，設(shè)計(jì)系統(tǒng)這一概念越來越熱門。通常設(shè)計(jì)系統(tǒng)由使用指導(dǎo)文檔和可復(fù)用的組件庫組成，對于定調(diào)產(chǎn)品設(shè)計(jì)語言和提升生產(chǎn)效率都極具意義。但設(shè)計(jì)系統(tǒng)的搭建并不是一件容易的事，本篇文章展現(xiàn)了Lyft 團(tuán)隊(duì)的設(shè)計(jì)師搭建其設(shè)計(jì)系統(tǒng)的方法論以及一些小技巧，能夠?qū)Ω鲌F(tuán)隊(duì)搭建自身設(shè)計(jì)系統(tǒng)時(shí)帶來一定的幫助。

2019 年底，我協(xié)助將 Lyft[1] 全部的設(shè)計(jì)系統(tǒng)從 Sketch 移動到 Figma 。具有 “諷刺” 意味的是，在離開 Airbnb 前，其設(shè)計(jì)系統(tǒng)的遷移也是我負(fù)責(zé)的最后幾個(gè)項(xiàng)目之一。這兩次經(jīng)歷幫助我意識到一些在 Figma 中進(jìn)行共享庫（ Shared Library ）設(shè)計(jì)時(shí)每個(gè)人都該考慮的基本問題。

（[1]Lyft 是美國一家網(wǎng)約車公司，于 2012 年創(chuàng)立，類似于 Uber、滴滴）

在這篇文章中，我將介紹在創(chuàng)建多個(gè) Lyft 產(chǎn)品語言和組件庫時(shí)，自己運(yùn)用的一些優(yōu)秀案例。最后，我還將介紹一些有用的小技巧，幫助各位對設(shè)計(jì)系統(tǒng)進(jìn)行高效維護(hù)。

體系理念：系統(tǒng)中的秩序性

當(dāng)我們開始著手在 Figma 中創(chuàng)建系統(tǒng)時(shí)，需要先退一步，通過幾個(gè)例子重新評估 Sketch 中已做的工作，并重新審視此前確定的 布局、視覺層次結(jié)構(gòu) 與 命名規(guī)則 。我們意識到，為了在這些新的庫中建立堅(jiān)實(shí)基礎(chǔ)，必須花時(shí)間在系統(tǒng)中 再創(chuàng)建一個(gè)可適用于文件中每個(gè)元素的子系統(tǒng) 。

左圖為輪播頁面組件的主要組件，右圖為該組件的內(nèi)部嵌套組件。需要補(bǔ)充的是，文件的畫布區(qū)域還存在 #F4F4FA 的背景填充

我們使用 可視層次結(jié)構(gòu)（ Visual hierarchy ）來設(shè)置每個(gè)組件頁面，以幫助區(qū)分 主要組件和內(nèi)部嵌套組件。所有 主要組件 都放置在內(nèi)部輪廓為 4px 且沒有背景填充的框架中。這些框架充當(dāng)組件標(biāo)簽紙。

內(nèi)部嵌套組件 放置在白色背景的框架里。通過顯示所有內(nèi)部組件，使維護(hù)人員可獲取到主組件內(nèi)部可配置項(xiàng)的快照。這些內(nèi)部嵌套組件的作用是 讓用戶能夠靈活配置內(nèi)部嵌套組件 ，以此重新配置主組件來達(dá)到最終所需的形式。同時(shí)內(nèi)部嵌套組件能促進(jìn)該主要組件的通用性，提升其維護(hù)與使用的效率性。

填充系統(tǒng)語言

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

我們組件庫的邊距系數(shù)包括：

60px：內(nèi)部框架間距（頂部，右側(cè)，底部和左側(cè)）

40px：框架標(biāo)題到第一個(gè)主要組件之間

24px：框架標(biāo)題到字幕之間（可選）

24px：垂直方向的主要組件之間

40px：水平方向的主要組件之間

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

通常在 Figma 中，新創(chuàng)建的圖層將默認(rèn)創(chuàng)建在當(dāng)前圖層上方。而將圖層根據(jù)正常的視覺框架層次從上到下、從左到右重新排列是一件繁瑣的任務(wù)。

但在管理大量主要組件和內(nèi)部組件時(shí)，以這種方式排列圖層能幫助維護(hù)人員 快速瀏覽有時(shí)比較混亂的畫布 。

焦點(diǎn)緊湊型按鈕的命名規(guī)則

與用戶在 Slack[2] 上共同進(jìn)行快速調(diào)研后，我們發(fā)現(xiàn)他們中的大多數(shù)人使用 資源面板（ Assets Panel ）來搜索和發(fā)現(xiàn)組件。因此組件的命名方式對這個(gè)工作流程就變得十分重要。

（[2]Slack 是一款企業(yè)協(xié)作應(yīng)用軟件，集合聊天群組、大規(guī)模工具集成、文件整合以及統(tǒng)一搜索功能于一體。允許團(tuán)隊(duì)和企業(yè)通過群組進(jìn)行溝通，有點(diǎn)類似國內(nèi)的釘釘和企業(yè)版微信。Slack 目前的日活躍用戶數(shù)已突破 1000 萬大關(guān)，付費(fèi)人數(shù)已達(dá) 8.8 萬人，且它的用戶中有 65 家是來自財(cái)富 100 強(qiáng)的公司。）

我們創(chuàng)建了以下應(yīng)用于所有組件的命名結(jié)構(gòu)：

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

其中：

文件名稱（ file name ）是特定庫的名稱，用戶需要在資源面板中啟用該名稱的庫才能使用其模型文件中的組件（例如，核心 UI 組件（ Android / iOS ），核心 UI 組件（ Web ）， 核心用戶界面顏色等）。

頁面名稱（ page name ）是組件的名稱（即 “輪播頁面指示器（ Carousel Page Indicator ）”，“按鈕”（ Button ），“列表項(xiàng)（ List Item ）等”。

框架名稱（ frame name ）是組件的最高級分組，通常是按大小命名（即按鈕的 4 種大小：Focus ，F(xiàn)ocus Compact ，Drive 和 Drive Compact ）。

組件名稱（ component name ）是主要組件及其變體的名稱。由于變體的數(shù)量眾多，我們使用反斜杠（/）將它們按照不同的類型定義并分類，例如按 “狀態(tài)” 等。事實(shí)上即使這些變體被放在更多的類目里，也有助于相似變體組件的存儲。它們更容易在「實(shí)例」下拉列表中靈活切換，或者更容易在「資源」（ Assets ） 文件夾中查找。

「實(shí)例」下拉列表中的文件夾顯示結(jié)構(gòu)

更具靈活性的組件

創(chuàng)建原子元素（ atomic elements ）是設(shè)計(jì)系統(tǒng)的基礎(chǔ)。我們將 Lyft 的產(chǎn)品語言分解為原子元素，然后用于創(chuàng)建特定的組件。這些內(nèi)部嵌套組件（即前文的原子元素）有助于大型團(tuán)隊(duì)之間保持設(shè)計(jì)的一致性（例如按鈕這類原子元素）以及降低維護(hù)成本，尤其當(dāng)這些內(nèi)部嵌套組件在多個(gè)復(fù)雜組件（例如文本字段，文本區(qū)域，下拉列表等）之間共用時(shí)。 

列表項(xiàng)組件包括 3 個(gè)操作區(qū)域：開始區(qū)，中間區(qū)和結(jié)束區(qū)

這個(gè)示例展示了內(nèi)部組件是如何構(gòu)成列表項(xiàng)組件的。我們?yōu)樵摻M件設(shè)置了多個(gè)區(qū)域，以便對其進(jìn)行重新配置從而創(chuàng)建不同的變體。在每個(gè)區(qū)域下，可以選擇不同的內(nèi)部組件。另外，還可以將其設(shè)置為相同大小，并使每個(gè)區(qū)域僅允許使用固定幾種選擇（例如駕車頁面開始區(qū)域默認(rèn)僅使用 4 個(gè)內(nèi)部組件）。

起始區(qū)域所允許使用的內(nèi)部組件

中間區(qū)域所允許使用的內(nèi)部組件

結(jié)束區(qū)域所允許使用的內(nèi)部組件

對于像「列表項(xiàng)」這樣的復(fù)雜組件，內(nèi)部組件非常有用，可以靈活地重新配置組件以適應(yīng)各種情況。

“響應(yīng)式設(shè)計(jì)” 相關(guān)

當(dāng)我們在創(chuàng)建靈活的共享組件時(shí)，還要考慮讓這些組件可以按照你想要的方式進(jìn)行響應(yīng)。我們可以在 Figma 界面的「設(shè)計(jì)」（Design）面板中設(shè)置這些選項(xiàng)。

Figma中的「設(shè)計(jì)」面板

由于大多數(shù)應(yīng)用程序都需要支持各種屏幕尺寸和平臺，為了更好將程序普及到所有用戶，創(chuàng)建響應(yīng)式組件（ Responsive components ）極為重要。而實(shí)現(xiàn)這一目的的方法是通過適當(dāng)?shù)亩x，讓組件圖層根據(jù)你所設(shè)置的 “水平” 和 “垂直” 約束值，相應(yīng)調(diào)整大小。

水平約束

水平約束

• 左側(cè)：將圖層固定在框架的左側(cè)。

• 右側(cè)：將圖層固定在框架的右側(cè)。

• 左右拉伸：圖層沿x軸增長或收縮。

• 居中：圖層在框架的水平中心浮動。

• 縮放：圖層按框架尺寸的百分比增長或收縮。

舉一個(gè)設(shè)置水平約束的例子。例如在調(diào)整列表項(xiàng)組件的大小時(shí)，你希望圖標(biāo)保留在同一位置的同時(shí)允許文本層增大或縮小。這時(shí)只需將下方圖例內(nèi)「Start」層的水平約束設(shè)置為 “左側(cè)”，并將「Middle」層設(shè)置為 “左右拉伸” 即可。

列表項(xiàng)組件的水平約束設(shè)置示例

垂直約束

垂直約束

• 頂部：將圖層固定在框架的頂部。

• 底部：將圖層固定在框架的底部。

• 上下拉伸：圖層沿y軸增長或收縮

• 居中：圖層在框架的垂直中心浮動。

• 縮放：圖層按框架尺寸的百分比增長或收縮。

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

「Text Area」組件的垂直約束設(shè)置示例

調(diào)整大小選項(xiàng)（見 8 號標(biāo)注）：設(shè)置「自動寬度」，「自動高度」和「固定大小」（從左往右）

還有一些與此類似的約束功能可以在圖層類型內(nèi)設(shè)置，以適應(yīng)內(nèi)容的縮小或放大。這些約束項(xiàng)可以跟你之前設(shè)置的約束項(xiàng)共存。

自動寬度適配

「自動寬度適配」選項(xiàng)可以 使文字圖層的寬度根據(jù)所填的內(nèi)容而自動調(diào)整。當(dāng)我想要「文本」圖層根據(jù)內(nèi)容增長時(shí)，通常會將「文本」圖層的寬度設(shè)置為「自動寬度適配」。即通過設(shè)置左側(cè)「水平約束」（ horizontal constraints ）和「自動寬度適配」（ auto width ），文本圖層將根據(jù)文字內(nèi)容相應(yīng)地調(diào)整大小。

文本區(qū)域組件的自動寬度適配文本設(shè)置示例

自動高度適配

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

文本區(qū)域組件的自動高度適配文本設(shè)置示例

固定尺寸

無論內(nèi)容如何，該選項(xiàng)的參數(shù)都會設(shè)置在文本圖層的寬度和高度中。文字圖層的寬度設(shè)置項(xiàng)將決定內(nèi)容何時(shí)換行，而超出文字層的高度設(shè)置的內(nèi)容將不會被剪切。

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

使用自動布局的響應(yīng)式按鈕

「自動布局」能夠統(tǒng)一設(shè)置間距、描邊和圓角半徑，而這正是創(chuàng)建按鈕所需的全部元素。當(dāng)你輸入內(nèi)容時(shí)，「自動布局」會在保持內(nèi)邊距不變的基礎(chǔ)上自動調(diào)整大小。這同樣適用于設(shè)置了「自動布局」的按鈕堆疊場景。

其他元素隨文字內(nèi)容變化而調(diào)整

當(dāng)你將文字內(nèi)容復(fù)制粘貼到文本圖層中時(shí)，設(shè)計(jì)中的其余元素會隨之調(diào)整，這正是「自動布局」功能的強(qiáng)大之處，同時(shí)這也是進(jìn)行本地化測試的好方法。

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

有沒有發(fā)現(xiàn)對列表或菜單中重復(fù)的 UI 元素重新排序很麻煩？通過「自動布局」，你可以通過簡單地拖放或使用鍵盤上的上、下箭頭鍵來對它們進(jìn)行重新排序。

設(shè)計(jì)技巧

在管理設(shè)計(jì)系統(tǒng)團(tuán)隊(duì)的所有組件庫時(shí)，我通常會 使用鍵盤快捷鍵來幫助我更有效地工作。其中一部分快捷鍵用法同其他設(shè)計(jì)軟件相同，另一部分則需要些巧妙的專業(yè)提示，使其在 Figma 中更加容易發(fā)揮功效。

• 「選擇所有相同實(shí)例」功能（ Select All with Same Instance ）。當(dāng)需要在包含主要組件的頁面中重命名許多內(nèi)部組件時(shí)，只需導(dǎo)航至「編輯」菜單，然后選擇「選擇所有相同的實(shí)例」即可

編輯 > 選擇所有相同的實(shí)例

• 「創(chuàng)建組件」功能。任何一個(gè)做設(shè)計(jì)系統(tǒng)設(shè)計(jì)師都知道最后總歸是要?jiǎng)?chuàng)建組件的。我經(jīng)常鍵入 Option + Command + K 以快速創(chuàng)建組件。

• 「重命名圖層」功能。Figma 的默認(rèn)重命名功能非常強(qiáng)大。選擇多個(gè)圖層并輸入Command + R 會觸發(fā)一個(gè)「重命名圖層」模式，它具有更多的重命名選項(xiàng)，包括查找和替換，數(shù)字的升序和降序以及在當(dāng)前名稱前添加或附加。

Command + R when multiple layers are selected

選擇多個(gè)圖層并輸入Command + R

• 「粘貼所選內(nèi)容」功能。粘貼是我最常使用的功能。在 Figma 中，只需鍵入 Shift + Command + V（當(dāng)已經(jīng)選擇了某些內(nèi)容時(shí)）即可完成此操作。

• 「放大圖層」功能。要快速放大圖層，只需在「圖層」菜單中雙擊該圖層的圖標(biāo)即可。

在任意圖層上實(shí)現(xiàn)快速縮放

• 「組件說明」功能。這是一種傳達(dá)有關(guān)組件特定詳細(xì)信息的方式。將鼠標(biāo)懸停在 “資源” 和 “代碼” 面板中的實(shí)例上時(shí)就會顯示。我們利用該區(qū)域?yàn)槲覀兊墓こ毯献骰锇樘峁┮平恍畔ⅰ?/span>

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

• 「忽略約束」功能。當(dāng)想暫時(shí)忽略組件層上的水平 / 垂直約束設(shè)置項(xiàng)時(shí)，你可以在調(diào)整組件大小時(shí)按住 Command 鍵。想要繼續(xù)使用約束，松開 Command 即可。

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

• 「替換實(shí)例」功能。這是一個(gè)專業(yè)的小提示，可用于替換任何實(shí)例，但我專門用它來替換圖標(biāo)；從 “資源” 面板中拖動組件時(shí)，按住 Option 鍵。你也可以使用 “資產(chǎn)” 面板搜索字段，從而提高效率。

方便地替換圖標(biāo)

最終思考

第一次構(gòu)建 Airbnb 組件庫時(shí)期，也是我第一次接觸到設(shè)計(jì)系統(tǒng)相關(guān)內(nèi)容。在過程中我收獲良多。正是一開始就采用了 “系統(tǒng)的秩序性” 這一理念，我才有能力搭建出設(shè)計(jì)系統(tǒng)如此復(fù)雜的東西，并得以讓設(shè)計(jì)系統(tǒng)以一種 一致、高質(zhì)量、靈活的 方式呈現(xiàn)。而這種理念，以及上文提及的所有內(nèi)容，就是我在 Figma 中構(gòu)建 Lyft 設(shè)計(jì)系統(tǒng)的秘訣。 

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

作者：Jeremy D.

譯者：邵俊森

審核：李澤慧、張聿彤

編輯：徐小淇

本文翻譯已獲得作者的正式授權(quán)（授權(quán)截圖如下）