嵌入式UI设计：资源受限，美学不妥协

　　“这按钮 hover 状态压根没渲染，你让我怎么点？”我拍着测试机说，屏幕还卡在 loading 圈——不是 UI 卡，是用例管理工具一直在转圈，连带整个 tab 都假死。老张头都没抬，手指还在键盘上敲，右下角那个 shift 键按下去不回弹，他每次切输入法都得用食指顶两下。我说的是嵌入式那个屏保界面，中秋前一周灰度的版本。

　　我原以为只要把动效全砍掉、字体缩到 12px、图全走 base64 内联就稳了，结果上线前发现那个致命问题的那一刻——设备内存爆了，直接进不了首页。不是崩溃，是卡在黑屏前 0.3 秒，白板上数字擦了一半，只留个“73.”，底下全是粉笔灰。小陈蹲那儿拿纸巾补，补了三遍，越补越糊。我们盯着那个点，谁都没吭声。然后他说：“你试试长按电源键。” 我试了。没用。他又说：“试试先松开再快速点三下。” 我照做——进了。不是 bug，是系统级 fallback，但我们根本没测过这个路径。

　　你猜怎么着？那台跑回归的工控屏，充电线不够长，只能斜着插在插座上，每次测到 80% 的时候自动断连。小马把它挪到窗台边，桌上摆着三台手机，最左边那台屏保还是去年团建合影。我数过三次，每台都亮着不同色温，蓝光最重那台是他的主力机，但真要用它截图，他一定抢回去说“别碰我 cache”。

　　优胜劣汰——这话不是喊口号。是真淘汰。比如那个圆角矩形按钮，设计稿里写了 radius: 6px，可嵌入式 WebView 渲染时把 subpixel 全吃掉了，实际出来是 4.3px；我们测了，人眼分不出来。但客户现场反馈说“按钮发虚”，最后改的是 font-smoothing: antialiased 而不是 border-radius。为什么？因为后者会触发一次 full reflow，而前者只是 paint 层叠加。这不是优化，是退让里的精准卡位。我漏测过一个 case：横竖屏切换时 Toast 的定位偏移，只在 768×1024 分辨率下偶现，复现率大概 1/5，但只出现在冷启动后第三次横屏的时候。我写了用例，没跑通，后来忘了关那个 tab——它现在还在开着，标签页写着“Toast_768_v3_???”。

　　会议室又被占了。门口贴着张纸，“产研对齐-勿扰”，字是小李写的，但墨水洇开了，“对”字下半截没了，像被啃了一口。我们只好蹲茶水间，拿外卖盒当临时桌子。那顿饺子凉透了，汤凝成一层油膜，底下浮着几粒葱花，像微型岛屿。小李一边搅一边说：“要不这次把 icon 全替成 SVG symbol？” 我说行啊，你记得 SVG 的 viewBox 坐标系和 CSS transform origin 不一致吗？他手一抖，筷子戳破了盒底，汤漏在纸上，字更糊了。

文章配图，仅供参考

　　所以美学不妥协不是硬撑。是删掉所有冗余伪类，只留 :active/:disabled；是用 calc(100vw - 2px) 代替 width: 99.9%；是把阴影写成 box-shadow: 0 0 2px rgba(0,0,0,.1)，不是 0 2px 4px；是宁可多套一层 div 控制 overflow，也不加 will-change。这些都不写进 PR 描述，但上线后有人在钉钉问：“为啥这页比上一页快 120ms？”——没人回。但我知道为什么。因为上一页用了 filter: blur(1px) 做毛玻璃，这一版换成了 backdrop-filter: blur(0)，其实也是 blur(1px)，但底层调用的 API 不一样。嵌入式芯片厂商给的驱动，对 filter 支持打骨折，对 backdrop-filter 反而好些。没人告诉过我，是我自己撞出来的。

　　外卖盒底朝天的时候，小陈突然说：“其实那个 Toast，可以改成 top: env(safe-area-inset-top)”。我嗯了一声。他没继续。我也没问——env() 在老版本 WebKit 里就是 undefined，我们最低兼容到 iOS 13.5，而 safe-area-inset-top 是 14.5 加的。但他知道。我知道他知道。所以我们都没提。就像谁都没提，测试机旁边那个充电器插线板，上面贴着张黄纸条，字是小李写的：“仅限本机使用｜勿拔”，可它已经拔过两次了，胶痕歪着，像一条斜疤。

　　我现在打开那个用例 tab，把“Toast_768_v3_???” 改成 “Toast_768_v3_fixed”，然后关掉。不提单，不走流程。就让它这么过去。毕竟中秋那天上线的包，到现在没收到一起客诉。不是没毛病，是客户没点到那个路径。或者点了，但没意识到是 bug。也有可能，他们觉得那样更好看。

　　下个迭代我打算试试：把所有 :hover 改成 @media (hover: hover) 包一层。虽然嵌入式设备基本不认这个媒体查询，但至少让代码看起来像在认真干活。反正我也不知道要不要加，先加了再说。键盘上那个 shift 键，我刚试着按了三下——还是不回弹。

（编辑：站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!