使用Sketch Libraries構(gòu)建組件庫/設(shè)計體系

4 評論 16666 瀏覽 100 收藏 20 分鐘

本期是一篇很長的譯文,Using Sketch Libraries to build better design systems,從理論方法到實踐演示,一應(yīng)俱全。

看完本文你會學(xué)到:

  1. 如何解決Symbols同步共用問題?
  2. 使用Sketch Libraries創(chuàng)建組件庫
  3. ?對核心Libraries中的元素進(jìn)行更新

另外說,Sketch 48 Beta已經(jīng)開始提供Colors Management方面的功能,又是一次體系化角度的重要更新。

注意:Libraries功能僅在最新的Sketch 47當(dāng)中提供。

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

從某種程度上講,設(shè)計體系便是這樣的一種約束。諸如配色、圖標(biāo)、按鈕等一系列設(shè)計語言要素共同構(gòu)成了標(biāo)準(zhǔn)化的體系,為設(shè)計決策提供著指引。

遵從于這樣的標(biāo)準(zhǔn)化體系,設(shè)計流程能夠得到有效加速;同時,設(shè)計模式的復(fù)用性與一致性也將得到提升,產(chǎn)品設(shè)計方案整體更具擴(kuò)展性,更易于維護(hù)。

然而在現(xiàn)實當(dāng)中,創(chuàng)建和維護(hù)標(biāo)準(zhǔn)化設(shè)計體系的方式卻多種多樣。Sketch是我們在設(shè)計工作當(dāng)中的利器,可以幫助我們簡化設(shè)計體系的創(chuàng)建流程,但其自身在各方面存在的問題也是無法忽視的。

問題所在

在Sketch 47為我們帶來Libraries之前,Symbols一直是Sketch當(dāng)中最為重要的功能之一,同時也是構(gòu)建設(shè)計體系的關(guān)鍵能力。Symbols用于創(chuàng)建可復(fù)用的界面元素,有助于維護(hù)設(shè)計方案的一致性。然而一直以來,這一機(jī)制的作用范圍僅限于文檔內(nèi)部,除非借助第三方插件的幫助,否則Symbols無法在不同的文件之間保持同步。

這為什么是問題?

對于小項目來說,這沒什么大不了。你可以將全部設(shè)計方案,甚至包括高保真原型、流程圖一類都塞到一個文件當(dāng)中,Sketch處理起來也不會產(chǎn)生什么問題。

然而,情況會隨著項目規(guī)模的擴(kuò)大而有所不同。出于性能效率或協(xié)作方面的考慮,我們通常需要將項目打散到不同的Sketch文件當(dāng)中;這時,Symbols同步共用方面的問題就會暴露出來。

我們的團(tuán)隊有三個產(chǎn)品用到了同一套Symbols,這里的挑戰(zhàn)就在于如何確保Symbols在不同項目之間的同步性。這三個產(chǎn)品都是很大的項目,各自的源文件都包含上百個畫板(Artboard),因此難以通過單一Sketch文件來承載,否則文件將變得非常龐大。

一個Sketch文件承載了整個組件庫

從前的處理方式

我們曾經(jīng)使用一套Sketch模板來集中放置所有的Symbols,這種方式參考了原型制作工具M(jìn)arvel官方的設(shè)計規(guī)范創(chuàng)建方法。在此基礎(chǔ)上,我們進(jìn)行了一定程度的擴(kuò)展,例如在不同的Sketch文件當(dāng)中通過Craft插件統(tǒng)一調(diào)用Symbols模板文件。

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

事實上,我個人并不推薦這種方式。文件尺寸的確得到了控制,Symbols的來源也得到了統(tǒng)一。但問題在于,一旦模板當(dāng)中的Symbols發(fā)生變化,對于那些已經(jīng)插入到不同文檔當(dāng)中的Symbols,我們無法進(jìn)行同步性的更新。

Symbols功能的本質(zhì)目標(biāo)是使項目更易于創(chuàng)造和維護(hù)。然而,強(qiáng)大的復(fù)用能力只是其中的一個方面;對于那些已經(jīng)被插入到不同文檔當(dāng)中的Symbols,你根本無法進(jìn)行統(tǒng)一管理與更新。

幸運的是,Sketch 47為我們帶來了Libraries功能。

解決方案

