小艾

创意设计师 & 前端开发者

查看我的作品

关于我

你好，我是小艾

我是一名充满激情的创意设计师，专注于创建美观且实用的数字体验。拥有5年的设计经验，我擅长将创意想法转化为令人印象深刻的视觉作品。

我相信好的设计不仅要美观，更要解决实际问题。每一个项目都是讲述品牌故事的独特机会。

UI/UX设计

用户界面和体验设计

前端开发

HTML, CSS, JavaScript

响应式设计

适配所有设备

品牌设计

视觉识别系统

我的作品集

电商网站重设计

网页设计

为某知名电商品牌设计的现代化购物界面，提升用户体验和转化率。

健康管理App

移动应用

一款帮助用户追踪健康数据和生活习惯的移动应用，界面简洁直观。

咖啡品牌视觉系统

品牌设计

为精品咖啡店打造的完整品牌视觉识别系统，从logo到包装设计。

数据可视化平台

网页设计

企业级数据分析平台的界面设计，让复杂数据变得易于理解。

美食配送App

移动应用

连接用户与本地餐厅的美食配送应用，流畅的订餐体验。

环保公益品牌

品牌设计

环保组织的品牌形象设计，传达可持续发展理念。

联系我

特殊效果实现讲解

1. 响应式导航栏效果

导航栏会根据屏幕尺寸自动调整样式，小屏幕时菜单项会隐藏。

@media (max-width: 768px) {
  .nav-menu {
    display: none;
  }
}

2. 作品集筛选功能

点击分类按钮可以动态显示对应类别的项目。

function filterPortfolio(category) {
  const items = document.querySelectorAll('.portfolio-item');
  items.forEach(item => {
    if (category === 'all' || item.dataset.category === category) {
      item.style.display = 'block';
    } else {
      item.style.display = 'none';
    }
  });
}

3. 表单验证功能

验证邮箱格式和必填字段，确保用户输入有效信息。

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
  alert('请输入有效的邮箱地址');
  return;
}

4. 平滑滚动效果

点击导航链接时页面平滑滚动到对应区域。

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();
    document.querySelector(this.getAttribute('href')).scrollIntoView({
      behavior: 'smooth'
    });
  });
});

5. CSS悬停动画

鼠标悬停时卡片向上浮动并增加阴影效果。

.portfolio-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}