構(gòu)建組件庫(kù)/設(shè)計(jì)系統(tǒng)這個(gè)問(wèn)題是一個(gè)很長(zhǎng)的翻譯，使用草圖庫(kù)來(lái)構(gòu)建更好的設(shè)計(jì)系統(tǒng)，從理論方法到實(shí)際演示。

閱讀本文后，您將學(xué)習(xí)：

如何解決符號(hào)同步共享的問(wèn)題？

使用草圖庫(kù)

更新核心庫(kù)中的元素

此外，Sketch 48 Beta已經(jīng)開始提供色彩管理功能，并且從系統(tǒng)的角度來(lái)看是一個(gè)重要的更新。

注意：“庫(kù)”功能僅在最新的Sketch 47中可用。

所謂的設(shè)計(jì)是在一系列約束下構(gòu)建解決方案的過(guò)程。 —— Adam Morse

在某種程度上，設(shè)計(jì)系統(tǒng)就是這樣一種約束。一系列設(shè)計(jì)語(yǔ)言元素，如顏色匹配，圖標(biāo)，按鈕等，共同構(gòu)成了一個(gè)標(biāo)準(zhǔn)化系統(tǒng)，為設(shè)計(jì)決策提供指導(dǎo)。

符合這樣的標(biāo)準(zhǔn)化系統(tǒng)，可以有效加快設(shè)計(jì)過(guò)程;同時(shí)，設(shè)計(jì)模式的可重用性和一致性將得到改善，整個(gè)產(chǎn)品設(shè)計(jì)計(jì)劃更具可擴(kuò)展性，更易于維護(hù)。

然而，實(shí)際上，有許多方法來(lái)創(chuàng)建和維護(hù)標(biāo)準(zhǔn)化設(shè)計(jì)系統(tǒng)。 Sketch是我們?cè)谠O(shè)計(jì)工作中的工具，它可以幫助我們簡(jiǎn)化設(shè)計(jì)系統(tǒng)的創(chuàng)建過(guò)程，但其各方面的問(wèn)題都不容忽視。

問(wèn)題是

在Sketch 47給我們帶來(lái)了Libraries之前，Symbols一直是Sketch中最重要的功能之一，它也是構(gòu)建設(shè)計(jì)系統(tǒng)的關(guān)鍵功能。符號(hào)用于創(chuàng)建可重用的界面元素，有助于保持設(shè)計(jì)的一致性。但是，此機(jī)制的范圍僅限于文檔內(nèi)部，除非得到第三方插件的幫助，否則Symbols無(wú)法在不同文件之間進(jìn)行同步。

為什么這是一個(gè)問(wèn)題？

對(duì)于小型項(xiàng)目，這沒(méi)什么大不了的。您可以將所有設(shè)計(jì)解決方案，甚至高保真原型和流程圖放在一個(gè)文件中，Sketch不會(huì)造成任何問(wèn)題。

但是，情況會(huì)因項(xiàng)目規(guī)模而異。出于性能效率或協(xié)作的原因，我們通常需要將項(xiàng)目分解為不同的Sketch文件;此時(shí)，將暴露Symphony同步共享問(wèn)題。

我們的團(tuán)隊(duì)有三種產(chǎn)品使用相同的符號(hào)集。這里的挑戰(zhàn)是如何確保不同項(xiàng)目之間的符號(hào)同步。這三個(gè)產(chǎn)品都是非常大的項(xiàng)目，每個(gè)源文件包含數(shù)百個(gè)Artboards，因此很難通過(guò)單個(gè)Sketch文件來(lái)攜帶它，否則文件會(huì)變得非常大。

△Sketch文件托管整個(gè)組件庫(kù)

以前的處理方法

我們使用一組Sketch模板集中放置所有符號(hào)，引用了原型工具M(jìn)arvel的官方設(shè)計(jì)規(guī)范創(chuàng)建方法。在此基礎(chǔ)上，我們已經(jīng)擴(kuò)展到一定程度，例如，Symbols模板文件由Craft插件在不同的Sketch文件中統(tǒng)一調(diào)用。

△使用Craft插件構(gòu)建組件庫(kù)

事實(shí)上，我個(gè)人不推薦這種方法。文件大小確實(shí)受到控制，符號(hào)源統(tǒng)一。問(wèn)題是，一旦模板中的符號(hào)發(fā)生變化，我們就無(wú)法同步已插入到不同文檔中的符號(hào)的更新。

符號(hào)功能的基本目標(biāo)是使項(xiàng)目更易于創(chuàng)建和維護(hù)。然而，強(qiáng)大的重用只是一個(gè)方面;對(duì)于那些插入到不同文檔中的符號(hào)，您根本無(wú)法管理和更新它們。

