人机交互课程设计

人机交互》综合设计报告设计名称： 人机交互综合设计选题名称：基于FrontPage的web界面 社交网页姓名：李志祥学号：200903010044专业班级：09级计算机科学与技术应用班 系（院）：计算机科学与信息工程学院 设计时间：2012年5月26日 目录TOC\o"1-5"\h\z\o"CurrentDocument"一、概述 4\o"CurrentDocument"1.1系统设计目的 4\o"CurrentDocument"1.2系统设计意义 4\o"CurrentDocument"二、需求分析 4\o"CurrentDocument"2.1功能需求 4\o"CurrentDocument"2.1.1登陆功能 42.1.2密码提醒功能 4\o"CurrentDocument"2.1.3注册功能 4\o"CurrentDocument"2.1.4上传下载功能 4\o"CurrentDocument"2.2界面需求 4\o"CurrentDocument"三、总体框架 53.1功能框架 53.2系统实现框架 5四、对象建模分析 6\o"CurrentDocument"4.1用户登陆及身份验证 6\o"CurrentDocument"4.2用户注册功能： 7\o"CurrentDocument"4.3意见反馈功能…… 74.3视频功能…… 84.3图片功能…… 8\o"CurrentDocument"4.3社区板块功能…… 9\o"CurrentDocument"五、 界面概要设计 95.1主界面设计 95.2登陆界面设计 10\o"CurrentDocument"5.3视频社区界面设计 10\o"CurrentDocument"5.2图片社区界面设计 10\o"CurrentDocument"5.2社交社区界面设计 11\o"CurrentDocument"六、 视图的关联设计 11\o"CurrentDocument"七、 详细设计 12\o"CurrentDocument"7.1登陆注册界面设计 127.2视频社区界面设计 12\o"CurrentDocument"7.2.1观看视频 12\o"CurrentDocument"7.2.2上传视频 13\o"CurrentDocument"7.2.3下载视频 13\o"CurrentDocument"7.2.3评论留言 13\o"CurrentDocument"7.3图片社区界面设计 13\o"CurrentDocument"7.3.1上传图片 13\o"CurrentDocument"7.3.2下载图片 13\o"CurrentDocument"7.3.3评论留言 13\o"CurrentDocument"7.3.4建立和浏览相册 13\o"CurrentDocument"7.4社交社区界面设计 13\o"CurrentDocument"7.4.1检索热帖 13\o"CurrentDocument"7.4.1发帖 14\o"CurrentDocument"7.4.1下载资源 14\o"CurrentDocument"7.4.1评论留言 14\o"CurrentDocument"7.4.1建立社区 14\o"CurrentDocument"八、总结 14\o"CurrentDocument"8.1学习体会 14\o"CurrentDocument"8.2存在的不足 14一、概述系统设计目的我校学员众多，但是大家的了解机会不是很多，大家很希望有一个展示自己，和他人交流的平台，所以我建立此网站的目的是提供一个平台，促进交友，让大家互相了解。系统设计意义此系统的出现可以给广大学员提供方便快捷个人信息介绍，可以提供想交友的圈子，可以在线共享视频，互动留言。二、需求分析功能需求登陆功能由于系统已经对每名用户登记在系统之内，根据数据库中的存储数据验证用户，看是否是合法用户，如果合法进入系统，不合法时进行错误提示。密码提醒功能由于用户对密码记忆保持时间不是很长，有可能忘记密码，界面提供提示功能，方便用户联想自己的密码。注册功能当用户不是合法用户，用户需要加入系统中并成为合法用户，所以界面提供注册功能。上传下载功能由于用户在界面操作时想将一些资源放在网页中，也想下载一些功能想让用户下载，所以界面提供上传下载功能。界面需求符合Windows的一贯风格，具有易学易用的特征界面颜色比较深沉界面的风格以交互式为主，并加入一些介绍内容界面中内容积极健康向上，杜绝不合法内容三、总体框架

3.1功能框架3.2系统实现框架

用户登陆及身份验证F-"输入用户名登陆输入密码用户密码验证密码提示IF-"输入用户名登陆输入密码用户密码验证密码提示I用户名验证 •用户注册功能：当用户不是系统中的用户时可以申请注册，在进行登录，用户需要填写用户名、密码、邮箱等进行注册意见反馈功能

