KingSoft Design System
项目概述
KDesign 金山办公设计系统主要服务于金山办公旗下办公产品的体验设计和技术实现，并为公司内部的设计、交互、产品、开发、测试等角色提供一站式解决方案，包括组件、指南和工具等，旨在实现金山办公产品体验的一致性，以提升团队协作效率。
WPS 家族感 UI 面临的问题
UI 不一致
- 界面设计混乱：产品线间视觉差异大，缺乏品牌一致性
- 交互体验割裂：相似功能操作方式不统一，增加学习成本
- 设计规范缺失：缺乏统一设计语言，设计决策随意
- 组件复用率低：组件独立开发，重复工作且质量参差
资源冗余、规格不统一
- 设计师-设计师：资源管理混乱，重复绘制且命名不规范，复用效率低
- 设计师-开发：点对点交付缺乏规范，资源唯一性和信息准确性难保证
- 开发-开发：资源管理机制缺失，获取存储冗余，影响开发效率
我做了什么设计/开发贡献
UI 组件库的搭建
我作为组件框架搭建负责人，以通过引入 Sub-component 构建方式，将复杂的输入框组件拆解为可复用、可组合的模块单元，有效减少了冗余变体，提升了组件复用率与维护效率。同时，针对组件 API 结构进行优化，将原本零散的配置项进行语义归类与能力聚合，提升了交互清晰度与使用理解成本，构建出更灵活可控的组件能力体系。
Design Token 构建
参与主导设计变量体系的构建与实施，建立了一套完整的 Design Token 系统，涵盖颜色、字体、间距、圆角等核心设计元素。通过语义化命名和层级化管理，实现了跨平台（Web、移动端、桌面端）的设计一致性，显著提升了设计系统的可维护性和扩展性。
Icon SOP： 从 Figma 到多端组件的标准化交付路径
为提升图标资产在设计与开发间的交付效率与一致性，我重点参与构建了 KD 图标构建标准流程（SOP）。流程起始于设计侧，在 Figma 中维护图标组件，通过图标插件生成可导出的 SVG 资源。所有图标代码由插件统一推送至 Git 仓库（KD Icon Git），通过构建脚本转译为适配多端框架的组件形式（如 React、Vue2、Vue3、QT）。开发侧基于组件库同步更新，在业务开发中按需调用，统一接入产品体系，最终完成入库管理。 该流程实现了图标的“一次设计，多端复用”，有效清理整治了近万个冗余图标资源，全面提升了图标调用的可控性与可溯源性，确保资产版本统一、更新高效。
KDesign 文档撰写和官网开发
选用 Docusaurus 作为文档框架，并开发了 KDesign 文档官网，为设计师和开发提供详细的组件使用指南和最佳实践。
总结
我们通过构建 87 项标准化组件 和 图标工程化项目（清理近万个冗余图标），显著提升了设计和开发效率，为 WPS 家族产品带来统一的用户体验。围绕家族感展开全产品线视觉体验升级，通过统一的界面语言，让用户在新版本首页、新建、组件界面等关键流程中感受到一致的设计体验。以“秩序”为核心，建立标准化的层次规范和控件规范，为全平台产品提供统一的设计标准，确保设计语言的一致性。
