首先，我们要知道什么是UI Kit？
UI Kit是一套用户界面元素，设计师和开发人员需要它来简化他们的工作并为用户创造一个统一的产品设计。它可以让你快速而有效地创建复杂的界面。
组建主要的UI Kit最简单的方法是确定主要屏幕上的界面元素，并把它们放在一个单独的地方，这样所有后续的屏幕都是由现成的组件创建的。
通常情况下，一个基本的UI Kit包括：
1、所有界面元素（按钮、输入框、列表项）的不同状态。
2、元素正常状态下的调色板样式，以及被按下时的状态、聚焦时的状态，以及不活动元素的颜色。
3、文本样式：标题、正文、链接、脚注、注释等。
4、图标集
5、插图，以了解品牌图形的整体风格
统一的风格
UI Kit可以统一颜色、尺寸、字体和元素的行为。产品将由相同设计语言的元素组成，用户将很快习惯于统一性，记住熟悉的界面，使你的产品从其他产品中脱颖而出。
加快新设计的开发
有了详细的UI Kit，开发者将更容易创造新的功能。如果界面是由现成的组件组成的，他们就不需要重新编程新的屏幕。产品开发变得灵活，产品容易扩展。
大规模的团队访问设计
Sketch里面的现代工具允许你在一个单独的文件中创建一个UI Kit，在开发和创建新的设计时可以参考。这使得在不影响产品其他部分的情况下，对UI Kit的维护、更新和改版变得很容易。如果新的团队成员能够获得一份写得很好的设计指南，描述所有的元素和它们的行为，那么他们就能更快地完成他们的任务。经理和开发人员甚至在没有设计师的帮助下也能创建新的系统，而不会浪费团队中其他人的时间。
用Sketch组织一个UI工具包
库
Sketch在组件创建方面已经有了长足的进步。你可以在一个独立于主产品的文件中进行UI Kit的创作，并将其作为一个库使用。这将简化协作，并允许你在多个项目中同时使用一个UI Kit。
样式
使用样式来组织调色板、元素的外观和字体。
为了使调色板系统具有灵活性和统一性，应该对颜色进行有意义的命名。避免使用反映色调的名称（"红"、"白"、"黑"）。如果产品的整体设计发生变化，例如，蓝色的颜色链接将变成紫色，这些颜色的名称将变得不相关。 颜色的名称应该取决于它的目的（结果导向、过程表现，状态等）。因此，颜色可以被命名为例如，"按钮。悬停 "或 "文本段落。停用"。
Symbols
对于交互式元素，为每个状态添加一个Symbols。下面用两个例子来进行讲解。
例1：一个普通的输入状态；由一个标题、输入框、提示文字、旁边的图标或链接组成。
例2：一个普通的按钮状态。
从上面两个例子中，我们不难发现。Symbols是组织这些众多界面的完美工具。为了灵活地定制复杂的组件，可以将这些Symbols相互嵌套使用。将每个元素添加到用户界面工具包中，然后在所有项目中使用它，这样做不仅容易，而且维护起来也十分的便捷。
层次结构
随着UI工具包的发展，按钮、图标、颜色和文本样式的数量只会增加。明智地组织你的组件层次结构是很重要的，这样可以使开发人员和团队中的其他设计师的生活更轻松。除了根据预先商定的规则创建的可理解的名称，使用 "按钮/按钮名称 "命名系统将符号分类到文件夹中。符号"/"将在树中创建所需的文件夹。另一种方法是使用Sketch中新的组件显示模式。它将根据类型（符号、文本样式、图层样式、颜色）和层次结构中的名称自动排序。
上面介绍了什么是UI Kit，也介绍了在UI Kit中一般设计会输出的内容。
那我们知道了这些后，下一步要干什么呢？
首页，我们要知道Ui Kit是一个活生生的、不断变化和更新的文件，永远不会结束。你不应该忘记它，随着产品的发展，不断地编辑元素，删除不使用的元素并添加新元素。尽量减少颜色和样式，组织标准，并维护UI Kit。将你在布局中输入的所有颜色添加到样式中，并只通过Sketch样式更新它们。
将UI Kit整理成项目的设计系统
下一步是将UI Kit变成一个设计系统，其中包括组件布局的例子、现成的模板以及对设计原则和界面行为的详细描述。
我们是广州凡梦设计工作室
专注于视觉交互设计，并希望通过设计提升产品的品牌价值和用户满意度。
希望能与您取得联系，达成合作共识。
合作联系：张小凡 13929518071
