From 9644a68d075f7eb2ff93eb9b45168c07c24598f7 Mon Sep 17 00:00:00 2001 From: yuxuanhui Date: Tue, 29 Sep 2026 14:43:53 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E8=8A=AD=E8=95=BE?= =?UTF-8?q?=E5=B2=9B=E8=AE=BE=E8=AE=A1=E8=A7=84=E8=8C=83=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- DESIGN.md | 191 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 191 insertions(+) create mode 100644 DESIGN.md diff --git a/DESIGN.md b/DESIGN.md new file mode 100644 index 0000000..b6fed83 --- /dev/null +++ b/DESIGN.md @@ -0,0 +1,191 @@ +# 芭蕾岛设计规范 + +本文件定义芭蕾岛小程序的视觉语言，供设计与开发新页面、调整已有组件时使用。适用范围为 `miniprogram/` 中的记录、日历、成长及相关表单和管理页面。 + +正文中的使用规则是后续设计的默认依据；表格中的数值沿用现有实现。标为「现状」或「待验证」的内容只描述实现边界，不代表长期设计决策或已通过验收。未覆盖的新场景，先按视觉原则选择最接近的现有模式。 + +本文采用纯 Markdown，按 [Google Labs DESIGN.md 格式规范](https://github.com/google-labs-code/design.md/blob/main/docs/spec.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 副本： + +- [全局样式](miniprogram/src/app.scss)：实际颜色、字号、间距与按钮主题映射。 +- [构建配置](miniprogram/config/index.ts)：设计宽度与尺寸转换配置。 +- [导航配置](miniprogram/src/app.config.ts)：原生导航与底部导航。 +- [公共组件](miniprogram/src/components/common.tsx)：页面标题、加载与空状态、记录卡片及按钮复用入口。 + +新增页面优先遵循本文件的使用规则并复用现有组件。发现文档与实现不一致时，明确差异及其原因，不直接将偶然实现提升为通用规则；有意调整视觉语言时，同步更新相关规则和对应样式。