RocoYU · 精灵图鉴设计稿

已接入真实的《洛克王国:世界》数据

上一版(A2)我把「信息密度」当成目标,结果做成了后台管理面板 —— 23 处小字、24 处网格线、方角控件、全大写标签、等宽字体。 这一版的原则完全反过来:舒适优先,精灵当主角。

A3 的改动:表格 → 卡片;精灵立绘占据卡片上半部; 正文 15px、精灵名 18px、数值 15px(不再有 11px 小字); 22px 大圆角 + 柔和暖色阴影;暖橙主色替代冷绿; 去掉全部大写标签、等宽字体、网格线和字距修饰。
🔮
真实数据 · 621 种形态
最新 · 请先看这个

A6 · 真实数据精灵图鉴

接入《洛克王国:世界》真实数据:621 种形态、466 个编号、18 种属性、 真实种族值与立绘。支持属性/阶数筛选、排序、搜索(名称·编号·拼音)、 分页,点卡片看详情(种族值、档案、进化链、同编号形态)。

621 种形态真实立绘进化链 拼音搜索详情抽屉
我的精灵
真实数据

A6 · 我的精灵

已拥有精灵,真实属性与种族值 + 等级、资质、异色标记。

资质筛选异色
🌱
可以真实操作的页面
当前版本 · 请先看这个

A5 · 可交互图鉴 + 我的精灵

图鉴去掉了拥有状态,改为纯资料库;已拥有的精灵移到「我的精灵」页。 两个页面都能真实操作:筛选、排序、搜索、翻页、重置全部可用, 手机端筛选条件会与电脑端同步。

筛选排序搜索翻页 我的精灵双端同步
我的精灵
可交互

A5 · 我的精灵

账号已拥有精灵,带等级、资质、身高、异色与首领化标记。

资质筛选异色
🌱
手机与电脑各一套排版
当前版本 · 请先看这个

A4 · 双端独立排版

手机端与电脑端是两套结构,不是同一套缩来缩去:手机用底部标签栏、 底部弹出筛选面板、横向卡片;电脑用顶部导航、横向筛选条、纵向卡片。 360px 到 1440px 全程无横向溢出,手机端触摸目标全部 ≥44px。

双端分离底部标签栏弹出筛选 断点 720px触摸 ≥44px
A3 · 舒适玩家向
视觉基线

舒适玩家向

A4 的视觉基础:卡片、大圆角、暖橙、立绘当主角。单端布局。

卡片式22px 圆角
rocoyu
已定稿

rocoyu 字标

连笔斜体字标,八款方案对比。已采用方案 1。

连笔斜体飞白收笔
A2 · 密集数据台
上一版 · 有问题

密集数据台

表格 + 行内展开 + 列排序。数据密度高,但整体偏工具感,像后台系统,因此重做。

表格小字密排方角
A · 初版基线
更早版本

信息密集表

最早的空壳表格版,保留仅作对照。

12 行名称列 591px
请先看 A3。 如果方向对了,我把这套视觉铺成完整站点:首页、精灵详情、技能、商人、家园、设置。
如果还有不对的地方,直接说 —— 比如颜色太暖太素、卡片太大太小、信息太少或太多。

已淘汰方向(暗色仪表盘 / 杂志排版 / 终端)仍保留在 b-dashboard / c-editorial / d-terminal 子目录,不再作为候选。
地址 /text/lab/ · 全部为设计原型,数据为占位示例,未接真实接口。