Animal-Island-UI:把动物森友会那种软乎劲,搬到前端组件里了

Animal-Island-UI 这个名字,一看就不是奔着企业后台去的。

我刷到它的时候,没先翻文档。

先看按钮。

圆的,软的,边框也不硬。卡片像游戏菜单里抠出来的,颜色压得比较轻,不是那种一眼“马卡龙模板”的东西。

这个感觉还挺少见。

很多 UI 库都很干净。

干净到最后长得差不多:灰白蓝、细线、表格、操作按钮,打开十个项目像一个项目。

Animal-Island-UI 不是这条路。

它更像是想把《动物森友会》那种界面手感搬出来一点。不是完全复刻,就是那股圆圆的、慢一点的、没那么冷的味道。

图片

我多看了几眼它的边框和阴影。

这些地方很容易露馅。

可爱风 UI 做不好,会变成素材站拼贴。按钮一个风格,图标一个风格,卡片再来一套,截图还能糊弄,真放页面里就乱。

Animal-Island-UI 目前没给我这种感觉。

作者自己画了不少东西。

图标、装饰、动效,都有一点统一的手。这个比单纯换颜色重要多了。

组件倒不是特别复杂。

按钮、卡片、输入框这些基础东西都有。安装之后,引一下样式,先跑起来。不是那种为了换个皮肤,要先在配置文件里绕半天的库。

我对这种小库的耐心很有限。

能跑,能看,别折腾。

它还做了在线预览。

PC 能看,手机也能点。

我一般会先戳移动端。很多组件库桌面看着挺稳,一到手机,按钮挤到边上,间距塌掉,字体像临时塞进去的。

Animal-Island-UI 至少第一眼没崩。

这就够我继续往下翻了。

图片

我反而对它能用在哪些地方更感兴趣。

个人博客。

儿童英语学习应用。

数学练习工具。

这些页面,用那种企业 SaaS 味很重的 UI,也不是不能做。

就是很无聊。

灰白蓝一套上去,小朋友做题像在填报表。博客像后台管理页。数学练习也像某个系统的子页面。

Animal-Island-UI 这种风格,放进去会轻一点。

有一点游戏界面的气息。

不高级,也不用高级。

用户点一个题目,翻一张卡片,页面别那么硬,就已经差很多。

后面它还衍生出了 Vue、Flutter、Android 版本。

这个细节我会多看两眼。

因为很多“好看项目”只停在 GitHub 截图里。星标不少,真要接进项目,没人动。

有人愿意把它搬到别的框架,说明这东西至少被人惦记过。

当然,别拿它去做管理后台。

会怪。

权限表、订单列表、审批流,再配一套软乎乎的小动物边框,想想就有点不对劲。

但个人站、练习工具、小游戏页面、儿童类应用,这种东西可以放一放。

我会把 Animal-Island-UI 丢进收藏夹。

不是天天用。

哪天页面太冷,想换个皮肤,翻出来看一眼。

GitHub 地址: https://github.com/guokaigdg/animal-island-ui

返回分类列表