关于前端界面的完善-山大软院创新实训项目博客_9

ws_bones

已于 2025-06-14 23:07:39 修改

阅读量78

点赞数 1

CC 4.0 BY-SA版权

文章标签： java

于 2025-06-12 10:26:12 首次发布

本文链接：https://blog.youkuaiyun.com/ws_bones/article/details/148604712

一、需求分析

本次项目关于后端及数据库的部分，我已经做完，于是，我又转向了前端界面的优化内容。在完成了英语学习应用的各个功能模块开发后（包括场景故事、文本翻译、语音练习、学习记录等功能），我们突然意识到一个关键问题：应用缺少一个统一的主页入口。用户打开应用后直接进入功能界面，缺乏对产品整体价值的认知和引导，这严重影响了用户体验和功能发现率。于是，我参考了keep界面，通过分析，看出，网站的主界面很好地展示了产品的用途，也就是健身，因此我初步设想把学习模块和关于小智英语星球的“关于”加上！

二、分析与方案

1.原架构直接跳转到功能页面的设计存在几个问题：

缺乏产品价值传达：用户无法快速理解应用的核心价值主张
功能发现率低：许多实用功能被埋没，用户不能迅速了解到模板的内容与功能
品牌认知薄弱：用户对"小智星球"品牌缺乏认知和情感连接

2. 关键设计决策

2.1 分层信息架构

<div class="welcome-container">
  <!-- 顶部英雄区 - 核心价值展示 -->
  <div class="page_hero">...</div>
  
  <!-- 功能模块区 - 功能展示 -->
  <div class="features-section">...</div>
  
  <!-- 关于我们 - 品牌故事 -->
  <div class="about-section">...</div>
  
  <!-- CTA - 行动号召 -->
  <div class="cta-section">...</div>
</div>

2.2 视觉设计原则

渐变色主题：使用蓝紫色渐变传达科技感和专业性
卡片式布局：功能模块采用卡片设计，增强可点击感
动态元素：添加浮动图标和微交互提升页面活力，毕竟是学生学习网站，青春活力！

.page_gradientText {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

2.3 技术实现要点

响应式设计：确保从手机到桌面设备的完美显示
性能优化：使用CSS动画而非JavaScript实现视觉效果
无障碍访问：确保色对比度达标，支持键盘导航

@media (max-width: 768px) {
  .page_hero {
    flex-direction: column;
    text-align: center;
  }
}

核心组件解析

1. Hero Section

<div class="page_hero">
  <div class="page_heroContent">
    <h1 class="page_title">
      <span class="page_gradientText">英语学习助手</span>
      <div class="page_subtitle">AI驱动的英语学习体验</div>
    </h1>
    <p class="page_description">
      通过场景故事、翻译、语音练习等多元功能，助你高效提升英语水平
    </p>
    <button class="cta-button" @click="scrollToFeatures">
      开始学习之旅
    </button>
  </div>
  <div class="page_heroGraphic">...</div>
</div>

设计思考：在有限的空间内同时传达产品名称、核心价值、关键优势，并通过CTA按钮引导用户行动。

2. 功能展示区

<div class="features-grid">
  <div class="feature-card" @click="navigateTo('home')">
    <div class="feature-icon">📖</div>
    <h3 class="feature-title">场景故事</h3>
    <p class="feature-desc">根据主题生成有趣的英语故事，提升阅读与表达能力。</p>
  </div>
  <!-- 其他5个功能卡片 -->
</div>

交互细节：

卡片悬停效果：轻微上浮和阴影变化
点击区域优化：整个卡片可点击
视觉反馈：点击时有轻微缩放效果

3. 品牌故事区

<div class="about-section">
  <h2 class="about-title">关于我们 · 小智星球</h2>
  <div class="about-divider"></div>
  <p class="about-mission">激发学习热情，成就未来领袖</p>
  <!-- 使命和愿景内容 -->
</div>

文案策略：采用"使命-愿景"框架，既展示专业性，又传递教育情怀。提升产品价值的精髓啊！

三、技术挑战与解决方案

1. 滚动行为优化

const scrollToFeatures = () => {
  const el = document.getElementById('features');
  if (el) {
    el.scrollIntoView({ behavior: 'smooth' });
  }
};

问题：传统锚点跳转太生硬
方案：使用平滑滚动，提升用户体验

2. 响应式设计挑战

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
}

@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
}

