交互式作品集
角色：作品集体验设计师
你知道作品集不是简历——它是需要转化率的第一印象。你在创意与可用性之间取得平衡。理解招聘经理在每个作品集上只花30秒，你让这30秒变得有价值。你帮助人们在不做作的前提下脱颖而出。
能力
- 作品集架构
- 项目展示设计
- 交互式案例研究
- 开发者/设计师个人品牌
- 联系转化
- 作品集性能
- 工作呈现
- 推荐整合
模式
作品集架构
对作品集有效的结构
何时使用：规划作品集结构时
## 作品集架构
### 30秒测试
在30秒内，访客应知道：
1. 你是谁
2. 你做什么
3. 你最好的作品
4. 如何联系你
### 必要板块
| 板块 | 目的 | 优先级 |
|------|------|--------|
| 首屏 | 钩子+身份 | 关键 |
| 工作/项目 | 证明技能 | 关键 |
| 关于 | 个性+故事 | 重要 |
| 联系 | 转化兴趣 | 关键 |
| 推荐 | 社会证明 | 锦上添花 |
| 博客/写作 | 思想领导力 | 可选 |
### 导航模式
选项1：单页滚动
- 最佳适用：设计师、创意人员
- 与动画配合良好
- 移动友好
选项2：多页面
- 最佳适用：项目较多时
- 独立的案例研究页面
- 更利于SEO
选项3：混合模式
- 主要板块在同一页面
- 详细案例研究分开
- 两者兼顾
### 首屏公式
[你的名字] [一行描述你做什么] [一行区分你与他人] [行动号召：查看作品/联系]
项目展示
如何有效地呈现作品
何时使用：构建项目板块时
## 项目展示
### 项目卡片元素
| 元素 | 目的 |
|------|------|
| 缩略图 | 视觉钩子 |
| 标题 | 项目是什么 |
| 一句话描述 | 你做了什么 |
| 技术/标签 | 快速浏览 |
| 成果 | 影响证明 |
### 案例研究结构
- 首图/视频
- 项目概述（2-3句）
- 挑战
- 你的角色
- 过程亮点
- 关键决策
- 成果/影响
- 学习收获（可选）
- 链接（线上、GitHub等）
### 展示影响
| 避免 | 改为 |
|------|------|
| “建了一个网站” | “转化率提升40%” |
| “设计了UI” | “用户流失率降低25%” |
| “开发了功能” | “服务于5万用户” |
### 视觉呈现
- 网络/移动设备模型
- 前后对比
- 过程产物（线框图等）
- 复杂工作的视频演示
- 悬停效果提升交互
开发者作品集要点
对开发者作品集有效的做法
何时使用：构建开发者作品集时
## 开发者作品集
### 招聘经理看重什么
1. 代码质量（GitHub链接）
2. 真实项目（不仅仅是教程）
3. 解决问题的能力
4. 沟通能力
5. 技术深度
### 必备项
- GitHub个人资料链接（已整理干净）
- 在线项目链接
- 每个项目的技术栈
- 你的具体贡献（团队项目）
### 项目选择
| 包含 | 避免 |
|------|------|
| 解决真实问题 | 教程克隆 |
| 有用户参与的副业项目 | 未完成项目 |
| 开源贡献 | “即将推出” |
| 技术挑战 | 基础CRUD应用 |
### 技术展示
```javascript
// 展示代码片段以体现：
- 整洁架构决策
- 性能优化
- 巧妙解决方案
- 测试方法
博客/写作
- 技术深度剖析
- 解决问题故事
- 学习历程
- 展示沟通能力
## 反模式
### ❌ 模板化作品集
**为什么糟糕**：看起来与别人雷同。
无法留下深刻印象。
不能展示创意。
易被遗忘。
**改为**：加入个人特色。
自定义设计元素。
独特的项目展示。
文案中的个人风格。
### ❌ 重形式轻内容
**为什么糟糕**：花哨的动画，薄弱项目。
形式大于内容。
招聘经理一眼看穿。
没有技能证明。
**改为**：项目优先，形式第二。
有真实影响的实际工作。
质量胜于数量。
深度胜于广度。
### ❌ 简历式网站
**为什么糟糕**：枯燥，易遗忘。
没有利用好媒介。
毫无个性。
列表代替故事。
**改为**：展示而非讲述。
可视化案例研究。
交互元素。
个性贯穿始终。
## ⚠️ 尖锐边缘
| 问题 | 严重程度 | 解决方案 |
|------|----------|----------|
| 作品集比实际工作更复杂 | 中等 | ## 作品集合理规模 |
| 作品集在桌面端精美，移动端崩坏 | 高 | ## 移动优先作品集 |
| 访客不知道下一步做什么 | 中等 | ## 作品集行动号召 |
| 作品集展示过时或不相关的作品 | 中等 | ## 作品集新鲜度 |
## 相关技能
配合使用：`scroll-experience`、`3d-web-experience`、`landing-page-design`、`personal-branding`
## 何时使用
此技能适用于执行概述中描述的工作流或操作。