huayemao (花野猫)

当我用新粗野主义风格，设计高校名录数据库

huayemao — Thu, 23 Apr 2026 15:05:26 +0800

在数字界面设计日益趋向平滑、圆角与微妙渐变的今天，设计同质化正成为一种视觉疲劳。为了打破这种 “精致的平庸”，在我的最新作品——高校名录数据可视化平台（China-edu-atlas）中，我选择采用了新粗野主义（Neo-Brutalism）这种直白、硬核的视觉风格来设计 UI。

定义：视觉结构的极致坦诚

新粗野主义是一种源于 20 世纪粗野主义建筑美学、并针对现代数字界面进行演化的视觉风格。它主张用加粗的黑色轮廓、不加修饰的硬边缘和高对比的色彩，去打破平庸的精致感，让界面呈现出一种充满原始生命力的秩序感。

新粗野主义设计风格透露着一种对现代 “包装美学” 的反叛。它继承了 20 世纪粗野主义建筑 “结构外露” 的核心精神。在我的设计中，这种精神被转化为高度显性化的视觉语言：我摒弃了所有模糊的阴影和柔光，转而使用极具张力的纯黑粗边框（High-contrast Borders）以及100% 不透明的硬边投影。

这种设计的本质是诚实。它不试图用装饰遮掩逻辑，而是大方地承认网页是由线条、色块和几何容器组成的。每一个按钮、每一个输入框都拥有明确的轮廓，仿佛在告诉用户：这就是交互的边界，这就是功能的所在。

表格：尽在掌控的秩序感

在高校目录数据库这样一个信息密集型项目中，表格是视觉的核心，也是新粗野主义大放异彩的舞台。

在处理数以千计的高校数据时，表格设计往往容易走向两个极端：要么过于拥挤，要么过于寡淡。

我以新粗野主义为核心思路，使用了加粗的水平线来分割每一项记录，并采用纯黑色的表头作为视觉锚点。没有任何多余的修饰或柔和过渡，直接以粗重的黑色横线贯穿。这种 “横平竖直” 的 “重线条” 的设计强化了数据的权威感，并带给用户一种极强的秩序掌控感。

表格里的高校条目中，高对比度的标签像印章一样嵌入在网格中。让关键字段在大量文本中实现 “瞬时跳跃”，极大地提升了扫描式阅读的效率。

色彩与构成的实验

左侧采用大面积纯黑背景，与右侧的数据区形成强烈的视觉切割。这种处理不仅在美学上具有冲击力，在功能上更像是一个 “中控室”，将搜索、筛选的逻辑收纳其中。确保了核心功能在视觉层级上的绝对领先。

侧边栏的弹出层（Drawer）设计，则更进一步展示了新粗野主义的几何逻辑。它没有使用常见的毛玻璃特效，而是直接以清晰的垂直切面划开屏幕，将高校信息以垂直流的形式呈现。这种直来直去的交互方式，与数据库本身追求的 “精准、快速” 属性高度契合。

表格搜索框的 Focus 效果摒弃了主流 UI 沉溺的柔和光晕，采用不透明的红色硬边投影。这种不对称的红黑撞色，靠纯粹的几何错位，为搜索框的聚焦注入了强烈的秩序张力与生命力。

按所在地浏览高校功能中，用于选择省份的下拉菜单组件，也用硬朗的黑色粗边框直接界定空间，呈现出一种如同物理卡片层叠的结构感。

结语：跳脱平庸，重回原始

通过这次尝试，我发现新粗野主义并非单纯的怪诞，它是一次关于 “清晰度” 的实验。

当高校名录数据不再隐藏在层层滤镜之后，而是以一种 “原始、硬核、秩序井然” 的面貌示人时，设计便从单纯的视觉修饰进化为了对信息本身的致敬。这便是我在本次设计案例中，试图通过新粗野主义传递的视觉哲学：让结构说话，让秩序可见。

