项目时长:
2025 优化
使用工具:
Adobe XD，蓝湖，飞书知识库
在许多应用平台的发展初期，企业往往会在功能搭建和拓展上投入更多人力，而忽视了建立统一的视觉设计系统。这种缺乏标准化的设计方式虽然在短期内可以快速产出，但在产品的长期维护和扩展上会造成问题。尤其是对于功能复杂、维护周期更长的B2B SaaS产品，缺乏系统化的设计语言会影响设计师和开发团队的响应速度和协作效率，导致影响用户体验。
这个项目基于我在东浩兰生集团下一科技子公司的实习经历。展示内容已作脱敏处理，部分案例已进行重新设计。本案例研究中所有信息均为我个人所出，不代表公司的观点。
01
概述
02
调研与发现
03
设计过程
04
实施与交付
05
原型展示
概述.
背景.
我所在公司DLG Tech（代称）专注于智慧建筑软件开发。公司依托于东浩兰生集团的不动产资源，持续完善楼宇智慧化改造方案，致力于打造自有智慧楼宇管理平台——智业云。
智业云的功能丰富且复杂，涵盖能源管理，安防监控，IoT设备管理，自动化集成，物业管理及租户体验等。除了服务于集团内部的智慧化改造项目外，智业云还参与了许多外部项目。因此，其应对的建筑类型非常多样，包括酒店，写字楼，展览中心，产业园区等。针对不同类型的建筑，客户的需求也会存在显著差异。
挑战.
智业云采用SaaS化部署方式，插拔式应用选择，便于满足不同客户的个性化需求。然而，由于产品整体开发周期较长，各应用模块经手不同的设计师或开发者，且在产品发展初期未建立统一的视觉系统。当我加入团队并逐步熟悉产品，开始初次处理需求时，遇到了一些挑战：
这些问题带来的不确定性使我在工作初期感到效率低下，往往需要花费更多时间在不同页面的视觉风格间找到平衡，并理清信息层级。而这些只是我感受到的最直观和表面的问题，随着平台的进一步发展，设计系统的缺失会引发更深层次的挑战，不仅可能增加开发和维护成本，还会对用户体验造成不利影响。
价值.
作为数据密集型的智慧楼宇管理产品，建立设计系统将带来以下主要优势：
1.
强化品牌专业形象
标准化的设计语言会提供一致的视觉体验，向客户传递平台的专业性和严谨性，提升产品的专业形象和品牌感知
2.
降低用户认知负担
在不同模块中实现统一的视觉呈现，交互方式和信息架构，避免了用户对不同模块的重复学习与适应，提高使用体验
3.
提升团队开发效率
开发新功能时，设计师和前端无需从头设计或实现所有界面组件，便于产品扩展和模块升级
搭建设计系统需要设计师，前端工程师和产品经理的协作，尽管短期内会需要额外的资源投入，但是产生的收益是长期的，会推动产品的可持续发展和竞争力。
调研与发现.
一手调研.
为了收集主要用户群体对设计系统的看法和需求，我首选通过利益相关者访谈 (Stakeholder Interviews)开展初步调研。由于设计师、前端开发人员和产品经理三方工作忙碌，时间难以对齐，访谈形式的灵活性能更适应碎片化时间段。此外，利益相关者访谈有助于受访者基于各自的职能提供不同的关注点，从而了解各方需求和目标，同时还能增强他们对创建设计系统的支持。
访谈采用半结构式的方式，问题设置分为通用问题和针对具体职能的细节问题。由于篇幅限制，这里仅展示问题的主要类别：
除了利益相关者访谈，后续还进行了工作流程观察（Shadowing），为调研提供了更多元的视角和数据。所得信息经梳理归纳后，提炼出以下需求：
现有设计审查.
结合一手调研中归纳出的利益相关者需求，我将对现有的设计资源进行分析。考虑到智业云平台业务逻辑复杂且页面量级大，为确保项目的推进效率，我决定优先审查用户使用频率最高的功能模块，并结合典型用户任务的完成路径，观察页面及流程中潜在的设计问题。
最终确定的审查范围为物联监测模块，涵盖<监测数据总览>、<监测实时查询>及<监测系统部署>这三个主要板块。默认状态的页面数量共计34张，典型用户任务包括浏览监测看板，处理异常传感器，受理告警设备，以及添加设备等。
审查从视觉设计、交互设计、信息架构和技术支持四个维度展开。虽然过程中发现了许多涉及产品逻辑及交互逻辑的问题，但由于本项目的重点是为产品提炼设计系统，故将产品和交互问题与设计系统需求做了分离，重点聚焦在与设计系统直接相关的内容上，最终总结出以下问题
1.
缺乏视觉统一性
未制定清晰的字号使用规则。例如，在展示门磁传感器当日监测详情的版面中使用了7种字号，重要信息不够突出，视觉上层次感不足。
可视化图表未标准化
看板中的图表缺少统一的设计语言，例如无统一色板，且折线图中的数据点使用了不一致的形状样式，削弱了数据展示的直观性与专业性。
2.
交互设计
组件种类繁多，未形成统一库
物联检测模块中包含导航菜单、页头、树形控件、日期选择器、表格、拖拽区、空状态等共26类组件，类型复杂但缺乏系统分类与整理。这导致复用组件时查找难度较高，且无法批量修改。分页、表单等高频组件虽然在其他模块中也常用，但未被整合为通用组件库，影响了开发效率和一致性。
高频组件交互方式缺乏一致性
树形控件在<实时监测查询>板块采用传统多选框样式，而在<监测系统部署>板块则使用单选框样式。同一组件交互方式的不一致，尤其是单选框样式的语义会与树形控件冲突，容易引发用户困惑。
功能入口不易发现
<监测数据总览>板块展示了大量可视化图表，点击图表可进入更详细的数据界面，但对这一功能入口无标注或交互引导，可能会影响用户使用效率。
3.
信息架构
系统状态可见性弱
一些页面缺乏页头展示，加之界面层级过深，用户容易丢失操作的上下文。
信息层级不清晰
字号和配色方案的不统一在复杂界面中增加了视觉噪音，用户无法高效地获取信息，增加了认知负担。
4.
技术支持
缺乏组件整理与代码示例
页面编号规则缺失
交互文档模板与交付标准不统一
响应式设计缺少设计规范
设计目标.
综合上述一手调研中发现的问题与各方提出的需求，以及对B端设计系统的相关研究，我决定采用混合结构来构建智业云平台的设计系统。考虑到平台存在视觉缺乏统一性、交互模式多样、业务结构复杂等问题，混合结构能更好地应对这些挑战。混合结构将结合层级型、任务型和代码型设计系统的特点，以满足不同职能团队的需求，并提升整体的可维护性和一致性。层级型有助于设计和开发团队从基础组件逐步构建页面，提升设计标准化，减少重复工作。任务型则以业务模块为核心，为不同使用场景提供清晰的交互指导。代码型通过代码复用与动态更新，提升开发效率。清晰的系统结构也便于未来版本的动态更新，确保团队在设计资产与产品优化上的同步协作。智业云设计系统的具体结构将如下：
由于现有设计资产庞大，若严格按完整层级顺序推进，短期成本过高。因此我采取分阶段推进策略：第一阶段明确视觉规范，建立基础层；第二阶段优先整理高复用组件，实现设计与代码复用；第三阶段根据业务优先级，逐步标准化高频模块的页面层。
设计过程.
设计关键词.
结合产品的气质与特性，并为后续设计提供可衡量的内在标准，我为整体设计风格提炼出三个关键词：高效、规范、联动。
设计基础.
设计基础部分包括色彩、字体、图标、间距及深度。本节将选取其中核心的表达语言——色彩、字体及图标展开。间距和深度虽未在本节详述，但依然作为支持性规范贯穿于后续各类组件设计之中。
色彩
色彩体系以品牌 LOGO 中理性、稳重的科技蓝作为主题色，并在相近的饱和度与明度范围内延展出统一的主题色阶。中性色涵盖黑、白及不同层级的灰色，合理运用中性色有助于强化界面信息的主次关系。数据可视化配色围绕智能高效的主题，从不同色相中延展出高区分度的色板，用于增强表达的辨识度和专业感。语义色遵循通用标准，选取红、黄、绿分别用于错误、警告与成功状态的传达。
字体选择了高适配性的系统默认字体——思源黑体与Roboto，以确保在多终端环境下的稳定呈现。字体共设定 5 个层级，覆盖标题、正文及辅助信息等不同使用场景。
字体
图标采用线性风格，契合品牌简约、理性与科技感的气质，默认线宽为 1px，确保在不同尺寸下清晰呈现。考虑到平台涉及大量物联网监测场景，设备类图标较多，同类图标在构造上注重统一性，以增强整体识别度与系统性。
图标
组件库.
为避免篇幅冗长，本节从基础组件、复杂组件与数据可视化组件中各选取2个具有代表性的组件展示，共计6个。其中，下拉选择器与状态标签将详细展示其使用场景、视觉规范与交互规范，其余组件则以图文简要呈现其核心要点。
基础组件
基础组件分为控制类、输入类、状态类、反馈类及结构类，共五类。这里将展示输入类和状态类里的高频组件，分别是下拉选择器（基础/输入/下拉选择器 - Base/Input/Dropdown）和状态标签（基础/状态/状态标签 - Base/Status/StatusTag）。
下拉选择器（Base/Input/Dropdown）
使用场景
适用于在多个选项中选择一个或多个值，适合在选项数量较多时（大于4项）使用，以节省界面空间。当选项数量较多时，可搭配搜索功能使用。该组件常用于过滤器、设置面板、表单等场景。
视觉规范
为了确保下拉选择器在不同界面的一致性，在这里明确其尺寸、间距、配色和图标等视觉规范。
交互规范
下拉选择器在单选模式下的主要交互状态如下，多选模式可参照对应逻辑拓展。
状态标签（Base/Status/StatusTag）
使用场景
状态标签用于快速传达展示对象的实时状态，帮助用户高效判断运维情况与处理优先级。主要分为四类：设备状态、告警状态、工单状态及能耗状态。该组件常用于表格、卡片、监测看板等场景。
视觉规范
状态标签分为含图标版与纯文字版两类。为确保在不同界面一致性，统一规范其尺寸、间距及图标等视觉规范。
交互规范
虽然状态标签通常为非交互元素，但在部分场景下也可支持轻度交互。例如，用于表示紧急程度的标签，可通过点击，切换不同等级的状态。
复杂组件
复杂组件分为导航类、信息展示类及复合功能类，共三类。这里将展示导航类和信息展示类里的高频组件，分别是分页（复杂/导航/分页 - Composite/Navigation/Pagination）和表格（复杂/信息展示/表格 - Composite/Display/Table）。
分页（Composite/Navigation/Pagination）
使用场景
当页面需展示大量条目时，可通过分页器分隔内容，以逐页加载的方式提升浏览效率。常用于表格、列表、日志等高信息密度场景。
表格（Composite/Display/Table）
使用场景
表格组件适用于展示和管理大量数据，常与排序、搜索、筛选、分页等功能搭配使用，支持对信息的查询、对比与操作。可广泛应用于日志追踪、历史工单、设备列表等多维度数据场景。
数据可视化组件
数据可视化组件分为状态卡片类及图表类，共两类。这里将展示图表类里的高频组件，折线图（可视化/图表/折线图 - DataViz/Chart/Line）和饼图（可视化/图表/饼图 - DataViz/Chart/Pie）。
折线图（DataViz/Chart/Line）
使用场景
展示数据在连续时间序列中的变化趋势，适用于需要对数据走势、波动、对比进行分析的场景，例如：设备运行状态的连续监控数据 ，温湿度的时间变化等。
饼图（DataViz/Chart/Pie）
使用场景
展示同一维度下数据的占比关系。适合呈现总量构成、分类或比例关系的信息，例如：能耗构成占比，工单类型或处理状态比例等。
模板与布局.
模板与布局聚焦于系统在页面层级的结构性表达，包括业务模板、交互模式及全局规划三部分。出于篇幅考虑，本节仅展开业务模板，重点呈现部分典型业务模板，展示其结构组合与应用场景。
业务模板
常用的业务模板主要包括看板，列表页，工作台，状态页及详情页等。下文将从布局方面展示列表页模板和看板模板。
列表页模板
列表页用于展示和处理大量的条目，还承担跳转至详情的导航功能。用户可在列表页进行筛选、对比、查看详情等操作，适用于工单管理，日志记录，设备资产管理等业务场景。
看板模板
看板页用于直观呈现关键指标与实时状态，通常由多张图表卡片组成，常承担信息聚合与态势感知的展示功能。用户可在看板页快速浏览总览信息、识别异常，适用于能耗监测、设备状态监测、告警分布等业务场景。
实施与交付.
实战案例.
为了更直观地呈现上述设计系统的实际价值，我选取了两个具有代表性的页面作为示例，分别对应旧改造与新需求，以此展现系统在优化旧有体验与打造新功能中的双重作用。
旧改造
改造背景
<告警设备总览>页存在图标风格不统一，信息层级不清晰，系统可见性弱等问题，影响用户识别效率和使用体验。随着设计系统建立，我以该页面为改造对象，以验证系统在旧页面优化中的应用价值。
改造策略
本次改造目标是在不改变页面逻辑的前提下，提升视觉语言的一致性和信息层级的清晰度：
组件替换：将原页面中的按钮、标签、下拉选择器、分页等替换为系统中标准化组件，统一样式与交互反馈。
可用性优化：以面包屑导航替代原页头，增强模块定位的清晰度和系统的可见性。
视觉规范统一：采用统一的色彩系统与字体层级，减轻认知负担，提高识别效率。
改造成果
改版后的页面组件样式统一，信息层级更清晰，整体视觉更具秩序感与专业感。组件复用率达96%，有效降低重复设计和开发成本。
新版本与旧版本（悬浮交互）
新需求
项目背景
本项目为一栋集餐饮、办公与酒店于一体的26层综合性大楼进行旧楼智能化改造，客户希望通过引入物联网和智能运维平台，提升设施管理效率和住户体验。在大楼智慧改造过程中，客户提出新增“客房管理”功能的需求。平台需在已有架构上，设计一个新模块。该模块需将大楼运维和酒店经营打通，在提升运维效率的同时，兼顾实时房态与住户体验。此前平台主要面向写字楼和展览中心，此次为首次拓展至酒店场景。为了快速交付，并确保系统体验一致，我决定基于新建立的设计系统快速构建这一新模块。
应用策略
在设计过程中，我复用已有设计资产，仅在必要处进行定制，以最大化发挥设计系统的价值：
设计基础：使用系统语义色对房态进行清晰区分；图标延续平台线性风格，新增适配酒店场景的图标，如“打扫”、“客房”等，以强化识别性；字体上保持字号与层级的统一。
组件库：使用状态标签组件统一展示房态与设备状态；使用卡片组件展示客房简要信息，在结构和交互上结合实际场景进行定制。
模板与布局：新增“客房管理”为模块入口，接入侧边导航栏；页面整体结构复用平台通用框架，包括顶部操作栏和筛选面板。
交付成果
在最终的页面中，除呈现客房信息的卡片是根据场景需求定制的新组件，其余组件（按钮、标签、筛选器等）均来自组件库，其中状态标签为对现有组件的样式拓展。整体组件复用率达 63%，有效提升设计效率，同时也确保了平台体验的一致性，为后续平台向更多场景扩展打下了良好基础。
1105与1308可悬浮交互
结果与反馈.
在设计系统初步落地后，通过旧页面改造和新功能搭建这两个典型场景，验证了设计系统对用户体验，团队协作及品牌发展的重要性：
1.
视觉统一性提升，用户体验更连贯
设计系统建立了标准的色彩规范和字号体系，使整个平台风格统一，页面的信息层级更清晰，用户对信息的感知力增强，提升了用户对整体平台的理解与信任感。
2.
高频组件标准化，设计资源可持续
通过对高频组件进行分类和标准化，统一其视觉风格与交互方式，避免了同一组件在不同页面中的表现不一致。不仅降低了用户的认知和使用成本，提升了平台的专业感，也大幅提升了组件的复用率，为后续平台的迭代打下基础。
3.
协作流程更高效，开发成本更可控
设计系统的建立统一了视觉语言和交付规范，减少了反复沟通和视觉走样的情况，提升了设计、产品与开发之间的信息传递效率。在“客房管理”模块的交付中，设计师可直接复用系统内已有的组件，避免了重复设计；开发也能便捷查找代码示例，实现快速对接和开发。整体设计和交付周期相比以往缩短约50%，有效降低了人力成本，提高了团队协作效率。
4.
模块扩展更灵活，系统演进有依据
本次设计系统在“客房管理”模块中的应用，初步验证了其对平台可持续扩展的支持能力。设计系统支撑了新模块的个性化定制和快速搭建，后续将在更多场景中持续推广，助力功能模块的灵活拓展，进一步证明设计系统在复杂业务演进中的适应性与重要性。
搭建设计系统需要设计师，前端工程师和产品经理的协作，尽管短期内会需要额外的资源投入，但是产生的收益是长期的，会推动产品的可持续发展和竞争力。
原型展示.
页面展示.
在项目的起点，我曾提到，由于早期缺乏统一的设计规范，平台在视觉一致性、信息层级与组件使用上存在诸多分裂与不确定性。这些问题不仅拉低了设计与开发效率，也增加了用户的认知负担，制约了产品在多元场景下的拓展能力。如今，随着设计系统的搭建与逐步推进应用，一套覆盖主流场景的标准化语言被初步建立。为更直观呈现设计系统的实际落地效果，项目最后，我选取了一些经标准化改造过的页面进行展示。
