設(shè)計教程

【sketch教程】打造具有擴(kuò)展性的Sketch元件庫

4110

此篇內(nèi)容提及如何架構(gòu)一個可擴(kuò)張的設(shè)計系統(tǒng)，內(nèi)文及圖片版權(quán)皆為UX Planet的designer Matthew Talebi所有。

我目前跟CA Technologies Design Center團(tuán)隊在一起進(jìn)行Mineral UI項目，一個針對企業(yè)的開源設(shè)計系統(tǒng)。CA打造過很多企業(yè)等級的軟件，且有些已經(jīng)存在多年。我們打造的設(shè)計系統(tǒng)的目標(biāo)歸納為三個簡單準(zhǔn)則：一致性(Consistency)、易用性(usability)、可用性(accessibility)。

構(gòu)建symbol library

大部分的讀者對于Sketch symbols可能并不陌生，Symbols是把多個圖層合并成一個，且能重復(fù)使用的元件。這些元件具有狀態(tài)、內(nèi)容改變甚至最基礎(chǔ)的響應(yīng)式變化。當(dāng)然，使用launchpad這個Sketch套件能有更進(jìn)階的響應(yīng)式設(shè)計。

非核心服務(wù)的套件跟相依性插件時常需要更新，尤其在大型規(guī)模的團(tuán)隊。為了確保每位使用者都使用著相同版本、每個部分都同步更新，我們需要限制使用的套件數(shù)。

目前有很多主流的設(shè)計系統(tǒng)法則，其中最知名的是原子設(shè)計(Atomic design)。原子設(shè)計效仿原子構(gòu)成??的準(zhǔn)則，從最基本的HTML 元素(例如輸入框) ，加上標(biāo)簽與狀態(tài)成為分子(molecule) ; 增加多個輸入框變成一個表單，轉(zhuǎn)為有機(jī)物(Organism)。至此開始繼續(xù)組合成區(qū)塊、模板等等。

Atomic Design: 由左至右為原子、分子、有機(jī)物、模板、頁面

當(dāng)我們的元件庫遵循原子設(shè)計成長到一個階段時，需要投注很多心力審核每一個元件的規(guī)模大小(如果我們嚴(yán)格遵守原子設(shè)計的準(zhǔn)則)。我們沒有時間與資源花費(fèi)在這些決定上，因此轉(zhuǎn)而選擇更簡單的解決方式。

我們的symbol libraries 遵守以下四點模型:

單元Utilities? ?任何原生HTML元件，如:輸入框、按鈕、復(fù)選框等等。

次元件Subcomponents? ?任何能組成元件的物件。

元件Components? ?獨(dú)立且能互動的物件(由次元件組成)。

布局Layouts? ?元件能描述一個完整的使用流程。

你可能正在思考哪邊有不同，這些不就只是命名嗎？事實上，因為原子設(shè)計采用科學(xué)方法，因此你不能任意將原子定義成分子。根據(jù)上述的定義模型，我們可以很快把每一個物件歸納到屬于他們的模型。

以上面這張圖為例，我們需要決定如果“頭像(Avatar)” 是一個原子，“姓名卡(name card)” 是分子，那么“人名選擇器(Select field)” 為有機(jī)物是否合理？甚至是完整表單的界面、頁面之間的互動呢？有些公司使用原子設(shè)計加上亞原子(sub-atomic) 以及其他分子層級來解決問題，但這些方法往往很快地都會開始讓人費(fèi)解，因此我們認(rèn)為保持上述相對寬松的規(guī)定是有益且明智的。

主題模板Theme templates

在我們開始制作模板前要先訂制我們的主題色(theme colors)，感謝我們的symbol libraries讓我們可以一更改顏色，立即更新主題色配置。

Mineral UI Color themes

在Mineral UI 項目中我們共有十一種主題色系，(扣除灰色，因為它是每個主題中元件都可能使用的基礎(chǔ)顏色，如文字的顏色)，每一個產(chǎn)品使用一種主題，那我們是怎么打造symbol libraries 以容納全部的主題呢？

我們維護(hù)一份核心檔案，里頭僅是顏色和字體的初始設(shè)定。這里我們建立幾個色塊，讓使用者可以設(shè)定屬于他們的主題色:

如前文所說，灰色是全部主題的核心，另外，還有三種我們認(rèn)定為變異色(variant colors) 的顏色，它們用來在服務(wù)中注明狀態(tài)、警告。這些色塊內(nèi)的全部圖層都被上鎖，以防意外更改到。

針對每一個主題色系，使用者需要手動做調(diào)整，Sketch 沒有提供快速切換一批顏色的功能，因此使用者需要更換十個色塊以調(diào)整成任一個主題。這里我們在右邊放上一張主題色系圖讓使用者方便快速對照。

輸入色系Importing palettes

我們使用Sketch palette套件輸出每一個主題色系方便之后的輸入。此步驟并非必要，只是它能節(jié)省使用者將主題色系輸入到其他文件的時間。

字體樣式Text styles

字體樣式在相同核心檔案的不同頁面里，這里使用者需要更換“Theme style” 中的文字顏色。

Mineral UI text styles

Sketch沒有針對字體圖層(text layer)的symbol library系統(tǒng)，幸運(yùn)地，我們可以找到套件能輸出與輸入字體樣式。自此是必須安裝的唯二套件，我知道之前聲明無需套件，但這兩個套件只用于初始設(shè)定，實際上在使用我們的元件庫是不需安裝任何套件的。

Symbols 中的顏色Colors in our symbols

