【LVGL】从HTML到LVGL：嵌入式UI的设计迁移与落地实践

从HTML到LVGL：嵌入式UI的设计迁移与落地实践

在嵌入式开发中，我们常遇到这样的场景：用HTML/CSS快速实现了UI原型（比如压力传感器监控界面），但最终需要在单片机屏幕上通过LVGL（轻量级嵌入式GUI库）运行。而Figma作为设计与开发的“桥梁”，能帮我们精准还原HTML设计，并为LVGL开发提供标准化的视觉参考。本文将详细拆解从HTML迁移UI到Figma，再适配LVGL的完整流程，附带实操代码与避坑指南。

一、背景：为什么需要“HTML→Figma→LVGL”的链路？

在嵌入式UI开发中，直接用LVGL写界面效率低，且难以和设计师协作；而HTML/CSS适合快速迭代Web端原型，但无法直接运行在单片机上。三者的定位互补：

• HTML：快速验证UI逻辑（如数据展示、交互流程），适合前期原型开发；
• Figma：将HTML原型转化为标准化设计资产（颜色、组件、尺寸规范），打通设计与嵌入式开发；
• LVGL：基于Figma规范，在嵌入式硬件上实现高性能UI，适配800×480等单片机屏幕。

本文以“双通道压力传感器监控UI”为例（分辨率800×480，深色科技风），展开具体实践。

二、前期准备：工具与设计参数梳理

在开始迁移前，需准备工具并提取HTML中的核心设计参数，避免后续适配偏差。

1. 必备工具清单

2. 提取HTML设计核心参数

打开HTML文件，用Chrome开发者工具（F12）提取关键样式，整理成表格（后续Figma和LVGL将严格遵循此规范）：

三、第一步：HTML UI迁移至Figma（设计落地）

Figma的核心作用是将HTML的“代码化UI”转化为“可视化设计资产”，需保证1:1还原布局与样式，为后续LVGL开发提供精准参考。

1. 搭建Figma基础画布

1. 打开Figma，新建“设计文件”，创建800×480像素的框架（Frame），命名为“嵌入式压力传感器UI”；
2. 设置框架背景色为HTML的页面背景色#0f172a，关闭“自动调整大小”，确保尺寸固定。

2. 还原HTML核心组件（逐个击破）

按HTML的布局结构（标题栏→压力显示区→图表区→状态栏），在Figma中逐一重建组件，重点关注“样式一致性”和“可复用性”。

（1）标题栏组件

• 结构：左侧标题（图标+文字）+ 右侧时间/设置按钮；
• 实操：
  1. 左侧：添加“文本”层（内容“双通道压力传感器监控系统”，字体Inter 16px，颜色#ffffff），左侧搭配“图标”（Figma搜索“dashboard”，颜色#0ea5e9）；
  2. 右侧：时间文本（Inter 14px，颜色#94a3b8），设置按钮（圆形，尺寸40×40，背景色#1e293b，图标“cog”，颜色#94a3b8）；
  3. 间距：标题栏上下间距16px，左右元素间距24px，确保与HTML一致。

（2）双通道压力显示区

这是核心数据展示区，需重点还原“渐变边框”“大数值”“趋势标签”：

• 渐变边框：HTML中用gradient-border实现，Figma中需：
  1. 创建外层矩形（尺寸380×140，圆角8px），设置“描边”为线性渐变（#0ea5e9→#06b6d4），描边宽度2px；
  2. 内层创建矩形（尺寸376×136，圆角6px），背景色#1e293b，与外层矩形居中对齐，模拟“渐变边框”效果；
• 数值与单位：
  1. 数值文本（Roboto Mono 64px，颜色#0ea5e9，内容“12.8”）；
  2. 单位文本（Inter 18px，颜色#94a3b8，内容“kg”），与数值右对齐，底部偏移2px；
• 趋势标签：矩形背景（#0ea5e9/10，圆角12px），内部文字（“+0.23 kg”，Inter 12px，颜色#94a3b8）+ 箭头图标（颜色#10b981）。

（3）曲线图表区

HTML中用Chart.js实现，Figma中无需实现动态数据，只需还原“图表框架”和“静态曲线”：

1. 创建图表容器（尺寸520×200，背景色#1e293b，圆角8px）；
2. 绘制坐标轴：X轴（时间标签“0s”“20s”…“600s”，Inter 9px，颜色#64748b），Y轴（数值标签“8kg”“10kg”…“14kg”，同X轴样式）；
3. 绘制曲线：用“钢笔工具”绘制两条平滑曲线（通道1：#0ea5e9，通道2：#8b5cf6），曲线下方添加“渐变填充”（透明度30%→0%）。

（4）按钮与状态组件

• 零点校准按钮：矩形（高度48px，背景色#0ea5e9/20，圆角8px），文字（“零点校准”，Inter 14px，颜色#0ea5e9）+ 图标（“balance-scale”）；
• 状态指示灯：圆形（尺寸8px，颜色#10b981），添加“脉冲动画”（Figma右侧“原型”面板，设置“不透明度”从100%→50%→100%，周期2s，循环播放）。

3. 导出Figma设计资产

完成UI还原后，导出LVGL开发所需的资源：

1. 图标资源：将Figma中的按钮图标、状态图标导出为“PNG格式”（分辨率24×24，单色，透明背景）；
2. 样式规范文档：用Figma的“样式指南”功能，导出颜色值（RGB/Hex）、字体参数、组件尺寸表，保存为PDF；
3. UI截图：导出完整的800×480 UI截图，作为LVGL开发的视觉对比参考。

四、第二步：Figma设计适配LVGL（嵌入式落地）

LVGL是嵌入式领域主流的轻量级GUI库，支持STM32、ESP32等主流MCU，需将Figma的“设计资产”转化为LVGL的“代码对象”，核心是“组件映射”与“资源适配”。

1. 搭建LVGL开发环境

以STM32为例，环境搭建步骤：

1. 下载LVGL源码（GitHub仓库），版本选择v8.3（稳定性高，文档完善）；
2. 在STM32CubeIDE中创建工程，将LVGL源码添加到工程目录，配置lv_conf.h（开启必要功能，如图表、动画）；
3. 适配屏幕驱动：根据屏幕接口（SPI/RGB），实现LVGL的显示回调函数（lv_port_disp_init()），设置分辨率为800×480。

2. Figma组件→LVGL代码映射（核心实操）

LVGL的UI由“对象（lv_obj_t）”和“样式（lv_style_t）”构成，需按Figma规范创建样式，再生成对应组件。以下是关键组件的实现代码：

（1）初始化全局样式（匹配Figma规范）

// lv_style.h
#include "lvgl.h"

// 定义全局样式（对应Figma的颜色、字体、尺寸）
static lv_style_t style_page_bg;    // 页面背景样式
static lv_style_t style_panel;      // 面板样式（Figma的#1e293b）
static lv_style_t style_text_title; // 标题文本样式
static lv_style_t style_text_value; // 数值文本样式（Figma的64px等宽字体）
static lv_style_t style_btn_calib;  // 校准按钮样式

// 初始化样式
void lv_style_init_global(void) {
   
   
    // 1. 页面背景样式（Figma的#0f172a）
    lv_style_init(&style_page_bg);
    lv_style_set_bg_color(&style_page_bg, lv_color_hex(0x0f172a));
    lv_style_set_pad_all(&style_page_bg, 16); // 页面内边距16px（Figma）

    // 2. 面板样式（Figma的#1e293b，圆角8px）
    lv_style_init(&style_panel);
    lv_style_set_bg_color(&style_panel, lv_color_hex