移动端个人中心页面水墨风格重构计划

项目概述

将移动端个人中心页面的UI风格重构为与首页一致的中国传统水墨风格，营造优雅、文化感强的用户体验。

设计原则

1. 色彩系统

基于中国传统水墨画色彩体系：

颜色名称	CSS变量	色值	用途
宣纸背景	`--ink-light`	`#f5f3f0`	页面主背景
淡墨	`--ink-medium`	`#d4c4a8`	边框、分割线
浓墨	`--ink-dark`	`#8b7355`	主要文字、图标
焦墨	`--ink-deep`	`#3a2f26`	强调文字、标题
朱砂	`--accent-red`	`#a85c5c`	警示、删除操作
花青	`--accent-blue`	`#4a6b7c`	主要按钮、链接
石绿	`--accent-green`	`#5c7c5c`	成功状态、认证标识

2. 字体系统

主标题: font-serif text-3xl font-bold - 营造传统文化氛围
副标题: font-serif text-2xl font-semibold - 章节标题
正文: font-sans text-base - 清晰易读
说明文字: font-sans text-sm - 辅助信息
标签文字: font-sans text-xs - 小标签

3. 视觉层次

背景层: 宣纸纹理质感
卡片层: 毛玻璃效果(backdrop-blur)
内容层: 清晰的信息架构
交互层: 悬停动效和反馈

组件重构方案

1. 主页面结构 (ProfilePage)

// 新的主页面组件
const ProfilePage: React.FC = () => {
  return (
    <div className="min-h-screen" style={{ backgroundColor: COLORS.ink.light }}>
      {/* 顶部导航栏 */}
      <header className="sticky top-0 z-10 shadow-sm">
        <div className="px-4 py-4">
          <h1 className="font-serif text-2xl font-bold text-center">
            个人中心
          </h1>
        </div>
      </header>

      {/* 主内容区域 */}
      <div className="px-4 py-4 space-y-6">
        <UserHeader />
        <StatsGrid />
        <MenuList />
      </div>
    </div>
  );
};

2. 用户头部组件 (UserHeader)

当前问题: 现代风格，与水墨风格不符 重构方案:

背景: 水墨渐变纹理
卡片: 宣纸质感卡片
头像: 圆形边框+水墨边框

文字: 书法风格字体

// 重构后的UserHeader
const UserHeader: React.FC<UserHeaderProps> = ({ user, onEditProfile }) => {
return (
<div className="mb-6">
  {/* 水墨背景装饰 */}
  <div className="h-32 rounded-2xl relative overflow-hidden"
       style={{ background: `linear-gradient(135deg, var(--ink-light) 0%, var(--ink-medium) 100%)` }}>
    {/* 水墨纹理 */}
    <div className="absolute inset-0 opacity-10"
         style={{ backgroundImage: `url("data:image/svg+xml...水墨纹理SVG")` }} />
  </div>

  {/* 用户信息卡片 */}
  <div className="relative -mt-16">
    <div className="rounded-2xl p-6 backdrop-blur-sm mx-4"
         style={{ backgroundColor: 'rgba(255,255,255,0.9)', border: `1px solid var(--ink-medium)` }}>
      {/* 头像和用户信息 */}
    </div>
  </div>
</div>
);
};

3. 数据统计网格 (StatsGrid)

当前问题: 彩色图标，现代风格 重构方案:

图标: 单色水墨图标
背景: 宣纸质感卡片
数值: 书法字体
布局: 2x2网格保持

4. 菜单列表 (MenuList)

当前问题: 彩色emoji，现代列表样式 重构方案:

图标: 水墨风格SVG图标
背景: 宣纸卡片
分割线: 淡墨线条
悬停效果: 阴影变化

图标替换方案

当前图标 → 水墨图标

👤 个人信息 → 用户轮廓图标(水墨线条)
💎 积分中心 → 宝石图标(单色)
✍️ 我的发布 → 毛笔图标
⭐ 我的收藏 → 书签图标
🛠️ 技能管理 → 工具图标
🔤 字体设置 → 字体图标
🚪 退出登录 → 门图标(红色强调)

