高手進階技巧！全方位深入理解 Sketch 庫（中）

這一部分主要是針對設計團隊中庫管理者或設計系統(tǒng)維護者，介紹一些庫組件命名建議、組件管理、樣式管理和庫文件管理方面的信息，讀者只需要有這方法管理經驗，不需要一些編程開發(fā)的經驗。

一、組件命名建議

1. 組件命名

庫文件會分發(fā)給團隊內部設計師，甚至是外部設計師，所以庫組件的分組結構需要盡量清晰。組件名稱使用 「/」 符號分組，建議分組在 1 - 4 之間，「/」 前后加入一個空格，名稱使用 Title Case 或 lower case 方式命名，如果你的組件跟某個界面框架相應，也可以根據(jù)這個界面框架的模版名稱命名。

第一組名稱可以根據(jù) Atomic Design 的理論命名。例如 Atoms、Molecules、Organisms、Templates、Pages 或 Components、Patterns 之類。第二組名稱使用元素的標準名稱，這個可以參考各 Web 前端框架、iOS 和 Android 等平臺對控件的命名。例如 Navigation Bar、Status Bar、Toolbar。第三組名稱則表示元素的不同屬性或者狀態(tài)，例如尺寸、淺色主題和深色主題，聚焦狀態(tài)和禁用狀態(tài)，正確、錯誤和警告狀態(tài)等等。例如 Button Default、Button Primary。通常第二、三組可能會有多個子類，因為 Sketch 會以字母順序排列，所以通常將主類的名前置，而將表示狀態(tài)等詞后置，這樣菜單中就會顯示更清晰，例如 Input / Text Disable 和 Input / Password Disable。

目前設計師可以使用 Sketch Runner 插件的 Insert 功能，搜索并插入所有庫中的組件，但目前該插件中文搜索結果非常差，所以建議組件命名統(tǒng)一采用英文，并且與相應的框架或平臺的規(guī)范名稱一致。

如果可能會導出組件，組件命名就盡量不要包含可以用于文件名的特殊符號，和大小寫敏感問題，例如 macOS 文件名不能包含 「:」，Windows 不能包含 「:*?<> 」 等字符。另外在 macOS 和 Linux 中文件名以點開頭的文件會被隱藏，所以組件的類中不要以點開頭。

Sketch Runner 在搜索組件時，可以設置忽略名稱帶有某個特定前綴和后綴的組件。通常把一些不會在設計中獨立使用的組件，圖層命名使用 「_」 開頭。 在庫中那些有異議或未確定的組件，建議在圖層命名結尾加 「!」 符號。

現(xiàn)在有很多設計系統(tǒng)包含 Sketch 的 UIKit，可以從這些文件上學習他們是如果管理庫組件的，最后還是要根據(jù)團隊的業(yè)務、技術水平和文化等因素，結合自己的思考，制定一套適合團隊的管理規(guī)范。

我的 Design System 插件，類似一個在 Sketch 內的瀏覽器書簽，可以快捷的打開各個主要設計系統(tǒng)的主頁和 Sketch 資源下載頁面。

2. 樣式命名

圖層樣式和文本樣式的命名，盡量根據(jù) Web前端框架、iOS 和 Android 等平臺的規(guī)范，如果自己有一套規(guī)則，也需要合理的命名。樣式命名建議分組在 1 - 2 之間，可參考組件命名規(guī)則。樣式的命名也可以使用 「_」 開頭來表示一些不會在設計中獨立使用的樣式。

3. Overrides 標簽命名

Overrides 標簽命名即是組件內相應的圖層名，為了能清晰表達 Overrides 中各項的含義，會出現(xiàn) Overrides 面板上的圖層，例如文本圖層、位圖圖層、位圖填充圖層、組件實例圖層和熱區(qū)圖層等，都盡量需要改成合理的名稱，例如統(tǒng)一改成 Text、Image、Icon 等等之類的詞匯，有些設計也使用 Emoji 加文字的方式來命名 Overrides 標簽。

Automate 插件內 「Symbol - Rename Instances」 可以把選中的組件實例圖層，改成原組件模板的最后一組名稱。

二、組件管理

1. 組件排列與分頁

