实验4: 用户界面设计实验（I04）
返回
实验4: 用户界面设计实验（I04）
一、实验名称和性质
所属课程 | 信息系统分析与设计 |
实验名称 | 用户界面设计实验 |
实验学时 | 2 |
实验性质 | □验证 □综合 √设计 |
必做/选做 | √必做 □选做 |
二、实验目的
1．掌握用户界面的设计规则。
2．掌握实际软件中输入/输出界面原型的设计方法。
3．能运用Visio进行原型模型的建立。
三、实验的软硬件环境要求
硬件环境要求：
本实验需要为每个学生提供一台个人计算机。
使用的软件名称、版本号以及模块：
本实验需要配备的软件包括：Visio2003。
四、知识准备
前期要求掌握的知识：
了解用户界面设计的基本原则，知道数据收集、数据录入和数据输入间的区别，知道一些不同的数据收集技术，了解如何将人的因素融入到计算机输入设计中，能运用软件工具进行界面的简单原型设计。
五、实验内容
1．按验证性实验的具体要求逐步完成指定题目，观察并记录实验的结果。
2．按具体要求完成设计性实验的题目，设计结果记录在实验报告上。
六、验证性实验
1．实验要求
某银行储蓄业务包括各种币种储蓄的本金和利息的相关业务。所有储蓄业务都通过银行折子或一卡通进行操作，银行折子和一卡通之间是关联账户，而储蓄又有多种类型：整存整取存款，零存整取存款，活期储蓄存款，定活两便存款。通过储蓄业务系统，银行客户可以方便的进行开户、销户、补办、挂失、解挂、修改密码、存款、取款、转账等操作。
请在Visio中绘制该系统的页面流程图、界面模型图。
2．实验步骤
（1）页面流程图的绘制：
请在Visio中绘制如图15所示的页面流程图。
图15 银行储蓄业务管理信息系统的页面流程图
各页面说明如下表所示：
表9 界面视图与标识符对应表
序号 | 界面视图 | 标识符 | 功能 |
1 | 登录界面 | login.jsp | 显示柜台人员的登录窗口 |
2 | 主界面 | main.jsp | 供柜台人员选择业务操作 |
3 | 开户界面 | customerRegisterForm.jsp | 供柜台人员输入客户开户信息 |
4 | 卡注册界面 | cardRegisterForm.jsp | 供柜台人员输入子账号、接收用户密码信息 |
5 | 销户界面 | cardDrop.jsp | 供柜台人员录入客户销户信息 |
6 | 客户子账号信息显示页面 | customerCardInfo.jsp | 显示客户账号及子账号信息 |
7 | 挂失界面 | cardLose.jsp | 柜台人员输入客户挂失信息 |
8 | 补办界面 | postRegister.jsp | 供柜台人员输入补办信息 |
9 | 解挂界面 | unlose.jsp | 供柜台人员输入解挂信息 |
10 | 存款界面 | deposit.jsp | 供柜台人员输入存款信息 |
11 | 存款信息打印界面 | depositPrint.jsp | 显示客户存款交易信息 |
12 | 存款成功提示页面 | depositDone.jsp | 显示客户存款成功信息 |
13 | 取款界面 | fetch.jsp | 供柜台人员输入取款信息 |
14 | 取款信息打印界面 | fetchPrint.jsp | 显示客户取款交易信息 |
15 | 取款成功提示页面 | fetchDone.jsp | 显示客户取款成功信息 |
16 | 转帐页面 | transfer.jsp | 供柜台人员输入转账信息 |
17 | 代收费页面 | depositAgent.jsp | 供柜台人员输入代收费信息 |
18 | 代收费信息打印页面 | depositAgentPrint.jsp | 显示客户代收费交易信息 |
19 | 代收费成功提示页面 | depositAgentDone.jsp | 显示客户代收费业务成功信息 |
20 | 错误提示页面 | error.jsp | 显示错误提示 |
关键步骤如下：
步骤一：打开Microsoft Office Visio2003，选择新建|新建绘图；
步骤二：将绘图页的缩放比例调整为100%。
步骤三：在Visio窗口单击“图形”图标按扭，弹出各类图形文件夹后再继续选择各类形状集合，选择“Web图表”|“网站总体设计形状”选择，打开网站总体设计形状的图形对象集；
步骤四：选择“其他Visio方案”|“连接线”选项，打开连接线图形对象集；
步骤五：将所需图形拖到绘制页上，通过拖拽调整图形大小至合适的尺寸，并调整字体大小。
（2）界面模型图的绘制：
请在Visio中绘制如图16所示的界面模型图。
图16 银行储蓄业务管理信息系统的界面模型图
模块窗口原型的绘制关键步骤如下：
步骤一：打开Microsoft Office Visio2003，选择新建|新建绘图；
步骤二：将绘图页的缩放比例调整为100%。
步骤三：在Visio窗口单击“图形”图标按扭，弹出各类图形文件夹后再继续选择各类形状集合，选择“软件”|“窗口和对话框”选项；选择“框图”|“基本形状”选项；
步骤四：将所需图形拖到绘制页上，通过拖拽调整图形大小至合适的尺寸，并调整字体大小。
七、设计性实验
1．实验要求
以嘉兴学院图书馆主页中“我的图书馆”为原型，自行选择自定义图书馆管理系统的开发范围，针对该范围设计页面流程图、主要界面模型图。其中图书馆管理系统部分页面参见实验一中图4-6。