UI 工具包是即用型组件的集合。他们加速设计和开发，确保一致性并遵循既定标准。本指南介绍了如何有效地选择和使用 UI 套件。
什么是 UI 套件
定义
一组预先设计的界面组件。
组件
按钮、输入、卡片、导航、图标。
格式
Figma、Sketch、代码（React、Flutter）。
好处
速度
不要从头开始。
一致性
统一的视觉标准。
质量
经过深思熟虑的组件。
辅助功能
许多套件都考虑 a11y。
最佳实践
体现行业标准。
UI 套件的类型
平台特定
材料设计 (Android)、人机界面 (iOS)。
跨平台
他们在两个平台上工作。
特定行业
电子商务、金融科技、社交。
###定制品牌
可为您的品牌定制。
流行的 UI 套件
材料设计
谷歌。适用于 Android 和 Web 的组件。
iOS UI 工具包
苹果人机界面指南。
蚂蚁设计
以企业为中心。
脉轮用户界面
反应组件库。
顺风用户界面
带有 Tailwind CSS 的组件。
Figma 中的 UI 套件
###社区
许多免费的可用。
###高级版
更完整，支持，更新。
组件
他们使用组件和变体。
自动布局
内置响应能力。
选择 UI 套件
平台
适合 iOS、Android 或两者？
完整性
您拥有所有必要的组件吗？
定制
容易适应您的品牌吗？
文档
有详细的使用记录吗？
维护
定期更新？
价格
免费、免费增值还是付费？
定制
颜色
适应品牌的调色板。
版式
品牌字体。
间距
必要时进行调整。
组件
添加产品细节。
一致性
维护内部标准。
UI 套件与设计系统
用户界面工具包
视觉组件。
设计系统
套件+代币+指南+代码。
进化
UI Kit 可以成为[设计系统0。
平台标准
iOS
人机界面指南。
###安卓
材料设计。
何时关注
对于本机应用程序，请遵循标准。
何时转移
强大的品牌效应可以证明这一点。
基本组件
导航
标签栏、标题、抽屉。
按钮
主要、次要、幽灵、图标。
输入
文本、选择、复选框、单选。
卡牌
内容容器。
列表
重复的项目。
情态动词
叠加和警报。
图标
一致的库。
代码实现
反应本机
NativeBase，React Native 论文。
颤动
材料小部件，库比蒂诺。
###网络
Material UI、Ant Design、Chakra。
辅助功能
对比
具有足够对比度的颜色。
触摸目标
最小尺寸。
标签
屏幕阅读器友好。
焦点
键盘导航。
常见错误
过度定制
修改太多以至于你会失去好处。
不一致
混合不同的套件风格。
忽略平台
不考虑 iOS/Android 标准。
不适应
使用时无需调整品牌。
免费与付费
免费
对于初学者来说，它可能是有限的。
###高级版
更完整的支持、更新。
决定
溢价适用于严肃的项目。
结论
UI 套件加速开发并保证质量。选择适合您的项目、针对您的品牌进行定制并保持一致性。它是专业界面的基础。
##常见问题解答
1) 我应该创建自己的 UI 工具包吗？ 对于大型项目，是的。对于 [MVP1，使用现有的。
2) React Native 最好的 UI 工具包是什么？ NativeBase、React Native Paper 很受欢迎。
3) UI Kit 限制了创造力？ 不。这是一个起点，根据需要进行定制。
4) 足够免费吗？ 对于原型来说是的。对于生产，请考虑溢价。
5) 如何保持 UI Kit 更新？ 在采用之前关注版本、测试更新。
另请阅读
- [应用程序导航流程：如何设计直观的旅程2
- [设计系统：一致性数字产品指南3
- [应用程序线框图：视觉结构指南4
- 【应用导航流程：日常生活中的工具5
- [应用程序导航流程：扩展工具6
- [应用程序中的微交互：完整指南7