那天我处理一组工作台图标时,最先看到的不是某一个图标丑不丑,而是一排图标缩小以后几乎失去了区别。原本放在设计稿里,头像、色条和功能名都还完整;到了浏览器标签页或手机主屏幕上,文字变成了模糊的色块,同一组里还有好几个图标撞成同一种红色。
这类问题很容易把人带进无休止的审美讨论:这个像不像,那个顺不顺眼,要不要再换一套更好看的图。最容易走的错误捷径,就是把“好不好看”全部交给人反复挑,或者不分情况把整套图标全量换色。可如果每一张图都靠人从头挑,最后留下的往往不是最好的方案,而是最先看累以后勉强接受的方案。我后来把问题改写成:哪些质量可以测,哪些判断必须留给人?
先承认,小尺寸才是现场
一开始的图标并不是完全没有设计。它们保留了统一的品牌标识,也有各自的系列色和功能名。在大尺寸展示时,这套组合能够说明它们属于同一个产品体系。但工作台真正被看见的地方,常常只有标签页、入口卡片或手机图标,尺寸可能只有 16 像素或 32 像素。
实测以后,问题变得具体了:到了 32 像素,功能名已经很难辨认,部分图标只剩下一条颜色;几个使用同一红色的入口看起来几乎没有区别。到了 16 像素,头像和下面的色条也会互相挤压,原来在大图里成立的层次不再成立。
如果不处理,后果不是“审美差一点”这么简单。使用者会在一排入口前停下来猜哪个是口播、哪个是文案,误点之后再返回;管理工作台的人也会因为分不清入口而继续依赖文字说明。品牌标识虽然保住了,识别效率却丢了。
这让我先做了一个取舍:小尺寸不再强行缩小完整大图,而是准备专门的小尺寸版本。头像和复杂文字不必在每个场景都出现,功能图形可以在小尺寸承担主要识别任务,大图标则继续保留完整的品牌表达。这个决定不是为了让图标更“酷”,而是因为图标必须在它实际出现的尺寸里工作。
不是把字换成图就结束
最初确实尝试过用色底加首字。它比缩小后的完整文字清楚,但很快又遇到新的问题:如果 20 个入口都靠首字,视觉上仍然是一排字,只是从小字变成了大字。功能含义没有被真正提炼出来。
于是我把常用功能换成白色线性图形。口播类入口可以用广播或声音相关的图形,授权可以用认证符号,科普可以用原子或图表一类的图形。没有合适图形的功能,才退回首字作为兜底。
但这一步仍然不能靠直觉完成。图形太复杂,16 像素会糊;图形太简单,又可能和另一个入口撞形。比如话筒和麦克风类图形在大尺寸很容易区分,缩到小尺寸后却可能只剩一个相似的竖线和圆头。小尺寸设计的核心不是把大图缩小,而是重新安排什么信息必须留下。
把能测的标准先拿出来
真正的转折,是我没有继续问“哪个更好看”,而是先列出可以被程序检查的质量门。第一项是 16 像素和 32 像素下的还原度:缩小后轮廓是否仍然清楚,关键笔画有没有消失。第二项是笔画占比:线条太稀,图形会显得空;线条太密,缩小后会糊成一团。
第三项是语义贴合度。它不能完全自动判断,但可以先给每个功能准备 3–5 个意思相近的候选,并按候选顺序提供基础分。第四项是相似度:把所有候选放进同一组里比较,如果两个图标缩小后过于相像,就给相似的组合扣分。
颜色也能测。颜色距离太近时,即使图形不同,整排入口仍然会显得撞车。这里尤其要区分“品牌色不能动”和“普通分组色可以调整”。如果不区分,自动换色可能为了消除一个重复,把本来最重要的品牌色也改掉。
这些指标不是为了制造一个绝对正确的答案,而是把最耗时间、最容易反复的筛选先交给程序。它们解决的是“看不清”“太像”“太密”“撞色”这些问题,不能替代人判断一个图形是否真的像这个功能。
候选集比一次生成更可靠
我没有让程序从无穷多的图形里自由发挥,而是先按功能准备候选集。每个功能保留 3–5 个候选,候选之间有明确的语义关系,程序只在这个范围内比较。这样做看起来保守,实际上更容易控制结果:如果最后选出的图形不合适,我能知道是候选顺序的问题,还是评分标准的问题。
自动评选时,程序先看每个候选在 16 像素和 32 像素下是否清楚,再看笔画占比和语义基础分,最后把同组相似度和颜色相近带来的扣分加进去。它不是逐个图标独立选最高分,而是在组合里反复替换,直到整体分数更高。因为一个图标单独看很好,不代表放进一整排以后不会和邻居混在一起。
这次确实出现了程序推翻手选的情况。有的候选在大图里很符合直觉,但在 16 像素下不够清楚;有的图形含义正确,却和同组另一个入口过于相似。程序把它们换成了稍微不那么直观、但整体辨识度更好的选项。这个结果提醒我,设计选择不能只看单个样本,必须看它进入系统以后和其他成员的关系。
自动评选最有价值的地方,不是替人宣布美丑,而是让候选方案在同一套尺度下接受比较。
自动换色也要有边界
自动换色比自动选图形更容易出问题。上一种简单做法是发现撞色就继续换下一个颜色,直到看起来不重复。它可能形成连锁反应:一次改动牵连多个入口,甚至把原本有明确含义的品牌色一起替换掉。
所以我把换色规则收紧成局部处理。两个分组撞色时,只换排在后面的那个;如果其中一个是系列品牌色,就保留品牌色,改另一方;新颜色不仅要和原冲突对象拉开距离,还要和现有颜色整体保持距离,避免刚解决一个撞色又制造新的撞色。
这次预览里只处理了真正冲突的 7 个图标,剑飞头像、品牌文字和系列色都保留。换色不是为了让色板看起来更丰富,而是为了恢复入口之间的区分度。越接近品牌系统的自动化动作,越需要明确哪些东西绝对不能顺手改动。
我还保留了一个重要的停止点:自动换色只给出方案和对比预览,不直接替人确认美感。因为色差达到标准,并不代表新颜色和整套视觉气质协调。程序可以告诉我“这两个颜色足够远”,但不能替我判断“这是不是仍然像同一个品牌”。
人的审美应该留在最后一关
做到这里,我重新理解了“自动化设计”这句话。它不是把设计师从流程里删除,而是把设计师从低价值的重复比较里解放出来。程序负责把模糊、相似、撞色、过密这些问题先筛掉,最后只留下推荐版和少量备选,让人集中看整体气质、语义贴合和品牌是否舒服。
如果一开始就让人从几十个图形里挑,人的判断会被数量消耗;如果最后只给人一个程序已经决定的答案,又会把不可量化的部分假装成了数学问题。更合理的边界是:凡是能被稳定复测的,就建立规则;凡是依赖语境、联想和审美经验的,就保留人工确认。
这件事让我重新意识到,设计流程成熟的标志,不是程序能不能一次选中答案,而是下一次遇到类似任务时,能不能少依赖临场感觉。候选集、尺寸测试、相似度和局部换色规则,都是把一次经验变成可复用的判断链。
下次我会怎么做
下次再做一组图标,我会先问它最终会出现在哪些尺寸,而不是先看 256 像素的大图。先做 16 像素和 32 像素的还原测试,再决定哪些信息保留、哪些信息必须简化。这样可以避免在大图上反复修饰,最后才发现小尺寸根本不可用。
然后我会为每个功能准备 3–5 个候选,把语义贴合度作为人工提供的起点,把清晰度、笔画密度、相似度和颜色距离交给程序比较。评选时看组合,不只看单个图标;换色时只处理真正冲突的局部,不碰品牌标识和系列色。
最后我只审一张汇总图:看整体是否统一,图形是否让人自然联想到功能,颜色调整后有没有破坏品牌气质。一个好的自动化流程,不是让人完全不判断,而是让人只判断那些机器无法替代、却真正影响作品的部分。
这样做以后,人的审美仍然在场,但它不再被迫处理每一次缩放、每一对相似度和每一处撞色。工具真正改变的不是“谁来设计”,而是把设计中的判断过程留下来,让下一次不必从零开始。