接到改版个人网银web端的需求，发现之前没有固定的组件规范，也没有人去梳理这部分内容。走查过个人网银的页面后，发现页面组件的一致性差，有些组件甚至是开发人员自己进行的魔改。
在手机银行移动端设计规范的基础上，整理个人网银web端的设计规范，搭建一些常用的组件库，并在后续改版的过程中维护和扩充组件库。
为避免重复造轮子，增加研发团队的确定性，节省不必要的设计，保持系统一致性，让设计师专注于创意最需要的地方。
角色
UX设计师
项目时间
2022年10月
设计思路与流程
通过四个步骤来完成组件库的搭建和后续的迭代优化。
组件库参考
近些年各个大厂、B端行业头部公司都建设了很多完善且开放的组件库，属于一个比较成熟的市场状态。
为什么不直接使用开源的组件库？
两个原因：
其一：开源的组件不可能完美符合项目的全部需求。必然要在原有的基础上作出大量细节的优化，或者创建出新的业务组件出来;
其二：正是因为开源的组件库太全面，可以产生无数种可能，我们才更应该整理自己的项目规范。设计规范是种 ”限制“，而不仅仅是设计风格的简单沉淀。
开源组件库，就是给我们提供了一个比较全面的设计范围，让我们站在别人的肩膀上做选择，提高设计规范的制作效率，而并不是让我们直接躺平，复制黏贴就可以了。
梳理
根据旧版个人网银网页的内容，将页面中用到的组件进行罗列，借鉴大厂的组织结构，用思维导图总结出来。
拆解
在设计组件之前，根据原子化设计理论，遵循从小到大的顺序进行拆解设计。
制作
确定命名规则
合理的命名方式，是运用效率的关键。整理归类后，每一类都包含若干组件，每个组件又有若干状态，为了体现结构层次，会在组件名称中使用“/”（Sketch能自动识别“/”）符号分隔场景类别，并以此作为标志逐级命名，如下：
◆ 数据展示/文字气泡/常规/上右
◆ 反馈/对话框/确认对话框
◆ 反馈/结果状态/成功
◆ ……
- 搭建基础样式
首先，需要搭建最底层的样式，颜色、字体、阴影等。
规范图标制作
图标的制作关键点在于，使用逻辑和图标规范。图标的命名逻辑是按类别/使用场景/名称/不同状态的规则来命名的。图标的制作规范也会影响组件的使用，在图标组件绘制时，要定义图标的有效面积，替换嵌套时才不会出错。颜色也要使用组件嵌套，这样做方便图标修改颜色，减少图标组件的复杂度。
布局样式灵活性
同一个样式框架内，可能存放的内容不同，要注意布局的样式定义，才能保证样式框架不会因为内容的改变而变形出错。
说明文档
规范说明文档，指导设计师如何使用组件。
更新与维护
在产品的迭代和业务不断拓展的过程中，组件也在不断更新变化，除了在项目进行中去新增新的组件外，还会在空闲时间去复盘之前的设计组件，不断优化和完善组件细节，进行更新维护，避免过于陈旧影响设计效果。
项目复盘总结
