CASE STUDY 03 / DESIGN SYSTEM
LANHU ANNOTATION + 132 EXPORTED ASSETS
CLOUD CONTROL · 1920 × 1080
酷黑云控
酷黑云控
大屏设计规范
把车辆调度、路侧设备、地图、视频、状态与控制动作整理为同一套可交付的视觉语言。规范来自真实蓝湖标注与 1×/2× 切图，不把复盘建议冒充原始设计事实。
真实交付稿：车辆调度大屏。规范将复杂装饰资产与可编辑信息层分开记录。
深色不是目的，
状态辨识才是
蓝黑色用于降低环境干扰，亮蓝建立交互边界，绿、黄、红只负责表达状态。以下关键值来自蓝湖精确标注与切图像素。
Canvas
#081020大屏深色基底Modal Surface
#00093A五路视频弹窗Primary Line
#4794FF选中、边框、标题条Modal Line
#7EB0FF弹窗 2 px 内边框Label
#A8CBFF字段标签 14 pxInfo
#04A3FF关键实时数值Success
#36FF7D已连接、正常运行Danger
#FF5656停止、异常、危险信息层与动作层，
使用不同的声音
信息文字保持稳定、清楚；关键动作与大屏标题使用更强的展示字体。模块装饰条可以保留切图，但内容文字应逐步改成可编辑文本。
样例字体字号用途
酷黑车辆调度大屏
HYk2gj38 px大屏主标题，白到蓝高光
远程启动
YouSheBiaoTiHei20 / 32 px操作按钮与短动作
125.56 km
SourceHanSansCN-Regular16 px关键数值、状态、对象值
车辆名称：
SourceHanSansCN-Regular14 px字段标签与表格表头
蓝湖原始标注：字段标签“车辆名称”使用 SourceHanSansCN-Regular 14 px / #A8CBFF；对象值“KH”使用 16 px / #FFFFFF；表头“事件码”使用 14 px / #CDDFFF。
左右稳定分工，
中央保留空间上下文
车辆调度与路侧设备页面保持同一结构：左侧对象与控制，中央地图与对象定位，右侧状态、视频与事件反馈。
OBJECT + CONTROL
MAP + LOCATION
STATUS + FEEDBACK
对象位置尺寸证据
大屏主标题x796 / y46339 × 37蓝湖标注
车辆选择器x247 / y70166 × 342 px / r2
模块标题装饰x43 / y150391 × 59PNG 切图
顶部整屏装饰x0 / y01920 × 2231× / 2×
左右整屏装饰x0 / y0692 × 10801× / 2×
组件不只是外观，
还要说明状态与交付方式
以下组件来自实际切图。规范同时记录原始尺寸与后续工程化建议，避免继续用整块图片承载可编辑文字。
基础控制
166 × 34 px；2 px 边框；2 px 圆角。适用于选择器和基础动作。
成功动作
184 × 46 px；绿色只用于已确认、允许运行和成功状态。
危险动作
停止或异常状态。必须同时出现明确文案和二次确认。
状态灯
53 × 54 px；不能单独依赖颜色，应同时显示状态文字。
功能图标
切换 42 × 42；播放约 31 × 32；关闭 28 × 28。保留透明 PNG。
信息状态
用于当前模式和信息型选择，不与危险或成功状态混用。
五路视频按需展开，
主画面不被持续占满
蓝湖原始弹窗使用三上两下布局。弹窗承担详细观察，主页面只保留单路预览和进入入口。
车辆视频
左视角
车内视角
右视角
前视角
后视角
1243 × 785 px
- 位置：x339 / y148
- 背景：#00093A
- 边框：2 px / #7EB0FF
- 上排视频：380 × 239 px
- 下排视频：288 × 182 px
- 标题条：379 × 34 px
区分装饰资产、
代码组件与状态数据
原始项目提供了完整 1×/2× 切图。作品集复盘进一步把它们转成可维护的工程交付规则。
适合继续使用 PNG
- 复杂发光与透明装饰框
- 车辆、路侧设备与行人图形
- 状态灯与复杂光晕
- 无法稳定用 CSS 复现的纹理
- 同时输出 Web @1x / @2x
应由代码实现
- 正文、数值、状态与表格文字
- 纯色背景、普通边框和圆角
- 表格、列表、选择器和弹窗布局
- 禁用、加载、悬停和聚焦状态
- 对象选择与地图联动逻辑
证据边界：本页中的原始尺寸、字体、色值和版本日期来自用户当前打开的蓝湖项目；“8 px 网格、代码化文字、九宫格拉伸、无障碍状态”等属于作品集复盘后的交付规范，不冒充当时已经建立的正式设计系统。