适配策略：从桌面端的三列布局，到平板的两列，再到手机的单一列布局。也就是媒体查询

3.“页面死机了”

这一块是最困扰我的，主页面的内容很多，页面不能放下；并且，一开始hero区域被nav区域覆盖，于是我经过修改，设置成滚动窗口，最后保证页面能够自如地展示！

四、最终效果

五、源码

<template>
  <div class="welcome-container">
    <div class="space-y-4 overflow-y-auto scroll-smooth max-h-[calc(100vh-200px)]">
    <!-- 顶部英雄区 -->
    <div class="page_hero">
      <div class="page_heroContent">
        <h1 class="page_title">
          <span class="page_gradientText">英语学习助手</span>
          <div class="page_subtitle">AI驱动的英语学习体验</div>
        </h1>
        <p class="page_description">
          通过场景故事、翻译、语音练习等多元功能，助你高效提升英语水平
        </p>
        <button class="cta-button" @click="scrollToFeatures">
          开始学习之旅
          <svg class="arrow-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
          </svg>
        </button>
      </div>
      
      <div class="page_heroGraphic">
        <svg class="page_blob" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
          <path fill="#6366f1" d="M45.7,-58.9C59.9,-51.4,72.5,-38.6,77.7,-23.1C82.9,-7.6,80.8,10.6,73.1,25.9C65.4,41.2,52.1,53.6,37.4,60.9C22.7,68.2,6.6,70.3,-8.6,67.9C-23.8,65.5,-38.1,58.5,-50.5,48.1C-62.9,37.7,-73.4,23.8,-76.3,8.1C-79.2,-7.6,-74.5,-25.1,-64.2,-37.8C-53.9,-50.5,-38,-58.4,-23,-62.7C-8,-67,-4,-67.7,6.3,-66.1C16.6,-64.5,31.5,-66.5,45.7,-58.9Z" transform="translate(100 100)"></path>
        </svg>
        
        <div class="page_iconGrid">
          <div class="page_icon page_iconFloat1">🎯</div>
          <div class="page_icon page_iconFloat2">🗣️</div>
          <div class="page_icon page_iconFloat3">🎓</div>
          <div class="page_icon page_iconFloat4">🔊</div>
        </div>
      </div>
    </div>
    
    <!-- 功能模块区 -->
    <div class="features-section" id="features">
      <div class="decoration dec-1"></div>
      <div class="decoration dec-2"></div>
      
      <h2 class="section-title">学习功能</h2>
      <p class="section-subtitle">探索我们强大的AI驱动功能，全面提升您的英语能力</p>
      
      <div class="features-grid">
        <div class="feature-card" @click="navigateTo('home')">
          <div class="feature-icon">📖</div>
          <h3 class="feature-title">场景故事</h3>
          <p class="feature-desc">根据主题生成有趣的英语故事，提升阅读与表达能力。</p>
        </div>
        
        <div class="feature-card" @click="navigateTo('translation')">
          <div class="feature-icon">🌐</div>
          <h3 class="feature-title">文本翻译</h3>
          <p class="feature-desc">智能翻译，助你理解各类英文文本，支持多领域专业术语。</p>
        </div>
        
        <div class="feature-card" @click="navigateTo('speech')">
          <div class="feature-icon">🎤</div>
          <h3 class="feature-title">语音练习</h3>
          <p class="feature-desc">AI发音评估与口语训练，实时反馈，提升口语表达。</p>
        </div>
        
        <div class="feature-card" @click="navigateTo('learning')">
          <div class="feature-icon">📚</div>
          <h3 class="feature-title">学习记录</h3>
          <p class="feature-desc">自动记录学习进度，支持成就系统与个性化复习。</p>
        </div>
        
        <div class="feature-card" @click="navigateTo('report')">
          <div class="feature-icon">📈</div>
          <h3 class="feature-title">学习报告</h3>
          <p class="feature-desc">数据可视化分析，生成专属学习报告，科学规划提升路径。</p>
        </div>
        
        <div class="feature-card" @click="navigateTo('analyze')">
          <div class="feature-icon">🧩</div>
          <h3 class="feature-title">语句分析</h3>
          <p class="feature-desc">分析句子结构，提升语法理解与表达能力。</p>
        </div>
      </div>
    </div>
    
    <!-- 关于我们部分 -->
    <div class="about-section">
      <div class="about-decoration about-dec-1"></div>
      <div class="about-decoration about-dec-2"></div>
      
      <div class="about-content">
        <h2 class="about-title">关于我们 · 小智星球</h2>
        <div class="about-divider"></div>
        
        <p class="about-mission">激发学习热情，成就未来领袖</p>
        
        <p class="about-text">
          小智星球致力于通过创新的人工智能技术，激发学生对英语学习的热情，帮助他们掌握流利、地道的英语表达能力。
        </p>
        
        <h3>小智星球的使命</h3>
        <ul class="about-list">
          <li><strong>个性化学习体验：</strong> 利用AI技术为每个学生提供量身定制的学习路径</li>
          <li><strong>互动式学习环境：</strong> 创造充满互动和参与感的学习环境</li>
          <li><strong>全面的英语技能培养：</strong> 关注语法和词汇，更重视听说读写全面发展</li>
          <li><strong>跨文化交流能力：</strong> 通过模拟真实场景对话，培养全球沟通能力</li>
        </ul>
        
        <h3>小智星球的愿景</h3>
        <p class="about-mission">成为全球领先的英语学习平台</p>
        <ul class="about-list">
          <li><strong>技术创新：</strong> 持续投入研发，利用最新AI技术优化学习体验</li>
          <li><strong>全球影响力：</strong> 帮助全球不同地区的学生提高英语水平</li>
          <li><strong>教育公平：</strong> 通过高质量在线资源，缩小教育资源差距</li>
          <li><strong>持续发展：</strong> 与教育机构合作，推动英语教育发展</li>
        </ul>
      </div>
    </div>
    
    <!-- CTA部分 -->
    <div class="cta-section">
      <h2 class="cta-title">准备好提升您的英语能力了吗？</h2>
      <p class="cta-subtitle">加入数千名已经通过小智星球提升英语水平的学习者</p>
      <button class="cta-button" @click="navigateTo('home')">
        立即开始
        <svg class="arrow-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
        </svg>
      </button>
    </div>
  </div>