Libraries功能可以幫助我們創(chuàng)建獨立的、能夠被多個文件統(tǒng)一調(diào)用的Symbols庫。這種機(jī)制已經(jīng)有些類似于前端開發(fā)者們所熟悉的Sass了。不僅如此,你還可以對Libraries進(jìn)行嵌套。

大體上講,如今你可以將不同類型的Symbols分別存放在不同的Sketch文件當(dāng)中各自作為獨立的Library,譬如配色定義、圖標(biāo)、按鈕、表單元素等等;其他項目文件則可以統(tǒng)一調(diào)用這些源文件當(dāng)中的Symbols。當(dāng)你修改了Libraries源文件,相關(guān)的變化也會同步更新到所有的項目文件當(dāng)中。

這種統(tǒng)一管理和調(diào)用的機(jī)制可以為工作帶來諸多益處,包括:

  • 減小文件尺寸
  • 增強(qiáng)Sketch的性能表現(xiàn)
  • 提升界面元素的統(tǒng)一性
  • 提升項目整體的可維護(hù)性

Sketch官方團(tuán)隊是這樣詮釋Libraries功能的:

一個Library本質(zhì)上就是一個普通的Sketch文件,其中的Symbols可以被其他Sketch文件調(diào)用。如果你編輯了Library當(dāng)中的Symbols,那么調(diào)用了該Library的其他Sketch文件便會收到更新通知,你可以對變更進(jìn)行預(yù)覽、對比和確認(rèn),使這些Sketch文件所調(diào)用的Symbols自動更新至最新版本。

使用Sketch Libraries創(chuàng)建組件庫

在本文接下來的部分當(dāng)中,我將展示如何使用Sketch Libraries功能創(chuàng)建UI組件庫。不過在此之前,我們還需要明確一些思路與原則。

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

打造設(shè)計體系的過程中,設(shè)計師們要試著像開發(fā)人員一樣思考?!?strong>D.R.Y – Don’t repeat yourself

組件庫的基本概念就是逐層創(chuàng)建可復(fù)用的UI元素,保持文件的輕量化以及設(shè)計方案的一致性。

從“原始元素”入手

我們所創(chuàng)建的任何一個組件都是由若干“屬性”組成的。這些屬性就是設(shè)計體系當(dāng)中最為「原始化」的元素。開發(fā)人員會在代碼當(dāng)中為這些屬性創(chuàng)造各自的變量,以提升代碼的復(fù)用性;對于設(shè)計師來說也是同理,我們可以為各種原始化UI元素創(chuàng)建Libraries,以便逐層構(gòu)筑更高級別的組件。

原子化設(shè)計理論

為了確保組件庫的擴(kuò)展性,我將Brad Frost提出的原子化設(shè)計理論作為指導(dǎo)。這套理論簡單易行,很容易理解。

簡而言之,原子化設(shè)計的靈感來自于現(xiàn)實世界當(dāng)中的分子結(jié)構(gòu)。UI當(dāng)中顆粒度最小的元素,即「原子」,組成了顆粒度較大的控件,即「分子」;而諸多分子又組成了更加復(fù)雜的組件與模塊,即「有機(jī)體」。

將不同類型的Symbols放在各自的Library文件中

當(dāng)然,如果你愿意,你仍然可以將所有組件都放置在同一個Library文件當(dāng)中;而我的建議則是為每種類型的Symbols各自創(chuàng)建一個獨立的Library文檔。

類似于開發(fā)人員使用Sass partials的方式,調(diào)用多個Libraries文檔可以使我們的設(shè)計體系更為優(yōu)雅,更易維護(hù)。經(jīng)過合理拆分的Libraries文檔將更有利于被不同的項目調(diào)用;在需要的時候,也可以更加方便地進(jìn)行擴(kuò)展。

參照「原始元素」的思路,我們將從最為基礎(chǔ)和核心的UI元素入手,包括顏色、圖標(biāo)等等,這些元素將在整個設(shè)計體系范圍內(nèi)被使用到;所有「原子、分子、有機(jī)體」級別的UI元素也正是由這些原始元素所構(gòu)成的。

我們首先要對全局所用到的各類顏色進(jìn)行定義。

第一步:創(chuàng)建新的Sketch文檔,用于顏色定義

