你有没有遇到过这种情况？打开一个新软件，满屏都是小图标，却不知道哪个是保存、哪个是删除。点错了还可能误操作，挺闹心的。其实问题不在用户，而在图标设计本身——缺乏可识别性。
什么是可识别性？
简单说，就是用户不用猜，一眼就能明白图标代表什么功能。比如放大镜代表搜索，垃圾桶代表删除，这些已经成了大家默认的“视觉语言”。这种共识不是凭空来的，而是长期使用形成的习惯，也是图标设计必须遵守的规范。
为什么可识别性这么重要？
在做端口映射这类网络设置时，用户本来就容易紧张。界面上再堆一堆抽象图标，比如用个菱形表示“启用”，用波浪线表示“转发”，那简直是雪上加霜。用户记不住、看不懂，配置出错的概率就大大增加。
相反，如果“添加规则”用加号，“删除”用垃圾桶，“测试连接”用闪电符号，用户操作起来就顺畅得多。哪怕第一次用，也能靠经验推测功能。
常见可识别性翻车现场
有些设计师为了追求“独特”，把图标搞得过于艺术化。比如把“保存”画成一只展翅的鸟，美则美矣，但谁能想到这是存文件？还有把“重启路由器”画成一杯咖啡的，寓意“重启像续杯”，太绕了，用户根本get不到。
更别提那些用纯色块、几何图形代替功能图标的，看起来高级，实际使用中让人抓狂。普通用户又不是解谜爱好者，没义务去破译每个图标的“深层含义”。
怎么设计才靠谱？
优先用大众熟悉的符号。比如设置用齿轮，帮助用问号，下载用向下的箭头。这些图标经过几十年软件验证，认知成本最低。
如果功能比较新，没有通用图标，可以组合已有元素。比如“端口转发”可以画两个设备之间一条带箭头的线，直观表达数据流向。必要时搭配文字标签，尤其是专业工具，别怕“啰嗦”。
代码里的小细节也关键
前端实现时，图标的 class 命名也要清晰，方便后期维护和无障碍访问：
<button aria-label="删除规则">
<svg class="icon icon-trash" viewBox="0 0 24 24">
<path d="M6 7V18C6 19.1 6.9 20 8 20H16C17.1 20 18 19.1 18 18V7H6Z"/>
<path d="M8 7V5C8 3.9 8.9 3 10 3H14C15.1 3 16 3.9 16 5V7H8Z"/>
</svg>
</button>像 icon-trash 这种命名，一看就知道用途，加上 aria-label，连屏幕阅读器也能正确播报。
别忘了不同人群的差异
颜色不能是唯一区分方式。色盲用户可能分不清红绿按钮。图标形状要足够区分，比如“停止”用正方形，“播放”用三角形，就算颜色一样也能认出来。
尺寸也不能太小。手机上还好，但在电脑远距离查看路由器管理界面时，图标太小根本看不清。建议最小点击区域不小于 44px，留足手指或鼠标操作空间。
好图标不靠炫技，而是默默帮用户把事办成。尤其在技术类产品里，清晰比酷更重要。