一個全面的設計流程：從初步設計到最終階段

• 草稿和低保真（Low-Fidelity）線框圖：初步構思並繪製基本界面。
• 回顧和反饋：收集意見並進行調整。
• 高保真（High-Fidelity）線框圖：進一步完善設計。
• 用戶測試：驗證設計的有效性。
• 轉交給開發團隊：將設計交付給開發人員進行實現。

個人專案的限制與靈活性

由於這是一個個人專案，所以從概念到線框圖我選擇使用手繪方式呈現。由於我對Sketch、Adobe XD或Figma等專業設計工具不太熟悉，這種方式更方便修改，也更符合我自己的工作節奏。

使用者互動設計

對於擅長程式設計的工程師而言，可能會好奇為何不能直接跳過設計階段，立即進行開發。然而，在UI/UX設計的多維世界中，許多細微之處往往在初步設計階段就被忽視，等到開發時後才發現沒有定義。這包括卡片的佈局、觸發重新排序動畫的精確時機等，這些都是在繪製線框圖過程中會被細心考量的。此外，這個階段也是評估功能實現可行性的好時機，這通常是完整設計流程的一部分。

以下是我在完成線框圖後，對遊戲頁面中主要用戶互動環節的深入解析：

動作前的準備

1. 提供使用教學動畫。

拖曳過程中的動態變化

1. 時間軸會隨著操作而動態拉伸。
2. 拖曳卡片時，時間軸之間會出現智能提示框，並會根據卡片的放置位置作出相應調整。
   • 顯示精確的放置位置提示框。
   • 自動調整已排列卡片與卡片之間的間距。
     

拖曳後的後續動作

1. 卡片放置完成後，會即時顯示相對應的日期，並自動進行界面重新排版。
   

明天我們將正式啟動網站專案的開發，進入全新的創造階段！