c0ba7ac0ff
This commit introduces the initial prototype for an item database and build list tool. It establishes the foundational structure and core features of the application. Key components included: - **Documentation:** Initial design, interaction, and project structure documents (`design.md`, `interaction.md`, `outline.md`). - **Core Pages:** - `index.html`: Item management with CRUD operations. - `export.html`: CSV export configuration with drag-and-drop sorting. - `history.html`: Price history visualization with ECharts. - **Logic:** `main.js` and page-specific scripts handle client-side logic, including data management with `localStorage`, UI interactions, and animations. - **Features:** Implements core functionalities such as item creation, editing, deletion, data backup/restore, and sample data loading.
3.3 KiB
3.3 KiB
物品数据库工具 - 设计风格指南
设计理念
核心设计原则
- 专业商务风格：采用现代简约的设计语言，体现工具的专业性和可靠性
- 功能优先：界面设计以实用性为核心，确保每个元素都有明确的功能目的
- 清晰易读：使用高对比度的文字和背景，确保在不同设备上都能清晰阅读
- 直观操作：通过合理的布局和视觉引导，让用户能够快速理解和使用各项功能
色彩方案
- 主色调：深蓝灰 (#2C3E50) - 传达专业性和信任感
- 辅助色：柔和蓝 (#3498DB) - 用于按钮和链接，体现科技感
- 强调色：温暖橙 (#E67E22) - 用于重要操作和状态提示
- 中性色：浅灰 (#ECF0F1) - 用于背景和分隔区域
- 文字色：深灰 (#34495E) - 确保良好的可读性
字体系统
- 标题字体：Noto Serif SC - 用于页面标题和重要标题，体现权威感
- 正文字体：Noto Sans SC - 用于正文内容和界面文字，确保清晰易读
- 代码字体：JetBrains Mono - 用于CSV预览和数据展示，保持等宽特性
布局原则
- 网格系统：采用12列网格布局，确保内容在不同屏幕尺寸下的合理分布
- 间距规范：使用8px基础间距系统，保持视觉节奏的一致性
- 卡片设计：使用圆角卡片来组织内容，提供清晰的视觉层次
- 留白运用：充分利用留白来减少视觉噪音，突出重要信息
视觉效果
使用的核心库
- Anime.js：用于页面切换和元素动画，提供流畅的交互体验
- ECharts.js：用于历史价格趋势图和统计图表的数据可视化
- Splide.js：用于图片轮播和物品展示的滑动效果
- Matter.js：用于拖拽排序时的物理效果，增强操作反馈
- Pixi.js：用于背景装饰效果和视觉特效
动画效果
- 页面切换：使用淡入淡出和轻微的位移动画，保持流畅的导航体验
- 卡片交互：悬停时轻微上浮和阴影加深，点击时轻微缩放反馈
- 数据加载：使用骨架屏和进度指示器，提供良好的等待体验
- 操作反馈：成功操作使用绿色提示，错误使用红色提示，持续2秒
背景设计
- 主背景：使用纯色背景 (#FAFBFC)，保持内容的清晰度
- 装饰元素：在页面边角使用几何图形装饰，增加视觉趣味
- 渐变应用：仅在按钮和重要元素上使用轻微渐变，避免过度装饰
图标系统
- 功能图标：使用线性图标风格，保持一致的视觉语言
- 状态图标：使用填充式图标来表示不同的状态和操作结果
- 尺寸规范：功能图标使用24px，状态图标使用16px，保持一致性
响应式设计
- 桌面端 (1200px+)：三列布局，充分利用屏幕空间展示更多信息
- 平板端 (768px-1199px)：两列布局，保持核心功能的可用性
- 移动端 (< 768px)：单列布局，优化触摸操作和滚动体验
交互状态
- 默认状态：清晰的边框和适当的内边距
- 悬停状态：轻微的颜色变化和阴影加深，提供视觉反馈
- 激活状态：颜色加深和轻微内阴影，表示正在交互
- 禁用状态：降低透明度和灰度处理，明确不可用状态