嵌入式 UI 方向 · 求职作品集 · 全流程单人交付

从设计稿到真机,
一块 4 英寸屏的完整交付

鹿人智能面板 Lumo Panel C4 —— 480×480 智能家居中控屏。从竞品拆解、22 屏工业级设计稿,到 LVGL 9.2 逐屏代码还原,再到 RV1106 开发板真机运行,每一层都是自己动手做的。

22 屏深浅双主题完整设计
480×4804 寸真机分辨率
LVGL 9.2C 语言逐屏还原
RV1106交叉编译真机部署
0第三方 UI 库依赖
RV1106 开发板运行鹿人智能面板的实拍画面
板端完整交互 · 92 秒实拍 RV1106 + 4″ 触摸屏

01 · 最终成果

真机运行,不是效果图

最终交付物是一块开机自启、触摸可用的真实智能中控面板:Luckfox RV1106(Cortex-A7 @1.2GHz / 64MB 内存)+ 4 寸触摸屏,Linux + BusyBox 环境,LCD 帧缓冲直写。

RV1106 开发板上运行的鹿人智能面板界面

92 秒完整交互实拍

覆盖页面切换、空调调节、灯光、窗帘安防等全部核心交互,一镜到底不做剪辑。

弱 CPU 三项专项优化

图像解码缓存、fbdev 双全屏缓冲直出、转场动画按算力裁剪——默认配置在这颗单核 A7 上切屏只有 3~5 fps,逐项实测修到可用水准。

开机自启 + 单例运行时

init.d 脚本拉起,mkdir 原子目录锁保证单例运行,服务崩溃自动重启——上电即用,和量产面板行为一致。


02 · 界面精选

22 屏里挑出来的 7 个关键屏

全部界面由 LVGL C 代码逐屏还原,以下为 PC 模拟器实机截图,不是设计稿渲染图。

窗帘与安防页:滑块与布防状态
窗帘与安防 —— 滑块 + 布防状态语义色
门铃对讲页:产品 IP 形象鹿人出镜
门铃对讲 —— IP 形象「鹿人」出镜
场景页:2×2 场景卡
场景 2×2 —— 渐变流动表示「执行中」

渐变流动

三站循环 1.9s,表达「正在进行」· 落地:场景页执行卡

26°

数字翻轮

旧字滑出、新字反侧滑入 320ms · 落地:空调温度 ±

交错点亮

段控逐个变色、间隔递进 · 落地:空调风速五档


03 · 设计系统

有语义的光

每一处颜色都绑定数据语义:装饰性光效零容忍。对标拆解欧瑞博 MixPad 4、萤石 SP4、小米中控屏三个量产产品后确立视觉方向。Lumo = 鹿(IP 形象「鹿人」)+ 流明(lumen),品牌名与设计哲学同源。

底色 · 曜石黑#0A0C10
卡片 · 石墨#141821
琥珀 · 光与热#FFB35C
青瓷 · 空气与安全#55E6C4
蓝 · 制冷与信息#4FA8FF
深色主题首页
深色主题 · 底色 #0A0C10
浅色主题首页
浅色主题 · 暖纸色 #F4F0E7

01 · 双主题,同一套代码

浅色主题不是另画一套屏:双色板结构体 + 同一构建函数重建,支持手动切换与 19:00–07:00 自动深色。

02 · 砍掉伪 3D 与玻璃拟态

LVGL 无 GPU 合成,毛玻璃与真 3D 在目标硬件上跑不动。设计必须尊重硬件约束——这是全项目最重要的设计决策。

03 · 全中文零残留

按实际文案提取 585 字裁剪 CJK 字库;时钟与日期字形用 PIL 2x 超采样预烘焙金属渐变,运行时零开销。

二十二屏设计总览
22 屏设计总览 · 设计期代号 Aura Panel V3.3 · 从 9 屏方案起 5 轮迭代

04 · 工程实现

从像素到帧缓冲

UI 层代码在 PC 模拟器与开发板之间完全共享,换平台只更换显示与输入驱动对接层。

设计层
画布设计稿22 屏 · 唯一事实源
竞品拆解MixPad 4 / 萤石 SP4 / 小米
PIL 资产管线图标 2x 导出 · 字形预烘焙
UI 层 · C / LVGL 9.2
aura_screens / widgets / theme22 屏逐屏还原 · token 双主题
导航栈 + 交互逻辑push/pop · 真实状态绑定
动效系统渐变流动 / 翻轮 / 滚跳 / 交错
模拟器层 · Windows
Win32 GDI 零依赖模拟器480×480 · DPI aware · DIB 直绘
Python 工具链合成点击测试 · 截图对比
gcc 桩头语法检查96 个 LVGL 声明 · 零警告
板端层 · Linux / RV1106
交叉编译arm-rockchip830 工具链
fbdev + evdev 驱动对接DIRECT 双全屏缓冲 · GT911
运行时管理原子锁单例 · 开机自启 · 看门狗

性能三件套 —— 默认配置在弱 CPU 上的隐形税,逐项实测修复

优化项
默认配置的问题
修复与结果
图像解码缓存
缓存默认为 0,每次绘制都重读并重新解码 PNG,切屏必卡。
图像缓存设 4MB,切屏不再重复解码。
刷新策略
PARTIAL 40 行局部缓冲,反复 flush,画面撕裂。
fbdev DIRECT + 双全屏缓冲,消除 tearing。
转场动画
320ms 双屏滑动在单核 A7 上只有 3~5 fps。
按算力裁剪动画策略,达到交互可用水准。
STEP 01

交叉编译

Ubuntu 虚拟机中用 Rockchip 工具链编译 LVGL 9.2 + UI 层,UI 代码与 PC 模拟器完全共享,只替换 fbdev/evdev 对接层。

STEP 02

推送与安装

通过 SSH(USB RNDIS 网络)将二进制与资产推送到板端 /oem/usr/aura/;BusyBox 环境下打包用纯 tar,板端 tar 不支持 gzip 解压。

STEP 03

开机自启

init.d 脚本拉起 wrapper,wrapper 以 mkdir 原子目录锁保证单例运行,判活比对 /proc/<pid>/cmdline 而非依赖陈旧 pid 文件。

STEP 04

触摸对接

GT911 触摸为 Type-B 协议,事件含 TRACKING_ID + BTN_TOUCH,LVGL evdev 适配后读取周期设为 15ms 保证跟手性。

模拟器内置 1~9 快捷键直达各屏,便于逐屏比对截图与设计稿;字体用 Noto Sans CJK SC 三合一字库按 585 字裁剪,编译工具链自建(Python 串行 + mtime 增量,348 文件全量约 80s,交付零警告)。

05 · 演进历程

五轮推倒重来

设计稿每一轮迭代都由一个具体的否决理由驱动,不是「越改越好看」,而是「越改越站得住」。

V1

9 屏方案

3D 等距空间被否决:AI 味重,脱离 LVGL 渲染能力

V2

玻璃拟态

评审指出硬伤:无 GPU,毛玻璃做不了

REF

竞品拆解

对标 MixPad 4 / 萤石 SP4 / 小米量产件

V3

工业级重构

实色卡 + 细描边 + 大时钟直达键

V3.3

22 屏终稿

浅色补齐 9 屏,21 处硬编码色全部 token 化

PORT

LVGL 移植

逐屏一比一还原 + 动效落地审计

HW

RV1106 真机

交叉编译上板 · 触摸打通 · 性能三件套