Jay 的博客

主题

制定 UI 规范 ​

UI 的规范化、标准化是前端工程化的重要一环，它能够帮助团队统一 UI 开发规范，提高开发效率，降低维护成本，提升用户体验。UI 规范的建立不应仅仅停留在设计稿的层面，而应延伸至代码层面，形成一套完整的 UI 规范体系。换而言之，UI 规范的最终目的是两“库”的建立，即UI 设计资产库与UI 代码资产库。

UI 规范的作用 ​

  1. 保持界面一致性：UI 规范定义了统一的界面元素和布局方式，使得整个应用看起来更加一致和协调。
  2. 提高用户体验：UI 规范可以帮助团队更好地理解用户的需求和期望，从而设计出更加符合用户需求的界面。
  3. 确保兼容性：UI 规范定义了在不同设备和浏览器上的表现方式，可以确保应用在不同设备和浏览器上的兼容性。
  4. 提高设计效率：UI 规范有助于设计师复用设计元素，减少重复劳动，提高设计效率。
  5. 提高开发效率：UI 规范有助于前端开发人员快速理解界面元素的设计和实现方式以及代码复用，从而提高开发效率。
  6. 降低维护成本：UI 规范可以帮助团队更好地理解界面元素的设计和实现方式，从而降低维护成本。

UI 规范的建立 ​

UI 规范的建立需要团队协作，包括设计师、前端开发人员、产品经理等角色。主要分为两个部分：UI 设计规范和 UI 代码资产库。

UI 设计规范 ​

UI 设计规范是 UI 规范的基石，它包括设计稿、图标、字体、颜色、布局、间距等元素的设计规范。

制定 UI 设计规范的大致流程如下：

  1. 收集需求和意见：在建立 UI 规范之前，需要收集团队成员的需求和意见，了解团队成员对 UI 规范的期望和需求。
  2. 制定规范：设计师根据收集到的需求和意见，制定出统一的 UI 规范，包括字体、颜色、布局、间距、图标、按钮、表单、表格、弹窗等元素的设计规范。
  3. 实施规范：将 UI 规范应用到设计和开发过程中，确保整个应用的一致性和兼容性。
  4. 持续优化：根据用户反馈和团队需求，不断优化、扩充 UI 资产，提高用户体验和开发效率。

在 UI 设计规范逐步完善的过程中，应同时归纳整理各种 UI 设计资产，如设计稿、图标、字体、颜色、布局、间距等，形成 UI 设计资产库，从而实现 Ui 设计的可复用性，并为后续的 UI 代码规范提供支持。

关于 UI 风格的确立 ​

在确定 UI 风格时，一般有两种实现方式：1. 独立设计；2. 基于主流的 UI 框架（如 Ant Design、Material UI 等）。

独立设计的优点是能够完全定制化，风格独特有辨识度，但缺点是需要投入更多的时间和精力。基于主流的 UI 框架的优点是能够快速实现、成本低，但缺点是风格同质化且可能无法完全满足团队的需求。

因此，在确定 UI 风格时，需要根据团队的需求和资源情况，权衡独立设计和基于主流 UI 框架的优缺点，选择最适合团队的方式。除非团队大且拥有成熟的设计开发团队，否则都建议采用基于主流 UI 框架的方式，实现快前期快速构建 UI 资源库，减少开发成本。此外，主流 UI 框架也提供了较大自由度的定制化功能，可以针对团队需求进行定制化开发。基本上是可以满足大绝大部分的 UI 设计需求的。

UI 代码资产库 ​

UI 代码资产库是 UI 规范在代码层面的体现，它包括组件库、样式库等资源。

UI 代码资产库主要包括以下内容：

  1. 样式库：将常用的样式封装成可复用的样式库，提高开发效率。
  2. 组件库：将常用的 UI 组件封装成可复用的组件库，提高开发效率。
  3. 文档和示例：为组件库、样式库、工具库编写详细的文档和示例，提高开发效率。

建立样式库 ​

样式库是将常用的样式封装成可复用的样式库，提高开发效率。样式库主要包括以下内容：

  1. 基础样式 class：定义常用的基础样式，如字体、颜色、间距等。
  2. 变量：将常用的颜色、字体、间距等样式封装成变量，方便统一管理和修改。
  3. 混合宏：将常用的样式封装成混合宏，方便统一管理和修改。
  4. 样式函数：将常用的样式封装成样式函数，方便统一管理和修改。
  5. 文档和示例：为组件库编写详细的文档和示例，提高开发效率。

在建立样式库应具备组件化、模块化的思想，将样式库拆分成多个模块，每个模块负责不同的样式，如按钮、表单、表格等。这样不仅可以提高样式库的可维护性，还可以提高样式库的可复用性。

个人推荐采用原子化 CSS 的思想，原子化 CSS是更加极致的 CSS 组件化、模块化思想。 原子化 CSS 倾向于小巧且用途单一的 class，并且会以视觉效果进行命名。通过定义一系列细粒度、离散化、独立的 class，每个 class 只负责一个具体的样式属性，如颜色、字体大小、边距等。通过将多个这样的 class 组合在一起，可以快速构建出复杂而灵活的页面样式。

原子化 CSS 比较典型且成熟的实现方案有 Tailwind CSS、UnoCSS 等。他们都提供了丰富的原子化 class，可以快速构建出复杂而灵活的页面样式，同时也可以通过配置自定义 class，实现定制化需求。

建立组件库 ​

组件库是将常用的 UI 组件封装成可复用的组件库，提高开发效率。组件库主要包括以下内容：

  1. 基础组件：将常用的 UI 组件封装成基础组件，如按钮、表单、表格等。
  2. 业务组件：将常用的业务组件封装成业务组件，如弹窗、侧边栏、导航栏等。
  3. 文档和示例：为组件库编写详细的文档和示例。

与样式库的关系

样式库是组件库的基础，组件库是样式库的应用。组件库中的每个组件都需要使用样式库中的样式，从而实现组件的样式统一和复用。所以，在建立组件库时，需要先建立样式库，然后再建立组件库。

组件库的呈现形式 ​

组件库最终应该是以 NPM 包以及示例网站的形式呈现，方便团队成员使用。NPM 包的形式可以方便地安装和引用组件库，示例网站的形式可以方便地查看组件库的文档和示例。

关于 NPM 包

这里的 NPM 包并不是说要不组件库对外发布。NPM 支持私有包，所以可以创建私有 NPM 包，将组件库打包成私有 NPM 包，方便团队成员安装和引用。

此外，NPM 还支持引入完成的 URL 来安装依赖。

bash
npm install https://github.com/your-username/your-package.git#v1.0.0

写在最后 ​

UI 规范制定，特别是 UI 设计资产库和 UI 代码资产库的建立，是一个长期且持续优化的过程。需要团队成员的共同努力，不断收集、整理、优化 UI 设计资产和 UI 开发资源。在初期，可以参考主流的 UI 框架，如 Ant Design、Material UI 等，快速建立 UI 设计资产库和 UI 代码资产库。随着团队的发展，可以不断优化和定制化 UI 设计资产库和 UI 代码资产库，以满足团队的需求。