1、人机交互基础课程设计报告成绩 课程设计报告 题 目 人机交互web界面课程设计课 程 名 称 人机交互基础教程 院 部 名 称 软件工程 专 业 软件工程 班 级 学 生 姓 名 学 号 课程设计地点 课程设计学时 32课时 指 导 教 师 金陵科技学院教务处制一 实验目的和要求1 熟悉人机交互界面的设计原则；2 熟悉人机交互界面的模型和实现；3 熟悉人机交互界面的可用性评估；二 预备知识1 图形用户界面的三个重要思想；(1)桌面隐喻(desktop metaphor)指在用户界面中用人们熟悉的桌面上的图例清楚地表示计算机可以处理的能力。 隐喻的表现方法:静态图标、动画、视频 (2)所见即所得
2、(What You See Is What You Get，WYSIWYG) 显示的用户交互行为与应用程序最终产生的结果是一致的。 (3)直接操纵(direct manipulation) 直接操纵是指可以把操作的对象、属性、关系显式地表示出来，用光笔、鼠标、触摸屏或数据手套等指点设备直接从屏幕上获取形象化命令与数据的过程。直接操纵的对象是命令、数据或是对数据的某种操作。 2 图形用户界面设计的一般原则；(1)界面要具有一致性(2)常用操作要有快捷方式(3)提供必要的错误处理功能(4)提供信息反馈(5)允许操作可逆(6)设计良好的联机帮助(7)合理划分并高效的使用显示屏幕3 人机交互界面表示模
3、型与实现；(1)行为模型：主要从用户和任务的角度考虑如何描述人机交互界面(2)结构模型：主要从系统的角度来表示人机交互界面(3)模型转换(4)表现模型4 人机交互界面可用性评估方法；(1)用户模型法(2)启发式评估(3)认知性遍历(4)用户测试(5)用户调查(6)放声思考法三 实验容与步骤：1 实验容利用NetBeansIDE完成一个登录注册界面的设计。用户登录、注册功能：登录项： 用户名、密码；1）根据用户的选择进入用户界面或注册界面；2）注册后需要与后台数据库对接，查询注册中的用户名是否重复，如果重复则提示用户重新注册，否则提示用户注册成功并跳转到登录界面；3）登录后需要与后台数据库对接，
4、查询用户名和密码是否正确，如果正确则提示成功，否则让用户重新登录；2 web界面表示模型与实现，代码放在附录中结合GOMS和LOTOS对任务“登录注册功能”的描述 Task:登录注册功能 GOAL：登录注册 : GOAL:运行 |： *GOAL：登录 : OPRATOR:输入用户名 OPRATOR:输入密码 OPRATOR:注册 *GOAL：注册 : OPRATOR:输入用户名 OPRATOR:输入密码 OPRATOR:登录 GOAL：退出3 Web界面截图1)首页2）登录界面登录成功界面登录成功后进入系统界面登录失败界面3）注册界面注册名已被注册过，注册失败界面注册成功界面注册成功后直接跳转
5、到登录界面4 可用性分析与评估1）有效性：该系统达到了实验目标，实现了用户登录和注册功能；2）效率：该系统能够快速地将用户信息导入数据库，界面转换反应快；3）吸引力：界面简洁大方，能够带给用户好心情，功能实现反应快；4）容错能力：暂时还没有针对容错能力采取方法和措施，有待改善；5）易于学习：实验的要求包括用户登录和注册功能，目前自然还不存在用户不会使用的难以理解的问题。操作方便。附录：Index.jsp: 首页 #a line-height: 48px;margin-top: 126px;border: 1px solid gainsboro;width: 500px;height:375px
6、;margin-left: 435px; background-image:url(i/3.jpg);background-repeat: no-repeat;font-family: 华文彩云; 首页 登录 注册 Login.jsp: 用户登录 #a line-height: 48px;margin-top: 126px;border: 1px solid gainsboro;width: 500px;height:375px;margin-left: 435px; background-image:url(i/3.jpg);background-repeat: no-repeat;font
7、-family: 华文彩云; 登录 : 密码: Register.jsp: 用户注册 #a line-height: 48px;margin-top: 126px;border: 1px solid gainsboro;width: 500px;height:375px;margin-left: 435px; background-image:url(i/3.jpg);background-repeat: no-repeat;font-family: 华文彩云; 注册 : 密码: LoginServlet.java:/* * To change this license header, cho
8、ose License Headers in Project Properties. * To change this template file, choose Tools | Templates * and open the template in the editor. */package .edu.djtu;import java.io.IOException;import java.io.PrintWriter;import static java.lang.System.out;import java.sql.Connection;import java.sql.DriverMan
9、ager;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.sql.SQLException;import java.util.logging.Level;import java.util.logging.Logger;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.htt
10、p.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;import javax.swing.JOptionPane;/* * * author Administrator */WebServlet(name = LoginServlet, urlPatterns = /LoginServlet)public class LoginServlet extends HttpServlet /* * Processes requests for
11、both HTTP GET and POST * methods. * * param request servlet request * param response servlet response * throws ServletException if a servlet-specific error occurs * throws IOException if an I/O error occurs */ protected void processRequest(HttpServletRequest request, HttpServletResponse response) th
12、rows ServletException, IOException response.setContentType(text/html;charset=UTF-8); request.setCharacterEncoding(UTF-8); String name=request.getParameter(name); String pwd=request.getParameter(pwd); Connection conn=null; PreparedStatement prst=null; ResultSet rs=null; String url=jdbc:derby:/localho
13、st:1527/sample; String driver=org.apache.derby.jdbc.ClientDriver; String user=app; String password=app; try (PrintWriter out = response.getWriter() Class.forName(driver); conn=DriverManager.getConnection(url, user, password); String sql1=select * from users where name=? ; String sql2=select * from u
14、sers where name=? and pwd=?; prst=conn.prepareStatement(sql1); prst.setString(1,name); rs=prst.executeQuery(); if(rs.next() prst=conn.prepareStatement(sql2); prst.setString(1,name); prst.setString(2,pwd); rs=prst.executeQuery(); if(rs.next() HttpSession session=request.getSession(); session.setAttri
15、bute(name,name); request.getRequestDispatcher(page.jsp).forward(request, response); else JOptionPane.showMessageDialog(null, 登录失败，密码错误！); request.getRequestDispatcher(login.jsp).forward(request, response); else JOptionPane.showMessageDialog(null, 登录失败，该用户不存在！); request.getRequestDispatcher(login.jsp
16、).forward(request, response); catch (ClassNotFoundException ex) Logger.getLogger(LoginServlet.class.getName().log(Level.SEVERE, null, ex); catch (SQLException ex) Logger.getLogger(LoginServlet.class.getName().log(Level.SEVERE, null, ex); finally if(rs!=null) try rs.close(); catch (SQLException ex) L
17、ogger.getLogger(InterUserServlet.class.getName().log(Level.SEVERE, null, ex); if(prst!=null) try prst.close(); catch (SQLException ex) Logger.getLogger(InterUserServlet.class.getName().log(Level.SEVERE, null, ex); if(conn!=null) try conn.close(); catch (SQLException ex) Logger.getLogger(InterUserSer
18、vlet.class.getName().log(Level.SEVERE, null, ex); out.close(); / /* * Handles the HTTP GET method. * * param request servlet request * param response servlet response * throws ServletException if a servlet-specific error occurs * throws IOException if an I/O error occurs */ Override protected void d
19、oGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException processRequest(request, response); /* * Handles the HTTP POST method. * * param request servlet request * param response servlet response * throws ServletException if a servlet-specific error occurs *
20、 throws IOException if an I/O error occurs */ Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException processRequest(request, response); /* * Returns a short description of the servlet. * * return a String containing servlet descr
21、iption */ Override public String getServletInfo() return Short description; / InterUserServlet.java:/* * To change this license header, choose License Headers in Project Properties. * To change this template file, choose Tools | Templates * and open the template in the editor. */package .edu.djtu;im
22、port java.io.IOException;import java.io.PrintWriter;import static java.lang.System.out;import java.sql.Connection;import java.sql.DriverManager;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.sql.SQLException;import java.util.logging.Level;import java.util.logging.Logger;impo
23、rt javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.swing.JOptionPane;/* * * author Administrator */WebServlet(name = InterUserServle
24、t, urlPatterns = /InterUserServlet)public class InterUserServlet extends HttpServlet /* * Processes requests for both HTTP GET and POST * methods. * * param request servlet request * param response servlet response * throws ServletException if a servlet-specific error occurs * throws IOException if an I/O error occurs */ protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException response.setContentType(text/html;charset=UTF-8);
