中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)讀：隨著互聯(lián)網(wǎng)行業(yè)發(fā)展，設(shè)計(jì)系統(tǒng)這一概念越來越熱門。通常設(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í)帶來一定的幫助。

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

（[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)我們開始著手在 Figma 中創(chuàng)建系統(tǒng)時(shí)，需要先退一步，通過幾個(gè)例子重新評(píng)估 Sketch 中已做的工作，并重新審視此前確定的?布局、視覺層次結(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 ）來設(shè)置每個(gè)組件頁(yè)面，以幫助區(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)語(yǔ)言

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

我們組件庫(kù)的邊距系數(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)組件。因此組件的命名方式對(duì)這個(gè)工作流程就變得十分重要。

（[2]Slack 是一款企業(yè)協(xié)作應(yīng)用軟件，集合聊天群組、大規(guī)模工具集成、文件整合以及統(tǒng)一搜索功能于一體。允許團(tuán)隊(duì)和企業(yè)通過群組進(jìn)行溝通，有點(diǎn)類似國(guó)內(nèi)的釘釘和企業(yè)版微信。Slack 目前的日活躍用戶數(shù)已突破 1000 萬(wàn)大關(guān)，付費(fèi)人數(shù)已達(dá) 8.8 萬(wàn)人，且它的用戶中有 65 家是來自財(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 種大小：Focus ，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ū)域：開始區(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è)面開始區(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)這一目的的方法是通過適當(dāng)?shù)亩x，讓組件圖層根據(jù)你所設(shè)置的 “水平” 和 “垂直” 約束值，相應(yīng)調(diào)整大小。

水平約束

1. 水平約束

• 左側(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è)置示例

垂直約束

2. 垂直約束

• 頂部：將圖層固定在框架的頂部。
• 底部：將圖層固定在框架的底部。
• 上下拉伸：圖層沿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)（見 8 號(hào)標(biāo)注）：設(shè)置「自動(dòng)寬度」，「自動(dòng)高度」和「固定大小」（從左往右）

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

3. 自動(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)寬度適配」。即通過設(shè)置左側(cè)「水平約束」（ horizontal constraints ）和「自動(dòng)寬度適配」（ auto width ），文本圖層將根據(jù)文字內(nèi)容相應(yīng)地調(diào)整大小。

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

4. 自動(dòng)高度適配

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

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

5. 固定尺寸

無論內(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)單

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

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

在管理設(shè)計(jì)系統(tǒng)團(tuán)隊(duì)的所有組件庫(kù)時(shí)，我通常會(huì) 使用鍵盤快捷鍵來幫助我更有效地工作。其中一部分快捷鍵用法同其他設(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)快速縮放

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

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

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

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

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

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

五、最終思考

第一次構(gòu)建 Airbnb 組件庫(kù)時(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)的秘訣。

作者：Jeremy D.

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

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

本文由 @三分設(shè) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自?Unsplash，基于 CC0 協(xié)議