亚洲中文久久精品无码,欧美一区二区三区成人片在线

搜索

APP

起點課堂會員權益

職業體系課特權

線下行業大會特權

個人IP打造特權

30+門專項技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導直播

12場專業技能直播

會員專屬社群

榮耀標識

發布

注冊 | 登錄

使用Sketch Libraries構建組件庫/設計體系

白桃汽水不加冰

2017-11-22

4 評論 16687 瀏覽 100 收藏

20 分鐘

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

看完本文你會學到：

如何解決Symbols同步共用問題？
使用Sketch Libraries創建組件庫
?對核心Libraries中的元素進行更新

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

注意：Libraries功能僅在最新的Sketch 47當中提供。

所謂設計，就是在一系列約束條件下構建解決方案的過程?！狝dam Morse

從某種程度上講，設計體系便是這樣的一種約束。諸如配色、圖標、按鈕等一系列設計語言要素共同構成了標準化的體系，為設計決策提供著指引。

遵從于這樣的標準化體系，設計流程能夠得到有效加速；同時，設計模式的復用性與一致性也將得到提升，產品設計方案整體更具擴展性，更易于維護。

然而在現實當中，創建和維護標準化設計體系的方式卻多種多樣。Sketch是我們在設計工作當中的利器，可以幫助我們簡化設計體系的創建流程，但其自身在各方面存在的問題也是無法忽視的。

問題所在

在Sketch 47為我們帶來Libraries之前，Symbols一直是Sketch當中最為重要的功能之一，同時也是構建設計體系的關鍵能力。Symbols用于創建可復用的界面元素，有助于維護設計方案的一致性。然而一直以來，這一機制的作用范圍僅限于文檔內部，除非借助第三方插件的幫助，否則Symbols無法在不同的文件之間保持同步。

這為什么是問題？

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

然而，情況會隨著項目規模的擴大而有所不同。出于性能效率或協作方面的考慮，我們通常需要將項目打散到不同的Sketch文件當中；這時，Symbols同步共用方面的問題就會暴露出來。

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

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

從前的處理方式

我們曾經使用一套Sketch模板來集中放置所有的Symbols，這種方式參考了原型制作工具Marvel官方的設計規范創建方法。在此基礎上，我們進行了一定程度的擴展，例如在不同的Sketch文件當中通過Craft插件統一調用Symbols模板文件。

使用Craft插件構建組件庫

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

Symbols功能的本質目標是使項目更易于創造和維護。然而，強大的復用能力只是其中的一個方面；對于那些已經被插入到不同文檔當中的Symbols，你根本無法進行統一管理與更新。

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

解決方案

Libraries功能可以幫助我們創建獨立的、能夠被多個文件統一調用的Symbols庫。這種機制已經有些類似于前端開發者們所熟悉的Sass了。不僅如此，你還可以對Libraries進行嵌套。

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

這種統一管理和調用的機制可以為工作帶來諸多益處，包括：

減小文件尺寸
增強Sketch的性能表現
提升界面元素的統一性
提升項目整體的可維護性

Sketch官方團隊是這樣詮釋Libraries功能的：

一個Library本質上就是一個普通的Sketch文件，其中的Symbols可以被其他Sketch文件調用。如果你編輯了Library當中的Symbols，那么調用了該Library的其他Sketch文件便會收到更新通知，你可以對變更進行預覽、對比和確認，使這些Sketch文件所調用的Symbols自動更新至最新版本。

使用Sketch Libraries創建組件庫

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

像開發人員一樣思考

打造設計體系的過程中，設計師們要試著像開發人員一樣思考?！?strong>D.R.Y – Don’t repeat yourself

組件庫的基本概念就是逐層創建可復用的UI元素，保持文件的輕量化以及設計方案的一致性。

從“原始元素”入手

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

原子化設計理論

為了確保組件庫的擴展性，我將Brad Frost提出的原子化設計理論作為指導。這套理論簡單易行，很容易理解。

簡而言之，原子化設計的靈感來自于現實世界當中的分子結構。UI當中顆粒度最小的元素，即「原子」，組成了顆粒度較大的控件，即「分子」；而諸多分子又組成了更加復雜的組件與模塊，即「有機體」。

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

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

類似于開發人員使用Sass partials的方式，調用多個Libraries文檔可以使我們的設計體系更為優雅，更易維護。經過合理拆分的Libraries文檔將更有利于被不同的項目調用；在需要的時候，也可以更加方便地進行擴展。

參照「原始元素」的思路，我們將從最為基礎和核心的UI元素入手，包括顏色、圖標等等，這些元素將在整個設計體系范圍內被使用到；所有「原子、分子、有機體」級別的UI元素也正是由這些原始元素所構成的。

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

第一步：創建新的Sketch文檔，用于顏色定義

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

我會為設計體系當中的每一種顏色生成一個Shared Style，并按照不同的作用進行分類，包括「brand、greyscale、UI」等等；具體的分類方式就是在Shared Style命名當中通過「/」符號表示層級結構，Sketch會識別到該符號，并自動生成相應的架構。

接下來，我會為每一種顏色制作一個Symbol，并使用Symbol Organizer插件在Symbols頁面當中對它們進行組織 – 在層級化命名方式的輔助下，Symbols頁面將自動呈現出清晰的架構體系。

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

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

在頂部菜單欄選擇「Sketch ? Preferences」，然后進入「Libraries」選項卡，點擊“Add Library」按鈕，選擇我們在上一步里創建的Sketch文檔。

如圖所示，我將AIN-colors文檔添加到了Libraries體系當中，這樣我就可以在任何其他Sketch文件里對其進行調用了；這便是Libraries功能的強大之處。

怎樣使用這些顏色Symbols呢？在接下來創建圖標Library的過程中，我將進行演示。

第三步：創建新的Sketch文檔，用于圖標定義

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

每個圖標都被放置在相同規格的24×24像素的畫板當中，下面鋪著24×24像素的透明圖層以確保規格統一。然后我會從AIN-colors Library當中選擇恰當的顏色Symbol插入到圖標畫板當中，覆蓋在圖標圖層之上，并將其尺寸調整為24×24像素。

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

需要注意，在Sketch左側的圖層列表當中，帶有連環圖標的便是從外部Libraries插入的Symbols。

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

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

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

第四步：將圖標定義文檔添加到Libraries體系

具體方法與我們在第二步當中描述的相同。

此時，我們已經完成了兩個Libraries文檔的創建，對于我的情況來說，就是「AIN-colors和AIN-icons」?，F在我們的圖標已經可以通過Libraries的方式被其他文檔統一調用了。

第五步：重復以上步驟，對其他元素進行定義

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

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

在我們的AIN設計體系當中，同類元素還包括按鈕、表單元素等等；這些Libraries文檔與「AIN-colors和AIN-icons」一起被保存在同一個路徑當中，當我開始制作分子或更高級別UI元素的Libraries時，便會進行調用。

Libraries的更新

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