最近我司正在统一前端和设计组的 UI 规范，可以参考 Element-UI 是怎么做的呢。同时新项目的接入，如何快速响应呢？谈谈项目的工程化
Element-UI
设计一套组件库的时候，首先要考虑颜色、字体、边框、图标这些基础元素的设计，它们是构建各个组件的基石，如果没有做好这些基础设计，那么做出来的组件库看上去一定很山寨。
关于色彩的定义
- 定义主色，也叫品牌色，同时定义了一系列与主题相关的渐变色，通过 sass 提供的 mixin 函数进行颜色混合
- 辅助色：success/waring/danger/info
- 中性色：文本、背景、边框颜色
- 文字：主要文字，常规文字，次要文字，占位文字
- 边框：一级、二级、三级、四级边框
- 基础黑色、基础白色、透明
关于字体：对字体进行统一，力求在各个操作系统下都有最佳展示效果，比如 mac 用户比较熟悉的 PingFang SC，还有一些 windows 用户熟悉的 MicroSoft YaHei。
关于字号：在 Element-UI 中定义了 6 种大小的字体，分别是 12/13/14/16/18/20
关于行高：一般设置至少为 1.5。这将有助于改善低可视条件下的体验。在 Element-UI 中只定义了两种行高，分别是 24 和 16
关于边框：element-ui 对边框进行统一规范，可用于按钮、卡片、弹窗等组件里。
- 边框和圆角：边框的粗细、颜色、样式，圆角大小等变量，还包括了 hover 的颜色
- 投影
关于图标：利用 IconFont 技术实现的
工程化探索
这部分内容和 umi.js 的设计非常像，我们可以这样思考，比如接入新的运营后台，怎么做到快速响应呢
- 保证业务开发尽量不被构建环节干扰，只须关注业务逻辑本身。
- 降低新页面接入的成本
- 页面绑定对应的路由
- 在左侧菜单栏添加菜单项并指向对应的路由
- 规范项目目录结构
要用这一套模式赋能更多不断冒出的新业务，首先要做的是统一。在社区上做开源软件和做公司内部的软件不同，前者通常需要考虑兼容性。处理兼容性的代价是越来越复杂的配置项。但做内部软件，则可以通过「统一」简化配置（甚至无需配置）。
首先是技术栈的统一：
- React
- 组件库：Ant.Design：Ant.Design 的组件覆盖了 90% 的需求
- 构建工具：Webpack
- 语言：TypeScript
- css 预编译：Less
技术栈的统一带来的是构建配置可以全部收敛，当然除了技术相关的工具，还有业务层面的工具可以统一收敛：
- 构建产物发布到 cdn
- 打点、错误监控的封装
- 网络请求库统一
- i18n 方案统一
设计规范补充
大致有如下方面
页面布局
- 统一尺寸，PC 端用户屏幕分辨率占比排名前三是 1920x1080、1366x768、1440x900，以 1440x900 设计，向上适配或者向下适配误差会比较小
- 页面框架
- 左右栏布局、上下栏布局
- 左右栏布局包括顶部栏、左侧菜单栏、主体区域三大区域，其中顶部栏、左侧菜单栏为固定结构，右侧主体内容根据分辨率动态缩放
- 上下栏布局包括顶部菜单栏和主体内容两大区域，其中顶部菜单栏为固定结构，主体内容进行动态缩放
- 栅格布局
- 为了解决自适应和响应式问题
- 谷歌规定模块和结构之间要以 8px 为基准，布局间相对间距可采用 8px 以及 8 的倍数。一些组件（按钮、间隔、输入框）可以以 4 为基准
- 尺寸设定
- 大部分顶部栏高度 48 + 8n
- 侧边栏宽度 200 + 8n
- 相对间隔：定义主体内容的上下左右边距，定义主体区域内各模块的边距及安全宽度，超过内容区域的部分采用区域内滚动或整屏滚动，视情况固定导航栏
标准色
- 品牌色、辅助色、中性色
- 品牌色的应用场景包括操作状态、按钮色、可操作图标等
- 辅助色用于提示其他场景，比如成功、失败、警告、无效等
- 中性色常用语文本、背景、边框、分割线等，需要考虑深色背景和浅色背景的差异，可以选择同一色相控制透明度变化，用来表现不同的层级结构
标准字
- 后台常用字体：windows - 中文 Microsoft YaHei，英文 Arial；Mac - 中文 PingFang SC，英文 Helvetica
- 常用字体大小
- 行高设定，一般行高 = 文字大小 + 6px/8px
图标：分为功能图标和应用图标
按钮
- 分类：填充按钮、线性按钮、文字按钮
- 交互状态包括默认、悬停、点击和不可用
- 根据需求分为不同尺寸，大中小三个级别用在不同的场景，一般按照 8 的倍数设定，比如 24、32、40
导航：顶栏菜单、侧栏菜单、折叠菜单、下拉菜单、面包屑、分页、步骤条、时间轴、tab 标签页、胶囊菜单、徽标数
表单
- 标题和输入框布局：左右、上下、无标题
- 输入框交互状态：默认、输入结果、提示错误、禁用、获取焦点
- 输入框尺寸高度可按照 8 的倍数进行设定。宽度视情况而定
表格：比较综合
反馈：弹框、侧滑框（抽屉）、骨架屏、全局提示、警告提示、消息提醒、加载状态等
缺省状态
- 404、403、500
- 无数据
- 无消息
可视化：Echarts、G2、d3
参考
- 找不到了……