背景与理念

情景

需求分析

图形用户界面（Graphics User Interfae）简称GUI。 使用图形方式，借助菜单、按钮等标准界面元素和鼠标操作，帮助用户方便地向计算机系统发出指令，启动操作，并将系统运行的结果同样以图形方式显示给用户。GUI中的三个基本元素：容器、组件和布局管理器。 开发者通过这些基本元素和布局可开发出各种花里胡哨的界面和交互效果。

如下图所示都是搜索功能模块不同的团队开发有不同的展现形式和交互。

对于面向商家、企业级、业务部门提供的服务产品来说带来不少麻烦，不同的团队开发出来产品视觉交互体验不一致，缺少框架规范，产品、UI、研发没有标准，重复造轮子。

UI规范

封闭UI（代码和页面一一映射，没有第二种写法）

交互规范

封闭交互（一个体系有且仅有一种交互）

二八原则

保持开放原则80%系统组件，20%业务中复杂组件单独实现。

现状分析

1. 有设计稿的情况下
   • 同种业务场景，设计稿UI/交互不一致
   • 做出来的UI有差异，需要反复修改
2. 没有设计稿的情况下
   • GUI编程规范不完善，研发/测试没有标准
   • 验收的时候来来回回在样式和交互上调整
3. 市面上的组件库不能满足需求
   • 例如：Element-UI、Ant Desigin、等等，提供的是通用型组件，并不能满足某些特定业务场景的使用。
4. 重复性工作较多
   • 业务场景，视觉交互有很多相同的地方，开发的时候有很多重复性工作。

基于以上分析，团队应该结合自身的业务制定Web GUI编程规范和标准，从而达到视觉交互一致性。

我们需要在通用组件的基础上做一层二次封装，基于咱们的UI/交互规范实现一套统一的UI/交互组件库，来满足我们实际的业务需求。

任务

• 研发效率
  • 通过组件库封装通用逻辑，对外暴露接口，提升研发效率。
• 用户体验
  • 通过一套自研的中后台组件库把控整体的视觉交互，封闭UI/交互，提高用户体验。