對于團(tuán)隊項目,我會在Sketch文件名當(dāng)中統(tǒng)一添加「AIN」作為前綴,例如「AIN-Colors」等等,以便與其他項目進(jìn)行區(qū)分。當(dāng)然,命名方式和習(xí)慣因人而異,如果你和我一樣需要處理很多不同的項目,通過前綴進(jìn)行區(qū)分的方式或許值得考慮。

我會為設(shè)計體系當(dāng)中的每一種顏色生成一個Shared Style,并按照不同的作用進(jìn)行分類,包括「brand、greyscale、UI」等等;具體的分類方式就是在Shared Style命名當(dāng)中通過「/」符號表示層級結(jié)構(gòu),Sketch會識別到該符號,并自動生成相應(yīng)的架構(gòu)。

接下來,我會為每一種顏色制作一個Symbol,并使用Symbol Organizer插件在Symbols頁面當(dāng)中對它們進(jìn)行組織 – 在層級化命名方式的輔助下,Symbols頁面將自動呈現(xiàn)出清晰的架構(gòu)體系。

第二步:將顏色定義文檔添加到Libraries體系

完成了顏色定義之后,我們需要將這份Sketch文檔添加到Libraries體系當(dāng)中。設(shè)計體系當(dāng)中所有原子級元素的定義都需要這一步驟。

在頂部菜單欄選擇「Sketch ? Preferences」,然后進(jìn)入「Libraries」選項卡,點擊“Add Library」按鈕,選擇我們在上一步里創(chuàng)建的Sketch文檔。

如圖所示,我將AIN-colors文檔添加到了Libraries體系當(dāng)中,這樣我就可以在任何其他Sketch文件里對其進(jìn)行調(diào)用了;這便是Libraries功能的強(qiáng)大之處。

怎樣使用這些顏色Symbols呢?在接下來創(chuàng)建圖標(biāo)Library的過程中,我將進(jìn)行演示。

第三步:創(chuàng)建新的Sketch文檔,用于圖標(biāo)定義

類似于我們在第一步當(dāng)中的做法,這一次我們對圖標(biāo)進(jìn)行定義。新文檔名為「AIN-icons」,與之前的「AIN-colors」文檔保存在相同的路徑中;之后所有原子級UI元素的Libraries文檔也都將被保存在這里。

每個圖標(biāo)都被放置在相同規(guī)格的24×24像素的畫板當(dāng)中,下面鋪著24×24像素的透明圖層以確保規(guī)格統(tǒng)一。然后我會從AIN-colors Library當(dāng)中選擇恰當(dāng)?shù)念伾玈ymbol插入到圖標(biāo)畫板當(dāng)中,覆蓋在圖標(biāo)圖層之上,并將其尺寸調(diào)整為24×24像素。

接下來,將圖標(biāo)設(shè)置為蒙板「按住Control鍵,點選圖標(biāo),在菜單中選擇Mask」,如此一來,我們剛剛從AIN-Colors Library當(dāng)中插入的Symbol就能將其顏色附著到圖標(biāo)形狀的蒙板上了。

需要注意,在Sketch左側(cè)的圖層列表當(dāng)中,帶有連環(huán)圖標(biāo)的便是從外部Libraries插入的Symbols。

這里的核心思路在于Libraries的嵌套。通過這種方式,每當(dāng)我需要修改顏色定義,只需要在「AIN-colors」文檔中進(jìn)行編輯,然后所有用到了這個顏色的圖標(biāo)或其他UI元素就會自動更新了。

現(xiàn)在,我們就可以將圖標(biāo)畫板轉(zhuǎn)換為Symbols了。需要注意的是,對于這些圖標(biāo)畫板,要確保在右側(cè)檢查器中選中「Adjust content on resize」;此外還要將圖標(biāo)的Resizing選項設(shè)置為四邊同時吸附,并鎖定寬高比例,以確保圖標(biāo)Symbols在實際使用的時候可以被靈活地調(diào)整大小。

重復(fù)這一過程,直到完成所有圖標(biāo)Symbols的定義。期間同樣要注意層級化的命名方式,以便最后可以通過Symbols Organizer插件將它們組織起來。

第四步:將圖標(biāo)定義文檔添加到Libraries體系

具體方法與我們在第二步當(dāng)中描述的相同。

此時,我們已經(jīng)完成了兩個Libraries文檔的創(chuàng)建,對于我的情況來說,就是「AIN-colors和AIN-icons」?,F(xiàn)在我們的圖標(biāo)已經(jīng)可以通過Libraries的方式被其他文檔統(tǒng)一調(diào)用了。

