重做 Mole 選單列裡的那幾個數字

Mole 的選單列可以在小鼴鼠旁邊放兩個數字，預設是 CPU 和記憶體，這塊其實被使用者說了挺久，總覺得和旁邊的圖示放在一起不太搭，又說不出哪裡不對。這次我截了一張自己的選單列，從左到右一格格對著看，才發現問題不在某一個數字上，而是字級、字重、間距幾件小事疊在一起，單獨看每一樣都還行，放進選單列就顯得格格不入。

先看旁邊的鄰居是怎麼寫的

截圖裡 Mole 左邊剛好是 Stats，一款開源的選單列監控工具，我去讀了它繪製選單列的程式碼，標籤在上、數值在下的小格用的是 7pt 細體標籤加 12pt 常規體數值，兩行的網速是 9pt，整條選單列上找不到一處粗體。再回頭看 Mole，原來是 8pt 半粗體的兩行字，在同一張截圖上量，字高 12 個像素，旁邊 Stats 的字是 13 到 16 個像素，Mole 的字比鄰居小一號，又是整條選單列上唯一的粗字，擠在一起就成了一小塊灰斑。

之前也調過好幾輪，10pt、9pt、8pt 一路往小裡收，每次都是盯著小鼴鼠本身調，沒和旁邊的狀態項目放在一起比過，所以越調越小，字重卻一直沒動。選單列是一整條公共空間，使用者看它的時候不會單獨看某一個 App，這次就乾脆照著使用者已經看慣的寫法來，標籤 7pt 細體，數值 12pt 常規體，兩行模式和網速 9pt 常規體，所有字都不再加粗，層級只靠大小來分。

間距要量筆畫，不量框

字級定下來以後，間距的問題就冒出來了，小鼴鼠和第一個數字之間、兩個指標之間、標籤和數值之間，三處各算各的，看起來就沒有整體感。原來的程式碼都是從圖片邊框或者文字的排版框開始算距離，但眼睛看到的是筆畫，框和筆畫之間的空白每個字都不一樣，於是同樣寫著 3pt 的地方，看起來可能差了一倍。

最明顯的是小鼴鼠，每個角色的 sprite 圖左右都自帶一圈透明邊，寬窄各不相同，從圖片邊緣量出來的固定間距，落到小鼴鼠身上只剩 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 間距這樣的小事，可正是這些小事疊在一起，決定了一個圖示在選單列裡是融進去還是跳出來。如果你也在做選單列 App，可以先把自己的圖示和旁邊幾個常用 App 截在同一張圖裡比一比，量筆畫而不是量框，留好每種讀數最寬的位置，這幾件事做完，大概就不會太突兀了。

這些數值現在都寫進了測試，字重、寬度、標籤和數值的對齊各有一條，以後再改的時候，不容易又改回去。和之前寫的設計 Mole：盡量不打擾是一回事，選單列上的東西，最好是使用者每天看著都不會注意到它。