2025-2026年学习日志——备用存档

自用的学习路径和备份笔记

ai推荐版学习路径规划

## 第一阶段：美术与设计基础

### 学习目标：

1. 掌握色彩理论和搭配技巧，能够为二次元风格网站选择合适的配色方案。
2. 学习美术基础理论，如构图、透视、光影等，提升界面设计的视觉表现力。
3. 掌握UI设计原则和UX设计方法，能够设计出既美观又易用的界面。

### 学习内容：

- **色彩搭配**：
  - 学习色轮、色彩关系（对比色、类似色等）
  - 学习色彩心理学，了解不同色彩对用户情绪的影响
  - 使用工具如Adobe Color、Coolors进行配色练习
- **美术理论**：
  - 构图原则（如三分法、对称、平衡）
  - 光影基础，理解高光、阴影、反射
  - 透视基础，一点透视、两点透视
- **UI/UX设计**：
  - 学习Material Design、iOS设计规范
  - 学习界面布局、组件设计、图标设计
  - 学习用户体验设计流程，包括用户研究、信息架构、交互设计、可用性测试
- **工具学习**：
  - **Figma**：深入学习组件、自动布局、原型设计、团队协作
  - **蓝湖**：学习标注、切图、与开发协作
  - **PS基础**：学习图像处理、调整，用于处理位图素材
  - **AI教程**：学习矢量图绘制，制作图标、插画

### 推荐资源：

- 书籍：《写给大家看的设计书》、《配色设计原理》
- 在线课程：站酷高高手、UI中国上的相关课程
- 实践：模仿优秀二次元风格网站的设计，进行重设计练习

## 第二阶段：前端基础巩固与进阶

### 学习目标：

1. 学习HTML、CSS、JavaScript，达到熟练水平。
2. 学习CSS预处理器Less，掌握嵌套、变量、混合等特性。
3. 学习Tailwind CSS，能够快速构建自定义样式的界面。
4. 学习Canvas基础，能够实现简单的动态效果。
5. 学习Vue.js框架，掌握组件化开发。

### 学习内容：

- **HTML/CSS/JS巩固**：
  - 深入理解HTML5语义化、CSS3新特性（渐变、动画、变形等）
  - JavaScript高级特性：闭包、原型链、异步编程（Promise、async/await）
  - 学习ES6+语法，如箭头函数、模块化、解构等
- **Less**：
  - 变量、混合、嵌套、运算、函数
  - 使用Less编写可维护的CSS代码
- **Tailwind CSS**：
  - 学习实用优先的原子化CSS理念
  - 掌握Tailwind的响应式设计、深色模式等
  - 结合Vue.js使用Tailwind
- **Canvas**：
  - 学习Canvas API，绘制图形、文本、图像
  - 实现简单的动画和交互
  - 学习使用Canvas库，如Konva.js，提高开发效率
- **Vue.js**：
  - Vue基础：指令、计算属性、组件、生命周期
  - Vue Router：路由管理
  - Vuex：状态管理
  - 学习Vue3的Composition API

### 推荐资源：

- 书籍：《JavaScript高级程序设计》、《Vue.js设计与实现》
- 在线课程：Vue官方教程、Tailwind CSS官方文档
- 实践：使用Vue+Tailwind CSS重构之前设计的界面

## 第三阶段：高级前端技术

### 学习目标：

1. 学习Three.js，能够在网页中创建3D场景。
2. 学习Live2D，制作动态看板娘。
3. 学习Git高级用法，掌握团队协作流程。

### 学习内容：

- **Three.js**：
  - 学习3D图形学基础概念：场景、相机、渲染器、几何体、材质、光照
  - 加载3D模型，添加交互
  - 与Vue.js结合使用
- **Live2D**：
  - 学习Live2D Cubism SDK，了解模型导入和驱动
  - 在网页中嵌入Live2D模型，实现交互（如鼠标跟随、点击动作）
- **Git高级**：
  - 分支管理（git flow）、合并冲突解决、标签管理
  - 与团队协作：Pull Request、Code Review

### 推荐资源：

- Three.js：官方文档、Three.js Journey课程（付费但优秀）
- Live2D：官方文档、GitHub上的开源项目（如CubismWebSamples）
- Git：Pro Git书籍、Git官方文档

## 番外：Hexo主题开发与部署

### 学习目标：

1. 掌握Hexo主题开发流程，能够独立开发自定义主题。
2. 学习Linux服务器基础，能够部署Hexo博客。
3. 学习TCP/IP等网络协议基础，了解HTTP/HTTPS。