第五步:重復(fù)以上步驟,對其他元素進(jìn)行定義

希望前面四步的介紹已經(jīng)可以幫你了解到流程的主旨。

你可以參考這樣的方式繼續(xù)完善其他基礎(chǔ)元素的定義,期間始終保持Libraries的逐層嵌套。

在我們的AIN設(shè)計體系當(dāng)中,同類元素還包括按鈕、表單元素等等;這些Libraries文檔與「AIN-colors和AIN-icons」一起被保存在同一個路徑當(dāng)中,當(dāng)我開始制作分子或更高級別UI元素的Libraries時,便會進(jìn)行調(diào)用。

Libraries的更新

隨著產(chǎn)品的進(jìn)化,你總會需要對核心Libraries當(dāng)中的某些元素進(jìn)行更新。Sketch提供的機(jī)制使這件事變得很簡單,你只要在Libraries文件當(dāng)中像操作普通Symbols那樣進(jìn)行修改便可以,然后所有調(diào)用過這些Symbols的Sketch文件都會收到更新提示「Sketch界面右上角」。點擊提示信息,查看變更并進(jìn)行確認(rèn),所有更新工作就會自動完成。

接下來

完成了所有原子級別UI元素的定義之后,你就要著手整理更為復(fù)雜的元素了,例如「分子」,然后是「有機(jī)體」,等等。整個過程中,你都可以對之前創(chuàng)建的各級Libraries進(jìn)行嵌套,通過小顆粒元素組合大顆粒元素。

以此類推,這套基于Sketch Libraries機(jī)制逐層構(gòu)建的設(shè)計體系終將越發(fā)復(fù)雜和完善,并最終有能力幫你實現(xiàn)完整的界面。屆時,你便可以在任何項目當(dāng)中對這套體系進(jìn)行調(diào)用。

在本文的后續(xù)部分中,我將帶各位一起了解一下創(chuàng)建更為復(fù)雜的組件的過程,可能包括頁頭、導(dǎo)航、卡片視圖、頁腳等部分;同時也將展示如何在實際當(dāng)中使用這套設(shè)計體系。

需要說明的是,原子化設(shè)計理論只是一種指導(dǎo)原則,而非硬性規(guī)則,你最終還是需要一邊結(jié)合理論,一邊根據(jù)自己產(chǎn)品的特定情況來判斷以怎樣的方式對UI元素進(jìn)行層級劃分。

此外,關(guān)于Libraries在多設(shè)備之間的同步使用,我個人目前還沒有涉及到這方面的實際運用。正如Sketch在官方文檔之中建議的,你可以通過Dropbox、Google Drive或類似的存儲服務(wù)來實現(xiàn)同步;這對于團(tuán)隊共享和協(xié)作將非常有用。

總結(jié)

在本文中,我們一同了解了如何使用Sketch Libraries構(gòu)建模塊化的UI組件庫/設(shè)計體系,希望此時你已經(jīng)感受到了Libraries功能的巨大潛力。

如果你是設(shè)計團(tuán)隊中的一員,或是一名需要更好的方式來管理項目的獨立設(shè)計師,那么不妨試著將Libraries功能運用到設(shè)計流程當(dāng)中。自Symbols以來意義最為重大的新功能將能越發(fā)有效的幫助我們構(gòu)建和維護(hù)設(shè)計體系。

你可以下載我提供的范例項目作為參考,其中包括了顏色、圖標(biāo)、按鈕等元素的定義,以及一個簡單的項目案例。希望這套范例能幫你更好的理解本文的內(nèi)容。需要注意,你需要更新到Sketch 47才能打開這份文檔。

相關(guān)資源:

 

原文作者:Harry Cresswell

原文地址:Usejournal

譯者:C7210,交互設(shè)計師、UX設(shè)計熱愛者、VR探索者、譯者、貓奴、吉他手、鼓手,現(xiàn)就職于騰訊上海

譯文地址:Be For Web

題圖來自 unsplash

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 打不開雅

    回復(fù)
  2. 你可以下載我提供的范例項目作為參考,提供的地址打不開。

    來自廣東 回復(fù)
  3. 后續(xù)的文章還有嗎

    來自北京 回復(fù)
  4. 牛逼 非常棒,感謝樓主辛苦翻譯

    來自廣東 回復(fù)