面向对象设计 7.2-3 Web系统GUI设计.docx

计7.2*3 lebMMGUI^• 掌握Web页 面设计工具应用 • 掌握Web页面设计实践方法Web系统GUI设计案例针对一个课程学习评价系统的教师用户子系统，设计课程班级的学生学习成 绩管理、课程学习成果达成分析，以及课程试卷分析报告等功能Web界面在设计该子系统界面时，采用原型开发工具Axure RP分别对系统页面结构、 页面布局、页面导航、页面输入、页面输出等界面内容进行建模设计，从而 为开发课程学习评价子系统界面给出设计蓝图与原型方案1. Web系统页面结构设计谋程教师主页 函呈学习评f介成果达同分析试得分析报告Axure RP建模实践：Web系统页面结构设计建模FnlikrAh记事本SQL Developer最近0课程字习评价・Web・rp0导航结构.rpB微课学习■原型设计.rpFoxmail36盗全浏览器腾讯课堂安奇之强力卸载电脑中的软件Google ChromeRPAxure截图工具所有程序搜球序心件pl关机2. Web系统页面布局设计课程学习大数据效劳平台 欢送您XXX老师教师课程噩 醴考勤WS 醴测 能力测课程作业is 曜报韵析 课程学习浙 课程析首页Axure RP建模实践：Web系统页面布局设计建模File Edit View Project Arrange Publish Team Account Help100%=Log Inf I2) X 4 UndoLJ & l-U 阻，RedoPages ) S] QA D Home4 □课程炒子系饨课程教怖子系统0 1JJInspector Page200300LbmXmJ400500600PROPERTIESNOTESy Interactions4> Add CaseD登录吨 t> D系统页面结构LibranesAll LibrariesLabelParagraphHorizontal LineVertical Une"? OnPageLoad"T OnWindowResizeOnWindowScrollMore EventsOutline Page Y QD课程教舞子系统Dynamic Panel□OG3. Web系统页面导航设计Axure RP建模头践：Web系统页面导航设计建模File Edit View Project Arrange Publish Team Account Help4 Undo, RedoPages 0 [] Qa D谡程教桁系统D系统登陆D 1 :课程教部首页，■回 E "100%2:课程字习评价2 1 :期钵缝祚2 4 :试析报告2 2 :1 :深程我怖西贞NOTESSTYLEy Interactions+ Add CaseInspector Page2:浬程字习评价2.1: 柴23:成果达成分析24:试卷分析报告t> D谡人子系统』D系统页面结构图D谀程救肺□黄任教师LibranesW OnPageLoadOnWindowResizeV OnWindowScrollMore EventsAdaptive口 Enablednr4. Web系统页面输入设计课程学习大数据效劳平台用户名:密码:角色:登陆注册忘记密码Axure RP建模实践：Web系统登录页面设计建模File Edit View Project Arrange Publish Team Account HelpFTx 121 X 4 UndoLJ & L3 茵, Redo一 D课程咖子系统厦回E 3100% ▼]I 画■ I J I |・|, DO:Log InQ 取登陆 明的成绶洛入1 :度程救师黄页 24:试卷分折报告23:成果达成分析2 2：课哄▼Inspector PageNOTESPROPERTIESPages Q ESTYD，D1 :课程切而首页2:课程字习评价a□2 1 :期末成绫采集D明她成的入>□2 2:课程成绩生成AD2 3 : 分析>D2 4 : 忻报告用户名:密码:课程学习大数据效劳平台y Interactions+ Add Case"Tf OnPageLoad"? OnWindowResizeOnWmdowScrollMore Eventst> □课程奂麦人子系统 t> D系统页面姑构图Libraries 三 Q角色:⑥昔通教师O责任教师O系统管理员忘记宇码Adaptive! EnabledHV5. Web系统页面输出设计课程学习大数据效劳平台ig M欢送怒XXX老局□学习评价期末成绩采集 课程成绩生成 瞄达成分忻 试卷分忻报告分析导航:首页-> 学习评价・X果程液斐生反学期：20XX-20XX- ▼ 浬程：Oracle致据幸▼ 班汲20XX090 ▼ 成绩：期末成绩▼序号学号姓名期末话卷成绩备注1李明9223KT8730生成 导出Axure RP建模实践：Web系统页面输出设计建模File Edit View Project Arrange Publish Team Account Help4 Undo■ RedoPages Q 住］Q 2 2 2 :半期成绫 2 2 3 :球成绶，D课程制币子泰统系统蚁1:漫程教师首页2:浸程字习评价D 21 :期末成绫采集 □明细成河入/ D 2.2:课程戒境生或100%06-100< I 2 2 5:200 3002 2 1 :平时成透2.2 :课程成馈生成Inspector Rectangle500(Rectangle Name)DDDDD2 2 1 :物成续2 2.2 :朝畛22 3 : 续2 2 4 :期未成续2.2.5 :剽呈成续O： D 2 3:成果达成分析> D 2.4：^e^忻报告> D漂程负麦人子系统/ D 系统页面结构图D溟程故肺D法任航OconrLibraries教师课程管理 课堂考勤管理 课堂测试管理 能力测试管理 课程作业管理 实验报瀚知 课程学习评瘠.期莉^球普 课政绩/ 成果达成分4试卷分析报典 课程大数据分析课程学习大数据效劳平台位置苜页》学习评价〉课程成绩生避「PROPERTIESy InteractionsNOTES学期课程班级+ Add Case=Cre,OnClickV OnMouseEnterOnMouseOutMore EventsText LinkSelect ShapeInteraction Styles.MouseOver0? MouseDownSelected6.Web系统页面实现结果。