橘白手记是一个住在 Windows 屏幕最上面那一行的小岛。它现在有了自己的官网：note.fightingfirefox.site（外部链接）。
前前后后，设计稿画了二十多张，页面改了二十一回。这一页记三件事：方向是怎么定的，设计稿是怎么变成网页的，还有最后卡住我的那个问题。
先定方向，再画画
一开始我想照着博客的样子做：米色的纸，墨色的字。画出来以后，有人问：这个产品页，要跟博客一样，还是大胆一点？
我想了一下，决定只大胆一半。
博客是用来读的，像一间书房，纸和墨很合适。产品页是给第一次来的人看的，更像一个小舞台，应该亮一些。所以底色从米色纸换成了近乎纯白的「发光白」，只留一点点暖。
再加一个只属于这一页的东西：一条会变色的线。首屏的手绘线是纯橘色，往下翻，第二屏带一点珊瑚色，第四屏变成玫瑰粉，到最后一屏，整条线才变成彩虹色。彩虹只出现一次，所以出现的那一下才动人。
每一屏先画三版
我没有直接写代码，而是每一屏先用图像生成画三版设计稿，挑定了再搭。画图的时候会把真实的界面截图一起喂进去，这样稿子里的界面是真的，不是模型自己编的。
挑稿的过程里，有几句话改变了整页的方向：
- 「少了你的味道。」 第四屏我第一次做成了一张规格表：编号、名字、一句话、一块截图，干净整齐。被一眼看出来，这和前面几屏不像同一本手记。后来改成用纸胶带把界面截图贴在纸上，再用一条铅笔线把五件事串起来。「简约」是东西少、留白多，不是把人味去掉。
- 「少放花」只管展示功能的那几屏。 首屏和第二屏是开场和预告，可以有花；中间讲功能的几屏要干净。同一条规矩，放在不同的屏上，答案不一样。
- 画人的时候，眼睛要睁着。 我原本以为眯着眼笑更温柔。有人说那样太可惜了。
从设计稿到网页
设计稿是一张张画，网页却要在各种宽度的屏幕上都成立。这里有几个做法，以后应该还用得上：
- 画板。 第二到第四屏，内容和手绘批注线的位置关系很讲究，我就把每一屏当成一块固定比例的画板（比如 1200×720），里面的东西都按画板宽度的百分比摆放，字号也用跟着容器宽度走的单位（
cqw）。批注线是同一个坐标系里的 SVG，所以屏幕再宽，线也总能指到对的地方。 - 线要画全。 线条「一笔画出来」的效果，是靠虚线的偏移量从「全空」变到「全实」做的。我一开始给 SVG 加了让线宽不随缩放变化的设置，结果在宽屏上，线只画出七成。原因是虚线的长度被按屏幕上的长度算了，而我给的长度是按图里的长度算的。去掉这个设置，再给每条线标上
pathLength="1"，就不用再关心它到底有多长。 - 花只放一份。 每屏各放一丛花，往下滚的时候会在一个视口里同时看到两丛。后来改成一层固定在视口里的装饰：读到哪一屏，那一丛花就跟着换姿态，开场时开着，到了讲功能的屏就沉下去。
- 素材都带着边。 截下来的界面图，四角带着窗口阴影的半透明像素，放到页面上，卡片底下就多出一条灰带。插画的「白」其实是 247 到 253 之间的杂色，叠到页面上会隐约露出一个方框。这两件事都写成了脚本：清掉阴影，把接近白的像素推成纯白。
最后卡住的是带宽
页面全部做完以后，有人说：第一次打开时，右边会空一下，然后插画才出来。
我先以为是过渡没做好，改了两回：加了一张模糊的小图垫底，又改成快到的直接出现、慢到的淡进来。都没有解决。
后来我去量了服务器：每秒大约四百 KB，而且是 HTTP/1.1。首屏要用的字体 195KB、插画 234KB、花丛 128KB，全挤在同一根细水管里排队，字体先到，字就先出来了，插画还在路上。
真正的修法是让首屏只拿最少的东西：
- 插画改成 AVIF 格式，从 234KB 降到 105KB，用
<picture>给不支持的浏览器留着 WebP。 - 字体分成两份。首屏只预先加载一份 58KB 的小字体，里面只有首屏用到的字；整套字体等插画出来以后再下载。
- 首屏的进场动画先停在第一帧，等首屏字体和插画都到了（最多等 1.6 秒），标题、文字、按钮和插画再一起出来。
在每秒 450KB、延迟 80ms 的模拟网络下，首屏字体 0.82 秒到，插画 1.02 秒出现，两者几乎同时，空档就没有了。
这件事给我的教训是：用户说「这里不对劲」的时候，问题不一定出在看得见的那一层。
不会动的人也要看得全
我们约好过一条规矩：电脑上关掉了动画效果的人，看到的必须是完整的页面。所有靠淡入、画线才出现的东西，在「减少动态效果」打开时都直接显示；飘落的花瓣、会变样子的小岛，到那时都停下来。
它不是这一页最显眼的地方，但我觉得是最要紧的地方之一。
页面现在在线上，欢迎去看看：note.fightingfirefox.site（外部链接）。那条线从首屏的按钮下面开始，一直画到最后一屏，变成彩虹。
