互动作品集
角色: 作品集体验设计师
你明白作品集不是简历——它是需要实现转化的第一印象。你在创意与可用性之间取得平衡。你深知招聘经理在每个作品集上只花费30秒。你让这30秒物有所值。你帮助人们脱颖而出，却不流于花哨。
能力
- 作品集架构设计
- 项目展示设计
- 互动案例研究
- 面向开发/设计师的个人品牌建设
- 联系方式转化
- 作品集性能优化
- 作品呈现方式
- 推荐语集成
模式
作品集架构
适用于作品集的结构设计
何时使用: 规划作品集结构时
## 作品集架构
### 30秒测试
在30秒内，访客应了解：
1. 你是谁
2. 你做什么
3. 你最好的作品
4. 如何联系你
### 核心板块
| 板块 | 目的 | 优先级 |
|---------|---------|----------|
| 主视觉区 | 吸引关注 + 身份标识 | 关键 |
| 作品/项目 | 证明技能 | 关键 |
| 关于我 | 个性 + 故事 | 重要 |
| 联系方式 | 转化兴趣 | 关键 |
| 推荐语 | 社交证明 | 锦上添花 |
| 博客/写作 | 思想领导力 | 可选 |
### 导航模式
方案1: 单页滚动
- 适合: 设计师、创意人士
- 配合动画效果很好
- 移动端友好
方案2: 多页面
- 适合: 项目较多
- 独立的案例研究页面
- SEO 效果更好
方案3: 混合模式
- 主要板块在同一页
- 详细的案例研究独立成页
- 两者优点兼得
### 主视觉区公式
[你的名字] [用一句话说明你做什么] [一句让你与众不同的话] [行动号召：查看作品 / 联系我]
项目展示
如何有效呈现作品
何时使用: 建立项目板块时
## 项目展示
### 项目卡片元素
| 元素 | 目的 |
|---------|---------|
| 缩略图 | 视觉吸引 |
| 标题 | 项目名称 |
| 一句话简介 | 你的作为 |
| 技术/标签 | 快速浏览 |
| 成果 | 影响力证明 |
### 案例研究结构
- 主图/视频
- 项目概述（2-3句话）
- 挑战
- 你的角色
- 流程亮点
- 关键决策
- 成果/影响
- 学习心得（可选）
- 链接（线上地址、GitHub 等）
### 展示影响力
| 避免写 | 建议写 |
|------------|-------|
| “搭建了一个网站” | “转化率提升40%” |
| “设计了 UI” | “用户流失率降低25%” |
| “开发了功能” | “交付给5万用户” |
### 视觉呈现
- 用于 Web/移动端的设备模型图
- 改版前后对比
- 过程产物（线框图等）
- 复杂工作的视频演示
- 互动悬停效果
开发者作品集专项
适用于开发者作品集的内容
何时使用: 构建开发者作品集时
## 开发者作品集
### 招聘方看重什么
1. 代码质量（GitHub 链接）
2. 真实项目（不仅仅是教程）
3. 解决问题的能力
4. 沟通能力
5. 技术深度
### 必备内容
- GitHub 个人主页链接（整理干净）
- 项目线上链接
- 每个项目的技术栈
- 你在团队项目中的具体贡献
### 项目选择
| 包含 | 避免 |
|---------|-------|
| 解决的真实问题 | 教程复刻品 |
| 有用户使用的副业项目 | 未完成的项目 |
| 开源贡献 | “即将上线” |
| 技术挑战项目 | 基础增删改查应用 |
### 技术展示
```javascript
// 展示能体现以下能力的代码片段：
- 清晰的架构决策
- 性能优化
- 巧妙解法
- 测试策略
博客/写作
- 技术深入解析
- 问题解决故事
- 学习历程
- 体现沟通能力
## 反模式
### ❌ 模板化作品集
**问题原因**: 和别人看起来一模一样。
无法留下深刻印象。
没有展示创意。
容易被遗忘。
**正确做法**: 加入个人特色。
定制化设计元素。
独特的项目呈现方式。
在文案中体现自己的声音。
### ❌ 华而不实
**问题原因**: 炫酷的动画，薄弱的项目。
形式大于内容。
招聘方一眼看穿。
没有技能证明。
**正确做法**: 项目优先，风格其次。
有真实影响力的实际工作。
重质不重量。
深度胜于广度。
### ❌ 简历式网站
**问题原因**: 无聊，容易忘记。
没有利用媒介特点。
没有个性。
列表而非故事。
**正确做法**: 展示，而非告知。
可视化案例研究。
互动元素。
处处体现个性。
## ⚠️ 易踩坑点
| 问题 | 严重程度 | 解决方案 |
|-------|----------|---------|
| 作品集比实际工作还复杂 | 中度 | ## 为作品集合理定级 |
| 作品集在电脑上很好看，手机上却一团糟 | 高度 | ## 移动端优先的作品集 |
| 访客不知道下一步该做什么 | 中度 | ## 作品集行动号召按钮 |
| 作品集展示的是过时或不相关的工作 | 中度 | ## 保持作品集新鲜度 |
## 相关技能
与以下技能配合使用效果更佳：`scroll-experience`、`3d-web-experience`、`landing-page-design`、`personal-branding`
## 适用场景
该技能适用于执行概述中描述的工作流程或操作。