▲點(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)這一概念越來(lái)越熱門。通常設(shè)計(jì)系統(tǒng)由使用指導(dǎo)文檔和可復(fù)用的組件庫(kù)組成，對(duì)于定調(diào)產(chǎn)品設(shè)計(jì)語(yǔ)言和提升生產(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í)帶來(lái)一定的幫助。

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

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

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

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

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

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

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

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

填充系統(tǒng)語(yǔ)言

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

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

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

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

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

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

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

圖層從上到下視覺(jué)上重新排列

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

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

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

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

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

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

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

其中：

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

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

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

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

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

更具靈活性的組件

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

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

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

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

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

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

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

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

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

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

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

水平約束

水平約束

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

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

• 左右拉伸：圖層沿x軸增長(zhǎng)或收縮。

• 居中：圖層在框架的水平中心浮動(dòng)。

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

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

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

垂直約束

垂直約束

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

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

• 上下拉伸：圖層沿y軸增長(zhǎng)或收縮

• 居中：圖層在框架的垂直中心浮動(dòng)。

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

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

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

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

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

自動(dòng)寬度適配

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

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

自動(dòng)高度適配

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

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

固定尺寸

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

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

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

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

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

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

自動(dòng)布局使自動(dòng)排序變得簡(jiǎn)單

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

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

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

• 「選擇所有相同實(shí)例」功能（ Select All with Same Instance ）。當(dāng)需要在包含主要組件的頁(yè)面中重命名許多內(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 會(huì)觸發(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)快速縮放

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

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

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

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

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

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

最終思考

第一次構(gòu)建 Airbnb 組件庫(kù)時(shí)期，也是我第一次接觸到設(shè)計(jì)系統(tǒng)相關(guān)內(nèi)容。在過(guò)程中我收獲良多。正是一開(kā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)截圖如下）