工作总结

发布时间：2026-04-15

2026年UI设计个人工作总结。

去年夏天接手那个物流调度中台的时候，设计稿已经烂成筛子了。三个设计师轮番改过，导航栏高度88px和96px交替出现，两个关闭按钮图标并存，开发那边代码写到一半，谁也不敢动。更头疼的是业务特性——每天凌晨三点到五点，全国几百个中转站同时往系统里灌数据，界面要是卡死或者布局错位，调度员骂娘的电话能打到项目经理手机上。

第一个让我半夜爬起来处理的问题，是字体回退。业务方有个老调度员，用的还是Win7 SP1配Chrome 86，反馈说任务单号那一栏数字挤成一团，看不清。我远程让他截了张图，数字果然被渲染成了宋体。我自己的Mac上复现不了，就给运维同事打电话，让他把那台机器的字体列表导出来。一看，系统里压根没有“PingFang SC”，也没有“Microsoft YaHei”，回退链走到“SimSun”就断了。怎么解决？我在全局样式里把字体栈改成了：font-family: "Segoe UI", "Roboto", "DIN Alternate", "Microsoft YaHei", sans-serif;，并且给所有数字单独指定font-family: "DIN Alternate", "Segoe UI", monospace;。最后用font-display: swap保证文字在自定义字体加载前先显示系统字体，避免白屏。上线后观察了两天，没有再接到那个老调度员的抱怨。但这事给我提了个醒：设计稿上不能只写“苹方-常规”，得把回退链写成硬性规范。现在我每个项目的设计文件里都附带一张“字体兼容表”，写明Win、Mac、Android各自的首选和回退字体，开发照着抄就行，不用再猜。

第二个案例更典型。列表页面的无限滚动卡顿，差点在验收前被业务方一票否决。需求是调度任务列表一次性展示200条记录，每条记录有7个文本字段和3个状态图标——已完成、进行中、异常。异常状态的那个图标我当初为了好看，加了SVG的drop-shadow滤镜。开发按常规的v-for渲染，结果测试机（一台三年前的Redmi Note 8 Pro）上，滚动到第60条左右就开始掉帧，触底加载新数据时白屏接近三秒。我用Chrome DevTools的Performance面板录制了一段滚动过程，逐帧看。勾选了Rendering面板里的“Paint flashing”，发现阴影区域每滚一次就重绘一次，整个列表的渲染时间从4ms飙升到80多ms。我跟开发说，把阴影从filter: drop-shadow()改成box-shadow，前者依赖CPU计算，后者走GPU合成。再给每一行加上will-change: transform，强制浏览器把这个元素单独扔到一个合成层里。最后引入vue-virtual-scroller，可视区域外只渲染占位符，真实DOM节点控制在20个以内。同样200条数据，同样的Redmi Note 8 Pro，滚动帧率从15fps稳定到了58fps左右，白屏消失。后来复盘，我跟开发承认了一件事：那个SVG滤镜是我坚持要加的，因为觉得“质感好”。但我没提前做性能预算评估。现在每个新组件，我都会在Figma里标注“渲染成本”——低、中、高三档，开发可以根据目标机型选择降级方案。

第三个问题涉及到设计系统的版本兼容，差点造成线上事故。公司决定把品牌色从#1890ff换成#0057ff，我在Figma里改了全局颜色变量，生成了新的CSS代码交给前端。前端合并代码后，在测试环境验证通过就发了线上。结果第二天客服收到一堆投诉——旧版App（版本号低于3.2.0）里的弹窗按钮还是蓝色，而且点上去没反应。我登录测试机装了一个旧版本App，打开Chrome Inspect调试，发现页面同时加载了两套样式：新版的类名被CSS Modules编译成了Button_hash123，旧版的类名是Button_legacy，两个都存在，但新样式的优先级被旧样式覆盖了。我提出一个妥协方案：不强制所有用户升级，而是写一个兼容层。在HTML的body上根据App版本号打标记——小于3.2.0的加legacy-theme类。然后写一段CSS，当body有legacy-theme时，把所有#0057ff强制覆盖回#1890ff；新版App走新变量。同时跟运维商量，在CDN上做分流：旧版App请求的样式文件指向/css/legacy/theme.css，新版指向/css/theme.css。这个方案当天下午就上线了，投诉在24小时内归零。教训是什么？设计变量不能只躺在设计文件里。现在每次改主题色，我先在Figma里改，然后去代码仓库的tokens.json里提一个PR，CI流水线自动构建新旧两版样式，单元测试跑一遍，通过后再合到主分支。

这三个问题搞完，我养成两个习惯。第一个习惯是“故障预演清单”。每个新界面交付前，我会列一张表，逐项测试：字体缺失、屏幕缩放125%、弱网（用Chrome的Network throttling模拟3G）、低端机（用BrowserStack租一台真实的红米6A）、异常数据（比如用户名为空、图片URL 404）。每一项后面备注应对方案，开发照着清单改，验收时逐条打勾。第二个习惯是“变更追溯表”。每个设计文件的修改记录不光是写“改颜色”，而是写明：修改了哪个组件、影响哪些页面、是否需要同步修改代码变量、是否需要通知后端更新API文档。这张表挂在项目的Confluence页面上，所有人可查。

▲一起合同网Hc179.coM编辑部周报常驻嘉宾: