如何输出一个数组_如何从零开始，输出一个易用的 UI Kit

今天给大家分享一下做一套完整的 UI Kit 需要流程。

废话不多说，直接开始。

什么是 UI Kit ？

UI Kit 通常包含非常全面的资源集合，同时也能让你正确的规划组织结构，可以把你的创意跟模板结合。它包含了各种模板和 UI 组件（按钮、导航栏、Tab、单选框等），可以帮助设计师在有限的时间内创造出出色的效果。

UI Kit 有什么用？

1、规划化输出结果

一个完善的设计 Team 都不是一个人在单打独斗，所以都会有和其他设计师共同协作的时候。那么这个时候同一个组件分别在两个（或多个）设计师的文件上的时候，就会难免的存在一些制作会规范上的不一致性(有一个完善的 UI Kit 可以解决一致性的问题)。

2、节省时间

时间就是金钱，UI Kit 对于快速的原型 / UI 设计非常重要，可以大大提高设计效率。

UI Kit 常用在什么地方？

• 原型设计
• App / 网站设计

如何开始？

1、定目标和计划

• 目标：最终使用用户是谁？（UI？交互？产品？）；
• 计划：主要是优先级和时间排期；
• 制作一个完善的 Kit 库是需要投入很大的人力去做，所以在做之前要把具体的目标和时间规划好。（之前我们 Team 从 0 到 1 输出一个完整可以的 Kit 库，用了 3 个月的时间）。

2、确定流程步骤

(1) 前期调研（每个组件都需要做单独的调研），调研是很重要的部分，可以让你了解当前主流产品的控件是如何使用的，避免自己 YY 一个很理想化却不符合使用逻辑的组件。参考的开源库：

Ant：https://ant.design/index-cn

Material design：https://material.io/design/

Element：https://element.eleme.cn/#/zh-CN

Atlassian：https://atlassian.design/

这几个开源 Kit 库是目前主流的组件库，看完后你会发现，在组件的使用上，有很大的共同性，同时每个都有自己的特点。

(2) 然后根据自己的产品，需要梳理一个 Kit 分类目录。通过之前我进行的多方调研得出，分类大致可以分为：

• Design principles（设计原则）
• Design principles （框架布局）
• Design style（设计风格）
• Guide（引导）
• Components（组件）

(3) 在使用的时候，组件是高频使用，所以在前期也需要把组件的分类确定下来。这里我把调研结果中，组件的大类分享给大家（仅供参考）：

• 导航 / Navigation，例：订导航、分页、面包屑等...
• 数据录入 / Data Entry，例：输入框、多选框、表单等...
• 数据显示 / Data Display，例：气泡卡片、标签、表格等...
• 反馈 / Feedback，例：对话框、加载等...
• 其它 / Other ：按钮、图标等...

(4) 梳理完组件分类后，就可以结合产品，定出 Kit 组件的制作优先级，一步一步开始做了。

(5) 在设计制作过程中，一定要和组内的设计小伙伴不断的沟通，不断的 Review，这样才能保证输出的UI Kit 是可用且易用的。

写在最后

每一个优秀的产品都是不断磨练出来的！同样的，每一个 UI Kit 也是经过不断的雕琢，最终才是一个易用的工具。

当你从 0 到 1 ，完整的做完一套 UI Kit 库的时候，你就会发现，你的组件意识会有一个质的提升。

本文由公众号【IDUX 设计】原创发布。未经许可，禁止转载。