动效设计

1. 页面加载动效

淡入效果
卡片依次出现
水墨晕染背景

2. 交互动效

按钮悬停: 阴影加深
卡片点击: 轻微缩放
列表项: 滑动进入

3. 滚动动效

视差滚动背景
粘性导航栏

响应式设计

断点设置

小屏幕 (< 375px): 紧凑布局
标准屏幕 (375-768px): 默认布局
大屏幕 (> 768px): 平板适配

适配策略

字体大小动态调整
卡片间距自适应
图标大小优化

技术实现

1. CSS变量系统

:root {
  /* 水墨色彩 */
  --ink-light: #f5f3f0;
  --ink-medium: #d4c4a8;
  --ink-dark: #8b7355;
  --ink-deep: #3a2f26;
  
  /* 点缀色彩 */
  --accent-red: #a85c5c;
  --accent-blue: #4a6b7c;
  --accent-green: #5c7c5c;
}

2. 组件样式类

/* 水墨卡片 */
.ink-card {
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--ink-medium);
  border-radius: 1rem;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.ink-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* 水墨按钮 */
.ink-button {
  font-family: var(--font-serif);
  border-radius: 2rem;
  transition: all 0.3s ease;
  cursor: pointer;
}

开发步骤

第一阶段：基础框架

创建主页面结构
设置CSS变量系统
导入水墨风格字体

第二阶段：组件重构

重构UserHeader组件
重构StatsGrid组件
重构MenuList组件
创建水墨图标库

第三阶段：动效优化

添加页面加载动效
实现交互反馈
优化滚动体验

第四阶段：测试验证

跨设备测试
性能优化
用户体验测试

文件结构

src/client/mobile/pages/ProfilePage/
├── index.tsx                 # 主页面组件
├── components/
│   ├── UserHeader.tsx       # 用户头部组件(重构)
│   ├── StatsGrid.tsx        # 数据统计组件(重构)
│   ├── MenuList.tsx         # 菜单列表组件(重构)
│   └── InkIcons.tsx         # 水墨图标组件
├── styles/
│   └── profile-ink.css      # 个人中心水墨样式
└── utils/
    └── animations.ts        # 动效工具

质量保证

1. 设计一致性

与首页风格100%匹配
色彩系统统一
字体规范一致

2. 用户体验

加载速度<2秒
交互延迟<100ms
无障碍支持

3. 代码质量

TypeScript类型安全
组件可复用性
样式模块化

风险与对策

风险	影响	对策
性能问题	加载缓慢	图片优化、懒加载
兼容性问题	显示异常	浏览器测试、降级方案
用户体验差异	学习成本	渐进式更新、用户引导

验收标准

功能验收

所有功能正常运行
响应式布局适配
动效流畅自然

设计验收

与首页风格一致
水墨元素完整
传统文化氛围浓厚

技术验收

代码规范符合项目标准
性能指标达标
测试覆盖率>80%

mobile-profile-ui-refactor-plan.md 6.9 KB Постоянная ссылка История Исходник

移动端个人中心页面水墨风格重构计划

项目概述

设计原则

1. 色彩系统

2. 字体系统

3. 视觉层次

组件重构方案

1. 主页面结构 (ProfilePage)

2. 用户头部组件 (UserHeader)

3. 数据统计网格 (StatsGrid)

4. 菜单列表 (MenuList)

图标替换方案

当前图标 → 水墨图标

动效设计

1. 页面加载动效

2. 交互动效

3. 滚动动效

响应式设计

断点设置

适配策略

技术实现

1. CSS变量系统

2. 组件样式类

开发步骤

第一阶段：基础框架

第二阶段：组件重构

第三阶段：动效优化

第四阶段：测试验证

文件结构

质量保证

1. 设计一致性

2. 用户体验

3. 代码质量

风险与对策

验收标准

功能验收

设计验收

技术验收

mobile-profile-ui-refactor-plan.md 6.9 KB

Постоянная ссылка История Исходник