高手进阶技巧！全方位深入理解 Sketch 库（中）

一部分主要是针对设计团中库管理者或设计系统护者，介绍一库组件命名建议、组件管理、样式管理和库文件管理方面的信息，读者只需要有方法管理经验，不需要一编程开的经验。

一、组件命名建议

1. 组件命名

库文件会分发团队内部设计师，甚至是部设计师，所以库组件分组结构需要尽量晰。组件名称使用 「/」 符号分组，议分组在 1 – 4 ，「/」 前后加入个空格，名称使用 Title Case 或 lower case 命名，如你组件跟某个界框架相应，也可以根据这个界框架模版名称命名。

一组名称以根据 Atomic Design 的理论命名。例 Atoms、Molecules、Organisms、Templates、Pages 或 Components、Patterns 之类。二组名称使用元素的标准名称，个以参考各 Web 前端框架、iOS 和 Android 等平台对控件的命名。例 Navigation Bar、Status Bar、Toolbar。三组名称则表示元素的不同属或者状态，例尺寸、浅主题和深主题，聚焦状态和禁用状态，正确、错误和警告状态等等。例 Button Default、Button Primary。通常二、三组能有个子类，因为 Sketch 以字母顺序排列，所以通常将主类的名前置，而将表示状态等词置，样菜单中就显示更清晰，例 Input / Text Disable 和 Input / Password Disable。

目设师可以使用 Sketch Runner 插件的 Insert 功能，搜索并插入所库中的组件，但目该插件中文搜索结果非常差，所以建议组件命统一采用英文，并且与相应的框架或平台的规范称一致。

如果可能会导出组件，组件命名就尽量不要包含可以用于文件名的殊符号，和大写敏问题，例如 macOS 文件名不能包含 「:」，Windows 不能包含 「:*?<> 」 等字符。另外在 macOS 和 Linux 中文件名以点开头的文件会被隐藏，所以组件的类中不要以点开头。

Sketch Runner 在搜索组件时，可设置忽略名称带有某个特定前缀和后缀的组件。通把一些会在设计中独立使的组件，图层命名使 「_」 开头。 在库中那些有异议或未确定的组件，建议在图层命名结尾 「!」 符号。

现在有很多设计系统含 Sketch  UIKit，可以从这些文件上学习他们是如管理库组件，最后是要根据团队业务、技术平和文化等素，结合自己思考，制定套适合团队管理规范。

我的 Design System 插件，类似一个在 Sketch 内的浏览器书签，以快捷的打开各个主要设计系统的主页和 Sketch 资源下载页面。

2. 样式命名

图样式和文样式的命名，尽量根据 Web前端框架、iOS 和 Android 等平台的规范，果自己有一套规则，也需要合理的命名。样式命名建议分组在 1 – 2 之间，参考组件命名规则。样式的命名也以使用 「_」 开头来表示一不在设计中独立使用的样式。

3. Overrides 标签命名

Overrides 标签命名即是组件内相应的图名，为能清晰表达 Overrides 中各项的含义，出现 Overrides 面板上的图，例文图、位图图、位图填充图、组件例图和热区图等，尽量需要改成合理的名称，例统一改成 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）、根据位置对齐排列（Arrange Objects），这些都可以通过置间距快速排列画板，「Tile Objects」 还加入按名称排序选项。「Order Layers By Name」 和 「Reverse Layer Order」 可以对图层列表按名称排序和反向。

组件的页不建议使用剪切粘贴组件模板这种操作，如果一个组件可以确定没有被使用，那同一文档内组件模板的剪切粘贴是可以的，这个操作不会导致组件 ID 改变，如果组件被使用，会导致该组件的实例变成组。从不同文档间的组件模板复制相对较安全些，如果 ID 相同新的组件模板的 Symbol ID 会被重建，如果包含内嵌的组件，则会产生相应的模板。

Automate 插件 「Symbol – Move Symbol Masters to Another Page」 可将中的组件模移到指定的页面。

2. 原位置创建组件模

默认的创建组件会产生一个组件实例和组件模，组件模可择是否发送到组件分页。在库件上直接将图层原位置变成组件模是最强烈的需求。

不借助插件话，可以先从图层创画板，快捷操作是选择图层，按插入画板快捷键 「A」，从属性板上选择 「New from Selection」 接从选择图层创画板，然后执 「Create Symbol」 操作，这样组件模板接原位。

Automate 插件内 「Symbol – Selection to Symbol Masters」 将选中的图直接原地转为组件模板，果需要转为一个组件模板需求先组合。

3. 将不独立使用的组件尺寸特殊化

Overrides 中组件的下拉菜单显示相同尺寸的组件，果希望让选择项中不出现其他不相关的组件，以将某不独立使用的组件的尺寸特殊化，用组件的 Resizing 功能整至合适尺寸。

一种常见的示例让一些按钮组件或图标组件支持通过 Overrides 选择项速改变颜色，就图标或按钮的组件模板，把内图层作蒙板，并增加一层颜色组件。色版组件采用一般组件不会出的较小尺寸，例如 8×8 或 10×10。

使用这种色版组件时，可以直接拉至覆盖整内，巧妙的使用这种组合，可以让同一组件速调整内颜色。