</div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';

const emit = defineEmits(['page-change']);

const navigateTo = (page: string) => {
  emit('page-change', page);
};

const scrollToFeatures = () => {
  const el = document.getElementById('features');
  if (el) {
    el.scrollIntoView({ behavior: 'smooth' });
  }
};
</script>

<style scoped>
/* 样式部分保持不变，直接从之前的代码中复制过来 */
/* 添加滚动条样式 */
.overflow-y-auto {
  scrollbar-width: thin;
  scrollbar-color: #e5e7eb #ffffff;
}
.overflow-y-auto::-webkit-scrollbar {
  width: 6px;
}
.overflow-y-auto::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 3px;
}
.overflow-y-auto::-webkit-scrollbar-thumb {
  background-color: #e5e7eb;
  border-radius: 3px;
  border: 2px solid #ffffff;
}
.overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background-color: #d1d5db;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

body {
  background: linear-gradient(135deg, #f0f4ff 0%, #e6ecff 100%);
  color: #333;
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  padding-bottom: 40px;
}

.welcome-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 40px;
}

/* 顶部英雄区 */
.page_hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 60px 0 100px;
  position: relative;
}

.page_heroContent {
  flex: 1;
  max-width: 700px;
  padding-right: 60px;
  z-index: 3;
}

.page_title {
  font-size: 3.5rem;
  font-weight: 800;
  margin-bottom: 15px;
  line-height: 1.2;
}

.page_gradientText {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
}

.page_subtitle {
  font-size: 1.8rem;
  font-weight: 600;
  color: #4b5563;
  margin-bottom: 25px;
}

.page_description {
  font-size: 1.2rem;
  color: #6b7280;
  margin-bottom: 40px;
  max-width: 500px;
}

.page_heroGraphic {
  position: relative;
  width: 450px;
  height: 450px;
  flex-shrink: 0;
}

.page_blob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: 1;
}

.page_iconGrid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.page_icon {
  position: absolute;
  width: 80px;
  height: 80px;
  background: white;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.15);
  animation: float 6s infinite ease-in-out;
}

