我们更新了仪表盘与官网的 UI（Editorial 设计）

感谢您一直以来对 BotShade 的支持。

我们 对仪表盘与官网的设计进行了全面更新。本次采用了全新的 “Editorial（编辑式）” 设计——在如纸张般沉静的底色上，以墨色标题与分隔线组织信息。

本文目录:

• 变更内容
• 为何选择 Editorial
• Editorial 的特征
• 两种设计主题
• 主题切换方式
• 官网也采用了同一思路
• 未来计划

变更内容

我们朝着 以分隔线与字体排印来组织信息 的方向重新审视了设计，宛如杂志排版一般。减少装饰性元素，通过留白与标题层级来提升可读性。颜色仅用于具有意义的位置，操作主角在 Plum 中是柔和的洋红，在 Editorial 中是深沉的墨黑；而数值与 ID 等数据部分则统一采用中性的等宽字体。

同时，我们也整理了仪表盘的导航结构。机器人级别的设置已更新为”机器人整体设置（顶部标签）“与”功能级设置（左侧边栏）“的双轴导航；机器人主页则将运行状态与控制置于顶部，使运营者的”下一步操作”始终触手可及。

为何选择 Editorial

此前的 BotShade 沿用了开发者工具中常见的”冷峻单色”与”少装饰即现代”的方向。这种风格本身简洁干净，但对于 既需要温度也需要信赖 的 Discord 服务器运营者而言，总觉得稍显距离感。

因此，我们转而借鉴编辑设计（杂志与报纸的排版）的语感。Editorial 的特征在于，不依靠过度装饰，仅凭字体排印与留白便能成就可读性。一种读物般的沉静、确定感，以及”经过深思熟虑”的气息——这正是仪表盘所需要的安静的信赖感。

Editorial 的特征

下面简要介绍 Editorial 设计中几个具有代表性的元素。

• 如纸张般的底色与墨色标题 — 并非纯白，而是带有微暖色调的纸面底色，上面置以墨色（深黑）标题。即使长时间观看也不易疲劳。
• 以分隔线划分信息 — 不层叠卡片，而是以 1.5 px 的细线划分区域。“无须装饰，以结构表达”——这正是杂志排版的基本。
• 硬质偏移阴影即签名 — 主要按钮特意保留了 3 px / 万寿菊色的硬质阴影，如同新闻或杂志标题一般。点击时阴影被吸入，仿佛翻动纸页的触感。
• Bricolage 与 JetBrains Mono — 标题采用 Bricolage Grotesque，正文采用 Hanken Grotesk + Zen Kaku Gothic New，数值、ID、时间则使用 JetBrains Mono。各自的角色通过字体的差异一目了然。

两种设计主题

您可以在仪表盘中根据喜好从两种主题中选择。

• Plum — 温暖的灰米色底配以黑白点缀（单色调）。圆角卡片轻盈浮起，构成柔和的整体。
• Editorial — 纸面底色、墨色主角、硬质偏移阴影即签名。以分隔线划分的杂志式构成。

两种主题均支持浅色／深色两种模式。浅色带来纸张般的沉静，深色则如同被招牌灯光照亮的纸面般温暖的黑底，两者皆对眼睛温和。

主题切换方式

您可以通过 设置 →“偏好设置”→“设计主题” 随时进行切换，并查看预览效果。所选内容将保存于浏览器中，下次访问时依旧保留。

在设置界面中，您可以先以缩略图形式预览各主题的实际外观，再进行选择。请试用您喜爱的主题，感受操作手感后再决定切换。

官网也采用了同一思路

官网（即您正在浏览的本站）也基于与仪表盘相同的思路，更新为 以留白为主导、以分隔线为中心 的布局。

• 导航保持安静，标题采用 text-wrap: balance 以均衡行长，正文采用 text-wrap: pretty 以抑制孤行——整站的换行品质均得到了提升。
• 资源列表（知识库、博客、发行说明、公告、安全、事件）统一采用 同一卡片规格，行间以低调的分隔线作划分。
• /product/security 等页面新增了 可折叠的”技术详情”抽屉，以降低专业术语的门槛，使有兴趣的读者可以选择深入了解。

未来计划

我们将持续打磨各页面的细节，让仪表盘变得更易于使用。如有任何疑问或”希望能做得更好”的建议，欢迎随时向我们反馈。