高校名录数据可视化平台项目在线访问地址：https://uni.utities.online

全国高校分布可视化网站全新升级！2962 所高校完整上线

huayemao — Tue, 21 Apr 2026 12:31:49 +0800

地址：https://uni.utities.online/

之前给大家分享的全国重点大学分布可视化网站，现在有了全新的升级，不仅支持 985、211、双一流等重点高校，还收录了全国全部的 2962 所的高校数据（我们在教育部发布的收录来 2919 所高校信息的普通高校名单的基础上，增补了包括国防科大在内的 43 所军校的数据）。有了这些数据，中国高校地图可视化呈现更加完整。

同时，网站也不再局限于地图，而是提供全面的一站式的中国高校名录数据可视化，包括：

丰富的高校名录检索查询，使用全国高校名录数据库，你能快速查到主管部门、办学层次等的准确信息。
统计图表：通过条形统计图，展示省份、城市的高校数量排行榜等。提供地图可视化之外的完整统计功能。
更进一步，我们还将结合最近将拉开帷幕的高考，打造高考毕业去向图（俗称蹭饭图）制作工具。服务 2026 届的高考学子，让用户只需录入数据，即可导出美观的毕业蹭饭图。目前功能已初具雏形，尽请期待。

原文首发于花野猫的数字花园，链接：https://huayemao.run/posts/488

琴谱美化工具——一键生成不同主题风格的琴谱

huayemao — Fri, 20 Mar 2026 09:56:58 +0800

用 musescore 等制谱工具导出的琴谱，都是黑白的，看起来感觉很单调。怎么快速为琴谱更换配色，让琴谱变得更好看呢？

我开发了 prettyscore 这个一键美化琴谱的工具。

这是我用它制作导出的不同风格的钢琴谱：

prettyscore 的使用很简单：

重点提醒！只支持 MuseScore 这类制乐工具导出的原版高清 PDF 或 SVG，普通图片不行哈。

导入你现有的 SVG/PDF 格式琴谱，拖入即可加载
直接选择预设配色主题，也可以自定义纸张纹理、墨色和背景
加上装饰边框或微调暗角、暖调，让琴谱更有氛围感
最后导出高清图片或 PDF，方便分享、打印或装裱

不管是古典奏鸣曲还是流行改编曲，都能找到合适的风格，练琴的仪式感也能悄悄提升。

因为社媒流量太差，我开发了小红书爆款封面生成器

huayemao — Sun, 08 Mar 2026 14:50:49 +0800

tldr；

产品 redcanvas —— 小红书视频爆款封面生成器网址：https://red.utities.online/

看了小红书上很多视频封面能火，还是有原因的：

竖版适配小红书流量场，曝光拉满；
文字分层（大标题 + 色彩标重点）抓眼；
图文结合，模板简洁易复制。

做了市场调研：现有的封面工具是不能允许用户上传图片的，都做不到那么好的效果。

于是我动手开发了 redcanvas ，填写文案、高亮文字、选择风格、加设备 mockup ，一款重点突出的封面就可以导出了。整个过程在浏览器本地处理，用户数据不上传服务器，非常实用。

欢迎大家使用！

开箱即用的白噪音场景合集网站 white-noise.online ——让世界安静下来

huayemao — Sun, 08 Mar 2026 10:33:15 +0800

最近在想，如果只是想要获得一些白噪音，最好的去处是哪里呢？假如打开视频平台，不停摆弄，最后可能迷失在算法推荐的洪流中，却得不到真正想要的。于是我开发了 dwell，中文名叫做栖，提供开箱即用的环境音场景。用简单的音画营造出沉浸式的白噪音场景，让你的世界安静下来。

地址：https://white-noise.online/

在这里，没有纷杂推荐，没有信息洪流，只有纯粹的环境音，轻轻接住疲惫的你。想静下来时，就来「栖」息一会儿。目前提供了以下五个场景，可以无缝切换播放：

