# 重做 Mole 菜单栏里的那几个数字
> Mole 菜单栏里的 CPU 和内存数字一直和旁边的图标不太搭，这次对照邻居重新定了字号、字重和间距，也记下几个按笔画对齐的细节。
Published: 2026-09-27 | Updated: 2026-10-01
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 开头的时候最明显。
左边从同一个起点画，数字 1 的笔画比 C 靠右；右边把标签挪到数字的笔画上，两条边就对齐了。
这里的处理是让标签去对齐数值的第一笔，数值自己不动，因为读数每秒都在变，要是跟着首位数字挪来挪去，眼睛盯着的那个数就会左右晃，挪上面那行小标签就不会有这个问题，只有读数跨十位的时候，它才会移动不到 1pt。
笔画完全对齐以后，还是觉得数值有一点偏右，这是大字压小字时常见的错觉，12pt 的圆形数字比上面的 7pt 细体大得多，眼睛会把大字的边缘读得更靠里。我比了 0、0.5、1pt 三档，1pt 已经像是数字在往外冲，最后让数值往左探出 0.3pt，差不多半个多像素，刚好让两行看起来站在同一条线上。
蓝线是标签笔画的左边缘，从上到下依次是完全对齐、数值往左探出 0.3pt、探出 1pt，最后用的是中间这档。
## 数字的宽度要提前留出来
菜单栏里的东西一旦宽度变化，右边所有图标都会跟着挪，所以每种读数都要按它自己最宽的样子留好位置。这次查下来有两个漏掉的地方，风扇转速在 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 半粗体的版本，粗体去掉以后，那条理由就不成立了，现在两种布局在角色旁边都能选，默认用格子。
依次是角色和指标、加上网速、两行模式、只看指标、风扇和 Swap、满载，每种都不会挤在一起。
回头看这次改动，没有一处是大改，都是半个像素、一个小数点、几 pt 间距这样的小事，可正是这些小事叠在一起，决定了一个图标在菜单栏里是融进去还是跳出来。如果你也在做菜单栏应用，可以先把自己的图标和旁边几个常用应用截在同一张图里比一比，量笔画而不是量框，留好每种读数最宽的位置，这几件事做完，大概就不会太突兀了。
这些数值现在都写进了测试，字重、宽度、标签和数值的对齐各有一条，以后再改的时候，不容易又改回去。和之前写的[Mole 如何做到安静、不打扰](https://mole.fit/zh/blog/the-design-of-mole)是一回事，菜单栏上的东西，最好是用户每天看着都不会注意到它。
---
Canonical HTML page: https://mole.fit/zh/blog/mole-menu-bar-redesign
Blog index for agents: https://mole.fit/zh/blog/llms.txt
Site index for agents: https://mole.fit/llms.txt
