社团活动管理系统原型设计

一、原型设计工具对比分析

  1. 墨刀 (Modao)
    优点
    极低学习门槛：纯拖拽式操作，无需编程基础，30 分钟即可上手完成基础原型
    云端协作优势：自动云端保存，版本历史可追溯，支持多人实时协作编辑与评论，分享演示便捷
    海量资源库：内置 15,000 + 行业模板，覆盖 iOS/Android/Web 端主流设计规范，组件复用率高
    AI 辅助功能：支持 AI 自动生成原型界面与需求文档，大幅缩短前期设计时间
    本土化适配：中文界面 + 国内服务器，访问速度快，支持微信扫码预览，符合国内团队使用习惯墨刀
    缺点
    复杂交互能力有限：不支持复杂条件判断、动态数据、函数逻辑，难以实现 B 端系统复杂表单验证与多层级数据联动
    大型项目性能瓶颈：页面数量超过 50 + 时易卡顿，文件体积受限，不适合超大型企业级项目
    依赖网络环境：云端工具必须联网使用，离线状态下功能受限
    高级功能付费：免费版有页面数量限制 (通常 20 页)，团队协作、高级组件等功能需付费订阅
  2. Axure RP
    优点
    极致交互能力：支持条件逻辑、变量、中继器、函数计算，可模拟 "登录失败 3 次锁定账号" 等复杂业务流程
    文档一体化：可直接生成带交互演示的 PRD 文档，支持自定义模板，是产品与开发沟通的标准工具
    离线独立工作：桌面端软件，无需网络即可完整使用所有功能，文件本地存储更安全
    成熟生态系统：10 + 年积累的 UGC 资源库，第三方组件 / 模板 / 插件丰富，适合 B 端项目快速启动
    高保真还原度：支持 HTML5 媒体嵌入、自定义样式，可制作接近真实产品体验的原型
    缺点
    学习曲线陡峭：交互逻辑、动态面板、中继器等功能需系统学习，新手入门周期长 (通常 1-2 周)
    协作体验不佳：默认本地文件，团队协作需反复传输 rp 文件，易出现版本混乱，云服务体验不如原生云端工具
    价格昂贵：终身授权商业版价格超千元，大版本更新需额外付费，个人用户成本高
    移动端适配繁琐：移动端预览需额外配置服务器，真机测试不如墨刀便捷
    界面设计能力弱：UI 设计功能基础，难以制作视觉精美的高保真原型，需配合 Figma/Sketch 使用
  3. Mockplus (摹客)
    优点 
    极速上手体验：界面极简，3 分钟即可完成基础原型设计，交互设置直观，适合初学者
    轻量高效平衡：既保留基础交互功能，又不冗余，适合快速验证产品概念，"关注设计而非工具"
    成本友好：免费版功能齐全 (支持 10 个项目，无页面数量限制)，团队版价格亲民，适合预算有限的团队
    多终端适配：支持桌面端、网页版、移动端同步编辑与预览，适配多种使用场景
    自动标注功能：设计完成后自动生成开发标注，便于开发团队高效获取设计细节，提升协作效率
    缺点
    交互深度有限：虽支持基础交互，但缺乏 Axure 的复杂逻辑能力，无法实现变量计算、多层级条件判断等高级功能
    高级功能不足：无 AI 辅助设计、PRD 文档生成等高级功能，难以支撑全流程设计管理墨刀
    生态资源较少：相比 Axure 和墨刀，第三方组件库与模板资源相对匮乏
    云端协作弱：虽有云服务，但核心定位为桌面端工具，实时协作体验不如墨刀流畅
    大型项目支持不足：适合轻量级项目，处理超复杂页面结构时性能与体验下降
    二、原型设计说明（社团活动管理系统）
    | 用户角色 | 核心诉求 | 使用场景 |
    | --- | --- | --- |
    | 普通学生 | 查看活动、在线报名、签到打卡、了解社团资讯 | 课余时间浏览和参与活动 |
    | 社团管理员 | 发布活动、管理报名名单、签到核验、成员管理 | 日常社团运营与活动组织 |
    | 社团负责人 | 成员任免、考核管理、组织架构维护 | 社团内部管理与团队建设 |
    | 系统管理员 | 整体运营监控、基础数据维护 | 后台管理与数据统计 |