組件的排列，其實也就是對畫板的排列。建議將同類的組件排列在一起，或者分到同一個分頁內，而不要直接使用默認的水平排列方式。

Symbol Organizer 組件管理插件，可以將組件組件按名稱分組，水平或垂直排列。

Automate 插件內 「Arrange」 組下的很多功能，可以幫助你快速的排列各種元素，例如對換位置（Change Places Between Two Layers）、水平或垂直排列（Tile Objects by Position X/Y）、排列對象（Tile Objects）、根據(jù)位置對齊排列（Arrange Objects），這些都可以通過設置間距快速排列畫板，「Tile Objects」 還加入按名稱排序選項。「Order Layers By Name」 和 「Reverse Layer Order」 可以對圖層列表按名稱排序和反向。

組件的分頁不建議使用剪切粘貼組件模板這種操作，如果一個組件可以確定沒有被使用，那么同一文檔內組件模板的剪切粘貼是可以的，這個操作不會導致組件 ID 改變，如果組件被使用，會導致該組件的實例變成組。從不同文檔間的組件模板復制相對較安全些，如果 ID 相同新的組件模板的 Symbol ID 會被重建，如果包含內嵌的組件，則會產生相應的模板。

Automate 插件內 「Symbol - Move Symbol Masters to Another Page」 可以將選中的組件模板移動到指定的頁面。

2. 原位置創(chuàng)建組件模板

默認的創(chuàng)建組件會產生一個組件實例和組件模板，組件模板可以選擇是否發(fā)送到組件分頁。在庫文件上直接將圖層原位置變成組件模板是最強烈的需求。

不借助插件的話，可以先從圖層創(chuàng)建畫板，快捷操作是選擇圖層，按插入畫板快捷鍵 「A」，從屬性面板上方選擇 「New from Selection」 直接從選擇的圖層創(chuàng)建畫板，然后執(zhí)行 「Create Symbol」 操作，這樣組件模板就直接原位置。

Automate 插件內 「Symbol - Selection to Symbol Masters」 會將選中的圖層直接原地轉為組件模板，如果需要轉為一個組件模板需求先組合。

3. 將不獨立使用的組件尺寸特殊化

Overrides 中組件的下拉菜單會顯示相同尺寸的組件，如果希望讓選擇項中不出現(xiàn)其他不相關的組件，可以將某些不會獨立使用的組件的尺寸特殊化，再利用組件的 Resizing 功能調整至合適尺寸。

有一種常見的示例是讓一些按鈕組件或圖標組件支持通過 Overrides 選擇項快速改變顏色，就是在圖標或按鈕的組件模板上，把內容圖層作為蒙板，并增加一層顏色組件。色版組件采用一般組件不會出現(xiàn)的較小尺寸，例如 8x8 或 10x10。

在使用這種色版組件時，可以直接拉大至覆蓋整個內容，巧妙的使用這種組合，可以讓同一個組件快速調整內容和顏色。

4. 組件更新丟失 Overrides 問題

由于組件模板內某些會出現(xiàn)在 Overrides 上的圖層 ID 方式變化，導致用戶更新組件時會丟失 Overrides 數(shù)據(jù)，此問題已在 Sketch 50 之后的版本中被解決，這個版本會因為圖層名稱和類型相同而導致 Overrides 數(shù)據(jù)替換時內容張冠李戴，可以通過修改不同圖層名避免。舊版本請注意不要替換組件內原有的文本圖層、位圖圖層、組件和帶位圖填充形狀。

在 Sketch 50.x 版本上，發(fā)現(xiàn)修改某個嵌套在某個 Symbol Master 內的組件的 Overrides，會導致使用該 Symbol Master 的文檔更新后相應的 Overrides 項被復原。所以建議養(yǎng)成一個習慣，不要修改 Symbol Master 內嵌套組件的 Overrides。

三、樣式管理

1. 創(chuàng)建公共樣式

就文本樣式而言，設計規(guī)范通常會制定類似 Title、Headline、Body 之類的公共樣式，在不同的場景下這些樣式字體相關的設置是不變的，但可能會改變顏色，例如受應用本身的主題影響，某些文字顏色會隨之改變，所以文本樣式一般不考慮特殊顏色。

