UI世界的星辰大海-组件化设计
之前写了一些UI界面方面的文章，今天做一个简单的总结，谈谈UI组件的作用及制作。
1.使用组件有什么好处？
1.使用组件有什么好处？
1、提高设计效率，让设计师花更多的时间专注于设计上的创意。
2、提升团队的沟通效率 。
3、利于开发适配。
2.常见组件有哪些？
2.常见组件有哪些？
UI世界的星辰大海——常见的组件有：标题栏、搜索栏、导航栏、筛选（下拉选项）、banner、金刚区、瓷片区、标签、按钮、卡片、Tab 栏、输入框、Toast、Feed 流（列表流、文字流、视频流）等。
页面举例：
3. 组件制作实例
3. 组件制作实例
在实际设计过程中我们可以发现颜色、文字、icon这三大元素在界面中使用频率是最高，因此我们将其作为组件库的最基础元素。
然后由基础元素构建其他UI组件，比如搜索框、输入框、按钮、Tab栏等，最后通过组件样式构建我们的UI界面。
下面以颜色、文字、icon这三大元素为例简单介绍一下Sketch Libraries 制作。
1、文字
注意：影响文字层级的三要素有字号、字重、颜色
2、颜色
3、图标
注意：图标命名一般用icon/**，比如icon/取消。
4、组件制作：
注意：制作组件时应该把各种状态都列出来，设计样式尽量保持统一性。
以商品售卖为例： 基础卡片的不同状态有正常、售磬等，应该在制作组件时都列出来。
以金融产品为例：每个卡片的设计样式尽量保持统一性，方便负责不同模块内容的设计师复用同一个组件，提升项目的设计效率。
UI组件导入Sketch Libraries 库的方法：
1、选择要导入的文件：
2、导入之后点左侧加号找到刚刚的组件库，选择要的控件。
3、之前导入的组件库有更新，右侧会有提示，点击即可同步。
3、之前导入的组件库有更新，右侧会有提示，点击即可同步。
4.组件制作注意事项
4.组件制作注意事项
在设计的过程中我们要根据实际项目情况调整Llibraries。一般来说可以先出一些主界面的样式，确定我们的风格及相关规范，然后在后续绘制页面时慢慢完善我们的UI Libraries。
之前写的文章总结了部分组件及页面内容，后面会继续更新，希望能帮助到大家。
UI组件篇：
UI页面篇：
Banner篇：
图片素材来源于网络和应用截图，仅用于学习交流
更多精彩内容可以关注我的公众号【 泡芙喵F设计教室 】
- END -
