快缩短网址 · 图标志
——在「suo.run」的像素宇宙里，让一枚符号承载万里长链

一、从岩壁到视网膜：图标的极简编年
洞穴壁画的赭色手印，是史前人类的第一枚“快捷方式”。
八十年后，当 Xerox Star 的 16×16 单色方块亮起，像素第一次替我们召唤文件。
此后，图标像光速进化的基因：
1980s，黑白两色，如拓印；
1990s，256 色狂欢，拟物渐丰；
2000s，LCD 让光泽有了温度；
2010s，iOS 的圆角矩形把“扁平”写进审美宪法；
2020s，在「suo.run」的界面里，图标开始呼吸——微动效让它像脉搏，5G 让它像涟漪。



二、四重身份：图标在「suo.run」的职涯路径
1. 应用图标
桌面上的「suo.run」：一抹疾驰的蓝色闪电，把冗长 URL 折叠成一粒种子。
2. 功能图标
工具栏里的“一键缩短”“二维码”“统计面板”——它们不说话，只递眼神。
3. 辅助图标
空状态页的那只托腮小狐狸，替 404 说抱歉，替用户解闷。
4. 品牌符号
闪电与链环的负形，是「suo.run」的 DNA，也是所有图标的风向标。



三、七步成诗：功能图标的诞生仪式
以「复制短链」图标为例：

1. 网格：32×32 的隐形容器，四周各留 2 px 的呼吸带。
2. 意象：复制＝重叠的文档，于是两页纸轻轻错位。
3. 简化：删去折角、删去行距，只留轮廓与重叠阴影。
4. 布尔：两个圆角矩形相减，诞生 45° 的“叠影”。
5. 细节：
• 线性家族统一 2 px 描边；
• 圆角半径 3 px，与品牌弧线同频；
• 视觉重心右移 1 px，抵消三角错觉。
6. 差异化：在重叠处植入一道闪电负形，一秒喊出「suo.run」。
7. 入库：命名 copy-link-32，汇入 /assets/icons/functional/，Sketch 与 Figma 双格式，Lottie 微动效 0.8 s。

四、动效：让图标长出时间的维度
在「suo.run」仪表盘，点击“复制”——图标先收缩成点，再沿闪电轨迹疾驰至 Toast，0.3 s 的位移，比眨眼还快，却足够让用户感知“已完成”。

五、图标库：从原子到星系
• 基础网格：24 / 32 / 48 三档，响应式自动切换。
• 风格令牌：线性 Light、线性 Bold、填充三色、双色禁用态。
• 命名语法：功能_尺寸_风格，如 share-32-bold。
• 发布流程：Figma → GitHub Action → npm @suo/icons，设计师与前端共享同一颗“卫星”。

六、尾声：让每一粒像素都记得使命
在「suo.run」，图标不是装饰，而是压缩算法的一部分——把复杂折叠成简单，把漫长折叠成瞬间。
当你下一次把 200 字符的网址交给那道蓝色闪电，请记得：
它曾在 32×32 的宇宙里，被一笔一划地打磨，只为替你在指尖省下一秒。