重做 Mole 菜单栏里的那几个数字

Mole 的菜单栏可以在小鼹鼠旁边放两个数字，默认是 CPU 和内存，这块其实被用户说了挺久，总觉得和旁边的图标放在一起不太搭，又说不出哪里不对。这次我截了一张自己的菜单栏，从左到右一格格对着看，才发现问题不在某一个数字上，而是字号、字重、间距几件小事叠在一起，单独看每一样都还行，放进菜单栏就显得格格不入。

先看旁边的邻居是怎么写的

截图里 Mole 左边刚好是 Stats，一款开源的菜单栏监控，我去读了它画菜单栏的代码，标签在上、数值在下的小格用的是 7pt 细体标签加 12pt 常规体数值，两行的网速是 9pt，整条菜单栏上找不到一处粗体。再回头看 Mole，原来是 8pt 半粗的两行字，在同一张截图上量，字高 12 个像素，旁边 Stats 的字是 13 到 16 个像素，Mole 的字比邻居小一号，又是整条栏上唯一的粗字，挤在一起就成了一小块灰斑。

之前也调过好几轮，10pt、9pt、8pt 一路往小里收，每次都是盯着小鼹鼠本身调，没和旁边的状态项放在一起比过，所以越调越小，字重却一直没动。菜单栏是一整条公共空间，用户看它的时候不会单独看某一个应用，这次就干脆照着用户已经看惯的写法来，标签 7pt 细体，数值 12pt 常规体，两行模式和网速 9pt 常规体，所有字都不再加粗，层级只靠大小来分。

间距要量笔画，不量框

字号定下来以后，间距的问题就冒出来了，小鼹鼠和第一个数字之间、两个指标之间、标签和数值之间，三处各算各的，看起来就没有整体感。原来的代码都是从图片边框或者文字的排版框开始算距离，但眼睛看到的是笔画，框和笔画之间的空白每个字都不一样，于是同样写着 3pt 的地方，看起来可能差了一倍。

最明显的是小鼹鼠，每个角色的雪碧图左右都自带一圈透明边，宽窄各不相同，从图片边缘量出来的固定间距，落到小鼹鼠身上只剩 6.5pt，换一个角色又变宽了。现在是把所有动画帧里最靠右的那个像素找出来，从它开始量，换哪个角色，角色到数字都是 12pt 左右。

两个指标之间也有类似的坑，每一格会按最宽的读数留出位置，比如百分比按 100% 留，这样读数从 9% 变到 44% 时整个菜单栏不会跟着抖，两位数的时候中间自然空出 13pt 左右。可一旦两格都跑到 100%，预留的余量就没了，改的过程中有一版格间距只留了 3pt，满载时两行模式里直接粘成了 100%999 KB/s，现在格与格之间至少留 6pt，满载的时候也分得开。标签和数值上下之间留 3.5pt，和 Stats 一样。

左对齐的两行字，也会看着不齐

原来格子里的标签是居中放在数字上方的，看着像飘在上面的一行说明，这次改成标签和数值都左对齐，两行从同一个 x 坐标开始画，按理说应该是对齐的，可放大一看，标签总是比数字靠左一点。原因在字体本身，每个字形左边都自带一小段留白，12pt 的等宽数字左边空了 0.7 到 1.0pt，数字 1 更是有 1.7pt，而 7pt 标签的大写字母只有 0.3 到 0.6pt，起点一样，笔画却差了 1 到 3 个像素，数值以 1 开头的时候最明显。

这里的处理是让标签去对齐数值的第一笔，数值自己不动，因为读数每秒都在变，要是跟着首位数字挪来挪去，眼睛盯着的那个数就会左右晃，挪上面那行小标签就不会有这个问题，只有读数跨十位的时候，它才会移动不到 1pt。

笔画完全对齐以后，还是觉得数值有一点偏右，这是大字压小字时常见的错觉，12pt 的圆形数字比上面的 7pt 细体大得多，眼睛会把大字的边缘读得更靠里。我比了 0、0.5、1pt 三档，1pt 已经像是数字在往外冲，最后让数值往左探出 0.3pt，差不多半个多像素，刚好让两行看起来站在同一条线上。