用户在体验过网页后可以将自己的意见进行填写发表，系统将收集意见进行汇总，报告给管理员。视频功能.传视频登陆成功视频功能观看视频Include-：.传视频登陆成功视频功能观看视频Include-：.下载视频7 •评论留言S图片功能o登陆成功图片功能■'建立相册-评论留言Include ＜下载资源）4.6社区板块功能发帖O登陆成功社区功能deI”■-检索热帖■'建立社区Include■下载资源Include、 评论留言丿用户五、界面概要设计5.1主界面设计5.2登陆界面设计5.3视频社区界面设计丛站量*i+Ei«i：2i'MiiBjftp«y：imomtii・I_曰m5.4图片社区界面设计」丽-ufltir砸・OwdxA■・州甜fRmrSEitt力品FJ書11上.J.REfc5.5社交社区界面设计六、视图的关联设计首页11F注册M 登录意见反馈(―1f图片社区视频社区社交社区七、详细设计7.1登陆注册界面设计当用户进入网页后可以实现浏览功能，但要进行网页中的功能操作时需要进行登录，用户输入账号和密码开始登陆，系统进行身份验证，如果成功授予用户界面中的功能，如果不成功,提示错误，请再次登陆或者退出。当用户不是合法用户时可以进行注册，输入用户名和密码后点击注册，当通过系统的检测，用户名和密码均合法后注册成功。视频社区界面设计用户可以在登陆后进入到视频板块，该板块中用户可以观看、浏览视频，也可将自己的视频进行上传或者下载板块中的视频资源。观看视频当用户进入到视频板块中后可以观看网站中的视频，但需要安装播放插件才可以观看。视频播放的界面采用嵌入式界面，无需打开新的界面。上传视频本功能是用户登录成功后才能拥有的权利。该界面同样采用的是嵌入式界面。当用户上传视频时，系统会检测和提示该网页支持的视频格式，当与该格式匹配时，进行上传。下载视频本功能是用户登录成功后才能拥有的权利。用户可以任意下载网页中的共享视频资源。评论留言本功能是用户登录成功后才能拥有的权利。该界面同样采用的是嵌入式界面，用户可以对视频资源发表自己的意见。7.3图片社区界面设计用户在登录后可以进行网站内部的图片操作，例如更改自己的头像，组建自己的相册，浏览别人图片，下载图片资源。上传图片本功能是用户登录成功后才能拥有的权利。该界面同样采用的是嵌入式界面。当用户上传图片时，系统会检测和提示该网页支持的图片格式，当与该格式匹配时，进行上传。下载图片本功能是用户登录成功后才能拥有的权利。用户可以任意下载网页中的共享图片资源。评论留言本功能是用户登录成功后才能拥有的权利。该界面同样采用的是嵌入式界面，用户可以对图片资源发表自己的意见。建立和浏览相册本功能是用户登录成功后才能拥有的权利。用户可以根据自己的喜好和信息建立自己的相册，也可以去浏览查看其他共享相册。社交社区界面设计用户登陆后可以根据自己的喜好建立板块，可以在板块中发表日志，帖子。其他人可以进行浏览，同时也可以留言，评论。也可以下载板块中的共享资源。检索热帖用户登陆后可以在社交板块启用功能，用户可以根据需要输入关键字，搜索出包含关键字的帖子，在进行浏览。发帖用户登陆后可以在社交板块启用功能，用户在自己的社区可以输入文字内容，例如日志文章等帖子。下载资源本功能是用户登录成功后才能拥有的权利。用户可以任意下载网页中的共享资源。评论留言本功能是用户登录成功后才能拥有的权利。该界面同样采用的是嵌入式界面，用户可以对帖子发表自己的意见。建立社区本功能是用户登录成功后才能拥有的权利，用户可以根据需要和喜好建立自己的个人社区或者公共社区。八、总结8.1学习体会通过对人机交互的设计，发现在设计过程中建立模型，构建视图还是比较繁琐的，因为要考虑到界面中的