1、 CP9:用户界面设计1 界面类型与风格界面类型和实现技术:本系统基于C/S架构,采用瘦客户端的图形化界面,用JAVA的Swing的技术实现。界面风格:界面风格说明:-在我们的系统中,采购员、经理和系统管理员登陆后的主界面完全一样,只是拥有的功能不一样,其不支持的功能菜单项为灰色-系统能根据用户本地环境设置相应的分辨率-菜单项支持快捷键(ctrl+)操作-当需要弹出新窗口时原界面保持可见2.功能菜单树区域(将用户功能分类组织) 1.Logo 区域(显示开发团队的标识,当前日期和时间等信息)3.功能执行主区域 (展示在 2 区域的选择功能的操作界面) 2 界面清单及之间的关系(不包括POS子系统
2、)4类用户编号:1-系统管理员 2-采购员 3-收银员 4-经理界面清单:界面编号 界面名称及用途 使用者1 登陆界面 1,2,42 系统主界面 1,2,43 商品信息界面 1,2,44 查询商品信息界面 1,2,45 添加商品信息界面 16 修改商品信息界面 17 删除商品信息界面 18 采购管理界面 1,29 库存不足商品列表界面 210 新建采购单界面 211 查询采购单界面 1,212 销售管理界面 113 查询销售单界面 114 帐户管理界面 115 查看帐户信息界面 116 新建帐户信息界面 117 修改帐户信息界面 118 删除帐户信息界面 119 统计管理界面 420 销售统计
3、界面 421 采购统计界面 422 采购单详细信息查看界面 1,2,423 销售单详细信息查看界面 1,424 系统退出界面 1,2,4界面之间的联系:1 . 登陆界面 2 . 系统主界面3 . 商品信息界面8 . 采购管理界面1 2 . 销售管理界面1 4 . 帐户管理界面1 9 . 统计管理界面4 . 查询商品信息界面5 . 添加商品信息界面6 . 修改商品信息界面7 . 删除商品信息界面2 0 . 销售统计界面2 4 . 退出系统界面1 5 . 新建帐户信息界面1 6 . 修改帐户信息界面1 7 . 1 4 . 删除帐户信息界面1 4 . 查看帐户信息界面1 3 . 查询销售单界面9 .
4、 库存不足商品列表界面1 0 . 新建采购单界面1 1 . 查询采购单界面2 1 . 采购统计界面2 2 . 采购单详细信息查看界面2 3 . 销售单详细信息查看界面3 界面设计(不包括POS子系统) 3.1 界面1 登陆界面 3.1.1 界面用途说明与图示用途:用户用来登陆系统 3.1.2 界面数据项说明数据项名称 含义 长度 约束 来源 形式用户名 员工编号,登陆标识5 用户输入 编辑框密码 登陆验证信息 10 用户输入 密码域 3.1.3 界面操作说明操作名称 操作含义 展示形式确定 用户输入用户名和密码后向后台服务器传输信息,验证是否正确按钮取消 清空输入的用户名和密码 按钮 3.1.
5、4 界面使用过程 用户输入用户名和密码,点击“确定”键进行登陆,若验证错误弹出“用户名或密码错误,请重新输入。”提示信息,用户重新输入。 用户输入用户名和密码信息发现错误后想重新输入时按“取消”键取消当前输入,再重新输入。 3.2 界面2 主界面 3.2.1 界面用途说明与图示用途:用户在成功登陆系统后看到的界面,用户通过此界面进行功能操作,不同类型的用户登陆后界面虽然一样,但在左方的菜单树中只能进行本帐户类型对应的操作,不支持的功能菜单显示为灰色。 3.2.2 界面数据项说明界面右上角显示当前的日期,星期,时间。 3.2.3 界面操作说明用户对应的操作按类组织为一个树状菜单。 3.2.4 界
6、面使用过程 用户点击展开左边的树状菜单,选择相应的菜单进行相应的操作。 3.3 界面20销售统计界面 3.3.1 界面用途说明与图示用途:系统能按收银员和时间区间对销售进行统计,通过此界面用户能把指定收银员在特定时间内产生的销售单据以表格形式进行输出,同时还能查询其中每张单据的详细信息。 3.3.2 界面数据项说明区域 数据项名称含义 长度 约束 来源 形式起始日期统计开始的日期 10 输入 编辑框结止日期统计终止的日期 10 输入 编辑框统计条件区域收银员编号收银员员工号,统计条件5 输入 编辑框单据清单区域销售单据号销售单编号 10 后台查询 表单开单日期单据产生日期 10 后台查询 表单
7、总金额 销售总金额 10 后台查询 表单收银员编号结算时收银员员工号5 后台查询 表单顾客是否会员顾客会员标志 2 是/否 后台查询 表单单据数 清单中单据数 10 后台计算 文本框总金额 所有单据总销售额 10 后台计算 文本框统计结果区域利润 销售利润额 10 后台计算 文本框 3.3.3 界面操作说明区域 操作名称 操作含义 展示形式统计条件区域开始统计 用户输入统计条件后系统根据统计条件对数据库进行检索,对结果集进行计算得到统计额按钮销售单详细查看用户在清单列表中选择一行(一张销售单)进行点击,弹出一销售单,能查看其详细信息超链接单据清单区域排序 用户点击表单的某一属性名,能按其值进行
8、排序超链接 3.3.4 界面使用过程 用户在统计条件区域内输入要统计的条件,点击“开始统计按钮”,系统对数据库进行检索,列出符合条件的单据列表,计算出统计量 用户可选择对列表按某一属性值进行排序 用户能点击列表的某一行记录以查看其对应的单据的详细信息 3.4 界面21采购统计界面 3.4.1 界面用途说明与图示用途:系统能按采购员和时间区间对采购进行统计分析,用户能把指定采购员在特定时间内产生的采购单据以表格形式进行输出,同时还能查询其中每张单据的详细信息。 3.4.2 界面数据项说明区域 数据项名称含义 长度 约束 来源 形式起始日期统计开始的日期 10 输入 编辑框结止日期统计终止的日期
9、10 输入 编辑框统计条件区域采购员编号采购员员工号,统计条件5 输入 编辑框采购单据号采购单编号 10 后台查询 表单开单日期单据产生日期 10 后台查询 表单总金额 采购总金额 10 后台查询 表单采购员编号结算时采购员员工号5 后台查询 表单单据清单区域供货商 采购的供货商名称 10 后台查询 表单单据数 清单中单据数 10 后台计算 文本框总金额 所有单据总采购额 10 后台计算 文本框统计结果区域商品数 采购的商品的总数目10 后台计算 文本框 3.4.3 界面操作说明区域 操作名称 操作含义 展示形式统计条件区域开始统计 用户输入统计条件后系统根据统计条件对数据库进行检索,对结果集
10、进行计算得到统计额按钮采购单详细查看用户在清单列表中选择一张采购单,进行点击,弹出一采购单,能查看其详细信息超链接单据清单区域排序 用户点击表单的某一属性名,能按其值进行排序超链接 3.4.4 界面使用过程 用户在统计条件区域内输入要统计的条件,点击“开始统计按钮”,系统对数据库进行检索,列出符合条件的单据列表,计算出要统计量 用户可选择对列表中的单据按某一属性值进行排序 用户能点击列表的某一行记录以查看其对应的单据的详细信息 3.5 界面9 库存不足商品列表界面 3.5.1 界面用途说明与图示用途:用来实时查询库存中剩余数量不足的商品列表。 3.5.2 界面数据项说明数据项名称 含义 长度
11、约束 来源 形式商品编号 商品编号 10 数字串 系统输出 表商品名称 商品名称 50 汉字串 系统输出 表单位 计量单位 2 汉字串 系统输出 表当前库存量 当前库存量 Long 数字 系统输出 表缺少数量 缺少数量 Long 数字 系统输出 表 3.5.3 界面操作说明操作名称 操作含义 展示形式插询 采购员登陆后进行查询的确认操作按钮打印 对输出的结果打印(缺省)按钮 3.5.4 界面使用过程 采购员登陆后,方可进行操作 点击“查询”按钮,进行查询,系统将会把满足条件的商品信息显示出来 如果需要打印,则点击“打印”按钮 3.6 界面 10 新建采购单界面 3.6.1 界面用途说明与图示用
12、途: 用来进行采购单的新建 3.6.2 界面数据项说明数据项名称 含义 长度 约束 来源 形式采购单流水号采购单流水号10 数字流 系统自动生成文本框采购日期 采购日期 20 3段 系统自动生成文本框经办采购编号经办采购编号5 数字串 用户输入 文本框总金额 本次采购总金额Float 数字 用户输入 文本框供货商 供货商 20 汉字串 用户输入 文本框采购单明细 采购单明细 用户输入 表 3.6.3 界面操作说明操作名称 操作含义 展示形式新建 针对输入的信息,进行采购单的新建,更改数据库按钮放弃 放弃本次新建 按钮 3.6.4 界面使用过程 采购员需登陆后方可进行操作 进入界面后,会自动生成
13、采购单流水号以及采购日期 采购员按情况填入采购金额等信息 采购单基本信息填完,即可完善采购明细信息 所有信息添加完毕,确认无误,点击“确定”按钮,完成新建 如果,需要放弃,则点击“放弃”按钮 3.7 界面 11 查询采购单界面 3.7.1 界面用途说明与图示用途: 用来查询采购单据。 3.7.2 界面数据项说明数据项名称 含义 长度 约束 来源 形式采购单编号 采购单编号 10 数字串 用户输入 单选输入采购起止日期采购起止日期50 数字串3个段用户输入 单选输入经办采购员 经办采购员 5 数字串 用户输入 单选输入查询结果 查询结果 系统输出 表 3.7.3 界面操作说明操作名称 操作含义
14、展示形式查询 采购员在选择查询条件并进行输入之后,进行查询的操作按钮打印 对输出的信息进行打印 按钮查询采购单详细信息 针对某一个采购单进行明细查询按钮 3.7.4 界面使用过程 采购员经登陆后,方可进行操作 首先,对查询田间进行选择 选择之后,进行相应信息的录入 点击“查询”按钮,得到结果 同时,如果需要排序,则点击排序字段的属性项 如果需要打印,则点击“打印”按钮 若需要查询详细信息,则将需要查询的某一个采购单信息选中,之后,点击“查询采购单详细信息”按钮即可。 3.8 界面 22 采购单详细信息查看界面 3.8.1 界面用途说明与图示用途:用来查询某一次采购的明细信息 3.8.2 界面数
15、据项说明数据项名称 含义 长度 约束 来源 形式采购单编号 采购单编号 10 数字串 用户输入或系统输出单选输入采购起止日期采购起止日期50 数字串3个段用户输入或系统输出单选输入经办采购员 经办采购员 5 数字串 用户输入或系统输出单选输入详细信息 详细信息 系统输出 表 3.8.3 界面操作说明操作名称 操作含义 展示形式查询 查询操作 按钮打印 对详细信息进行打印 按钮返回 返回上一界面(针对界面10而言)按钮 3.8.4 界面使用过程 首先,采购员需要登陆后,方可进行操作 本界面有两种使用形式1:直接使用查询采购单详细信息登陆后,对采购单编号等查询信息进行输入,之后,点击“查询“按钮得
16、到输出结果。同时,可以进行打印。2:通过界面 10 使用该界面通过界面 10 的使用,可以由系统自动生成选中的采购单编号的信心。之后,点击“查询“按钮,进行查询,得到结果。同时可以打印。在此种情况下,可以点击“返回“按钮,返回界面 10,进行其他的后续查询。 结束3.9 界面5 添加商品信息 3.9.1 界面用途说明与图示用途:往数据库里添加商品信息。 3.9.2 界面数据项说明数据项名称 含义 长度 约束 来源 形式商品编号 商品编号 10 数字串 系统输出 表商品名称 商品名称 50 汉字串 系统输出 表单位 计量单位 2 汉字串 系统输出 表单价 单位价格 Float 数字 系统输出 表
17、分类 商品类别 20 汉字串 系统输出 表 3.9.3 界面操作说明操作名称 操作含义 展示形式添加 往数据库添加商品信息 按钮 3.9.4 界面使用过程 登陆后,方可进行操作 输入商品的详细信息,其中编号,价格,单位必填。 按“添加键”,显示“添加成功”或失败信息3.10 界面4 查询商品信息 3.10.1 界面用途说明与图示用途:查询符合条件的商品信息。 3.10.2 界面数据项说明数据项名称 含义 长度 约束 来源 形式商品编号 商品编号 10 数字串 系统输出 表商品名称 商品名称 50 汉字串 系统输出 表单位 计量单位 2 汉字串 系统输出 表单价 单位价格 Float 数字 系统
18、输出 表分类 商品类别 20 汉字串 系统输出 表 3.10.3 界面操作说明操作名称 操作含义 展示形式查询 查询需要的商品信息 按钮 3.10.4 界面使用过程 登陆后,方可进行操作 输入商品的详细信息,其中编号,价格,单位必填。 按“查询”,显示符合条件的商品3.11 界面15 查看账户信息 3.11.1 界面用途说明与图示用途:查看符合条件的用户。 3.11.2 界面数据项说明数据项名称 含义 长度 约束 来源 形式账户ID 工作编号 5 数字串 系统输出 表账户类型 职位 5 汉字串 系统输出 表 3.11.3 界面操作说明操作名称 操作含义 展示形式查询 查询需要的账户信息 按钮
19、3.11.4 界面使用过程 登陆后,方可进行操作 输入账户的查询条件 按“查询”,显示符合条件的账户3.12 界面16 新建帐户信息 3.12.1 界面用途说明与图示用途:新建账户。 3.12.2 界面数据项说明数据项名称 含义 长度 约束 来源 形式账户ID 工作编号 5 数字串 系统输出 表账户类型 职位 5 汉字串 系统输出 表 3.12.3 界面操作说明操作名称 操作含义 展示形式新建 新建账户 按钮 3.12.4 界面使用过程 登陆后,方可进行操作 输入要新建的用户信息 按“新建”,显示结果4 前台POS机子系统4.1界面清单与关联关系:界面编号 界面名称及用途 使用者1 登陆界面
20、3、2 扫描界面 3、3 结账界面 3、4 现金支付反馈界面 3、5 刷卡等待界面 3、2 . 扫描界面 . 登陆界面 3 . 结账界面4 . 现金支付反馈界面5 . 刷卡等待界面4.2 界面设计:4.2.1POS 机系统登陆界面:数据说明:数据项名称 含义 长度 来源 形式用户名 收银员登陆系统的用户名 20 用户输入 编辑框密码 收银员登陆系统的密码 10 用户输入 编辑框动作说明:操作名称 操作含义 展示形式登陆 根据用户输入的用户名与密码登陆系统 按钮重置 将用户名与密码两个域置为空 按钮执行过程: 收银员输入用户名与密码后点击“登陆”登入系统 收银员希望清空用户名与密码两个域,点击“
21、重置”4.2.2 扫描界面:扫描前:扫描中:数据说明:区域 数据项名称 含义 长度 来源 形式商品编号 商品的编号 10 后台查询 静态文本商品名称 商品的名称 20 后台查询 静态文本单价 一件商品的价格 5 后台查询 静态文本数量 购买此商品的数量 2 系统生成 静态文本商品信息区域总金额 当前扫描商品的总金额5 系统生成 静态文本数量 顾客购买当前扫描商品的数量2 用户输入 编辑框添加/删除操作区域 商品编号 当前扫描商品的编号 10 用户输入/扫码器输编辑框入会员号(输入)顾客的会员号码 10 用户输入 编辑框会员号(确认)顾客的会员号码 10 系统生成 静态文本会员信息区域折扣 顾客
22、享有的会员折扣 4 后台查询/刷卡器输入静态文本动作说明:区域 操作名称 操作含义 展示形式商品信息区域 结账 商品扫描完毕进行结账 按钮添加 添加商品 按钮添加/删除操作区域删除 删除商品 按钮会员信息区域 确定 会员卡号输入确定 按钮下班 收银员下班登离系统 按钮执行过程: 在所有商品扫描完毕后,收银员点击“结账” 光标默认会停留在“数量”编辑框,收银员在此编辑框内输入当前扫描商品的数量,无输入则认为当前商品为 1 件。添加商品存在两种方式,一种是手工输入商品编号,然后点击“添加” ;另一种是通过扫码器,系统在收到扫码器传来的商品编号后会自动填充“商品编号”编辑框并自动执行“添加”操作,因
23、此使用此方式要求收银员在扫描商品编号前要先输入商品数量。删除商品则只有一种方式,即输入“数量”和“商品编号”后点击“删除” ,如商品不存在于商品列表则不作操作,如数量大于列表中商品数量则将所有该商品删除 会员编号输入也存在两种方式,手工输入或使用刷卡机,手工输入方式为手工输入会员编号后点击“确定” ,刷卡机方式则是系统收到刷卡机传来的会员编号后自动填充“会员号”编辑框并自动执行“确定”操作。会员识别操作要求在每个账单扫描前执行,会员信息识别后或第一个商品扫描后,“确定”按钮将变为灰色不可用 当收银员需要登离系统时点击“下班”4.2.3 结账对话框界面:结账界面(选择支付方式):在扫描界面点击“
24、结账” ,出现结账对话框界面数据说明:数据项名称 含义 长度 来源 形式现金付款 选择“现金付款”方式 用户输入 单选框刷卡支付 选择“刷卡支付”方式 用户输入 单选框顾客付款 顾客付款的金额 5 用户输入 编辑框动作说明:操作名称 操作含义 展示形式确定 确定选择付款方式 按钮执行过程: 收银员根据顾客的需要选择付款方式,如果是“现金付款” ,则可以输入顾客的付款金额,如输入为空则视为付款金额正好。选择完毕后点击“确定”4.2.4 现金付款反馈界面: 点击“确定”后返回扫描界面4.2.5 刷卡等待界面: 刷卡成功后系统自动转到扫描界面,点击“取消”或刷卡不成功则转到选择支付方式界面说明:基于POS 功能及效率要求的特殊性,一般的功能操作均也应体现在键盘上,而鼠标的选择、点击操作并不一定会要求设计体现,所以在真正实现的时候,某些操作可能会有更多或不同的实现方式,在此只使用正常视窗化软件的操作方式目的只是便于理解