95 lines
3.6 KiB
Markdown
95 lines
3.6 KiB
Markdown
# 小白记账设计系统
|
|
|
|
## 设计判断
|
|
|
|
小白记账是面向 Windows 小微经营者的本地财务产品。界面首先要让用户信任数据、看懂结果并完成当前任务，不追求营销网页式的视觉表演。
|
|
|
|
- 页面类型：数据密集型桌面产品
|
|
- 目标用户：不熟悉专业会计术语的小微经营者
|
|
- 视觉语言：冷静、可信、清晰、有适度亲和力
|
|
- 设计基础：Fluent UI React 与 Fluent System Icons
|
|
- 设计参数：`DESIGN_VARIANCE 4 / MOTION_INTENSITY 3 / VISUAL_DENSITY 7`
|
|
|
|
## 不可破坏的视觉锁定
|
|
|
|
### 颜色锁定
|
|
|
|
全产品只使用青绿色作为强调色。警告色和危险色只能表达真实状态，不能作为装饰。
|
|
|
|
- 品牌深绿：`#084C45`
|
|
- 主要强调：`#0D5C52`
|
|
- 交互强调：`#0F6F61`
|
|
- 浅强调背景：`#EDF7F4`
|
|
- 页面背景：`#F4F6F8`
|
|
- 内容表面：`#FFFFFF`
|
|
- 正文：`#17212B`
|
|
- 次要文字：`#5E6A75`
|
|
- 边框：`#DFE3E8`
|
|
- 警告：`#8A6100`
|
|
- 危险：`#B42318`
|
|
|
|
禁止重新加入金色装饰、紫蓝渐变、发光描边或与品牌无关的第二强调色。
|
|
|
|
### 形状锁定
|
|
|
|
- 面板、数据组和业务卡片统一使用 `12px` 圆角。
|
|
- 按钮、输入框、图标按钮和状态标签统一使用 `8px` 或更小圆角。
|
|
- 只有数字徽标可使用完全圆形。
|
|
- 阴影只用于浮层和需要表达层级的控件，普通内容面板依靠边框与留白分组。
|
|
|
|
### 主题锁定
|
|
|
|
当前版本统一使用浅色主题。任何页面不得单独切换成深色或暖色主题。后续如果加入深色模式，必须通过全局语义变量一次性实现和测试。
|
|
|
|
## 页面骨架
|
|
|
|
- 左侧固定主导航负责产品一级入口，标签不得随意改名。
|
|
- 顶部栏负责全局搜索、演示数据提示、通知和账户入口。
|
|
- 主内容区先展示页面结果，再展示依据和可执行操作。
|
|
- 右侧辅助信息只在确有上下文价值时出现。
|
|
- 数据概览优先使用连续分区，不把每个数字都包装成独立悬浮卡片。
|
|
|
|
## 排版与数据
|
|
|
|
- 中文界面使用 `Segoe UI Variable`、`Segoe UI`、`Microsoft YaHei UI` 回退链。
|
|
- 页面标题保持 27px 左右，不使用营销页面式超大标题。
|
|
- 金额、数量和日期必须启用等宽数字特性 `tabular-nums`。
|
|
- 收入和支出不能只靠颜色区分，必须同时显示正负号或文字状态。
|
|
- 表格列宽、金额右对齐和状态位置应保持稳定。
|
|
|
|
## 控件与图标
|
|
|
|
- 基础组件使用 `@fluentui/react-components`。
|
|
- 图标只使用 `@fluentui/react-icons`，不得在业务组件内手绘 SVG 路径。
|
|
- 每页只突出一个主要操作，其余操作降低视觉权重。
|
|
- 按钮文字在桌面端必须保持单行。
|
|
- 所有按钮必须有清晰的键盘焦点和按下反馈。
|
|
|
|
## 动效
|
|
|
|
- 动效只用于页面切换、操作反馈和状态变化。
|
|
- 只动画化 `transform` 与 `opacity`。
|
|
- 禁止滚动劫持、持续漂浮和无业务含义的循环动画。
|
|
- 必须尊重 `prefers-reduced-motion`。
|
|
|
|
## 文案
|
|
|
|
- 使用“收入、进货、房租、需要确认”，不用“贷方、借方、会计科目”。
|
|
- 先说结果，再解释依据。
|
|
- 错误提示必须说明发生了什么、数据是否安全、用户下一步做什么。
|
|
- 禁止用版本号、装饰性状态点和生硬编号制造科技感。
|
|
- 日期范围使用“至”，不使用长破折号。
|
|
|
|
## 状态完整性
|
|
|
|
每个新增功能必须同时考虑：
|
|
|
|
- 正常状态
|
|
- 加载状态
|
|
- 空数据状态
|
|
- 错误状态
|
|
- 离线状态
|
|
- 无权限状态
|
|
|
|
新增页面合并前至少检查首页、当前页面、键盘焦点、窄桌面宽度和 Windows 安装包构建。
|