# 给 Mole 的图标做了一次精细化升级
> Mole 的图标从系统图标换成基于 Phosphor 修改的一套，聊聊怎么选图标库、为什么要放进产品里一起看，以及小巧思、对齐和大小这些细节。
Published: 2026-09-30
想给大伙随便聊聊如何给产品进行一次图标升级，有哪些需要注意的以及可以优化的点。
早上给 Mole 的图标进行了一次精细化的升级，之前使用的是系统的图标，对于简单的产品场景我感觉完全够用，不过细看会感觉缺少一点灵性的感觉。
每组左边是之前的系统图标，右边是基于 Phosphor 图标库修改后的图标。
## 选哪一套图标库
经过调研，比较适合做 App 产品 Icon 的有 Remix Icon 和 Phosphor Icons 这两个，之前写 Web 的时候用 Remix 很多，简单舒服，但是放到 App 上我感觉不是很好看，于是就换上了 Phosphor 这个，展示效果很有灵性，非常不错，差不多有 70% 可以不修改直接使用，然后有 30% 的图标是我用 Opus 5.5 来写 SVG 自绘的，这样整体更加一致。
## 一定要放进产品里一起看
可能大伙直接看上面的对比图很难感觉到两者的区别，很多时候需要实际放到真实的产品里面去，我一般还会考虑到本身这个模块下一组图标的搭配感，有时候全部图标单个都好看，组合到一起就不好看的情况也有，好比一个人每一个五官单独出来都好看，但是放到一个脸上却不那么好看，这里建议就是图标的更换你一定要放到实际的产品里面去看，放到一起去看，才会有比较好的效果。
## 小巧思是产品的生命力
其次，我一直想着，我们做的产品应该是有灵性的，有生命的那种感觉，而非直接 AI Coding 不经任何你的思考出来的那种冷冰冰的编译产物，这个时候小细节比如 icon 会是给这个产品带来生命力的一个很好的切入点，比如大伙看「保持常亮」我使用的是一杯咖啡，这里会有一种 Caffeine 的比喻，就是让你的电脑好像喝了咖啡一样睡不着的感觉，然后「关于」一般会用一个带圈的 i，但是我想着应该是 hello，所以就用的挥手的标志，「诊断」正常会有排查的那种标志，但是这里使用的是一个听诊器的标志，更像是给你的问题做一次医生检查，类似这样，很多时候，可以在产品里面加入不少你的小巧思，会让整体有趣很多。
## 对齐、大小和居中
最后，好看的设计几乎都离不开对齐、整齐、错落有致这些原则，如何在人眼看到的场景下让图标和内容以及上下模块看起来是整齐的、大小一致的，甚至是上下居中对齐的，都需要一个一个去看，去调整，包括字体和 icon 的对齐，以及字体里面中英文本身也没有垂直对齐应该如何优化，类似这样的，可以精雕细琢很久，非常有意思。
拿这次举几个例子，电池一开始画的是一个空框，不管电量多少都一样，满电的时候看着反而像没电，后来改成按四分之一的电量填上；菜单里的图标一开始跟着系统图标的字号走，放进去又大又粗，从 14.3pt 缩到 12.5pt 还是偏大，最后定在 11pt；有的图标按宽度对齐，有的按长边对齐，结果高的扫帚、登出箭头看着大，宽的虫子、折线看着小，最后改成按宽和高的平均值去统一大小，再给长边设一个上限，以后新加的图标也会自动按这个规则来。还有发推特用的那张对比图，标题里的 Mole 用的是宋体，英文字母比旁边的中文高了 4pt，要单独往下压一点，中英文才能落在一条线上。
同样 14 个图标，左边是按宽度或长边对齐的，右边是统一视觉大小以后的；手机上是上面对下面。
## 听用户的反馈，再改一轮
文章发出去之后，陆续收到一些用户的反馈，有几个图标我自己觉得挺好，用户却觉得不够好看或者不太习惯，比如「检查更新」用了一个下载的图标，被读成了下载，GPU 的小方块看不出是显卡，压缩包的图标看不懂，两根叠在一起的内存条也不太像内存，还有人说清洁屏幕的海绵和关于的挥手不好看。
这种时候跟用户多聊几句，比自己闷头觉得好看要靠谱得多，于是这几个都按大家的建议又改了一轮，检查更新换成了顺时针的箭头，GPU 画成了双风扇的显卡，压缩包换成了归档盒，音频从音符换成了耳机，清洁屏幕回到了最早系统图标那把刷子的意思，关于最后还是换回了最正统的 ⓘ，只是按整列的线宽重新画了一遍，内存也回到了芯片，其中不少前前后后改了三次。
同一块界面放在一起比，每行从左到右依次是系统图标、第一版和现在的样子。
## AI 省下的时间，拿来打磨
这种看似无用功，其实是我很喜欢做的事情，AI 可以给优秀编码、及格审美带来非常大的促进，人看着好像不要做啥了，只要动动嘴就好，反而我认为不是的，人在这里的作用更大了，AI 帮你节约的时间，刚好可以放到打磨产品上，让 1% 的用户有种用你产品的时候，时不时有一种秒懂、卧槽、变魔术的感觉，那就非常非常有价值和意思了，或许这也是我认为做独立产品有意思的地方。
---
Canonical HTML page: https://mole.fit/zh/blog/mole-icon-refresh
Blog index for agents: https://mole.fit/zh/blog/llms.txt
Site index for agents: https://mole.fit/llms.txt