🌧️ 暴雨一场洗去纷扰的宁静大雨，雨声包裹世界，心也慢慢变轻。
🌊 午夜海洋：月光下波涛轻轻翻滚，浪声温柔，像有人在静静陪伴。
🔥 温暖壁炉：为深度专注而生的温暖噼啪声，火光摇曳，效率与安心一同上线。
🌳 幽深森林：鸟语花香，风穿过枝叶，把你瞬间带进一片宁静 woodland。
⛈️ 雷暴：大雨伴着滚滚雷声，壮阔又安心，最适合沉沉入睡。
❄️ 冬日小屋：屋内温暖，屋外雪花静静飘落，一窗之隔，就是整个冬天的温柔。
🌙 夏夜：蟋蟀轻鸣，风铃摇曳，回到小时候那个安静又悠长的夜晚。
🎧 自定义混音：自由组合你喜欢的声音，打造只属于你的个性化音景。

点开播放，世界就此安静下来。 dwell・栖 ——你随时可以回去的，声音栖息地。

暮色工坊新增了生成【跟着大自然学配色】风格艺术卡片功能！

huayemao — Wed, 24 Dec 2025 16:15:52 +0800

我开发的暮色工坊web 应用，原本参照日落岛的功能来设计，作为其网页版平替，为提取日落颜色而打造，现在新增了生成小红书爆款设计配色笔记风格图片的功能。导入图片，即可生成『跟着大自然学配色』风格的艺术组件。

除了日落配色色卡的提取，还增加了更加通用的照片色卡提取功能，能提取所有图片的主色，并生成多样的艺术组件。欢迎大家访问试用鸭~ 地址： https://sunset.utities.online/

生成效果：

生日吹蜡烛神器：只需对着麦克风吹气，即可仿真吹灭蜡烛，仪式感满满——再也不怕忘记买真蜡烛！

huayemao — Sun, 21 Dec 2025 09:44:25 +0800

发现一个在线吹蜡烛网站。可以模拟生日蛋糕吹蜡烛的场景。

选择蛋糕，填写寿星姓名、蜡烛数量、赠送人、祝福语等（可选），完成配置后，就会进入蛋糕场景。对着麦克风吹气，就能吹灭蜡烛，并出现烟花动效，分为感满满！

桌面端截图：

移动端截图：

生日吹蜡烛神器现已正式上线，用声音点亮仪式感！

立即体验：https://www.birthday-cake.online/

✅ 先配置后吹气：设定蛋糕样式、蜡烛数量、寿星姓名等，防止误操作
✅ 一键分享祝福：生成链接即可邀请远方亲友共同吹蜡烛
✅ 动态烛光效果：吹气时烛光摇曳，实时显示吹气进度条
✅ 绽放庆祝时刻：蜡烛熄灭时触发烟花特效，氛围感拉满
✅ 温馨重试功能：一键恢复吹灭前状态，随时重温感动瞬间

不再为忘买蜡烛而遗憾，线上也能传递温暖的生日仪式。

落日党狂喜！一键把晚霞变成专属色卡

huayemao — Thu, 18 Dec 2025 13:37:06 +0800

谁还在手动抠日落颜色啊！这个日落岛平替网站也太香了😭 不用等 iOS 专属，电脑手机浏览器直接冲～传一张晚霞照片，一秒提取 8 种主色调，自动生成渐变壁纸、艺术色卡，连对比图都直接弹出来～橙粉紫的落日氛围感被拆成可直接用的素材，做手账、P 图、做头像都超适配！关键是客户端本地处理，不泄露照片还飞快，喜欢落日氛围的赶紧收藏！

工具网址：暮色工坊

暮色工坊——把随手拍的天空变成能用的渐变和色卡

huayemao — Wed, 17 Dec 2025 20:56:49 +0800

