关于页面设计文档

1. 项目背景

简要说明设计“关于”页面的背景和目的，例如：

• 打造一个视觉酷炫且功能完善的个人介绍页面
• 体现个人品牌特色与技术理念
• 提升用户体验和页面交互效果

2. 设计目标

• 页面布局清晰，信息层次分明
• 视觉风格科技感强烈，颜色搭配协调
• 响应式设计，兼容多终端设备
• 动态粒子背景和交互动画提升体验
• 邮件表单功能正常，方便用户联系

3. 设计方案

3.1 页面结构

• 顶部标题区域（主标题、副标题）
• 多个内容分区（个人简介、个人特质、理念、网站介绍、关注领域、内容特色、联系方式）
• 每个分区采用卡片式或网格布局
• 联系区域包含邮件表单及联系方式说明

3.2 视觉设计

• 渐变蓝紫色背景，搭配绿色霓虹色调
• 玻璃态半透明卡片，模糊背景效果
• 文字阴影与发光效果突出重点内容
• 按钮和卡片悬浮时动效增强交互感

3.3 交互设计

• 粒子动画背景，响应鼠标悬停和点击
• 邮件表单点击发送按钮，自动调用默认邮件客户端
• 卡片和按钮悬浮动画反馈
• 页面整体居中，顶部留白适当，避免遮挡

4. 技术实现

4.1 HTML结构

• 语义化标签，利于SEO和无障碍
• 使用<section>分块，<h1>, <h2>等合理分级
• 卡片容器使用CSS Grid布局
• 技能标签使用Flex布局

4.2 CSS样式

• 玻璃态效果使用backdrop-filter: blur()
• 渐变背景和霓虹色文字阴影
• 响应式媒体查询调整布局和字体
• 动画使用@keyframes实现渐显和位移动画

4.3 JavaScript功能

• 使用particles.js实现动态粒子背景
• 邮件发送功能通过构造mailto:链接实现
• 表单验证确保必填项填写完整

5. 优化历程

• 初版完成基础布局和样式
• 修正文字重叠问题，调整line-height和letter-spacing
• 采用Flexbox居中布局，限制最大宽度
• 设计并调整返回首页按钮尺寸（后期删除）
• 优化“关注联系我们”区域左右内边距
• 响应式设计完善，手机端适配良好

6. 代码示例

6.1 玻璃态卡片样式

.card {
  background: rgba(255,255,255,0.88);
  border-radius: 18px;
  padding: 32px 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(180,180,180,0.18);
  color: #222;
}
@media (prefers-color-scheme: dark) {
  .card {
    background: rgba(30,34,44,0.92);
    color: #f0f0f0;
    border: 1px solid rgba(80,200,180,0.16);
  }
}
      

6.2 邮件发送JavaScript

function sendEmail() {
  const userEmail = document.getElementById('userEmail').value.trim();
  const subject = encodeURIComponent(document.getElementById('subject').value.trim());
  const message = encodeURIComponent(document.getElementById('message').value.trim());
  if (!userEmail || !subject || !message) {
    alert('请填写所有必填项');
    return false;
  }
  const toEmail = '你网站的邮箱';
  const mailtoLink = `mailto:${toEmail}?subject=${subject}&body=来自: ${userEmail}%0D%0A%0D%0A${message}`;
  window.location.href = mailtoLink;
  return false; // 阻止表单默认提交
}
      

7. 总结

本设计结合现代前端技术与交互设计，打造了一个美观、实用且响应式的“关于”页面。
通过不断优化布局、样式和功能，实现了良好的用户体验和视觉效果。
欢迎大家交流反馈，共同进步！

文章由海楼原创，转载请注明出处。