你让 AI 加个图标，它直接给你塞了个 emoji。你觉得不好看，它就继续换，但最后呈现出来的效果还是一股粗糙的塑料味。
一天一个 vibe coding 术语课，今天就讲讲图标。
一、什么是图标？
就拿一个你自己做的记账小应用来说。
底下一排四个入口：记一笔、账单、统计、我的。
每个字上面都有一个小符号。一支笔，一个本子，一张图表，一个人形。
再点开一条账单，右上角并排三个小符号，下面一个字都没有：一支笔，一个垃圾桶，一颗星。
这些小符号就叫图标，英文 icon。
它常见的用处有这么几种。
在导航里给用户指路，就是底下那一排，图标配着文字，让人一眼扫到自己要去哪儿。
在按钮上顶替文字，就是右上角那三个。那儿确实窄，塞不下「编辑」「删除」。把图标放进一块明确的点击区域里，既省地方，手指也更容易点准。
还有搜索框里那个放大镜、提示前面那个感叹号、账单每一行开头标出这笔是吃饭还是打车的小标记。
看着都是一个小符号。但它是怎么放到页面上的，常见的有四种做法。
你要是直接说放一个图标，AI 就会给你乱来，最直接也最常见的就是从表情包里给你挑一个。
二、同一个小符号，四种放上去的方式
先说普通界面图标里最推荐的一种。
它存的是一段「怎么画」的说明：从哪儿起笔，画多大的圆，中间拐几个弯。浏览器照着这段说明，当场画一个出来。
因为是现画的，放多大都不糊，而且颜色也能跟着文字颜色或者主题走。
这叫 SVG 图标，英文 svg icon。
第二种，是把几百个图标做成一套「字」。
页面显示那个房子的时候，其实是在显示这套字里的一个字符，跟显示一个「你」字是同一回事。
这叫字体图标，英文 icon font。
它跟 SVG 很像，放大同样不会糊，颜色也能跟着文字颜色或者主题走。
但是，字体图标有一个缺点。它得先加载一份图标字体。有的项目会直接接入整套图标字体。你只用十个图标，用户也会把整套几百个一起下载；这份字体还没加载完，那块地方可能先空着，也可能显示成方框。
第三种，直接放一张小图片。
这种就很容易懂了，就是用一张图片来表示。
这种图片由一格一格的小点组成，常见的就是 PNG。它叫位图图标，英文 raster icon。
尺寸一放大，这些小点也会一起被放大，边缘就容易发糊。想换颜色，通常要重新出图，或者额外做染色、蒙版处理；复杂彩色素材切成深色模式时，还可能要再备一套。
所以拿它做普通界面图标，一般不推荐。
只有遇到必须保留复杂颜色、渐变或者纹理的现成素材，比如某些品牌 logo，才考虑用小图片。
第四种，就是 emoji。它本来是聊天、评论和备注里表达内容的表情字符，不是项目里的一套界面图标。
拿 emoji 顶替导航、按钮和状态提示里的图标，直接就是错误用法。
它和字体图标最容易混，是因为两者在页面里都像一个字符。字体图标来自项目里装好的那套特殊字体；emoji 通常来自设备自带的表情字体，换台设备就会换成那套系统自己的画法。
AI 最容易混的就是这两个。你说「加个热门图标，用火苗」，它会直接给你一个火苗表情。
三、emoji 顶替导航、按钮和状态提示，会出四件事
在你自己电脑上看，那个火苗表情可能挺正常。换到别人的设备，问题才容易冒出来。
第一，各家系统各画各的。同一个火苗 emoji，苹果画一套，Google 的安卓画一套，Windows 又是一套。用户换台设备打开，那个火苗就会换个样子，有时候连感觉都变了味。你的界面长什么样，就不由你说了算。
第二，这类彩色 emoji 自带颜色，不跟你的主题走。你定了一套主色，界面上却杵着几个原色的表情。做深色模式的时候最明显：按主题配好的 SVG 或字体图标能跟着切换，彩色 emoji 不会自动跟着主题色变。
第三，大小和对齐更难统一。它跟着文字一起排版，不像同一套图标那样有统一的尺寸和边界。你当然能用行高和位置去调，但换个系统或者换个 emoji，可能又要重新调。
第四，直接把 emoji 塞进界面。要是没做额外处理，读屏软件会念出系统给它的名字。你在账单每一行前面放一个火苗表情，读屏软件可能会把每一行都先念成「火焰」。十行就是十遍，全是跟内容无关的话。
那 emoji 是不是就不能用了？
能用，但分地方。用户自己填的评论、备注、昵称和资料里，想打几个表情都正常，那是内容。你自己搭的这套界面，导航、按钮、状态提示，不要用它。
四、描边还是实心，是同一套图标的两个样子
再回到底下那一排。
你现在停在「账单」上，它上面那个图标是整块填满的，颜色也比旁边深一点。
另外三个，记一笔、统计、我的，图标都是空心的，只有一圈线。
填满的这种叫实心图标，英文 filled。只有一圈轮廓线的叫描边图标，英文 outlined。
放在这种底部导航里，常见的分工就是你刚看到的这个样子：没选中的用描边，选中的那一项换成实心。
好处是不用只靠颜色，也不用额外加边框。图标本身一实一空，用户更容易看出自己停在哪儿。
要把这两个样子当成一对，前提是它们表示同一个功能，而且来自同一套图标。笔画粗细、圆角大小、整体比例都得对得上。
从两套图标里各挑一个凑成一对，用户说不出哪儿不对，但一眼就觉得这个界面是拼出来的。
这条不只管这一对。整个项目最好从头到尾都用同一套图标。你让 AI 加一个，它这次从这儿找一个，下次从那儿找一个，页面上线条粗的细的、方角圆角的混在一起，就是这么来的。
好在图标不用你自己画，也不用让 AI 现编。网上有不少免费开源的图标库，一套就是几百上千个，风格本来就是统一的，描边和实心也都配好了。
挑的时候看一件事：这套图标的长相，跟你项目现在的长相对不对得上。你的界面圆角大、线条细，就别挑方头方脑的粗线条；界面本身硬朗，配一套圆滚滚的图标也会别扭。图标的笔画粗细，也要跟页面上文字的粗细配得上。
挑定一套，就告诉 AI 以后都从这一套里取，缺哪个也在这套里找，别再自己造。
五、光有图标，用户不一定认得
再看账单详情右上角那三个。笔、垃圾桶、星，下面一个字都没有。
真正一看就懂、不用配字的图标其实极少。翻来覆去就那么几个：搜索的放大镜，回首页的房子，删除的垃圾桶。剩下的绝大多数，都得靠用户在这个产品里反复用，才慢慢记住。
你这三个里，正好只有垃圾桶在名单上。
另外两个都不在。一支笔，是编辑这条账单，还是再记一笔？一颗星，是收藏，还是标个重点？用户得停下来猜。
用得久的人是能记住的。可你这个应用刚上线，谁也没用过几回，那点熟悉是从哪儿来的？让用户先学会一个你新发明的符号，只会平白增加理解成本。
所以能配文字就配文字。底下那一排导航就是这么做的，图标和文字一起给。
文字还得一直看得见。别指望鼠标停上去弹个提示——手机上根本没有「停上去」这个动作，手指一碰就直接点下去了。
确实不配文字的时候，界面里至少要给按钮一个名字，让读屏软件能把它读出来。
不给会怎么样？用读屏的人点到那儿，可能只听见「按钮」两个字。他不知道按下去会发生什么。
反过来也有一种情况。旁边已经写着「记一笔」三个字了，那个图标就只是陪衬，这时候要专门把它对读屏藏起来。不然名字报一次、文字再念一次，用读屏的人每一项都要听两遍。
六、说得出是哪一种，AI 才不用替你猜
你在页面上看到的都是一个小符号。它背后可能是当场画出来的 SVG，可能是一套字里的一个字符，可能是一张小图片，也可能只是一个表情。
分清楚这四种，你跟 AI 提要求的时候就能说清楚。
普通界面图标优先用 SVG。
项目已经整套用了字体图标，可以继续沿用，但要接受它加载整份字体的代价。
位图只留给确实需要复杂颜色、渐变或者纹理的素材。
emoji 可以留在用户自己填写的内容里，不要拿它顶替导航、按钮和状态提示里的图标。
像底部导航这种要区分选中状态的地方，常见做法是没选中的用描边，选中的用实心。颜色跟着主题走。
只有图标、没有文字的那种按钮，什么时候能用、多大才按得准，按钮那一集专门讲过，想细看的可以翻回去。