幸運(yùn)的是，Sketch 47為我們帶來(lái)了圖書館。

溶液

Libraries功能可以幫助我們創(chuàng)建單獨(dú)的符號(hào)庫(kù)，可以由多個(gè)文件統(tǒng)一調(diào)用。這種機(jī)制有點(diǎn)類似于前端開發(fā)人員熟悉的Sass。不僅如此，您還可以嵌套庫(kù)。

通常，您現(xiàn)在可以將不同類型的符號(hào)存儲(chǔ)在不同的Sketch文件中作為單獨(dú)的庫(kù)，例如顏色定義，圖標(biāo)，按鈕，表單元素等;可以在這些源文件中調(diào)用其他項(xiàng)目文件。符號(hào)。修改庫(kù)源文件時(shí)，相關(guān)更改將更新為所有項(xiàng)目文件。

這種統(tǒng)一的管理和調(diào)用機(jī)制可以為工作帶來(lái)許多好處，包括：

減小文件大小

增強(qiáng)Sketch的性能

改善界面元素的統(tǒng)一性

提高項(xiàng)目的整體可維護(hù)性

Sketch團(tuán)隊(duì)正式解釋了這樣的庫(kù)功能：

庫(kù)本質(zhì)上是一個(gè)普通的Sketch文件，其中的Symbols可以被其他Sketch文件調(diào)用。如果編輯庫(kù)中的符號(hào)，則調(diào)用庫(kù)的其他Sketch文件將收到更新通知。您可以預(yù)覽，比較和確認(rèn)更改，以便這些Sketch文件調(diào)用的符號(hào)自動(dòng)更新為最新版本。 →草圖47庫(kù)具有圖形說(shuō)明

使用草圖庫(kù)

在本文的下一部分中，我將向您展示如何使用Sketch Libraries功能創(chuàng)建UI組件庫(kù)。但在此之前，我們?nèi)孕枰吻逡恍┫敕ê驮瓌t。

像開發(fā)人員一樣思考

在構(gòu)建設(shè)計(jì)系統(tǒng)的過(guò)程中，設(shè)計(jì)師必須嘗試像開發(fā)人員一樣思考。 —— D.R.Y–不要重復(fù)自己

組件庫(kù)的基本概念是逐層創(chuàng)建可重用的UI元素，保持文件的輕量級(jí)和設(shè)計(jì)的一致性。

從“原始元素”開始;

我們創(chuàng)建的任何組件都由幾個(gè)“屬性”組成。這些屬性是設(shè)計(jì)系統(tǒng)中最“原始”的元素。開發(fā)人員將在代碼中為這些屬性創(chuàng)建自己的變量，以提高代碼的可重用性;對(duì)于設(shè)計(jì)師來(lái)說(shuō)，同樣如此，我們可以為各種原始UI元素創(chuàng)建庫(kù)，逐層構(gòu)建更高級(jí)別的庫(kù)。組件。

原子設(shè)計(jì)理論

為了確保組件庫(kù)的可擴(kuò)展性，我將使用Brad Frost提出的原子設(shè)計(jì)理論作為指導(dǎo)。這套理論簡(jiǎn)單易懂。

簡(jiǎn)而言之，原子設(shè)計(jì)的靈感來(lái)自現(xiàn)實(shí)世界的分子結(jié)構(gòu)。 UI中具有最小粒度的元素“原子”構(gòu)成具有大粒度的控件，即“分子”;許多分子形成一個(gè)更復(fù)雜的組成部分和模塊，即“有機(jī)體”。

將不同類型的符號(hào)放在各自的庫(kù)文件中

當(dāng)然，如果需要，您仍然可以將所有組件放在同一個(gè)庫(kù)文件中;我的建議是為每種類型的符號(hào)創(chuàng)建一個(gè)單獨(dú)的庫(kù)文檔。

與開發(fā)人員使用Sass partials的方式類似，調(diào)用多個(gè)Libraries文檔可以使我們的設(shè)計(jì)系統(tǒng)更優(yōu)雅，更易于維護(hù)。正確拆分的Libraries文檔對(duì)于被不同項(xiàng)目調(diào)用更有用;它可以在需要時(shí)更容易擴(kuò)展。

參考“原始元素”方法，我們將從最基本和核心的UI元素開始，包括將在整個(gè)設(shè)計(jì)系統(tǒng)中使用的顏色，圖標(biāo)等;所有“原子，分子，有機(jī)體”的UI元素也都由這些原始元素組成。

我們首先需要定義全局中使用的各種顏色。