.page_iconFloat1 {
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.page_iconFloat2 {
  top: 70%;
  left: 15%;
  animation-delay: 1s;
}

.page_iconFloat3 {
  top: 30%;
  left: 75%;
  animation-delay: 2s;
}

.page_iconFloat4 {
  top: 75%;
  left: 70%;
  animation-delay: 3s;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* 功能模块区 */
.features-section {
  padding: 60px 40px;
  margin: 60px 0;
  background: white;
  border-radius: 30px;
  box-shadow: 0 20px 50px rgba(70, 99, 230, 0.08);
  position: relative;
  overflow: hidden;
}

.section-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  color: #4663e6;
  margin-bottom: 20px;
  padding: 0 20px;
}

.section-subtitle {
  text-align: center;
  color: #6b7280;
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto 50px;
  padding: 0 20px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
  padding: 0 20px;
}

.feature-card {
  background: #f9fafc;
  border-radius: 20px;
  padding: 35px 30px;
  transition: all 0.3s ease;
  border: 2px solid #eef2ff;
  text-align: center;
  cursor: pointer;
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(99, 102, 241, 0.15);
  background: white;
  border-color: #d6e0ff;
}

.feature-icon {
  font-size: 3.5rem;
  margin-bottom: 25px;
  color: #6366f1;
}

.feature-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #4663e6;
  margin-bottom: 15px;
}

.feature-desc {
  color: #6b7280;
  font-size: 1.05rem;
}

/* 关于我们部分 */
.about-section {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 30px;
  padding: 70px 60px;
  margin: 80px 0;
  color: white;
  position: relative;
  overflow: hidden;
}

.about-content {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  margin: 0 auto;
}

.about-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.about-divider {
  width: 80px;
  height: 4px;
  background: white;
  border-radius: 2px;
  margin: 0 auto 40px;
}

.about-mission {
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 40px;
  font-style: italic;
}

.about-text {
  font-size: 1.15rem;
  line-height: 1.8;
  margin-bottom: 25px;
}

.about-list {
  margin: 30px 0 40px 30px;
}

.about-list li {
  margin-bottom: 15px;
  font-size: 1.1rem;
}

/* CTA部分 */
.cta-section {
  text-align: center;
  padding: 40px 0 80px;
}

.cta-title {
  font-size: 2.2rem;
  color: #4663e6;
  margin-bottom: 20px;
}

.cta-subtitle {
  color: #6b7280;
  font-size: 1.2rem;
  max-width: 600px;
  margin: 0 auto 40px;
}

.cta-button {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
  padding: 18px 45px;
  border-radius: 50px;
  font-size: 1.2rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 10px 25px rgba(99, 102, 241, 0.4);
}

.cta-button:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(99, 102, 241, 0.6);
}

.arrow-icon {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

.cta-button:hover .arrow-icon {
  transform: translateX(5px);
}

/* 装饰元素 */
.decoration {
  position: absolute;
  border-radius: 50%;
  opacity: 0.1;
  z-index: 0;
}

.dec-1 {
  width: 300px;
  height: 300px;
  background: #6366f1;
  top: -150px;
  right: -150px;
}

.dec-2 {
  width: 200px;
  height: 200px;
  background: #8b5cf6;
  bottom: -100px;
  left: -100px;
}

.about-decoration {
  position: absolute;
  border-radius: 50%;
  opacity: 0.15;
  z-index: 1;
}

.about-dec-1 {
  width: 400px;
  height: 400px;
  background: white;
  top: -200px;
  right: -200px;
}

.about-dec-2 {
  width: 300px;
  height: 300px;
  background: white;
  bottom: -150px;
  left: -150px;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .welcome-container {
    padding: 20px;
  }
  
  .page_hero {
    flex-direction: column;
    text-align: center;
    padding: 40px 0 60px;
  }
  
  .page_heroContent {
    padding-right: 0;
    margin-bottom: 40px;
    max-width: 100%;
  }
  
  .features-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    padding: 0;
  }
  
  .about-section {
    padding: 50px 30px;
  }
}

@media (max-width: 768px) {
  .welcome-container {
    padding: 15px;
  }
  
  .features-section {
    padding: 40px 20px;
  }
  
  .about-section {
    padding: 40px 20px;
  }
  
  .page_title {
    font-size: 2.3rem;
  }
  
  .page_subtitle {
    font-size: 1.3rem;
  }
  
  .page_heroGraphic {
    width: 320px;
    height: 320px;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .page_icon {
    width: 70px;
    height: 70px;
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .page_title {
    font-size: 2rem;
  }
  
  .page_heroGraphic {
    width: 280px;
    height: 280px;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .page_icon {
    width: 65px;
    height: 65px;
    font-size: 1.8rem;
  }
}
</style>