🎯 今日任務目標

✅ 拆解首頁模組區塊，定義每一區的功能與意圖
✅ 設計資訊層級邏輯，確保視覺與內容一致
✅ 參考網站設計範例，思考最適合自己的模組組合
✅ 初步架構 Figma 設計稿中的區塊結構（可手稿亦可數位）

📦 為什麼要拆解首頁？

首頁是一個品牌網站的門面，對我這個主打「故事 x 白話區塊鏈」的自媒體來說，更是我宇宙入口的大門。但如果只是堆內容，沒有邏輯、順序與模組設計，很容易就變成雜亂的資訊垃圾場。

今天的目標就是把首頁的「各個區塊模組」拆解開來，思考每一塊的目的、要傳達的訊息，以及怎麼跟前後段內容串連與呼應。

🔍 我的首頁模組構想（初版）

以下是目前我腦中構思的區塊模組們，之後會視實際內容做微調：

1. Hero 區塊

• 主視覺圖 + 口號文案
• 告訴大家這是什麼樣的網站、可以學到什麼
• 破題有小白/專業模式介紹切換功能

2. 故事地圖導覽區（Story Map）

• 用互動地圖導引不同文章系列
• 像是童話關卡地圖，使用者可以自由選擇想看的區塊鏈主題或等級（小白 / 進階）
• 最新文章、影音介紹

3. 訂閱 + 支援我（CTA）

• 訂閱電子報
• 支持作者：Buy Me A Coffee / 贊助鏈接（初步不會加上但保留彈性）

💡 設計邏輯提醒自己幾件事

• 模組要有節奏，適當留白跟些微的動態效果，增加吸引力，不要一頁到底像長條便當流水帳 📏
• 每個區塊都要有清楚目的（是資訊、引導、互動還是社群？）
• 注意閱讀節奏與留白，讓人滑起來舒服
• 同時也要考慮未來可擴充性（有內容更新怎麼呈現，例如增加點遊戲化等）

✏️ Figma 中進行中……

我已經開始在 Figma 中草擬各模組的區塊輪廓與初步內容呈現方式，有些區塊可能會設計成「左右區塊」、「卡片式」，有些會搭配角色出現。

這次會把每個模組都設成可複用元件（Component），方便後續套用在不同頁面上。

📌 小結：模組拆解 = 建宇宙的樂高磚！

今天雖然沒有視覺大突破，但這一步其實是「網站結構邏輯的藍圖」。
像是先畫出一塊塊樂高磚的輪廓，之後才能自由組合，創造出真正的故事宇宙🧱🌌
明天我會開始進入內容排版細節，像是文字內容怎麼搭配圖片、引導 CTA、互動元件設定等等，讓整個首頁更有靈魂！有更完整視覺出爐再分享畫面給大家看啦！