4. 组件更丢失 Overrides 问题

由于组件模某些会现在 Overrides 上的图层 ID 方式变，导致户更组件时会丢失 Overrides 数据，此问题已在 Sketch 50 之后的版本中被解决，这个版本会因为图层名称和类相同而导致 Overrides 数据替换时容张冠李戴，可通过修改同图层名避免。旧版本请注意要替换组件原有的本图层、位图图层、组件和带位图填充形状。

在 Sketch 50.x 版本上，发现改某个嵌套在某个 Symbol Master 内组件 Overrides，会导致使用该 Symbol Master 文档更新后相应 Overrides 项被复原。所以议养成个习惯，不要改 Symbol Master 内嵌套组件 Overrides。

三、样式管理

1. 创建公共样式

就本样式而言，设计规范通会制定类似 Title、Headline、Body 之类的公共样式，在同的场景这些样式字体相的设置是变的，但可会改变颜色，例如受应本身的题影响，某些字颜色会随之改变，本样式一般考虑特殊颜色。

图层样也有类似问题，所以常创公共部分，例如不层投影、叠加效、背景模糊效等等。

2. 保持异和更新样

如采用上述法创样，使用了样并调过颜色图层，会图层样与共享样不匹配，属性板上样名会变为体，并带有 「*」 号和步图标，这时需要常谨慎，不可以击步图标。

存完整样式的处是改一处，所有内容一修改，但是也因为场太带来管理烦。而种让图样式与共样式持差异的做法，最困难的问题就是何更新共享样式并只把部分属同步给其他图。

Automate 插件内 「Style」 组下的一些功能，可以让先复制图层样式，再根据样式选择图层，然后将各种样式应用到图层。

四、库文件性能优化

1. 控制页内画板数量

官文档提到几文件性能优化议，避免使用过多大图；避免使用过多模糊效；避免使用过多投影；适分页，避免页内过多画板；避免形状图层路径节过多。如个设计系统所需要元素都保存在个库文件内，那需要尽量考虑文件性能，尤其需要控制页内画板数量。使用上文提到插件和法，可以很便组件分页。

2. 库文件拆分与合并

个设计系统库比较庞大时，可以考虑拆分成多个文件，常情况下 UI 元素和图标分成两个库文件，或者不平台 UI 元素也分拆分成多个文件。

复粘贴就以处理库拆分或合并，上文已经提到，新加的组件模板果 Symbol ID 已存在，该组件模板的 Symbol ID 被重建，由 Symbol ID 在界面上不见，管理组件建议每个组件有唯一的命名。主要是嵌套组件能出现重复，以使用 Merge duplicate symbols 插件合并同名组件。

如果整系统被拆分多库组，他们之间的组件可以以库组件形式插入的，外部组件不会出插入组件单中，所以尽避免插入与整系统无关的库组件。

将一些需要导出资源的内容，例如图标、插画等，独立一个库文件是一种比较智的做法，这可以利用各种方式快速导出资源，而排除其内容干扰。

3. 图标库优化

以往的经验百个图标在画布中直使用组和使用 Symbol Master 的性能差异较大，能受视图移动的卡顿。所以图标数量较大，可以考虑画完在转换为 Symbol 并发送的 Symbol 页面。

可使 Sketch 脚本生成图标的库件，如果使图标组件已被使，要防止更错误，需要考虑为每个图标都固定 Symbol ID。如果图标组件未被使，Sketch Icons 插件从 SVG 件快速创建一个可修改颜色的 Icon 库。

五、库测试

1. 创建模版或批量插入组件实例

使用库创建模版除了展示实际使用的示例，也可以测其计在更新库是否会发生错误。

Symbol Instance Sheet 插件可量插入某个库的有组件，特别适合图标库。

2. 修改库 ID 冲突

库 ID 即 Sketch 档的 document ID，如果通过 Sketch 建档，而是直接复制 Sketch 档，他们就会具有相同的档 ID，库面中存在相同 ID 的库，并且库中有相同 ID 的组件，会导致更到错误的容。

Automate 插件内 「Library」 组下 「Fit Library ID Conflict」，在库板列表含相 ID 库时候，会显示所有 ID 冲突库，然后根据情况改变库 ID。

3. 查和修复坏链库组件

使了被更改 ID 的库的组件，或者丢失库的组件，会导致组件无法更，如果确定这些组件同属于一个库，并且明确这个库已更换为另一库，可使 Symbol Swapper 插件的 Symbol Swap Libraries 功，该功可把组件的库更换成另一个库。

如果是统一替换某个库，而是查每个组件的链接状态，或者针对某个组件更改链接的库，则可使 Automate 插件 「Library」 组的 「Imported Symbols Link Mange」 功，该功可只显示库存在的组件，并且可在更改链接的库时，检测库是否包含该元素，实际上为相同 Symbol ID 的组件，如果容同则会升组件更。

附：插件推荐

综合类

• Sketch Runner 运插件、搜索组件、安装插件等功能
• Automate 插件包含种功能
• Sketch Select 图层选择插件
• Rename It 图层命名插件
• Sketch Icons 从 SVG 件创建 Icon 库
• Symbol Instance Sheet 创组件列表
• Design System 插件，设计系统收藏夹

库和组件管

• 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.