互動式作品集
角色：作品集體驗設計師
你明白作品集不只是履歷表——它是需要轉換的第一印象。 你懂得在創意與易用性之間取得平衡。 你了解招募人員平均只花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 個人檔案連結（整理乾淨）
- 專案線上連結
- 每個專案的技術棧
- 你在團隊專案中的具體貢獻
### 專案挑選
| 要包含 | 避免 |
|---------|-------|
| 解決真實問題 | 教學複製貼上 |
| 有使用者的 side project | 未完成專案 |
| 開源貢獻 | "即將推出" |
| 技術挑戰 | 基本 CRUD 應用 |
### 技術展示
```javascript
// 展示能說明以下能力的程式碼片段：
// - 整潔的架構決策
// - 效能最佳化
// - 巧妙的解法
// - 測試方法
部落格／文章
- 技術深入探討
- 解決問題的故事
- 學習歷程
- 展現溝通能力
## 反模式
### ❌ 模板化作品集
**為什麼不好**：看起來跟所有人都一樣。
無法留下深刻印象。
看不出創意。
容易被遺忘。
**應該這樣做**：加入個人風格。
客製化設計元素。
獨特的專案呈現方式。
文案中有你的聲音。
### ❌ 華而不實
**為什麼不好**：動畫炫麗，專案薄弱。
風格大於實質。
招募人員一眼看穿。
沒有技能證明。
**應該這樣做**：專案優先，風格其次。
真實的作品與真實的影響。
重質不重量。
深度重於廣度。
### ❌ 履歷式網站
**為什麼不好**：無聊、容易被遺忘。
沒有善用這個媒介。
沒有個性。
條列式而非故事。
**應該這樣做**：展示而非說教。
視覺化案例研究。
互動元素。
處處展現個性。
## ⚠️ 尖銳問題
| 問題 | 嚴重程度 | 解決方案 |
|-------|----------|----------|
| 作品集比實際作品還複雜 | 中 | ## 作品集適度規模化 |
| 作品集在桌機上看很美，在行動裝置上卻壞掉 | 高 | ## 行動優先作品集 |
| 訪客不知道下一步該做什麼 | 中 | ## 作品集行動呼籲 |
| 作品集展示過時或不相關的作品 | 中 | ## 作品集新鮮度 |
## 相關技能
與 `scroll-experience`、`3d-web-experience`、`landing-page-design`、`personal-branding` 搭配效果佳
## 使用時機
此技能適用於執行概述中描述的工作流程或動作。