功能板块 功能模块 功能说明
活动管理 活动发布 社团管理员创建活动，填写标题、时间、地点、人数上限、活动详情等
活动管理 活动展示 首页以信息流列表展示进行中及预告活动，支持按分类筛选
活动管理 在线报名 学生一键报名，系统自动记录参与名单
活动管理 扫码签到 活动当日管理员出示签到二维码，学生扫码完成签到
成员组织管理 组织架构展示 社团树形结构展示（部门层级、职务信息）
成员组织管理 加入申请 学生提交入社申请，管理员审批
成员组织管理 职务任免 负责人对成员进行职务调整
成员组织管理 成员考核 记录活动参与率、出勤数据，支持学年考评
资讯/通知发布 社团动态 发布图文动态，展示社团日常
资讯/通知发布 公告通知 系统级和社团级公告推送
资讯/通知发布 活动快讯 活动结束后发布图文回顾
设计维度 设计原则 说明
移动端适配 单手操作友好 核心操作按钮位于屏幕下半区，列表采用卡片式布局，间距适中，便于拇指点击
信息层级 卡片式信息分组 每个活动/社团以独立卡片呈现，标题、时间、状态等关键信息一目了然，减少阅读负担
视觉风格 简约专业 主色调选用沉稳蓝灰系（#2C3E50 / #3498DB），辅以白色底色和适量留白；字体采用无衬线体，字号层级清晰
交互反馈 即时反馈机制 报名/签到等关键操作后立即显示成功/失败状态，伴有轻提示（Toast）或徽章更新
加载策略 渐进加载 列表页采用分页加载（滚动加载），详情页优先展示核心信息（时间、地点），富文本内容延后渲染
实时性 状态同步 报名人数实时更新，签到状态即时刷新，通知消息红点提示

一、首页

界面功能

91b0a7066d729d6c1a16cc5ed1decf59

  • 展示平台最新公告列表（公告标题、发布人、范围、发布时间）

  • 提供快捷操作入口（浏览活动、查看社团、我的报名、个人信息）

  • 展示平台统计数据（社团总数、活动总数、参与人次 — 仅管理员可看）

界面组成

区域 组件 说明
左侧（16列） el-card + el-table 最新公告表格，分页展示最新10条
右侧上部（8列） el-card + el-button × 4 快捷操作卡片，4个按钮跳转到对应页面
右侧下部（8列） el-card + el-statistic × 3 平台数据卡片（仅admin接口未报错时渲染）

操作步骤

  1. 登录系统后默认进入首页

  2. 页面自动调用 GET /notice/list 加载最新公告置入左侧表格

  3. 页面自动调用 GET /statistics/admin（若角色为admin则展示统计卡片，否则忽略异常）

  4. 点击快捷操作按钮可跳转至 活动列表 / 社团列表 / 我的报名 / 个人信息

二、活动列表（ActivityList）

4959fa8ead8528ba23d8f9de59d5b0c5

界面功能

  • 按状态筛选活动（未开始 / 进行中 / 已结束）

  • 按关键字搜索活动

  • 卡片式展示所有已发布活动（标题、地点、时间段、报名人数/上限、简介）

  • 用户可对进行中的活动 立即报名 或 取消报名

界面组成

区域 组件 说明
顶部筛选区 el-card + el-form（inline） 状态下拉框、搜索输入框、搜索按钮
主体列表 el-row + el-col（3列栅格） 每列一张 el-card 展示单个活动信息
底部分页 el-pagination 分页控件，每页9条

