系列首篇，記錄校友錄系統前台需求分析、UI 設計決策、Razor 版型規劃與開發工具鏈選型。
一、專案背景與技術選型
- 專案性質：大學畢業專題，單人開發，時程緊湊
- 開發環境：Visual Studio 2012、.NET Framework 4.0
- 核心技術：ASP.NET MVC 4、Entity Framework Code First、Razor、jQuery
- UI 風格：Metro (Modern UI) 磚塊佈局，適合響應式、易於實作
選擇 Metro 風格原因：不需複雜 CSS 定位、磚塊大小固定 (1x/2x/4x)、自由浮動排版、視覺清新符合校園氣息。
二、整體版型規劃
Layout 主版頁結構
- 頂部導覽列：參考 QQ 空間風格，含 Logo、搜尋、用戶選單
- 標題區：部落格式標題、副標題、背景圖
- Metro 展示區：核心內容區，磚塊規格 1x/2x/4x，CSS `float` 排版
- 左側全域控制項：摺疊式面板，含快捷功能入口
Razor 版型優勢
- 區塊：`@RenderSection` 實現內容區塊插入，類似 AOP 切面
- HtmlHelper：強型別綁定、自動產生驗證屬性、防 XSS 編碼
- 關注點分離：視圖純 HTML + Razor 標記，無 `runat="server"`、ViewState、PostBack 概念
三、核心頁面原型設計
登入/註冊頁
- 單欄置中卡片式佈局
- 即時驗證提示（jQuery Validate）
- 第三方登入按鈕預留位置
首頁/班級列表頁
- Metro 磚塊呈現班級卡片：封面圖、班級名、學校、成員數、最新動態
- 無限捲動載入 (AJAX 分頁)
- 篩選器：學校、關鍵字、排序方式
班級內頁：相簿、留言、通訊錄
- 頂部 Tab 切換：動態、相簿、留言、成員、設定
- 相簿：瀑布流佈局、Lightbox 預覽、批次上傳
- 留言：巢狀回覆、@提及、表情符號
- 通訊錄：名片式列表、發送小紙條 (站內信)
響應式驗證
- 瀏覽器視窗縮放時，Metro 磚塊自動重排，內容區置中
- 媒體查詢調整磚塊尺寸與間距，支援平板/手機
四、設計工具與工作流
- 原型繪製：Axure RP / 手繪草圖 → 影像切版
- 切圖與標註：Photoshop 切圖、標註尺寸色碼
- 前端實作：CSS3 Flexbox/Float、LESS 預處理器、BundleConfig 壓縮合併
- 版本控制：Git 管理原型圖、切圖資產、CSS/JS 檔案
五、需求驅動資料模型策略
- 先完成前台原型，梳理所有 UI 需呈現的資料欄位
- 從 UI 欄位反推資料表結構（自下而上）
- 整理關聯關係，補充系統必要欄位（建立時間、狀態、軟刪除旗標）
- 產出 ER 圖，評審後進入 Code First 實體編碼
「一張原型圖勝過幾百行程式碼」—— 前台設計是後端模型的最佳規格書。
六、下一步
依據前台需求設計實體模型（下一篇），建立 `DbContext`、遷移資料庫、實作 Repository 基礎介面。
