# 幫 Mole 的圖示做了一次精細化升級
> Mole 的圖示從系統圖示換成以 Phosphor 為基礎修改的一套，聊聊怎麼選圖示庫、為什麼要放進產品裡一起看，以及小巧思、對齊和大小這些細節。
Published: 2026-09-30
想跟大家隨便聊聊怎麼幫產品做一次圖示升級，有哪些要注意、又有哪些可以最佳化的地方。
早上幫 Mole 的圖示做了一次精細化的升級，之前用的是系統的圖示，對簡單的產品場景我覺得完全夠用，不過細看會覺得少了一點靈氣。
每組左邊是之前的系統圖示，右邊是以 Phosphor 圖示庫為基礎修改後的圖示。
## 選哪一套圖示庫
研究了一圈，比較適合做 App 產品圖示的有 Remix Icon 和 Phosphor Icons 這兩套，之前寫 Web 的時候用 Remix 很多，簡單舒服，但是放到 App 上我覺得不是很好看，於是就換成了 Phosphor，呈現出來很有靈氣，非常不錯，差不多有 70% 可以不修改直接用，另外 30% 的圖示是我用 Opus 5.5 寫 SVG 自己畫的，這樣整體更一致。
## 一定要放進產品裡一起看
大家直接看上面的對照圖，可能很難感覺出兩者的差別，很多時候要實際放進真實的產品裡，我通常還會考慮同一個模組裡一組圖示的搭配感，有時候每個圖示單獨看都好看，組合在一起反而不好看，就像一個人的五官單獨拿出來都好看，放到一張臉上卻沒那麼好看，所以我的建議是，換圖示一定要放到實際的產品裡看，放在一起看，才會有比較好的效果。
## 小巧思是產品的生命力
其次，我一直覺得我們做的產品應該是有靈氣、有生命的那種感覺，而不是直接 AI Coding、沒經過你任何思考產出的那種冷冰冰的編譯產物，這時候像圖示這樣的小細節，就是幫產品帶來生命力的一個很好的切入點，比如大家看「防止睡眠」我用的是一杯咖啡，這裡有 Caffeine 的比喻，就像讓你的電腦喝了咖啡一樣睡不著；「關於」一般會用一個帶圈的 i，但我想它應該是一聲 hello，所以用了揮手的圖示；「診斷」通常會用排查問題的那種圖示，這裡用的是聽診器，更像是幫你的問題做一次醫生檢查。類似這樣，很多時候可以在產品裡加入不少自己的小巧思，整體會有趣很多。
## 對齊、大小和置中
最後，好看的設計幾乎都離不開對齊、整齊、錯落有致這些原則，怎麼讓圖示和內容、上下模組在人眼看起來是整齊的、大小一致的，甚至是上下置中對齊的，都要一個一個去看、去調整，包括字型和圖示的對齊，以及字型裡中英文本身就沒有垂直對齊要怎麼處理，類似這些，可以精雕細琢很久，非常有意思。
拿這次舉幾個例子，電池一開始畫的是一個空框，不管電量多少都一樣，滿電的時候看起來反而像沒電，後來改成按四分之一的電量填上；選單裡的圖示一開始跟著系統圖示的字級走，放進去又大又粗，從 14.3pt 縮到 12.5pt 還是偏大，最後定在 11pt；有的圖示按寬度對齊，有的按長邊對齊，結果高的掃把、登出箭頭看起來大，寬的蟲子、折線看起來小，最後改成按寬和高的平均值統一大小，再給長邊設一個上限，以後新加的圖示也會自動照這個規則來。還有發推特用的那張對照圖，標題裡的 Mole 用的是宋體，英文字母比旁邊的中文高了 4pt，要單獨往下壓一點，中英文才會落在同一條線上。
同樣 14 個圖示，左邊是按寬度或長邊對齊的，右邊是統一視覺大小之後的；手機上是上面對下面。
## 聽使用者的回饋，再改一輪
文章發出去之後，陸續收到一些使用者的回饋，有幾個圖示我自己覺得挺好，使用者卻覺得不夠好看或者不太習慣，比如「檢查更新」用了一個下載的圖示，被讀成了下載，GPU 的小方塊看不出是顯示卡，壓縮檔的圖示看不懂，兩根疊在一起的記憶體也不太像記憶體，還有人說清潔螢幕的海綿和「關於」的揮手不好看。
這種時候跟使用者多聊幾句，比自己悶著頭覺得好看可靠得多，於是這幾個都照大家的建議又改了一輪，檢查更新換成了順時針的箭頭，GPU 畫成了雙風扇的顯示卡，壓縮檔換成了歸檔盒，音訊從音符換成了耳機，清潔螢幕回到了最早系統圖示那把刷子的意思，「關於」最後還是換回了最正統的 ⓘ，只是照整列的線寬重新畫了一遍，記憶體也回到了晶片，其中不少前前後後改了三次。
同一塊介面放在一起比，每列從左到右依序是系統圖示、第一版和現在的樣子。
## AI 省下的時間，拿來打磨
這種看似白做的工，其實是我很喜歡做的事情，AI 能讓優秀的程式碼、及格的審美進步非常多，看起來人好像什麼都不用做了，動動嘴就好，我反而覺得不是這樣，人在這裡的作用更大了，AI 幫你省下的時間，剛好可以拿來打磨產品，讓那 1% 的使用者在用你的產品時，不時有一種秒懂、哇靠、像在變魔術的感覺，那就非常非常有價值、也有意思了，或許這也是我覺得做獨立產品有意思的地方。
---
Canonical HTML page: https://mole.fit/tw/blog/mole-icon-refresh
Blog index for agents: https://mole.fit/tw/blog/llms.txt
Site index for agents: https://mole.fit/llms.txt
