04 workskm 網站設計規劃書

🎯 規劃原則

✅ 不可變動區域

• 資源區頁面架構（skills-list.html、memodata.html、knowbase.html）
• 資源區導航選單結構與連結
• 現有備忘卡片展示邏輯
• manifest.json 技能資料庫結構

🔄 可優化區域

• 首頁 Hero 區視覺設計與內容
• 導航欄主選單結構（非資源區部分）
• 新增功能模組區塊
• 整體視覺風格統一

📊 新版規劃 vs 現有首頁比對分析

項目	新版規劃書要求	現有首頁狀態	狀態
頂部搜索欄	支援技能名稱、標籤、評分篩選	無搜索功能	新增
熱門技能區	付費 Top 10 技能卡片展示	無此區塊	新增
新手上架區	最近 7 天優質技能推薦	無此區塊	新增
需求廣場	用戶發布的待解決需求和懸賞金額	無此區塊	新增
重要備忘區	系統自動同步的備忘卡片	已實現（3個備忘卡片）	保持
資源區導航	技能清單/重要備份/知識庫/發布技能/關於	已實現下拉選單	保持
Hero 區設計	簡潔的平台形象展示	三專案圖示入口（AI市集+龍蝦版+技能廣場）	調整
主導航選單	課程內容/學習分享/報名通道/常見問題/資源區	已實現但部分無連結	調整

🏗️ 資訊架構規劃（IA）

第一層：主導航

🏠

首頁

index.html

🔍

技能探索

搜尋+分類

📚

資源中心

下拉選單

📤

發布技能

publish.html

ℹ️

關於

about.html

第二層：資源中心（不可變動）

🛠️

技能清單

skills-list.html

📋

重要備份

memodata.html

📚

知識庫

knowbase.html

📤

發布技能

publish.html

ℹ️

關於

about.html

第三層：首頁內容區塊

1. Hero 區 — 平台形象 + 快速入口

2. 搜索區 — 技能搜尋 + 篩選器

3. 熱門技能區 — Top 10 付費技能展示

4. 新手上架區 — 最近 7 天優質技能

5. 需求廣場 — 用戶需求 + 懸賞金額

6. 重要備忘區 — 現有 3 個備忘卡片（保持不變）

🎨 視覺設計規範

色彩系統

主色 Indigo

#6366f1 — 主要按鈕、連結

輔色 Purple

#8b5cf6 — 強調、標籤

背景 Dark

#0f172a — 深色背景

卡片 Card

#1e293b — 卡片背景

字體規範

主字體 Noto Sans TC

標題大小 3rem - 5rem

內文大小 0.875rem - 1rem

行高 1.6 - 1.8

間距規範

區塊間距 3rem - 5rem

卡片內距 1.5rem - 2rem

元素間距 0.75rem - 1.5rem

網格間距 1rem - 2rem

組件規範

卡片圓角 1rem (16px)

按鈕圓角 0.5rem (8px)

陰影玻璃擬態 + 微光

動畫 fadeIn 0.6s ease-out

📄 首頁結構規劃

1. Hero 區（重新設計）

• 平台主標題：workskm 技能廣場
• 副標題：AI 驅動的個人知識資產累積與變現平台
• 快速統計：技能數 / 用戶數 / 交易量
• CTA 按鈕：探索技能 / 發布技能

2. 搜索區（新增）

• 搜索輸入框（placeholder：搜尋技能名稱、標籤...）
• 篩選標籤：熱門 / 最新 / 免費 / 付費
• 分類快捷：開發 / 設計 / 行銷 / 生產力

3. 熱門技能區（新增）

• 標題：🔥 熱門技能（付費 Top 10）
• 技能卡片：圖示 + 名稱 + 價格 + 評分 + 銷量
• 橫向滑動或網格布局
• 「查看更多」連結至 skills-list.html

4. 新手上架區（新增）

• 標題：✨ 新手上架（最近 7 天）
• 技能卡片：圖示 + 名稱 + 創作者 + 上架時間
• 「新品」標籤

5. 需求廣場（新增）

• 標題：📢 需求廣場
• 需求卡片：需求描述 + 懸賞金額 + 發布時間
• 「發布需求」按鈕

6. 重要備忘區（保持不變）

• 現有 3 個備忘卡片完整保留
• 卡片樣式與現有保持一致
• 連結維持不變

💡 實施建議

1

Phase 1：Hero 區優化

重新設計 Hero 區，移除三專案圖示，改為平台形象展示 + 快速統計 + CTA

2

Phase 2：搜索功能

新增搜索區塊，實現前端搜尋功能（暫不連接後端）

3

Phase 3：技能展示區

新增熱門技能區、新手上架區，從 manifest.json 讀取數據展示

4

Phase 4：需求廣場

新增需求廣場區塊，展示用戶需求（靜態數據）

workskm 網站與網頁設計規劃書