一、什么是UI组件

UI设计组件（UI KIT），直译过来就是用户界面成套元件，是界面设计常用控件或元件，[组]是设计元素的组合方式，[件]由不同的元件组成。

二、好的组件化特点

1.通用性

意味着足够基础和常见且不带业务属性，参与设计的每个人都应该知道这个组件的功能及目的，同时具备一定的拓展性

2.重点

要求元件的组合需要灵活，可以在不同场景下可以通过相互组合来快速构建交互框架原型图，并根据不同页面结构的变化来适应新的业务需求。

3.选择性

适用于多个业务或产品，在设计过程和研发过程中都可以高频转换

三、组件化在工作中的价值

1.保证产品体验的一致性

对于一个包含业务系统的大型复杂产品，每个独立的业务系统虽然在功能上有一定区别，但整体的用户体验需要满足基本的一致性。

2.提升设计师的效率

在需求量巨大且需求来自不同的业务线时，需要逐一替换页面及组件，造成大量重复劳动，并且在评估需求及沟通可能存在不断的细节调优，因此对于设计师而言，组件的高频能大大提高设计效率，使设计师更多的将精力集中于理解和解决用户的实际问题。

3.提升产品研发团队的效率

通过场景及普通需求直接按规范进行设计和研发，减少上下游对同一页面及组件使用方式的不同理解而产生多余的沟通成本。

4.利于沉淀设计规范

组件本身的设计和使用方式可以直接作为交互和视觉规范的一部分，按照统一的设计规范来确定需要使用的颜色，组件样式，组合方式以及页面结构，可以快速构建一个或多个产品的交互框架。

四、如何打造一个UI组件库

1.遵循设计原则

21条可用性原则

2.打造配色方案

一个有效的组件库需要满足通用性，替代性，像配色方案就应该能被灵活自定义。

以网易七鱼为例，设置了1种主色，4种辅助色和6种中性色来构造一致的外观感受。

·主色：选择蓝色系来传达智能服务，信任可靠，技术创新的品牌形象。

·辅助色：除了品牌主色调蓝色，在辅助色中也存在一样的蓝色，那是因为蓝色是泛用性较广的色系，用于产品中的主操作按钮，文字按钮或图标等；红色唤起注意并昭示危险，因此一般使用适当的操作和错误提示；黄色则常用于警示信息，提示用户操作可能带来的风险及后果；绿色能传递安全和健康的情绪感受，用于正向反馈提示或成功操作的引导。

·中性色：一般采用黑灰色调来展示产品的文本信息，背景和边框色，用作表现层次结构。

*组件库重建之初无法一应俱全，是需要后续不断的维护与迭代的。如何在最初海量组件中圈定适合的组件范围呢？最合适的切入点就是从身边的业务场景出发，从最基本，最简单，最小的元素入手。

3.制定分类目录

我们根据当下现有的业务场景和对往后一段时期的业务发展方向进行规划，将组件库的组件类型分为通用组件和业务组件。一般业务组件库是不对外的（毕竟使用场景特殊也有限，放出参考意义不大），所以在FishDesign官网只能看到通用组件部分。

·通用组件：只使用范围广，扩大频次高，可重复使用多个业务且不包含业务逻辑。某些导航栏，toast，弹窗等。

·业务组件：这类组件对比通用组件而言最大的特点就是包含了一系列业务属性，跟产品功能有重叠的关联性，因此影响到使用范围可能仅限于1~2个业务系统或特殊场景，且复用频次不高。

如何确定通用组件中的子分类：

1. 竞品学习与研究，穷举该部分产品类型中的组件类型。

2. 遍历自己所负责的产品内已有的业务场景，提取并整理业务场景中所用到的组件。

3. 将同时整理好的两部分组件进行筛选去重，保留高频通用的部分。同样是拖放筛选组件，由于具有统一的规范和组件，可能导致的后果就是在同一产品不同业务系统的相同场景下，使用的组件从样式到交互方式都交替。我们要做的就是对这部分在类似业务场景中使用了多种表达形式的组件做合并去重，然后通过设计组内审来圈定最后通用组件的范围。

4. 基于组件的属性和使用场景，对圈定的组件范围进行归类。

由上述步骤，我们将通用组件继续细分为五个子类别：基础组件，导航，数据录入，数据展示，操作反馈。

1.基础组件：即按钮，图标等，相较于其他组件的使用场景更通用，或其他组件在实现时依赖了这些组件来实现的组件类别。

2.导航：即导航菜单，标签，面包屑等，可以帮助用户产品系统内部快速找到所在页面层级或位置的组件类别。

3.数据录入：即输入框，选择器，表单等，支持用户将数据信息录入到系统的组件类别。

4.数据展示：即图表，表格，气泡卡片等，将录入到系统的数据信息展示出来的组件类别。

5.操作反馈：即初始，Alert，Toast等，在用户操作前后，使系统状态得以合理的反馈的组件类别

UI组件介绍（for设计师）相关推荐

【iVX 开发 - 入门】UI 组件介绍及实操详解
本文导读写在前面 iVX 各 UI 组件及属性面板详解 1. 图片组件 2. 图片序列组件 3. 文本组件 4. 输入框组件 5. 富文本/富文本编辑器组件 6. 地图组件 7. 二维码组件写在前 ...
微信小程序开发实战（二）UI组件介绍 Vant Weapp
微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 1 第三方组件库 Vant We ...
Element UI组件介绍
简介 element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面. 1.安装Element UI,通过vue脚手架创建项 vue init webpa ...
Qt中的UI文件介绍
UI文件是什么? .ui.ui.ui通常是指Qt设计师设计出来的界面文件的后缀,它本质上是一个标准XML格式的文本文件,需要通过uicuicuic工具将其转换为项目中可用的ui_∗.hui\_*.hu ...
基于Vue的Quasar Framework 介绍这个框架UI组件很全面
基于Vue的Quasar Framework 介绍这个框架UI组件很全面基于Vue的Quasar Framework 中文网 http://www.quasarchs.com/ quasarfra ...
react-navigation使用介绍及UI组件外实现统一跳转
react-navigation是React Native中非常著名的一个页面导航库,可以实现各种页面跳转,它是React Native社区总结出来的精华.有了这个库,我们可以实现类似iOS中UINa ...
Android开源介绍-UI组件
终端的开发,UI的重要性不言而喻,如何快速开发出优雅漂亮的UI,android的一些开源UI组件,提供了很好的参考. 参考: oschina Android UI组件最火的Android开源项目( ...
React UI 组件库 Chakra UI - 01 v1.0介绍和快速使用
Chakra UI Chakra UI 是简单.模块化和可访问的 UI 组件库. 本文 Chakra UI 版本:v1.6.2 基于 React 和 Emotion(CSS-IN-JS 方案库) 基于 ...
厉害的组件_企业级React UI组件库——React Suite
介绍 React Suite是一套转为后端打造的企业级UI组件库,它由 HYPERS 前端团队与 UX 团队共同打造,在经历了几次大版本更新后,积累了大量的通用组件和功能,而且支持 Typescrip ...

UI组件介绍（for设计师）