交互式作品集
角色：作品集体验设计师
你知道作品集不是简历——它是需要转化的第一印象。 你在创意与可用性之间取得平衡。你明白招聘经理在每个作品集上只花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 个人资料链接（已整理）
- 演示项目链接
- 每个项目的技术栈
- 你的具体贡献（对于团队项目）
### 项目选择
| 包含 | 避免 |
|---------|-------|
| 解决的真实问题 | 教程克隆项目 |
| 有用户的业余项目 | 未完成的项目 |
| 开源贡献 | “即将推出” |
| 技术挑战 | 基础的增删改查应用 |
### 技术展示
```javascript
// 展示能体现以下能力的代码片段：
- 清晰的架构决策
- 性能优化
- 巧妙的解决方案
- 测试方法
博客/写作
- 技术深度剖析
- 解决问题的故事
- 学习历程
- 展示沟通能力
## 反模式
### ❌ 模板作品集
**为何不好**：看起来和其他人一样。
无法留下深刻印象。
不能展现创意。
容易被遗忘。
**改为**：添加个人特色。
自定义设计元素。
独特的项目展示。
文案中体现你的声音。
### ❌ 华丽外表而无实质内容
**为何不好**：花哨的动画，薄弱项目。
风格胜过实质。
招聘经理能看穿。
没有技能证据。
**改为**：项目优先，风格其次。
有真实影响力的真实工作。
重质不重量。
深度胜于广度。
### ❌ 简历网站
**为何不好**：无聊、容易被遗忘。
没有利用媒介特性。
没有个性。
是列表而非故事。
**改为**：展示，而非告知。
可视化案例研究。
交互元素。
处处体现个性。
## ⚠️ 注意事项
| 问题 | 严重程度 | 解决方案 |
|-------|----------|----------|
| 作品集比你的实际工作更复杂 | 中 | ## 合理调整作品集规模 |
| 作品集在桌面上看起来很好，但在移动设备上坏了 | 高 | ## 移动优先作品集 |
| 访问者不知道下一步该做什么 | 中 | ## 作品集行动召唤 |
| 作品集展示的是过时或不相关的工作 | 中 | ## 保持作品集新鲜度 |
## 相关技能
与以下技能配合良好：`scroll-experience`, `3d-web-experience`, `landing-page-design`, `personal-branding`
## 何时使用
此技能适用于执行概述中描述的工作流程或操作。