「暮色工坊」让你把相册里的云霞与天色，一键变成设计可用的渐变色与配色卡。上传一张照片，提取自然馈赠的色调，让灵感在天空的轨迹中自由流动。人人都能成为光影收藏家。 → 试试看：https://sunset.utities.online/

快速查询全国行政区划数据（精确到村委会一级）的网站

huayemao — Sun, 07 Dec 2025 17:26:22 +0800

工具链接先放上：https://aparecium.huayemao.run/

之前做项目要查全国乡镇级的行政区划数据，可把我折腾坏了。本来知道国家统计局有个 “全国统计用区划代码和城乡划分代码” 的页面，能查到权威数据，但那个界面体验是真的差，信息堆得乱七八糟，找个乡镇数据得翻半天。更让人头疼的是，后来网站改版，这个查询入口直接就访问不了了，想找个靠谱的数据源难上加难。

于是自己动手做了个工具—— Aparecium 中国行政区划数据

它把让行政区划数据变简单：首先数据来源很靠谱，爬取的是国家统计局的权威信息，不用怕出错；其次界面做得特别极简，所有数据都用表格呈现，乡镇级的信息一目了然，不用在一堆杂乱信息里筛选；而且还适配了移动端，出门在外用手机也能随时查。

另外还加了地图可视化功能，点击省份就能看详情，悬停还能显示名称，直观又好操作。

希望这个小工具能帮到有同样需求的人，觉得实用的话也可以转给身边需要的朋友呀~

重点大学分布地图可视化网站，985/211 / 双一流高校分布地图一键查，鸡娃家长必备！

huayemao — Wed, 03 Dec 2025 12:34:07 +0800

家有升学娃，选校规划愁到头？想知道目标省份有多少所 985、211，双一流高校具体分布在哪？不用再翻零散名单、手动汇总对比啦！

专为鸡娃家长打造的重点大学分布可视化工具来啦——https://uni.utities.online/ ，现在新增 211、双一流切换功能，985/211/双一流三类重点高校随心切换查询！

✅ 按省份检索超直观：点选任意省份，立刻显示当地对应类型高校总数 + 完整院校名单，省去逐行筛选的麻烦；
✅ 重点院校一眼分清：无需额外查资料，高校类型清晰标注，帮你快速锁定目标院校；
✅ 免注册免下载：浏览器直接打开就能用，手机、电脑端都适配，通勤路上、陪娃间隙随时规划。

不管是小学阶段铺垫目标、初中规划升学路径，还是高中冲刺阶段锁定院校范围，这个工具都能帮鸡娃家长们摸清全国重点高校布局，让选校规划更有方向、不盲目～实用又省心，转给身边有需要的鸡娃爸妈一起用吧！

985 高校分布图网站

huayemao — Sat, 29 Nov 2025 16:56:38 +0800

工具链接：https://uni.utities.online/

查各省高校总绕不开一个问题：信息又散又不直观。要么是纯文字名单，想知道某省有多少所重点校、具体是哪几所，得翻半天；要么是简单的地图标记，看不到学校总数和完整列表，对比不同省份的高校布局更是麻烦。

所以我做了个 985 高校分布地图，核心就是把 985 高校分布信息进行可视化：

按省份检索直接出结果，点任意省份，就能看到当地高校总数 + 完整院校名单，不用再手动汇总；
重点高校做了醒目区分，不用额外查资料确认，一眼就能分清；
免注册、免下载，浏览器打开就能用，手机和电脑端都适配，随时想查都方便。

不管你是想快速摸清某省高校布局，还是对比不同省份的重点校资源，甚至只是单纯好奇各地的高校分布，这个工具都能直接用。

没有复杂操作，打开就能查，觉得实用的话，也可以转给有需要的人~

为你的下一个项目，轻松准备一个简洁的 Logo

huayemao — Wed, 26 Nov 2025 12:09:11 +0800

👉 LogoDash 极简 Logo 生成器