数字的宽度要提前留出来

菜单栏里的东西一旦宽度变化，右边所有图标都会跟着挪，所以每种读数都要按它自己最宽的样子留好位置。这次查下来有两个漏掉的地方，风扇转速在 1000 转以下写成 850，以上写成 2.1k，两种写法留的宽度不一样，过 1000 转时整条菜单栏会跳一下；Swap 原来直接用系统的字节格式，会出现 10.52 GB，法语系统下是 1,2 Go，放在 12pt 的格子里又长，宽度还跟着读数变。现在风扇两种写法共用一个宽度，Swap 在菜单栏里固定写成 512 MB、1.2 GB、12 GB 这样最多三位数的短格式，完整写法留在弹窗里。

网速也顺手改了一处，原来 10 KB/s 以下会带一位小数，空闲时是 0.0 KB/s 叠在 86 KB/s 上面，一行有小数点，一行没有，右对齐以后怎么看都不齐。每秒零点几 KB 本来也没什么信息量，现在 KB/s 一律取整数，MB/s 在 10 以下还保留一位小数，1.5 MB/s 和 1 MB/s 的差别是真的有用。

怎么设置

在 Mole 的设置里切到「菜单栏」，「显示」这一行有三个选项，「奔跑」只显示小鼹鼠，「指标」只显示数字，「组合」是小鼹鼠加数字，要看到文中这些数字，选「指标」或者「组合」就行。选好以后下面会多出几项，「布局」里选「横排」是标签在上、数值在下的格子，选「堆叠」是两行小字，「指标一」和「指标二」决定显示哪两个指标，默认是 CPU 和内存，也可以换成 GPU、温度、功耗、风扇、交换空间或者外设电量，「网络速度」打开以后，最右边会多一列上下行网速。小鼹鼠在「样式」里可以换成别的角色，旁边那个按钮能让它掉个头。

有人问小鼹鼠为什么有时候跑得特别快，其实它的步子就是 CPU 的读数，Mac 越忙跑得越快。它看的是整机 CPU 使用率和 1 分钟平均负载里更高的那个，完全空闲时大约 1.3 秒迈一步，占用到 70% 以后就不再加速，差不多每秒 4 步，中间这一段在低占用时涨得更快一些，好让 10% 和 30% 的差别一眼能看出来，所以平时开着浏览器写写东西，它也会比完全空闲时快两倍左右，编译代码、导出视频的时候就会明显跑起来。这个快慢是故意留着的信号，所以没有单独做速度设置，换成别的角色时步子也会不一样，因为每个角色的动作帧数不同。只显示小鼹鼠的时候，把鼠标停在它上面，也会看到「跑得越快，说明 CPU 越忙」这句提示。

也有试过但没改的

有一轮觉得温度那格的字看着偏大，我把单位缩到 9pt 和 10pt 各做了一版，结果 ° 跟着缩小后掉到了靠近基线的位置，58°C 读起来像打错字的 58°c，百分号也比旁边 Stats 的小一截，放在一起反而不像一家。再量一下才发现数字其实和 CPU 那格一样大，显得大只是因为 58°C 比 44% 多了一个大写字母，所以这里保持原样，字号不动。

原来还有一条规则，角色旁边只能用两行小字，不能用这种标签在上、数值在下的格子，当时否掉的是一个 12pt 半粗体的版本，粗体去掉以后，那条理由就不成立了，现在两种布局在角色旁边都能选，默认用格子。

回头看这次改动，没有一处是大改，都是半个像素、一个小数点、几 pt 间距这样的小事，可正是这些小事叠在一起，决定了一个图标在菜单栏里是融进去还是跳出来。如果你也在做菜单栏应用，可以先把自己的图标和旁边几个常用应用截在同一张图里比一比，量笔画而不是量框，留好每种读数最宽的位置，这几件事做完，大概就不会太突兀了。

这些数值现在都写进了测试，字重、宽度、标签和数值的对齐各有一条，以后再改的时候，不容易又改回去。和之前写的Mole 如何做到安静、不打扰是一回事，菜单栏上的东西，最好是用户每天看着都不会注意到它。