yuxuanhui
14 KiB
芭蕾岛设计规范
本文件定义芭蕾岛小程序的视觉语言，供设计与开发新页面、调整已有组件时使用。适用范围为 miniprogram/ 中的记录、日历、成长及相关表单和管理页面。
正文中的使用规则是后续设计的默认依据；表格中的数值沿用现有实现。标为「现状」或「待验证」的内容只描述实现边界，不代表长期设计决策或已通过验收。未覆盖的新场景，先按视觉原则选择最接近的现有模式。
本文采用纯 Markdown，按 Google Labs DESIGN.md 格式规范的主题组织。色彩角色名称用于沟通设计，不表示代码中已存在同名 token。
Overview
芭蕾岛面向希望记录和回看练习的芭蕾练习者。界面以一本温暖、安静的练习手账为视觉参考：暖白纸面、灰玫瑰重点、清楚的日期和记录，留出足够空间容纳自己的笔记。
用户应当先看见练了什么、投入了多少时间，以及下一步如何记录。装饰保持克制，主要通过文字层级、浅色容器与留白建立秩序。密集数据也保持平静，避免用排行榜或成绩评判的语气解释练习。
设计时优先遵循以下原则：
- 记录优先：让项目名称、练习时长和笔记易于阅读；管理与更正入口放在相关内容附近。
- 温和反馈：用明确的状态与下一步帮助用户继续操作；休息日保持中性，不制造缺勤压力。
- 一致复用：新增页面沿用已有标题、容器和操作层级，让熟悉一个页面的用户能理解其他页面。
- 表达真实投入：数字与图表用于回顾练习，不把时长解释为技术水平或排名。
Colors
暖白与暖灰构成大部分画面，灰玫瑰用于需要注意的操作、选中项和练习数据。通过限制强调色的用途保持重点清楚，避免把每个标题、边框或装饰都染成品牌色。
| 角色 | 基准色值 | 使用规则 |
|---|---|---|
| 页面底色 | #faf7f3 |
页面与顶部导航的连续背景 |
| 内容表面 | #fffdfa |
普通面板、记录卡片与底部导航 |
| 轻描边 | #ece3dd |
界定普通容器，避免描边比内容更醒目 |
| 主文字 | #3e3435 |
正文、名称和标题，承担主要阅读信息 |
| 次要文字 | #827572 |
日期、解释与辅助说明，仍需清晰可读 |
| 主强调色（Primary） | #9c5268 |
主要操作、选中状态、记录时长和图表聚焦项 |
| 品牌小字 | #946d76 |
低调的品牌标记，不替代页面标题 |
| 汇总表面 / 描边 / 数字 | #f1e7e3 / #eddfda / #864b5e |
承载今天或累计练习的核心汇总，与普通记录形成层级 |
| 输入表面 / 描边 / 文字 | #f8f4ef / #e8dfd8 / #44383b |
将可填写区域与外层面板区分 |
| 普通按钮文字 / 描边 | #655656 / #e5dcd6 |
辅助操作，背景沿用内容表面色 |
| 错误提示背景 / 文字 | #fae9e9 / #9d3748 |
需要处理的错误，配合文字说明原因 |
| 成功提示背景 / 文字 | #eaf0e7 / #4f6b4c |
已确认完成的操作结果 |
项目与图表用色
项目卡片用低饱和底色帮助区分相邻入口，名称始终是识别项目的依据。现状为按展示顺序循环配色，排序变化后颜色可能变化；这些颜色不表达项目的固定身份、等级或状态。
| 项目卡片色组 | 背景 | 描边 |
|---|---|---|
| 浅玫瑰 | #f4ece8 |
#e7ded8 |
| 灰绿色 | #eef0e7 |
#e0e5d9 |
| 灰紫色 | #eeeaf2 |
#e3dfea |
| 浅麦色 | #f4efdf |
#eae4d5 |
趋势柱形使用 #d8a8b2，聚焦项使用主强调色；项目分布使用 #f0e8e2 轨道与 #bc8292 填充。图表通过日期、时长、百分比和状态文字补足含义，颜色不承担唯一的信息提示。
危险操作沿用已有组件与原生确认弹窗的危险样式，不套用普通主操作色。平台默认色及各局部样式的具体映射见文末实现入口。
Typography
使用系统无衬线字体，字体栈为 -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif。中文名称与笔记优先保证连续阅读；数字通过适度放大和加重获得重点，不采用宣传海报式的大标题。
默认正文为 15px、行高 1.55。按信息角色选取层级，同一角色跨页面保持一致。
| 角色 | 字号 / 字重 | 使用规则 |
|---|---|---|
| 页面标题 | 26px / 600 |
表达当前页面目的；行高 1.35，字距 -0.5px |
| 核心汇总数字 | 时长 29px / 600，统计 30px / 600 |
保留已有两种汇总组件；时长行高 1.5 |
| 区块标题与项目入口名称 | 17px / 600 |
组织内容或标识可进入的项目 |
| 正文与记录名称 | 15px，记录名称字重 500 |
支持较长名称和实际内容 |
| 输入内容 | 16px |
填写时保持可读；笔记行高 1.6 |
| 表单标签 | 14px / 500 |
清楚表达字段含义 |
| 说明、记录时长与笔记 | 13px |
作为局部辅助层级，不与汇总数字竞争 |
| 紧凑辅助信息与单位 | 12px |
日期、单位、帮助文字等 |
| 空状态标题 | 16px / 500 |
配合 13px 说明文字，说明行高 1.8 |
长项目名称、笔记和汇总时长允许换行，保留笔记的原始换行，不用省略号隐藏主要信息。数字必须带上可理解的单位，例如「1 小时 30 分钟」「2 次」。
现状中品牌标记、项目编号及部分辅助文字使用 10–11px，趋势日期标签使用周视图 10px、月视图 8px。这些局部值不作为新正文或操作标签的默认字号；小字号和图表标签的可读性仍需在目标设备验证。
Layout
页面以纵向单栏组织一个主要任务；两列用于并列的项目入口或简短指标，七列仅用于日历。新增页面按「页面目的 → 主要内容或输入 → 相关操作与反馈」建立阅读顺序，避免为了填满画面增加区块。
尺寸均为 375px 设计宽度下的源码设计尺寸，由现有构建配置转换为小程序单位，不等同于设备截图的物理像素。页面基准内边距为上 20px、左右 18px、下 32px 加底部安全区。
间距按内容关系选取，先复用相同组件的间距，再选择下列范围：
| 内容关系 | 间距基准 | 典型用途 |
|---|---|---|
| 紧密关联 | 4–8px |
数字与说明、标题与副标题、快捷按钮之间 |
| 同组内容 | 10–12px |
行内间隙、相邻记录与两列网格；网格间距 12px |
| 容器内部 | 16–18px |
普通内容与容器边缘的距离，具体按组件复用 |
| 独立区块 | 22–24px |
区块分隔、标题区下方、表单操作区之前 |
这些范围描述现有间距的用途，不要求把现有数值机械归入统一倍数。汇总卡片和紧凑控件使用各自的容器内边距。
导航与内容组织
页面标题区使用品牌小字、主标题和简短副标题。管理、补记等局部入口靠近所属区块，主要提交操作放在完整输入之后。
当前一级导航为「记录、日历、成长」，使用文字 TabBar；练习记录和项目管理为二级页面。延续这一层级，新页面不自行增加一套全局导航。
快捷按钮允许换行，长内容允许撑高，底部内容保留滚动与安全区。表单操作跟随内容滚动；键盘出现时的可达性属于验收事项，不能仅凭静态布局认定已适配。
Elevation & Depth
常规页面保持平面表现，通过暖白底色、浅色容器、细描边和留白建立层级。普通内容放在浅色面板上，核心汇总使用稍深的暖玫瑰底色；相邻同级记录使用一致表面，便于连续浏览。
常规卡片沿用 1px 细描边，不额外叠加阴影、发光或装饰渐变。需要突出信息时，先调整信息位置、文字层级或使用已有汇总容器。原生弹窗等浮层沿用平台表现，这一规则不用于覆盖系统控件。
Shapes
容器采用柔和圆角。圆角与留白共同表达亲和感，组件之间通过用途保持一致；新增普通面板优先复用通用面板，已有专用组件保留自己的尺寸。
| 容器角色 | 圆角 | 内边距 | 选择依据 |
|---|---|---|---|
| 通用面板 | 18px |
18px |
表单或成组内容的默认容器 |
| 核心汇总 | 21px |
上下 23px、左右 22px |
承载少量重点数字，留白比普通内容更充裕 |
| 项目入口 | 17px |
上下 15px、左右 16px |
两列排列，最小高度 126px，支持名称换行 |
| 练习记录 | 16px |
上下 16px、左右 18px |
可连续浏览的独立记录 |
| 日历面板 | 18px |
上下 16px、左右 12px |
沿用面板外形，为七列日期留出横向空间 |
| 输入区域 | 11px |
上下 12px、左右 14px |
位于面板内，明确字段边界 |
| 状态提示条 | 12px |
上下 13px、左右 15px |
紧贴相关操作提供短反馈 |
按钮圆角为 12px，日期选中区域为 13px。这些差异是现有组件的基准，不构成一套可按大小任意套用的全局圆角等级。需要新容器时，按用途复用上表，避免再增加近似数值。
Components
操作按钮
主要提交使用灰玫瑰实心按钮；快捷选项与重试使用描边按钮；管理、取消、更正等辅助入口使用文字按钮。危险操作使用危险文字样式，并在确认时说明后果。
表单提交沿用中号按钮，高度 44px、字号 16px；行内操作和切换沿用小号按钮，高度 32px、字号 13px。需要独占一行的主要提交按钮填满容器宽度。提交中显示加载状态并阻止重复操作，不能只靠按钮文字变化表达等待。
复用现有按钮组件及主题；按下、禁用和加载的具体表现沿用组件行为，不在页面上另造一套状态样式。
表单与输入
字段采用「上方标签 + 下方完整输入区域」，占位文字仅补充示例或提示。帮助文字靠近字段，字数计数置于笔记区下方右侧。
普通输入高度 48px；选择区域最小高度 48px，允许长内容撑高；笔记区沿用 140px 高度。标签与字段保持清楚关联，字段组之间留出更大间距。主要提交与取消放在表单内容之后，删除入口与保存操作分开。
卡片与列表
项目卡片以名称为主体，编号和操作提示保持次要。记录卡片先展示项目名与时长，再展示日期、归档标记与更正入口；笔记置于下方，以细线和留白分隔。长名称优先获得可换行空间。
连续的管理条目放在同一个面板内，用细分隔线区分行；每项的改名、移除入口靠近项目名称与状态。归档状态用文字标注，不仅通过弱化颜色表达。
日历与图表
日历从周一开始，七列等宽。选中日期使用主强调色底与暖白文字；练习日使用圆点并提供含义说明。未来日期弱化且不可选择，休息日保持空白，不显示惩罚性标记。
趋势图用柱高表达时长，零分钟保持零高度。点按后高亮对应柱形，并显示日期和时长。月视图可减少日期标签密度，但保留各日期的数据与点按入口。
项目分布按「名称与百分比 → 横向进度条 → 时长」组织。归档项目仍需明确标注；统计口径与计算规则由业务实现定义，不用装饰性长度或颜色改变数据含义。
状态与反馈
| 状态 | 呈现规则 |
|---|---|
| 加载中 | 在内容区域说明正在读取，避免暂时展示成空记录 |
| 读取失败 | 说明失败并提供重试入口，与无数据状态区分 |
| 没有数据 | 简短标题与解释；有可执行的下一步时提供明确入口 |
| 表单错误 | 保留输入，以错误提示解释需要处理的问题 |
| 操作成功 | 结果确认后再显示成功提示；反馈靠近操作或在返回后呈现 |
| 保存结果未确认 | 保留提交内容，明确说明尚未确认，并提供重试确认入口 |
| 删除或移除 | 确认前说明后果，明确区分删除记录与归档项目 |
文案使用具体动作，例如「保存练习」「补记练习」「取消并返回」。空状态可以写「休息也是日常。漏记了一堂课，也可以补在这天。」时长说明保留「时长记录的是投入，不是技术水平」的含义。
Do's and Don'ts
- 新页面先确定主要阅读内容和操作，再从现有角色中选择颜色、文字层级和容器；不为每个页面新增一套视觉语言。
- 状态同时通过文字和视觉样式表达；不让颜色成为错误、选中或归档状态的唯一依据。
- 保留真实数据和完整主要内容；不通过截断、装饰性图形或夸张文案改变其含义。
- 展示休息与练习时保持中性；不新增缺勤警告、排名或技术水平暗示。
适配与待验证事项
后续界面验收应覆盖长名称与笔记、快捷按钮换行、加载／错误／空状态、日期选中标记，以及底部操作可达性。
现状只有小程序移动端布局，没有桌面或平板专用方案。窄屏、系统大字体、原生键盘遮挡、深色模式与完整无障碍表现仍属待验证事项；现有小字号与浅色文字也需要检查实际可读性。本文件不将设计要求当作适配完成的证据，单次设备验收结果记录在对应任务中。
实现与维护
实现时按需查阅以下入口，不在本文维护完整的 CSS 或组件 API 副本：
新增页面优先遵循本文件的使用规则并复用现有组件。发现文档与实现不一致时，明确差异及其原因，不直接将偶然实现提升为通用规则；有意调整视觉语言时，同步更新相关规则和对应样式。