活动卡片内容

  • header：活动标题 + 状态标签（info/success/danger）

  • body：地点、时间段、报名进度（已报名/上限）、简介摘要

  • footer："立即报名"按钮 + "取消报名"按钮

操作步骤

  1. 点击侧边栏 活动列表 进入

  2. 可选：选择状态下拉筛选 / 输入关键字搜索，点击"搜索"

  3. 浏览活动卡片，查看活动信息

  4. 点击 立即报名 → 调用 POST /activity/sign/{activityId} → 弹出成功提示

  5. 点击 取消报名 → 调用 DELETE /activity/sign/{activityId} → 弹出成功提示

三、公告通知（NoticeList）

1d0968990ac188f9b134109ded95adf3

界面功能

  • 分页展示所有公告（公告标题、发布人、范围、发布时间）

  • 管理员/社长可 发布公告（弹窗表单）

  • 管理员可 删除 任意公告

界面组成

区域 组件 说明
发布按钮区（admin/president可见） el-card + el-button "发布公告" 按钮，点击弹出对话框
公告列表 el-card + el-table 表格展示公告，含标题/发布人/范围标签/时间
底部分页 el-pagination 分页控件，每页10条
发布对话框 el-dialog + el-form 标题输入框、内容textarea、范围radio（全局/社团内部）

操作步骤

  1. 点击侧边栏 公告通知 进入

  2. 页面自动调用 GET /notice/list 分页加载公告

  3. 发布公告（admin/president）：

    1. 点击"发布公告"按钮 → 弹出对话框

    2. 填写标题、内容 → 选择范围（admin默认全局，president可选社团内部）

    3. 点击"发布" → 调用 POST /notice

  4. 删除公告（admin）：

    1. 点击行内"删除"按钮 → 弹出确认框

    2. 确认后调用 DELETE /notice/{id}

四、我的报名（MySigns）

9f924d9901a77413ac0cc3df0875385b

界面功能

  • 双Tab切换展示：活动报名记录 和 签到记录

  • 报名记录Tab：表格展示（活动标题、报名时间），支持 取消报名

  • 签到记录Tab：表格展示（活动标题、签到时间），只读

界面组成

区域 组件 说明
Tab切换 el-tabs "活动报名" / "签到记录"
报名记录表 el-table 活动标题、报名时间、操作列（取消报名）
签到记录表 el-table 活动标题（惰性加载）、签到时间

操作步骤

  1. 点击侧边栏 我的报名 进入

  2. 页面自动加载：

    1. GET /activity/sign/my → 我的报名列表

    2. GET /activity/checkin/my → 我的签到列表

  3. 在"活动报名"Tab查看已报名的活动

  4. 点击 取消报名 → 确认弹窗 → 调用接口取消 → 刷新列表

  5. 切换到"签到记录"Tab查看历史签到情况

五、个人信息（Profile）

1cadcf28fa3b9dba03807c22e82ab193

界面功能

  • 查看和修改个人基本信息（账号、姓名、角色、学院、手机号）

  • 修改登录密码（需验证原密码）

界面组成

区域 组件 说明
基本信息卡片 el-card + el-form 账号（disabled）、姓名、角色标签（只读）、学院、手机号
修改密码卡片 el-card + el-form 原密码输入框、新密码输入框、修改按钮

操作步骤

  1. 点击侧边栏 个人信息 进入

  2. 页面自动调用 GET /user/info 回填表单

  3. 修改基本信息：

    1. 编辑姓名、学院、手机号

    2. 点击"保存修改" → 调用 PUT /user/profile

    3. 成功后更新 localStorage，顶栏姓名即时刷新

  4. 修改密码：

    1. 在下卡片输入原密码、新密码

    2. 点击"修改密码" → 调用 PUT /user/password

    3. 成功后清空输入框

posted @ 2026-06-05 18:17  xhrnb666  阅读(64)  评论(0)    收藏  举报