如果你對Sketch 熟悉(或是任何設(shè)計工具)，那你應(yīng)該了解遮罩功能(masks)，我們可以使用遮罩幫icons 或是其他symbols上色。

icons for Mineral UI by Sun Young Han

更新元件庫Updating the library

我們的symbols 分散在不同的Sketch 檔案中各自連動有其優(yōu)點與缺點，最明顯的好處是易于管理 — 設(shè)計師或是其他團(tuán)隊同事想編輯可以快速知道哪一份檔案有哪些symbols。

壞處呢？每當(dāng)任一個檔案更新時，舉例來說核心主題檔案，使用者需要開啟一個個檔案并按下可愛的“Library Update Available” 按鈕。

在寫下這篇文章的時間點時，Sketch 還沒提供異步更新(asynchronously updating)或是一次更新每個檔案的方法。根據(jù)symbols 元件庫建立的方法，可能存在一個檔案記錄著更新相關(guān)的資訊，避免重復(fù)更新。

注: Sketch已經(jīng)針對同步更新推出Sketch Cloud的功能

有些讀者可能會問，為何不使用單一檔案并用頁面(pages)區(qū)分來解決這個問題，簡單地回答，當(dāng)檔案內(nèi)有上百個symbols、模板并持續(xù)增加時，Sketch 本身的載入會變得十分遲緩。

管理Organizing symbols

維護(hù)龐大元件庫中的symbols 需要注意，Sketch 運(yùn)作的原理是: 如果兩個symbols 有同樣的尺寸大小，那就會視為相同類型的。當(dāng)你有上百個symbols，有些自然地應(yīng)該會有相同尺寸，不同類型間必須至少有一個像素(one pixel) 的尺寸差異，以下提供范例:

你給予按鈕以及icons 的顏色可能不同，譬如按鈕有三種顏色而icons 有六種。通常，只需要使用1x1 的畫布并用遮罩功能即可達(dá)成，但如果恰好按鈕跟icons 都使用1x1 的顏色遮罩，那么最后兩者都會有九個顏色可以選擇。

我需要一個方式來管理symbols，透過以下的試算表(spreadsheet)，我建立簡單的symbol 列表，有類型、尺寸、以及檔案位置。這讓我能快速二次確認(rèn)哪些symbols 有相同尺寸，以及他們的所在檔案。

這個問題也能使用分配symbols 到不同檔案的方式，如果兩symbols 會有相同尺寸(也注定要相同尺寸) ，那么把兩個類別放到不同檔案是有益于管理的。

發(fā)布Distribution

有趣的部分來了，發(fā)布元件庫！在內(nèi)部我們使用跟Github很像的軟件Abstract，不過他是針對Sketch檔案而非程式碼。這套軟件適合內(nèi)部使用，它主要帶給團(tuán)隊協(xié)作的功能以及減少設(shè)計改變時的沖突和重工。但這服務(wù)有個小缺點，它所注重的范圍在團(tuán)隊內(nèi)而非發(fā)布(distribution)，并沒有提供網(wǎng)頁界面或其他開源服務(wù)能給使用者復(fù)制我們的項目。

分享元件庫的套件Library sharing plugins

Credit: Invision Craft Library Sharing

我們嘗試過許多套件InVision ’s Craft Library到UXPin，這些套件都有個共同的小缺點:他們皆復(fù)制了symbol內(nèi)全部物件到各自的文件里，這代表未來在更新symbols時，使用者會無法同步。至此唯一的考量就是找到一個能發(fā)布同步更新過的Sketch檔案方法，讓他們的symbols是能連動的。

Dropbox, GoogleDrive, 或是 ?

能公開分享的云端儲存是一個方式，但同步失敗、過多人存取檔案以至于降低載入速度都會是問題。另外我們也需要版本控制系統(tǒng)來備份，即使Dropbox 有基本的版控系統(tǒng)，他并不符合我們的需求。

Github

自然地，另一個相似于Abstract 的選擇就是Github。我們嘗試找尋技術(shù)門檻較低的替代方案，但此時還沒有其他解答。Github 能給使用者回報任何問題或是提出額外的新symbols 需求。盡管它對工程師來說很方便，但在處理設(shè)計系統(tǒng)(design system libraries) 上是有缺陷(drawbacks) 的。

Our newfound workflow

讓我們快速回顧現(xiàn)在的工作流程，Sketch 和Abstract 是內(nèi)部開發(fā)工具，而Github 是目前唯一發(fā)布設(shè)計系統(tǒng)的方式，那么缺陷是什么？

新版本需要使用者再次設(shè)定元件庫

每當(dāng)新版本發(fā)布，因為還沒有辦法模組化顏色、字體樣式，使用者需要用他們的主題設(shè)定去更新每一個新版本檔案。因為這個緣故，我們盡量每個月發(fā)布一次，降低使用者使用的障礙。

復(fù)數(shù)主題Multiple themes

如前面所說的CA Technology 有很多套產(chǎn)品，如果一套產(chǎn)品內(nèi)有三個不同的軟件，每個軟件都會使用各自的Mineral UI 主題色。此時還沒有辦法在使用相同的元件庫symbols 之下，給每套產(chǎn)品一個主題。我們還在探索能給使用者二套甚至多套分開的Mineral UI 元件庫的方式，讓他們能根據(jù)不同套產(chǎn)品做切換。

我們目前能建議的就是，請使用者做兩次復(fù)制(git clone) Mineral UI 項目并自行分開管理Sketch 元件庫。另一個不理想的方式，就是每次切換一個產(chǎn)品時自己交換一下顏色。