# 校汇圈 · 校园社交 App 原型

一套可直接离线打开的移动端原型：10 个页面 + 作品集主页 + 图文说明 + 完整 PRD + 12 张高清图。

## 怎么打开

双击 `index.html`，用 Chrome 或 Edge 打开即可。作品集主页是深色单页文档，按九个板块展开：问题与定位、竞品分析、页面清单、逐屏说明、设计规范、核心流程、衡量指标与数据、版本规划与风险、交付说明。其中「逐屏说明」逐屏展示 10 个页面截图，每屏都可以点「打开原型」进入对应的可交互页面。

也可以直接看单页：

| 编号 | 页面 | 文件 |
| --- | --- | --- |
| 01 | 校园动态广场（活动通知） | `pages/home.html` |
| 02 | 活动详情 | `pages/activity-detail.html` |
| 03 | 寻找搭子 | `pages/partner.html` |
| 04 | 搭子详情 | `pages/partner-detail.html` |
| 05 | 社团爱好圈 | `pages/clubs.html` |
| 06 | 社团主页 | `pages/club-detail.html` |
| 07 | 二手交易市场 | `pages/market.html` |
| 08 | 商品详情 | `pages/market-detail.html` |
| 09 | 消息中心 | `pages/messages.html` |
| 10 | 个人中心 | `pages/profile.html` |

## 两份文档

- `spec.md`：图文作品集版。含封面、竞品分析、逐屏说明（这一屏解决什么问题、设计要点、规则要点）与设计规范，嵌入 13 张配图，适合直接当作品集展示。
- `spec-prd.md`：文字版 PRD。字段级规则、异常边界、数据模型、埋点与验收清单的完整版本，适合评审与开发对接。

## 现成的高清图

`assets/screens/` 下已经导出：

- `00-cover.png`：封面（2400 × 1500）
- `01-home.png` … `10-profile.png`：10 张页面长图，852 × 1760（2 倍图）
- `00-overview.png`：全部页面总览（1724 × 1659）
- `00-style-guide.png`：设计规范（1500 × 1460）

这些图可以直接拖进墨刀当画板底图。

## 尺寸与规范

- 画板尺寸：390 × 844（iPhone 14 逻辑分辨率），单页 `body` 上带手机外壳，方便截图。
- 主色 `#146B5C`，点缀色 `#DD6B34`，价格与警示色 `#C2453C`。
- 图标为 24×24 线性图标，集中在 `assets/js/icons.js`，页面不使用表情符号。
- 所有样式在 `assets/css/style.css`，修改 CSS 变量即可整体换色换圆角。

## 导入墨刀

1. 浏览器打开 `index.html`，保持 100% 缩放。
2. 直接用 `assets/screens/` 里的页面长图，或单独打开 `pages/xxx.html` 后截取其中 390 × 844 区域。
3. 墨刀新建「移动端」画板，尺寸 390 × 844，按 01–10 命名并粘贴截图。
4. 连线：列表卡片热区 → 对应详情页；底部标签栏五个入口互相跳转。

若希望保留真实交互，可把 `pages/` 目录部署到任意静态托管，再用墨刀的「网页嵌入」组件挂载对应链接。

## 说明

页面内的活动、搭子、社团、商品与用户信息均为演示数据，不包含真实接口调用；活动封面与商品图片使用带类别标注的色块占位，避免引入外部图片资源。