個人作品集網站建置工具
協助使用者將自身的背景與作品轉化為清晰、可重複使用的作品集網站。參考系統以一個真實的多頁面 UI/UX 作品集為基礎,但其視覺識別為可選:保留使用者選擇的風格,僅在適用時使用參考結構。
工作流程
- 確定使用者的目標受眾、角色、作品集內容、偏好的技術棧(若有的話),以及他們想要的是單頁還是多頁網站。對於初學者,建議簡單的實作方式,並以白話說明取捨。
- 在填入虛構的個人經歷或專案事實之前,先提議頁面地圖和區塊順序。當缺少的內容會改變故事時,請詢問使用者;否則使用清楚標記的佔位符。
- 建置參考資料/頁面模式.md中描述的共享外殼和可重複使用的區塊。讓專案案例可設定:使用者可以包含、省略及重新排序相關區塊。
- 提供來自參考資料/動畫目錄.md的命名動畫配方。以日常語言描述可視行為,然後使用使用者的技術棧實作所選的配方。不要預設加入所有動畫;使用動畫來釐清層級或互動。
- 在使用者的視覺方向上保持一致,涵蓋字體、顏色、間距、圖像和元件。參考網站的調色盤僅為一個起點主題;主題可以改變而無需更改頁面結構。
- 使佈局具有回應性,並讓互動可透過鍵盤和觸控方式進行。尊重減少動畫的偏好,提供可見的焦點狀態,並在動畫停用時保持基本內容的可見性。
- 總結已交付的頁面/元件和命名動畫,並指出使用者仍需提供的內容。
可重複使用的設計原則
- 以個人的角色和價值為開端,然後讓選定作品易於被發現。
- 保持首頁為簡潔的介紹和入口;讓每個案例研究承載自己的敘事和證據。
- 使用一致的區塊標題模式、間距尺度、導覽、頁尾和專案卡片系統。
- 讓專案頁面共享靈活的順序,而非強迫每個專案採用相同的內容。
- 保持動畫細緻、有目的且一致。動畫名稱描述的是可重複使用的行為,而非特定的函式庫或實作方式。
- 不要將參考資料中的文案、個人資料、專案宣稱、圖片或原始碼複製到新使用者的網站中。要求使用者提供自己的材料,或使用標記過的佔位符。
參考資料
- 在規劃網站地圖或建置頁面及案例研究區塊時,請閱讀參考資料/頁面模式.md。
- 當使用者要求選擇、命名或實作動畫時,請閱讀參考資料/動畫目錄.md。