Mirrors/suanming
1
0
Fork 0
mirror of https://github.com/patdelphi/suanming.git synced 2026-02-28 05:33:11 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
5801d6a9ee47845d63f9f69121c9a783b8bf8a1b
suanming/UI_OPTIMIZATION_PLAN.md
patdelphi a22b38babb Merge dev branch: Complete UI optimization with Chinese design system 
- Implement comprehensive Chinese-style component library
- Add unified typography system with semantic font classes
- Optimize all pages with responsive design and Chinese aesthetics
- Fix button styling and enhance user experience
- Add loading states, empty states, and toast notifications
- Complete 12 Palaces Details optimization
- Establish consistent color scheme and visual hierarchy
2025-08-19 22:27:40 +08:00

5.4 KiB
Raw Blame History

神机阁 UI 优化计划

🎯 优化目标

  • 解决移动端顶部字体溢出问题
  • 建立统一的中式风格设计系统
  • 实现完美的桌面端与移动端自适应
  • 创造优雅古典的用户体验
  • 优化色彩搭配和视觉层次

📋 当前问题分析

1. 移动端问题

  • 顶部导航字体溢出
  • 布局在小屏幕上不合理
  • 触摸交互体验不佳

2. 整体设计问题

  • 字体大小不统一
  • 缺乏视觉层次
  • 色彩搭配不和谐
  • 缺乏中式设计元素的统一性

🎨 设计系统规划

1. 色彩系统 (中式古典配色)

主色调

  • 朱砂红: #DC143C - 主要强调色，用于重要按钮和标题
  • 金黄色: #FFD700 - 辅助色，用于装饰和高亮
  • 墨黑色: #2C2C2C - 主要文字色
  • 古纸色: #F5F5DC - 背景色
  • 青灰色: #708090 - 次要文字色

渐变背景

  • 主背景: 从古纸色到淡金色的渐变
  • 卡片背景: 半透明白色覆盖
  • 按钮渐变: 朱砂红到深红的渐变

2. 字体系统

字体族

/* 中文优先字体栈 */
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. 断点设置

/* 移动端 */
@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. 用户体验: 导航清晰、操作便捷、视觉舒适

此计划将分阶段实施，每个阶段完成后进行测试和调整，确保最终效果符合预期。

Reference in New Issue View Git Blame Copy Permalink