第1步：為顏色定義創(chuàng)建一個(gè)新的Sketch文檔

對(duì)于團(tuán)隊(duì)項(xiàng)目，我將添加“AIN”作為Sketch文件名稱的前綴，例如“AIN-Colors”等，以區(qū)別于其他項(xiàng)目。當(dāng)然，命名慣例和習(xí)慣因人而異。如果您和我需要處理許多不同的項(xiàng)目，那么通過(guò)前綴區(qū)分它們的方式可能值得考慮。

我將為設(shè)計(jì)系統(tǒng)中的每種顏色生成共享樣式，并根據(jù)不同的功能對(duì)其進(jìn)行分類，包括“品牌，灰度，UI”等。具體的分類方法是在共享樣式命名中使用“/”符號(hào)。表示Sketch識(shí)別并自動(dòng)生成相應(yīng)模式的層次結(jié)構(gòu)。

接下來(lái)，我將為每種顏色創(chuàng)建一個(gè)Symbol，并使用Symbol Organizer插件在Symbols頁(yè)面中組織它們。在分層命名的幫助下，Symbols頁(yè)面將自動(dòng)呈現(xiàn)清晰的架構(gòu)。

第2步：將顏色定義文檔添加到庫(kù)系統(tǒng)

完成顏色定義后，我們需要將此Sketch文檔添加到Libraries系統(tǒng)。設(shè)計(jì)系統(tǒng)中所有原子元素的定義都需要此步驟。

在頂部菜單欄中，選擇“Sketch› Preferences”，然后轉(zhuǎn)到“Libraries”選項(xiàng)卡并單擊“Add Library”按鈕，選擇我們?cè)谏弦徊街袆?chuàng)建的Sketch文檔。

如圖所示，我將AIN-colors文檔添加到Libraries系統(tǒng)，以便我可以在任何其他Sketch文件中調(diào)用它;這是圖書館功能的強(qiáng)大功能。

我如何使用這些顏色符號(hào)？我將在下一次創(chuàng)建圖標(biāo)庫(kù)時(shí)進(jìn)行演示。

第3步：為圖標(biāo)定義創(chuàng)建新的草圖文檔

與我們?cè)诘谝徊街械姆椒愃疲@次我們定義了圖標(biāo)。新文檔名為“AIN-icons”，并保存在與以前的“AIN-colors”文檔相同的路徑中;所有原子UI元素的庫(kù)都將保存在此處。

每個(gè)圖標(biāo)放置在24和相同的大小; 24像素畫板，24小時(shí); 24像素透明層，確保規(guī)格統(tǒng)一。然后我將從AIN顏色庫(kù)中選擇合適的顏色符號(hào)，并將其插入圖標(biāo)畫布，在圖標(biāo)圖層上，并將其調(diào)整為24和次; 24像素。

接下來(lái)，將圖標(biāo)設(shè)置為蒙版“按住Control鍵，單擊圖標(biāo)，在菜單中選擇蒙版”，以便我們剛剛從AIN顏色庫(kù)插入的符號(hào)可以將其顏色附加到圖標(biāo)形狀。面具消失了。

請(qǐng)注意，在Sketch左側(cè)的圖層列表中，鏈圖標(biāo)是從外部庫(kù)插入的符號(hào)。

這里的核心思想是圖書館的嵌套。這樣，每當(dāng)我需要修改顏色定義時(shí)，我只需要在“AIN-colors”文檔中編輯它，然后將自動(dòng)更新使用此顏色的所有圖標(biāo)或其他UI元素。

現(xiàn)在我們可以將圖標(biāo)畫布轉(zhuǎn)換為符號(hào)。應(yīng)該注意的是，對(duì)于這些圖標(biāo)畫板，請(qǐng)務(wù)必在右側(cè)檢查器中選擇“調(diào)整調(diào)整內(nèi)容大小”;還可以在捕捉時(shí)將圖標(biāo)的“調(diào)整大小”選項(xiàng)設(shè)置為四邊，并鎖定縱橫比以確保圖標(biāo)符號(hào)在實(shí)際使用時(shí)可以靈活調(diào)整大小。

重復(fù)此過(guò)程，直到您定義了所有圖標(biāo)符號(hào)。在此期間還要注意分層命名方法，以便最終可以通過(guò)Symbols Organizer插件進(jìn)行組織。

第4步：將圖標(biāo)定義文檔添加到庫(kù)系統(tǒng)

具體方法與我們?cè)诘诙街忻枋龅南嗤?

此時(shí)，我們已經(jīng)完成了兩個(gè)Libraries文檔的創(chuàng)建，在我的例子中，“AIN-colors和AIN-icons”?，F(xiàn)在，我們的圖標(biāo)可以通過(guò)庫(kù)中的其他文檔統(tǒng)一調(diào)用。

