UI界面設計 設計教程 ·

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

此篇內容提及如何架構一個可擴張的設計系統,內文及圖片版權皆為UX Planet的designer Matthew Talebi所有。

 

我目前跟CA Technologies Design Center團隊在一起進行Mineral UI項目,一個針對企業的開源設計系統。CA打造過很多企業等級的軟件,且有些已經存在多年。我們打造的設計系統的目標歸納為三個簡單準則:一致性(Consistency)、易用性(usability)、可用性(accessibility)。

 

構建symbol library

大部分的讀者對于Sketch symbols可能并不陌生,Symbols是把多個圖層合并成一個,且能重復使用的元件。這些元件具有狀態、內容改變甚至最基礎的響應式變化。當然,使用launchpad這個Sketch套件能有更進階的響應式設計。

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

目前有很多主流的設計系統法則,其中最知名的是原子設計(Atomic design)。原子設計效仿原子構成??的準則,從最基本的HTML 元素(例如輸入框) ,加上標簽與狀態成為分子(molecule) ; 增加多個輸入框變成一個表單,轉為有機物(Organism)。至此開始繼續組合成區塊、模板等等。

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

 

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

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

單元Utilities? ?任何原生HTML元件,如:輸入框、按鈕、復選框等等。

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

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

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

 

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

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

 

主題模板Theme templates

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

 

Mineral UI Color themes

 

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

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

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

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

 

輸入色系Importing palettes

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

字體樣式Text styles

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

Mineral UI text styles

 

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

 

Symbols 中的顏色Colors in our symbols

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

icons for Mineral UI by Sun Young Han

 

更新元件庫Updating the library

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

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

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

 

注: Sketch已經針對同步更新推出Sketch Cloud的功能

 

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

 

管理Organizing symbols

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

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

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

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

 

發布Distribution

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

 

分享元件庫的套件Library sharing plugins

Credit: Invision Craft Library Sharing

 

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

Dropbox, GoogleDrive, 或是 ?

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

Github

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

Our newfound workflow

 

讓我們快速回顧現在的工作流程,Sketch 和Abstract 是內部開發工具,而Github 是目前唯一發布設計系統的方式,那么缺陷是什么?

新版本需要使用者再次設定元件庫

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

 

復數主題Multiple themes

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

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

 

愿景Vista into the future

分享開源Sketch元件庫以及讓每一個人同步更新的未來并非太遙遠,我們的一個同事Kyle Gach在黑客松時決定深入這個問題,并發現可能行得通的解法。

這看起來是個能凝聚工程師與設計師合作的方式,但直到我們可以讓Sketch 專屬的功能都轉化成程式碼,那我們再來看如何處理復雜的symbols。Sketch 已經開始能輸出成JSON 格式,這個功能應該在不久后就能實現。

如果你有任何更好管理、發布設計系統的想法,讓我們知道,我們樂于這些建議和合作!

 

注:類似Abstract的產品還有Sympli、Avacode