3.6 KiB
3.6 KiB
小白记账设计系统
设计判断
小白记账是面向 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 安装包构建。