mirror of
https://github.com/patdelphi/suanming.git
synced 2026-02-28 05:33:11 +08:00
865d4c7a15
- Added full Chinese year display (农历一九七六年) - Implemented detailed solar term intervals (惊蛰后至春分前) - Enhanced Zi Shi calculation with professional explanations - Added lunar information display in frontend components - Improved accuracy of lunar date calculations - Removed redundant note texts for cleaner UI - Fixed syntax errors in analyzer modules
208 lines
5.4 KiB
Markdown
208 lines
5.4 KiB
Markdown
# 神机阁 UI 优化计划
|
||
|
||
## 🎯 优化目标
|
||
|
||
- 解决移动端顶部字体溢出问题
|
||
- 建立统一的中式风格设计系统
|
||
- 实现完美的桌面端与移动端自适应
|
||
- 创造优雅古典的用户体验
|
||
- 优化色彩搭配和视觉层次
|
||
|
||
## 📋 当前问题分析
|
||
|
||
### 1. 移动端问题
|
||
- 顶部导航字体溢出
|
||
- 布局在小屏幕上不合理
|
||
- 触摸交互体验不佳
|
||
|
||
### 2. 整体设计问题
|
||
- 字体大小不统一
|
||
- 缺乏视觉层次
|
||
- 色彩搭配不和谐
|
||
- 缺乏中式设计元素的统一性
|
||
|
||
## 🎨 设计系统规划
|
||
|
||
### 1. 色彩系统 (中式古典配色)
|
||
|
||
#### 主色调
|
||
- **朱砂红**: `#DC143C` - 主要强调色，用于重要按钮和标题
|
||
- **金黄色**: `#FFD700` - 辅助色，用于装饰和高亮
|
||
- **墨黑色**: `#2C2C2C` - 主要文字色
|
||
- **古纸色**: `#F5F5DC` - 背景色
|
||
- **青灰色**: `#708090` - 次要文字色
|
||
|
||
#### 渐变背景
|
||
- **主背景**: 从古纸色到淡金色的渐变
|
||
- **卡片背景**: 半透明白色覆盖
|
||
- **按钮渐变**: 朱砂红到深红的渐变
|
||
|
||
### 2. 字体系统
|
||
|
||
#### 字体族
|
||
```css
|
||
/* 中文优先字体栈 */
|
||
font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'STHeiti', 'WenQuanYi Micro Hei', sans-serif;
|
||
```
|
||
|
||
#### 字体大小规范
|
||
- **标题 H1**: 2.5rem (40px) / 移动端 2rem (32px)
|
||
- **标题 H2**: 2rem (32px) / 移动端 1.75rem (28px)
|
||
- **标题 H3**: 1.5rem (24px) / 移动端 1.25rem (20px)
|
||
- **正文**: 1rem (16px) / 移动端 0.875rem (14px)
|
||
- **小字**: 0.875rem (14px) / 移动端 0.75rem (12px)
|
||
|
||
#### 行高规范
|
||
- **标题**: 1.2
|
||
- **正文**: 1.6
|
||
- **按钮文字**: 1.4
|
||
|
||
### 3. 间距系统
|
||
|
||
#### 基础间距单位 (基于 4px)
|
||
- **xs**: 0.25rem (4px)
|
||
- **sm**: 0.5rem (8px)
|
||
- **md**: 1rem (16px)
|
||
- **lg**: 1.5rem (24px)
|
||
- **xl**: 2rem (32px)
|
||
- **2xl**: 3rem (48px)
|
||
|
||
### 4. 组件设计规范
|
||
|
||
#### 按钮设计
|
||
- **主按钮**: 朱砂红背景，金色边框，白色文字
|
||
- **次按钮**: 透明背景，朱砂红边框，朱砂红文字
|
||
- **圆角**: 8px
|
||
- **高度**: 44px (移动端友好)
|
||
- **内边距**: 16px 24px
|
||
|
||
#### 卡片设计
|
||
- **背景**: 半透明白色 rgba(255,255,255,0.9)
|
||
- **边框**: 1px solid rgba(220,20,60,0.2)
|
||
- **圆角**: 12px
|
||
- **阴影**: 0 4px 20px rgba(0,0,0,0.1)
|
||
- **内边距**: 24px
|
||
|
||
#### 输入框设计
|
||
- **背景**: 白色
|
||
- **边框**: 1px solid #E5E5E5
|
||
- **聚焦边框**: 2px solid #DC143C
|
||
- **圆角**: 6px
|
||
- **高度**: 44px
|
||
- **内边距**: 12px 16px
|
||
|
||
## 📱 响应式设计策略
|
||
|
||
### 1. 断点设置
|
||
```css
|
||
/* 移动端 */
|
||
@media (max-width: 768px) { ... }
|
||
|
||
/* 平板端 */
|
||
@media (min-width: 769px) and (max-width: 1024px) { ... }
|
||
|
||
/* 桌面端 */
|
||
@media (min-width: 1025px) { ... }
|
||
```
|
||
|
||
### 2. 移动端优化
|
||
- **导航栏**: 汉堡菜单，避免文字溢出
|
||
- **字体缩放**: 移动端字体适当缩小
|
||
- **触摸目标**: 最小 44px × 44px
|
||
- **间距调整**: 移动端间距适当减小
|
||
|
||
### 3. 布局策略
|
||
- **桌面端**: 多列布局，侧边栏导航
|
||
- **移动端**: 单列布局，底部导航
|
||
- **弹性布局**: 使用 Flexbox 和 Grid
|
||
|
||
## 🎭 中式设计元素
|
||
|
||
### 1. 装饰元素
|
||
- **云纹图案**: 作为背景装饰
|
||
- **回纹边框**: 用于卡片和分割线
|
||
- **印章样式**: 用于重要标识
|
||
- **书法笔触**: 用于标题装饰
|
||
|
||
### 2. 图标设计
|
||
- **八卦图标**: 用于导航和功能区分
|
||
- **中式符号**: 太极、阴阳、五行元素
|
||
- **传统色彩**: 朱砂、金黄、墨色
|
||
|
||
### 3. 动画效果
|
||
- **淡入淡出**: 页面切换动画
|
||
- **缓动函数**: cubic-bezier(0.4, 0, 0.2, 1)
|
||
- **悬停效果**: 轻微的缩放和阴影变化
|
||
|
||
## 🔧 技术实现方案
|
||
|
||
### 1. CSS 架构
|
||
- **原子化 CSS**: 使用 Tailwind CSS
|
||
- **自定义主题**: 扩展 Tailwind 配置
|
||
- **组件样式**: CSS Modules 或 Styled Components
|
||
|
||
### 2. 响应式实现
|
||
- **移动优先**: Mobile-first 设计
|
||
- **弹性单位**: rem, em, vw, vh
|
||
- **媒体查询**: 断点式响应
|
||
|
||
### 3. 性能优化
|
||
- **字体优化**: 字体子集化，预加载
|
||
- **图片优化**: WebP 格式，懒加载
|
||
- **CSS 优化**: 关键 CSS 内联
|
||
|
||
## 📋 实施计划
|
||
|
||
### 阶段一：基础设施 (1-2天)
|
||
1. 更新 Tailwind 配置，添加中式主题
|
||
2. 创建设计系统组件库
|
||
3. 建立响应式断点系统
|
||
|
||
### 阶段二：核心组件 (2-3天)
|
||
1. 重构导航栏组件 (解决移动端溢出)
|
||
2. 优化按钮和表单组件
|
||
3. 重设计卡片和布局组件
|
||
|
||
### 阶段三：页面优化 (3-4天)
|
||
1. 首页重新设计
|
||
2. 分析页面布局优化
|
||
3. 历史记录页面改进
|
||
4. 用户中心页面美化
|
||
|
||
### 阶段四：细节完善 (1-2天)
|
||
1. 动画效果添加
|
||
2. 交互细节优化
|
||
3. 跨设备测试
|
||
4. 性能优化
|
||
|
||
## 🎯 预期效果
|
||
|
||
### 视觉效果
|
||
- 统一的中式古典风格
|
||
- 和谐的色彩搭配
|
||
- 清晰的视觉层次
|
||
- 优雅的动画过渡
|
||
|
||
### 用户体验
|
||
- 完美的移动端适配
|
||
- 直观的导航体验
|
||
- 舒适的阅读体验
|
||
- 流畅的交互反馈
|
||
|
||
### 技术指标
|
||
- 移动端适配率 100%
|
||
- 页面加载速度 < 2s
|
||
- 交互响应时间 < 100ms
|
||
- 跨浏览器兼容性 95%+
|
||
|
||
## 📝 验收标准
|
||
|
||
1. **移动端测试**: 在各种移动设备上无溢出、布局正常
|
||
2. **响应式测试**: 在不同屏幕尺寸下表现良好
|
||
3. **视觉一致性**: 所有页面遵循统一设计规范
|
||
4. **性能测试**: 页面加载和交互性能达标
|
||
5. **用户体验**: 导航清晰、操作便捷、视觉舒适
|
||
|
||
---
|
||
|
||
*此计划将分阶段实施，每个阶段完成后进行测试和调整，确保最终效果符合预期。* |