Return to HomeSeeyon 设计系统升级
Seeyon 是一家 ToB 协作与管理软件服务商，为中国移动、顺丰等大型企业提供组织协同与管理解决方案。其业务场景覆盖企业门户、IM 通讯、费控、 合同管理等多个核心产品。随着产品线的不断扩展，原有设计体系逐渐难以支撑用户对灵活定制与复杂业务场景的需求。不同产品之间在视觉与交互上缺乏统一性，体验呈现碎片化， 尤其在复杂或极端使用场景下问题更加明显。为支撑平台的长期发展与品牌一致性，团队决定由设计团队主导升级设计系统。
在该项目中，我全程参与了从体验规划到设计落地，并负责设计体系的定义与推进工作，包括设计语言的制定与核心业务页面的设计与优化，推动平台在一致性、可用性与扩展性上的整体提升。
Live site
Overview
# Process, approach, and outcomes
目标
Seeyon 的产品体系由协同工具（IM、会议、日程、门户、移动协同）和流程系统（审批、费控、合同、项目、采购等）共同构成。为保障跨产品的一致性与可扩展性，这些产品需要统一依赖设计系统进行规范与管理。设计系统不仅服务于设计师，也需要为产品经理、开发人员及实施人员提供参考与指导。本项目的目标，是抽象出一套平台级设计系统，支撑不同角色在复杂业务场景中的协作效率，同时提升各产品在视觉与交互上的一致性，从而构建统一且可持续演进的产品体验。
过程
设计系统的建设不仅关注终端用户体验，同时也需要兼顾多方利益相关者（设计师、产品经理、开发人员等）的实际使用场景与协作方式。在研究阶段，我们通过以下方式识别问题与机会点： •客户访谈 •内部调研（设计师/产品经理/前端开发） •现有组件分析 •典型业务场景的抽样分析
基于研究洞察，我们选择以门户网站作为切入点，探索多套设计方向与视觉语言，并逐步验证其在不同业务场景中的适配性。
在初步方案形成后，我们进一步开展定性研究，评估设计在真实使用场景中的可理解性与可复用性。同时，我们通过建立 ‘区块’ 与 ‘模板’，将复杂业务进行抽象与拆解，从而提升设计系统在实际项目中的可指导性与可扩展性。
结果
构建了一套平台级设计系统，并将其贯穿于设计与开发流程之中，实现跨产品的一致体验与高效协作。具体成果包括：
•提升组件在各产品中的覆盖率，增强复用性 •优化设计走查流程，提高协作效率 •建立统一的设计语言，减少跨产品的体验差异 •支撑多业务场景的快速扩展与落地
结构
从设计视角看，Seeyon Design 秉持原子化设计思维，在其基础上按属性与功能重新提炼归纳的框架
角色
Seeyon Design 涉及团队几乎所有的设计师及各业务线工程师，大家分工合作、各司其职是维护设计系统生命力的源泉。
发现问题
借前文所提到我们通过客户访谈和内部调研希望多了解现有组件的情况。并针对历史组件库（严格来说不能称之为设计系统）在其本体、应用效果及协作机制方面进行分析（这里列举几个幕后工作案例）。
针对线上产品实现效果的体验走查及历史设计稿的对比分析结果：
目标
基于这些已知问题，我们与前端团队开始思考如何去解决，但很快就发现这些问题涉及多角色、多流程、多维度杂乱无章无从下手。因此，我们进一步将问题在人、物、事三个方面进行抽象，提炼出对应的目标与方向。
如何做的？
设计系统是一个庞大、周期长且关联资源、角色众多的项目，这里不便一一讲述事情的经过，仅列举有参考价值的事项。
设计语言
我们将设计语言定义为一个线性循环过程。自设计理念开始向下指导，自设计应用模式开始向上反哺，不断驱动形成一个良性循环。通俗的讲，即设计理念可以指导设计原则的定义，也可以指导设计应用模式的沉淀；反之，设计应用模式与设计原则均可反哺设计理念进行优化升级。
设计理念
在与多方利益相关者的持续协作讨论后，我们将复杂业务场景与设计实践进行整合与抽象，逐步提炼出“生长、秩序、高效与一致”四项核心设计理念。设计理念表达我们的核心价值观，是设计师的决策依据、理论依据。
视觉探索
在视觉探索阶段，我基于关键词发散与情绪板构建，对不同视觉风格进行系统性探索，并将其应用于门户产品中进行初步验证。通过对实际场景的对比与评估，逐步收敛并确定了符合产品定位与设计体系的视觉方向。
设计原则
设计原则是践行设计理念过程的具体表现。分别对应页面组成对象：
• 样式（色彩、间距、阴影等基础视觉样式） • 元素（点、线、面及由其构成的多形态组件） • 文字（即文字元素，虽可归为元素但因其足够重要所以单拎出来）
亮点
以下是我们在定义组件规则过程中，一些自己的思考与创新案例。（部分展示）
输入框宽度规格
以IP 地址三位字符宽度为基准确定输入框的最小宽度，以输入框间间距为 8px 为基准向上扩展得出常用输入框宽度。
描述列表适配
这是使用频率很高的一个组件，常见于描述列表场景。针对不同的对齐方式，其标签（Label）与数值（Value）之间遵循差异化的对齐与布局规则，以确保信息呈现的清晰性与一致性。
树形控件缩进
树形控件的不同层级节点缩进距离遵循一定的计算公式，方便开发者实现层级扩展。
应用模式
随着设计系统在多产品中的推进，我们识别出仅依赖理念与原则难以支撑复杂业务落地的问题，表现为设计决策分散、方案重复以及场景适配不一致。
基于此，我们在中期阶段对业务进行系统化抽象，建立了“区块”与“模板”层级结构，将设计能力从规则层提升至场景层，从而增强系统的可执行性与一致性。
区块&模版
针对特定产品，我们制定出一份特定场景下对组件、样式、交互、文案拥有特殊要求的共识规范。通俗来讲，就是设计系统针对不同产品所扩展出来的上手指南。
成果跟踪
产品应用
随着设计系统的逐步完善，我们将其快速推广应用于所有产品中。
数据统计
设计系统的持续优化往往缺乏直观的数据支持。因此，我们通过数据侧面评估设计系统的易用性、场景适配性与效率提升效果。
在组件库初期阶段，我们以推广为目标，因此将数据统计重点聚焦于组件的使用规模与覆盖范围。随着组件库逐步扩展，我们进一步引入更高效的工具与方法，将评估重点转向敏捷分析、自动检测，以及组件库的易用性与维护效率上。
以下数据统计周期为 Beta1.0上线以来半年内的数据：
Explore more of my Work
Contact me 👀