作为一名独立开发者，我发现自己常常陷入一个与代码无关的困境：产品功能已经完备，却因为缺少一个得体、顺眼的 Logo，而延迟了上线的脚步。

我没有专业的设计背景，却希望为作品配上一个风格统一、清晰且能适配明暗模式的图标。尝试过一些方法，要么操作过于复杂，要么生成的结果不尽人意。这个看似微小的环节，却实实在在地成为了项目落地前的最后一道障碍。

正是这个持续存在的困扰，促使我动手为自己打造一个解决方案——于是，LogoDash 诞生了。

它的核心非常简单，就是希望能让 Logo 制作变得轻松一些：

聚焦渐变风格，自动适配明暗模式
LogoDash 目前主要提供渐变背景的模板。我特别考虑了实用性，确保生成的 Logo 无论是在浅色还是深色的系统环境下，都能保持清晰和醒目。
内置图标库与灵活的随机灵感
工具内置了一个精选的简洁风格图标库。如果你没有明确的意向，可以尝试使用 “随机生成” 功能，它或许能为你带来意想不到的搭配灵感。

在实际使用中，它确实解决了我 “从无到有” 的效率问题。现在，我只需花费几分钟选择图标、调整颜色，就能为一个新项目准备好一个简洁可用的 Logo，让重心重新回到产品本身。

如果你也在为项目启动寻找一个不繁琐的 Logo 解决方案，欢迎来体验一下这个我为自己制作的小工具：

希望它也能帮助你更顺畅地推进项目。

解决截图黑边的小工具：我做了个网页版「一键裁边器」

huayemao — Wed, 26 Nov 2025 11:06:07 +0800

解决截图黑边的小工具：我做了个网页版「一键裁边器」

看电影时喜欢截画面，但影视画面的比例总让截图带着两道黑边，系统工具识别不了，手动裁又嫌麻烦——我电脑里堆了不少没处理的截图，一直没找到顺手的工具。

前阵子索性自己写了个网页工具「i-trim」，专门处理这个事儿：打开链接就能用。

把截图拖进去，不管是黑边、白边还是其他边框，它会自动识别并裁掉。

单张拖入秒处理，多选几张批量拖进去也能一次搞定，最后点「全部下载」就能导出所有处理好的图。而且所有操作都在本地完成，不用传文件，速度也快。

之前堆了三个月的电影截图，用它几分钟就理干净了，终于不用再让那些画面卡在「等处理」的文件夹里。

工具地址是 itrim.utities.online，如果也有截图裁边的小困扰，可以试试~

huayemao (花野猫)

当我用新粗野主义风格，设计高校名录数据库

定义：视觉结构的极致坦诚

表格：尽在掌控的秩序感

色彩与构成的实验

结语：跳脱平庸，重回原始

全国高校分布可视化网站全新升级！2962 所高校完整上线

琴谱美化工具——一键生成不同主题风格的琴谱

因为社媒流量太差，我开发了小红书爆款封面生成器

tldr；

开箱即用的白噪音场景合集网站 white-noise.online ——让世界安静下来

推荐一个能完整查询中国五级行政区划（精确到村委会）的网站

暮色工坊新增了生成【跟着大自然学配色】风格艺术卡片功能！

生日吹蜡烛神器：只需对着麦克风吹气，即可仿真吹灭蜡烛，仪式感满满——再也不怕忘记买真蜡烛！

落日党狂喜！一键把晚霞变成专属色卡

暮色工坊——把随手拍的天空变成能用的渐变和色卡

快速查询全国行政区划数据（精确到村委会一级）的网站

重点大学分布地图可视化网站，985/211 / 双一流高校分布地图一键查，鸡娃家长必备！

985 高校分布图网站

为你的下一个项目，轻松准备一个简洁的 Logo

解决截图黑边的小工具：我做了个网页版「一键裁边器」

解决截图黑边的小工具：我做了个网页版「一键裁边器」