企业级大屏设计规范与落地实战 · 课程目录

01

大屏设计概述

什么是企业级大屏
大屏应用场景
设计基本原则

02

大屏设计流程

需求分析
原型设计
视觉设计
开发落地
测试验收

03

大屏视觉规范

色彩体系
字体规范
图标规范
间距与布局

04

大屏交互规范

页面切换
数据刷新
动效设计
异常状态

05

大屏数据可视化

图表选择原则
折线图·柱状图·饼图·地图
数据展示技巧

06

大屏组件设计

标题栏
时间组件
地图组件
表格组件
指标卡

07

大屏动效设计

入场动效
数据更新动效
页面切换动效
性能优化

08

大屏响应式设计

不同分辨率适配
多屏协同
缩放方案

09

大屏开发技术选型

React/Vue
ECharts/Three.js
Mapbox/Leaflet

10

大屏性能优化

渲染性能
数据加载优化
内存管理
首屏加载

11

大屏数据对接

API接口设计
WebSocket实时
数据格式规范
数据模拟

12

大屏主题设计

深色主题
浅色主题
自定义主题
切换机制

13

大屏安全规范

数据权限
接口鉴权
前端安全
防篡改

14

大屏测试规范

功能测试
性能测试
兼容性测试
视觉走查

15

大屏运维与监控

部署方案
日志监控
告警机制
版本管理

16

大屏设计系统

组件库建设
设计Token
规范文档
团队协作

17

大屏国际化

多语言支持
日期格式
数字格式
文化适配

18

大屏无障碍设计

色盲友好
键盘导航
屏幕阅读器
对比度要求

19

大屏3D可视化

Three.js基础
3D场景搭建
3D图表
性能考量

20

大屏地图可视化

地理数据可视化
热力图
迁徙图
区域下钻

21

大屏实时数据流

WebSocket实战
数据推送
数据缓存
断线重连

22

大屏故事化叙事

数据叙事设计
引导式浏览
关键信息突出
叙事节奏

23

大屏移动端适配

移动端大屏设计
触控交互
手势操作
横竖屏适配

24

大屏多屏联动

多屏同步
主从控制
数据分发
状态同步

25

大屏设计评审

评审流程
评审清单
常见问题
迭代优化

26

大屏项目实战（一）

智慧城市案例
需求分析
架构设计

27

大屏项目实战（二）

开发实现
组件开发
数据对接

28

大屏项目实战（三）

测试优化
性能调优
上线部署

29

大屏设计趋势

2025设计趋势
AI辅助设计
低代码平台
元宇宙大屏

30

大屏设计总结与展望

知识体系回顾
职业发展路径
持续学习建议