三亩地 三亩地SAN MU DI · CODE DIARY
ARTICLE DETAIL

日记详情

真实记录编程学习的某一天,欢迎挑你感兴趣的翻一翻。

高校学生选课系统原型设计

高校学生选课系统原型设计

一、原型工具对比

  1. 墨刀
    适用领域:快速制作网页、移动端产品原型,多用于课程作业、小型产品快速演示。
    优点:拖拽操作简单,新手零基础快速上手,自带大量模板,做完可以一键生成分享链接。
    缺点:复杂联动逻辑无法实现,免费版页面数量有限。

  2. Axure RP
    适用领域:企业级后台系统、大型项目高保真原型开发。
    优点:功能最全,支持变量、动态面板、复杂条件交互,能还原真实软件逻辑。
    缺点:学习周期长,软件付费,上手难度大,不适合短期课程作业。

  3. Mockplus(摹客)
    适用领域:个人低保真原型、简单管理系统草图设计。
    优点:免费基础功能够用,界面清爽,内置常用表单组件。
    缺点:页面动效、手势交互薄弱,复杂表格排版麻烦。
    二、学生选课系统原型设计说明

  4. 主题说明
    主题:高校学生选课系统
    功能:学生登录系统、浏览选修课、选课、退课、查看已选课程与个人课表。
    设计考量:页面简洁、功能分区清晰,选课满额、时间冲突预留提示逻辑,按钮位置醒目方便操作。

  5. 四个界面详情
    (1)登录页面
    界面功能:校验学生账号密码,进入系统主页。
    界面组成:系统标题、学号输入框、密码输入框、登录按钮、忘记密码文字。
    前置条件:学生拥有在册账号。
    后置条件:账号正确跳转首页;账号错误弹出提示。
    操作步骤:填写学号和密码,点击登录按钮,验证通过进入首页。
    屏幕截图 2026-05-29 190456
    (2)系统首页
    界面功能:全系统功能导航入口。
    界面组成:欢迎文字、四大功能按钮(选课中心/我的课表/已选课程/个人中心)、系统公告栏。
    前置条件:用户成功登录。
    后置条件:点击对应按钮跳转至对应子页面。
    操作步骤:登录自动进入首页,点击选课中心跳转选课列表。
    屏幕截图 2026-05-29 185246
    (3)选课中心页面
    界面功能:检索课程、查看课程详情、提交选课。
    界面组成:顶部搜索框、课程筛选栏、课程列表(课程名/任课老师/学分/剩余名额+选课按钮)。
    前置条件:从首页点击选课中心进入。
    后置条件:选课名额充足则选课成功,名额已满弹窗提示无法选课。
    操作步骤:搜索筛选目标课程,点击选课按钮,成功后课程存入已选列表。
    屏幕截图 2026-05-29 185259
    (4)已选课程页面
    界面功能:查看全部已选课程,自主退课。
    界面组成:页面标题、已选课程列表、每条课程附带退课按钮。
    前置条件:学生至少成功选中一门课程。
    后置条件:退课确认后课程移除,课程名额自动释放。
    操作步骤:首页打开已选课程,选中课程点击退课并确认。
    屏幕截图 2026-05-29 185315

  6. 页面流转流程
    登录页面 → 系统首页 → 选课中心 → 选课成功 → 已选课程页面

← 返回列表