### 学习内容：

- **Hexo主题开发**：
  - 学习Hexo主题结构：layout、partial、helper等
  - 使用EJS或Pug模板引擎
  - 编写自定义的CSS和JavaScript
  - 实现主题配置化
- **Linux服务器部署**：
  - 学习Linux基础命令
  - 学习Nginx配置，部署静态网站
  - 学习使用Git进行自动化部署
  - 学习域名解析、SSL证书配置（HTTPS）
- **网络协议**：
  - 学习TCP/IP模型，了解HTTP/HTTPS协议
  - 学习DNS、CDN等概念

### 推荐资源：

- Hexo：官方文档、开源主题源码（如NexT）
- Linux：鸟哥的Linux私房菜、Linux命令行与Shell脚本编程大全
- 网络协议：《图解HTTP》、《TCP/IP详解 卷1》

## 第四阶段：持续学习与独立制作并项目实践

### 学习目标：

1. 整合所学知识，完成一个完整的二次元风格Hexo主题。
2. 不断优化，添加更多趣味功能（如小游戏、音效、动画等）。
3. 学习辅助工具，提高开发效率。

### 学习内容：

- **项目实践**：
  - 设计并开发多个完整的网站主题
  - 实现响应式设计，适配移动端
  - 添加动画效果（CSS动画、GSAP、Canvas动画）
  - 集成Live2D看板娘
  - 优化性能，提高加载速度
- **辅助工具**：
  - **AI工具**：使用ChatGPT、Copilot辅助编程和设计
  - **设计资源**：使用IconFont、Unsplash、Pixiv等获取素材
  - **开发工具**：使用VSCode插件、Chrome开发者工具、Webpack等
  - **效率工具**：使用Notion、Trello进行任务管理

### 推荐资源：

- 参与开源项目，贡献代码或设计
- 关注前端和设计领域的博客、大会（如CSSConf、VueConf）
- 不断挑战更复杂的项目，如WebGL游戏、可视化项目等

## 工具推荐汇总

### 设计工具：

- Figma：UI设计、原型设计
- 蓝湖：标注、切图、协作
- Adobe Photoshop：图像处理
- Adobe Illustrator：矢量图绘制
- After Effects：动效设计
- Live2D Cubism：2D角色模型制作

### 开发工具：

- VS Code：代码编辑器
- Git：版本控制
- Node.js：JavaScript运行环境
- Vite：前端构建工具
- Webpack：模块打包
- Chrome DevTools：调试

### 辅助工具：

- ChatGPT：代码和设计建议
- GitHub Copilot：代码自动补全
- Notion：知识管理和项目规划
- Trello：任务管理
- IconFont：图标资源
- Unsplash：免费图片
- Pixiv：二次元插图

### 部署运维：

- Linux服务器（如Ubuntu）
- Nginx：Web服务器
- Let's Encrypt：免费SSL证书
- GitHub Actions：自动化部署

分类规划

美术基础 → UI/UX设计 → 前端技术 → 高级交互 → 部署运维
   ↓         ↓           ↓          ↓          ↓
色彩理论  Figma/PS     Vue3/TS   Canvas     Linux
构图基础  组件系统    Tailwind   Three.js   Nginx
矢量绘制  交互原型    Node.js    Live2D      CI/CD

工具备用

UI/UX设计

1. Figma - 主UI设计工具（团队协作、设计系统、原型）
2. Adobe Photoshop - 图像处理、合成、调色
3. Adobe Illustrator - 矢量图形、图标设计、插画
4. Adobe XD - 备用UI设计工具（特别适合原型制作）
5. Principle - 交互动效设计
6. Protopie - 高级交互原型（支持逻辑判断）
7. After Effects - 复杂动效制作、Lottie动画输出
8. Zeplin - 设计稿交付、标注（开发者友好）
9. Avocode - 设计稿切图、CSS代码生成
10. Abstract - Figma/Sketch版本控制（团队协作）
11. InVision - 设计演示与协作

前端技术

1. Node.js - JavaScript运行时
2. pnpm - 高效包管理器（推荐）
3. Yarn - 包管理器备选
4. npm - Node包管理器

高级交互

1. Three.js Editor - 在线Three.js编辑器
2. Spline - 在线3D设计工具
3. WhatFont Tool - 网页字体识别
4. FontBase - 字体管理器
5. SonarLint - 代码质量分析
6. CodeClimate - 代码质量平台

部署运维