圖層樣式也有類似問題，所以通常只創(chuàng)建公共的部分，例如不同層次的投影、疊加效果、背景模糊效果等等。

2. 保持差異和更新樣式

如果采用上述的方法創(chuàng)建樣式，使用了樣式并調整過顏色的圖層，就會圖層樣式與共享樣式不匹配，屬性面板上的樣式名會變?yōu)樾斌w，并帶有 「*」 號和同步圖標，這時需要非常謹慎，不可以點擊同步圖標。

保存完整樣式的好處是改一處，所有內容都一起修改，但是也會因為場景太多帶來管理麻煩。而這種讓圖層樣式與公共樣式保持差異的做法，最困難的問題就是如何更新共享樣式并只把部分屬性同步給其他圖層。

Automate 插件內 「Style」 組下的一些功能，可以讓你先復制圖層樣式，再根據(jù)樣式選擇圖層，然后將各種樣式應用到圖層上。

四、庫文件性能優(yōu)化

1. 控制頁面內畫板數(shù)量

官方文檔中提到幾點文件性能優(yōu)化建議，避免使用過多大圖；避免使用過多模糊效果；避免使用過多投影；適當分頁，避免頁面內過多畫板；避免形狀圖層的路徑節(jié)點過多。如果整個設計系統(tǒng)所需要的元素都保存在一個庫文件內，那就需要盡量考慮文件的性能，尤其需要控制頁面內畫板的數(shù)量。使用上文提到的插件和方法，可以很方便的對組件分頁。

2. 庫文件拆分與合并

當整個設計系統(tǒng)的庫比較龐大時，可以考慮拆分成多個文件，通常情況下 UI 元素和圖標分成兩個庫文件，或者不同平臺的 UI 元素也分拆分成多個文件。

復制粘貼就可以處理庫拆分或合并，上文已經提到，新加入的組件模板如果 Symbol ID 已存在，該組件模板的 Symbol ID 會被重建，由于 Symbol ID 在界面上不可見，管理組件建議每個組件都有唯一的命名。主要是嵌套組件可能會出現(xiàn)重復，可以使用 Merge duplicate symbols 插件合并同名組件。

如果整個系統(tǒng)被拆分成多個庫組成，他們之間的組件是可以以庫組件形式插入的，外部組件不會出現(xiàn)在插入組件菜單中，所以盡量避免插入與整個系統(tǒng)無關的庫組件。

將一些需要導出資源的內容，例如圖標、插畫等，獨立一個庫文件是一種比較明智的做法，這樣可以利用各種方式快速導出資源，而排除其他內容干擾。

3. 圖標庫優(yōu)化

以往的經驗幾百個圖標在畫布中直接使用分組和使用 Symbol Master 的性能差異較大，能感受到視圖移動的卡頓。所以圖標數(shù)量較大時，可以考慮畫完在轉換為 Symbol 并發(fā)送的 Symbol 頁面。

也可以使用 Sketch 腳本生成圖標的庫文件，如果使圖標組件已被使用，要防止更新錯誤，需要考慮為每個圖標都固定 Symbol ID。如果圖標組件未被使用，Sketch Icons 插件從 SVG 文件快速創(chuàng)建一個可以修改顏色的 Icon 庫。

五、庫測試

1. 創(chuàng)建模版或批量插入組件實例

使用庫創(chuàng)建模版除了展示實際使用的示例，也可以測試其他設計師在更新庫是否會發(fā)生錯誤。

Symbol Instance Sheet 插件可以批量插入某個庫內的所有組件，特別適合圖標庫。

2. 修改庫 ID 沖突

庫 ID 即 Sketch 文檔的 document ID，如果不通過 Sketch 新建文檔，而是直接復制 Sketch 文檔，他們就會具有相同的文檔 ID，庫面板中存在相同 ID 的庫，并且?guī)熘杏邢嗤?ID 的組件，會導致更新到錯誤的內容。

Automate 插件內 「Library」 組下的 「Fit Library ID Conflict」，在庫面板列表包含相同 ID 庫的時候，會顯示所有 ID 沖突的庫，然后根據(jù)情況改變庫的 ID。

