简单 UI slop 优化思路：颜色/形状

给 Reedle 修了一个多月UI后，回头看 Tunta 的 UI 设计，还是觉得不足，但又很多陈情要表，所以借着2个月后的视角谈谈我两个月前修 AI Slop in UI 时的思路、方案。

Tunta 是我在2026年7月 AdventureX 2026 黑客松比赛时和组员一起完成的一款以卡片保存链接知识的浏览器插件： tunta.xyz（Landing Page）。我要为这个插件的 UI 设计负100%的责任，这也是赛后不服输，决定继续修UI的原因。

由于一些意外，扩展 UI是半天内搓出来的，甚至要晚于软件 Landing Page。时间不足，界面在我定好整体风格后，抛给了AI进行一键生成。可想而知，UI上一定有很多 AI slop，就像下面这张图片——称得上是一个蠢笨的开局，值得我几百字的吐槽。

颜色

品牌颜色在做 UI 前大致已经定好：棕色-黄色-蓝色。 IP 是水獭，所以二次元水獭常用的棕色成为内容表达的核心颜色；蓝色用来构建水獭最喜欢的湖泊江河的色彩；黄色则是搭棕色或蓝色都精彩的重点色。

为了 UI 能搭配 IP 设计，我采用了扁平风格的设计；为了让扁平的风格更明显，没有参考大部分UI设计的方式，将IP棕作为 primary 重点色，而是让蓝色-黄色作为UI 的 primary 和 secondary。

整屏的🟦蓝色更容易突出水獭栖息地的感觉。

不过AI接收到这种信息后，UI就会导致蓝色的滥用，如下图：

那些蓝色的按钮和标签，本身的视觉、交互优先级并不高，不需要为它额外指定一组高对比度的“主色”，只需要老老实实复用内容容器的配色，就能建立正常的视觉层级和交互引导关系。

其他的背景二级色，直接在背景上做调色，找出一个让按键存在感更高但饱和度更低的颜色就可以了。

少就是多。

形状

《写给大家的设计书》里提到过设计时需要注意重复性，即是控制同种功能在视觉上具有相似点。因为重复性，能将产品的设计从视觉上联系到一起，提供统一性，能让用户从视觉上感受到组织性，相似的设计能让用户下意识意识到位置相差很大的两个组件在功能上有联系。

AI Slop则是过于放肆。组件复用性暂且不谈，还会出现在不同功能、不同语义组件无节制重复样式的问题。

如上图，整个页面不分场合地出现了浅蓝色底、蓝色字的pill形状设计，你一眼扫过去只能看见全篇的“要完”。实际上这里有四种语义不同的功能入口：筛选tab、下拉窗口、卡片标签、卡片操作。这要用户怎么猜？

修法本质上就是要从视觉上让用户能够区分出语义。

一级筛选 tab：那就做个tab切换。一般来说只建议做一个tab切换，不建议做tabs多级嵌套，否则会让用户有种在玩解谜游戏的感觉。

二级筛选则是沿用了第一部分的按钮设计。这里对于选中的tab其实应该使用黄色底、棕色字——因为这样才是设计系统内通用的 selected 设计。

下拉菜单需要和二次筛选的视觉设计区分开。颜色不需要大改动，只需要border ，减轻了文字字重，再拉开一点距离，语义上就能凸显出来。

卡片标签有更好的解法，在“Library(after)”的基础上，就像各大社媒一样，加一个“#”，再用深蓝色，熟悉各大互联网巨物的用户很自然就能感受到语义。这也是一个UX规则：遵循平台和行业惯例，保持组件、术语一致性。

操作按钮修得不够。它在内容容器上通用的解法，是收纳到「更多」菜单里。另外，也没有什么比 icon 更能赋予操作按键“操作”含义的了。组合起来或单选其一，都能区别开功能和内容。

最终，当时经验不足的我完成到了这个地步。

这是本文的结尾，需要一个高档的总结陈词。但是山太高路太远，Design Engineer 的旅途才刚刚坐了几站高铁；还没到泰山脚下就要回头感叹的话，那就太傻了。希望1个月后我仍能指出本文10个细节考虑不周，仅此。