步驟5：重復(fù)上述步驟以定義其他元素

我希望前四個(gè)步驟的介紹可以幫助您理解該過(guò)程的主題。

您可以繼續(xù)優(yōu)化其他基本元素的定義，以便逐層嵌套庫(kù)。

在我們的AIN設(shè)計(jì)系統(tǒng)中，類似的元素包括按鈕，表單元素等。當(dāng)我開始制作分子或更高分子時(shí)，這些庫(kù)文檔與“AIN-colors和AIN-icons”一起存儲(chǔ)在同一路徑中。調(diào)用UI元素的庫(kù)。

圖書館更新

隨著產(chǎn)品的發(fā)展，您將始終需要更新核心庫(kù)中的一些元素。 Sketch提供的機(jī)制使這個(gè)問(wèn)題非常簡(jiǎn)單。您可以像在普通符號(hào)中一樣在Libraries文件中修改它。然后，調(diào)用這些符號(hào)的所有Sketch文件都將收到更新提示“Sketch接口的上角”。單擊提示以查看更改并確認(rèn)，所有更新將自動(dòng)完成。

下一步

在完成所有原子級(jí)UI元素的定義之后，您必須開始組織更復(fù)雜的元素，例如“分子”，然后是“有機(jī)體”，等等。在整個(gè)過(guò)程中，您可以將庫(kù)嵌套在之前創(chuàng)建的所有級(jí)別，并將大粒子元素與小粒子元素組合在一起。

通過(guò)類比，這種基于Sketch Libraries機(jī)制的逐層設(shè)計(jì)系統(tǒng)將變得更加復(fù)雜和完整，并最終能夠幫助您實(shí)現(xiàn)完整的界面。到那時(shí)，您可以在任何項(xiàng)目中調(diào)用此系統(tǒng)。

在本文的其余部分，我將向您介紹創(chuàng)建更復(fù)雜組件的過(guò)程，包括標(biāo)題，導(dǎo)航，卡片視圖，頁(yè)腳等。它還將向您展示如何在實(shí)踐中使用該設(shè)計(jì)。系統(tǒng)。

應(yīng)該指出的是，原子設(shè)計(jì)理論只是一個(gè)指導(dǎo)原則，而不是一個(gè)艱難的原則。您仍然需要結(jié)合理論并根據(jù)產(chǎn)品的特定條件判斷UI元素的分類方法。

另外，關(guān)于多個(gè)設(shè)備之間的庫(kù)的同步使用，我個(gè)人還沒(méi)有涉及到這個(gè)方面的實(shí)際應(yīng)用。正如官方文檔中的Sketch所示，您可以與Dropbox，Google Drive或類似的存儲(chǔ)服務(wù)同步;這對(duì)團(tuán)隊(duì)共享和協(xié)作非常有用。

總結(jié)

在本文中，我們學(xué)習(xí)了如何使用Sketch Libraries構(gòu)建模塊化UI組件庫(kù)/設(shè)計(jì)系統(tǒng)。我希望你已經(jīng)體驗(yàn)過(guò)圖書館的巨大潛力。

如果您是設(shè)計(jì)團(tuán)隊(duì)或獨(dú)立設(shè)計(jì)師的一員，他們需要更好的方法來(lái)管理項(xiàng)目，那么請(qǐng)嘗試將Libraries應(yīng)用于設(shè)計(jì)過(guò)程。自Symbols以來(lái)最重要的新功能將更有效地幫助我們構(gòu)建和維護(hù)設(shè)計(jì)系統(tǒng)。

您可以下載我提供的示例項(xiàng)目作為參考，包括顏色，圖標(biāo)，按鈕和簡(jiǎn)單項(xiàng)目案例等元素的定義。我希望這個(gè)例子可以幫助您更好地理解本文的內(nèi)容。請(qǐng)注意，您需要更新到Sketch 47才能打開此文檔。

相關(guān)資源

Jon Moore的草圖庫(kù)

布拉德弗羅斯特的原子設(shè)計(jì)方法論

素描館的Pablo Stanley

Airbnb:構(gòu)建視覺(jué)語(yǔ)言

原作者：Harry Cresswell

原始鏈接：Usejournal

« 營(yíng)銷行業(yè)不斷跨越國(guó)界。企業(yè)產(chǎn)品推廣需要不斷被顛覆 | 簡(jiǎn)單說(shuō)說(shuō)在QQ營(yíng)銷組中竊取朋友，當(dāng)天的規(guī)模運(yùn)作加上數(shù)千人 »