3. 查找和修復壞鏈庫組件

使用了被更改 ID 的庫內的組件，或者丟失庫的組件，會導致組件無法更新，如果確定這些組件同屬于一個庫，并且明確這個庫已更換為另一庫，可以使用 Symbol Swapper 插件內的 Symbol Swap Libraries 功能，該功能可以把組件的庫更換成另一個庫。

如果不是統(tǒng)一替換某個庫，而是查找每個組件的鏈接狀態(tài)，或者針對某個組件更改鏈接的庫，則可以使用 Automate 插件內 「Library」 組下的 「Imported Symbols Link Mange」 功能，該功能可以只顯示庫不存在的組件，并且可以在更改鏈接的庫時，檢測庫內是否包含該元素，實際上為相同 Symbol ID 的組件，如果內容不同則會提升組件更新。

附：插件推薦

綜合類

• Sketch Runner 運行插件、搜索組件、安裝插件等功能
• Automate 插件包含多種功能
• Sketch Select 圖層選擇插件
• Rename It 圖層命名插件
• Sketch Icons 從 SVG 文件創(chuàng)建 Icon 庫
• Symbol Instance Sheet 創(chuàng)建組件列表
• Design System 插件，設計系統(tǒng)收藏夾

庫和組件管理

• Library Symbol Replacer，Move to library 內部組件轉為庫組件
• Symbol Swapper 組件替換
• Symbol Organizer 組件管理，主要用于排列組件
• Merge duplicate symbols 合并同名組件
• Sketch Symbols Manager Plugin 付費插件，組件命名管理

樣式管理

• Sketch Style Libraries 從庫同步樣式
• Sketch Text Styles Manager 付費插件，樣式命名管理

附：平臺控件標準名稱

Android

名稱來源 Android Studio 3.1

Text: TextView, Plain Text, Password,E-mail, Phone, Postal Address, Multiline Text, Time, Date, Number, AutoCompleteTextView, MultiAutoCompleteTextView, CheckedTextView, TextInputLayout.

Buttons: Button, ImageButton, CheckBox, RadioGroup, RadioButton, ToggleButton, Switch, FloatingActionButton.

Widgets: View, ImageView, WebView, VideoView, CalendarView, ProgressBar, SeekBar, RatingBar, SearchBar, TextureView, SurfaceView, Horizontal / Vertical Divider.

Layouts: ConstraintLayout, Guideline, LinearLayout, FrameLayout, TableLayout, TableRow, Space.

Containers: Spinner, RecyclerView, ScrollView, HorizontalScrollView, NestedScrollView, ViewPager, CardView, Tabs, AppBarLayout, NavigationView, BottonNavigationView, Toolbar, TabLayout, TabItem, ViewStub.

Google: AdView, MapView

Legacy: GridLayout, ListView, TabHost, RelativeLayout, GridView.

iOS

名稱來源 Xcode 9.2

View Controller, Navigation Controller, Table View Controller, Collection View Controller, Tab Bar Controller, Split View Controller, Page View Controller, GLKit View Controller, AVKit Player View Controller, Object, Label, Button, Segmented Control, Text Field, Slider, Switch, Activity Indicator View, Progress View, Page Control, Stepper, Horizontal Stack View, Vertical Stack View, Table View, Table View Cell, Image View, Collection View, Collection View Cell, Collection Reusable View, Text View, Scroll View, Date Picker, Picker View, Navigation Bar, Navigation Item, Toolbar, Bar Button Item, Tab Bar, Tab Bar Item, Search Bar.

原文鏈接：《深入理解 Sketch 庫（中）》

「提升效率的 Sketch 插件」

• 《6個能大幅度提升 UI 設計效率的 Sketch 插件》
• 《用了這9個最強大的Sketch插件，工作效率提高了一倍！》
• 《螞蟻金服推出超好用的Sketch 插件「Kitchen」》
• 《提高溝通效率！幫設計師記錄修改位置的Sketch插件PinLog》
• 《兩分鐘認識一款把 Sketch 變成 Principle 的插件：Diya》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設旗下優(yōu)質中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網(wǎng)址導航，設計師必備： http://hao.uisdc.com