用户界面设计

界面设计

1．登陆界面设计

验证码，自动生成

网站公告点这里注册找回密码

图1.1用户登陆首页

用户登陆首页要求：只有当用户名、密码和验证码都正确时才能通过验证。“网站公告”

部分为由下到上的滚动字幕，“查看所有商品”部分为从右到左的滚动字幕。点“注册

会员”时，弹出添加新会员窗口，如图1.2所示。点“忘记密码？”，弹出找回密码

页面，如图1.4所示。点“查看所有商品”，弹出商品展示页面，如图1.7所示。点

网站公告信息，弹出该公告的详细信息页面，如图1.9所示。

图1.2 用户注册页面

会员注册页面要求：用户登陆名只能为数字和字母以及“_”“-”，不得使用其它字符。

并且用户登陆名不能少于4位，密码不能少于6位，最多不超过10

话都要进行有效性验证，除了地址和身份证号外，其他信息不能为空。

功则提示，如图1.3所示。

图1.3 注册成功提示信息

图1.5用户存在后显示用户和密码框界面

如果问题和答案都填写正确，则显示输入新密码部分，如图1.6所示。

图1.6 问题和答案完全正确提交后的新密码界面

输入新密码后提交，则显示：“恭喜您，重新设置密码成功，请牢记”，确定后，找回密码页自动关闭。

商品展示页面：（如图1.7所示）

图1.7商品展示页面

商品展示页面功能要求：用DataList展示所有商品，如图1.7所示，要求实现翻页和模糊查询功能，点“放入购物车”后报告“请登录后购买！！”，如图1.8所示。

图1.8放入购物车时提示

图1.9公告详细信息页面

公告详细信息页面功能要求：显示公告标题和内容，点“关闭”按钮可以关闭窗体。

2．后台管理主界面设计

个人基本信息

内容页部分

功能菜单部分

图2.1 后台管理主界面

主界面功能要求：

个菜单项，综合信息包括：销售统计、浏览投诉2个菜单项。

3．后台管理用例界面实现

用例1

图2.3修改个人资料界面

修改个人资料页面功能要求：显示用户基本信息如图2.3所示，修改资料时的限制如注册时相同。

用例2

审核操作界面：（如图2.4所示）

图2.4审核操作界面

审核操作页面功能要求：用两个GridView分别显示待审核的用户和汇款信息，如图2.4所示，都有“查看详细”功能。点“通过审核”实现通过审核功能，如果汇款出现错误，点“撤回汇款”则以系统消息的形式通知用户。

用例3

图2.5 用户管理界面

用户管理页面功能要求：用GridView展示用户基本信息，点“查看详细”可以查看更详细的信息，如图2.4所示，选中用户后，点页面上的四个操作按钮，即可以实现把用户设置为普通会员、vip会员、管理员和删除选中用户功能。另外添加全选功能，选择不同的用户角色，GridView重新绑定相应的用户信息。

用例4

角色管理页面：（如图2.6所示）

图2.6 角色管理界面

角色管理页面功能要求：用GridView展示角色基本信息，如图2.5 所示，要求实现添

图2.7 添加角色界面

添加角色页面功能要求：为模式对话框，角色名称不能为空，提交后自动关闭并刷新角色管理页面。

修改角色页面：（如图2.8 所示）

图2.8 修改角色界面

功能要求同添加页面。

分配角色权限页面：（如图2.9所示）

图2.9 分配角色权限

分配角色权限页面功能要求：用CheckBoxList列出所有子菜单权限名称，不要求列出父菜单名称，要求选中子菜单时，自动把父菜单分配给该角色，把选中的权限分配给对应的角色，点“提交”提示“权限已生效”，确定后关闭该模式对话框。

角色功能浏览页面：（如图2.10所示）

角色功能浏览界面功能要求：按角色展示它们被分配的权限，如图2.9所示。

设置会员优惠价页面：（如图2.11所示）

图2.11 设置会员优惠价页面

设置会员优惠价页面功能要求：会员类型又roleinfo表动态绑定，然后选择你要设置的会员类型，填写优惠价比（1~100之间的整数）后，点“提交”则更新选定会员类型的优惠价比例，如图2.12所示。

图2.12 设置会员优惠价比

能成功执行删除操作。

用例5

卡片类别管理界面：（如图2.13所示）

图2.13 卡片类别管理界面

卡片类别管理页面功能要求：卡片类别可以同名，用卡片类别和价格结合起来作为唯一标志，用ListBox列出所有卡片类别+价格。商品价格部分可以自己定义，但菜单项要合理。图片路径部分要求只保存图片的相对路径，并且输入框部分为只读，可以把所有的图片都放在项目中的“images”文件夹里，保存数据库时，路径保存为：“~/images/....gif”。点“添加新类型后”卡片类别列表自动刷新，显示刚才添加的卡片类别，另外点“删除选中类型”按钮，删除该行记录，并自动刷新卡片ListBox。

用例6

图2.14 卡片管理界面

卡片管理页面功能要求：用GridView显示卡片基本信息，按卡片类别名称和价格排序，相同的部分尽量合并单元格，如图2.14所示。实现添加、修改和删除功能。

添加卡片页面功能要求：为卡片管理页面弹出的模式对话框，如图2.15所示，要求所属类型部分为自动绑定的所有卡片类型+价格，默认编号是从数据库获取的当前默认种子最大值，卡号和密码部分要有有效性验证，比如卡号只能为10~20位整数，密码为3~10位数字。点“提交”后保存卡片信息，并自动关闭模式对话框。

图2.15 添加卡片界面

修改卡片页面功能要求：初始时分别绑定卡片管理中选中的卡片信息，卡片类型也要自动绑定为该卡片对应的类型，修改卡片的内容，“提交”更新卡片信息，关闭模式对话框，自动刷新卡片管理页面。

图2.16 修改卡片界面

用例7

汇款审核界面：（如图2.17所示）

图2.17 汇款审核界面

汇款审核页面功能要求：用GridView显示汇款基本信息，添加查看详细信息和全选功能，“汇款信息选择”下拉菜单项如图2.18所示，点“通过审核”追加用户余额，点“撤回汇款”通知用户汇款失败，当改变“汇款信息选择”中的类型时，则重新绑定GridView，显示相关信息。

图2.18 汇款审核菜单展开界面

用例8

公告管理界面：（如图2.19所示）

图2.19 公告管理界面

公告管理页面功能要求：用GridView显示公告基本信息，有添加、修改、删除和发布功能，要求发布后，不能修改，但可以删除。

添加新消息页面功能要求：公告管理页面弹出的模式对话框，如图2.20所示。填写消息标题和内容，提交后关闭该对话框，自动刷新公告管理页面，消息标题不能为空。

图2.20 添加新消息界面

修改消息页面功能要求：初始时显示该消息的基本信息，其他要求同添加新消息页面。 用例9

商品统计界面：（如图2.21所示）

用例10

图2.22 浏览投诉界面

浏览投诉页面功能要求：用DataList显示投诉建议基本信息。

4．前台操作主界面设计

个人基本信息

内容页部分

功能菜单部分

图4.1 前台操作主界面

前台操作主界面功能要求：

要求使用母版页设计主界面，如图4.1所示，使用TreeView展示用户功能菜单，内容首页展示所有可购商品信息，如图4.1所示。会员菜单包括：个人管理、会员操作、

综合信息3个父级模块，个人管理包括：修改资料1个菜单，会员操作包括：商品列

表、投诉建议、汇款通知3个菜单项，综合信息包括：存款记录、购物记录和联系我

们3个菜单项。

5．前台操作用例界面实现

用例1

用例2

图4.2 商品列表界面

商品列表页面功能要求：用DataList显示可购商品基本信息，展示方式如图4.2所示。

可以按照商品名称模糊搜索，点“放入购物车”后，打开新的窗口，里面显示该会员已经选择的卡片信息，当选择另外的商品点“放入购物车”后，只刷新原来的窗口不打开新窗口，点“我的购物车”共用刚才打开的窗口。如图4.3所示。

用例3 图4.5 投诉建议界面

投诉建议页面功能要求 :客户文本框部分默认为用户登陆时的id ，内容有非空验证。 用例4

汇款通知界面：（如图4.6所示）

图4.6 汇款通知界面

汇款通知页面功能要求：客户默认为登陆id，银行默认为工商银行，汇款金额只能为数字类型，除了附言外，其他输入框都要求非空。

用例5

存款记录界面：（如图4.7所示）

图4.7 汇款记录界面

汇款记录页面功能要求：用GridView显示汇款基本信息，相同的项要进行合并，如图

4.7所示。

用例6

图4.8 商品列表界面

购物记录页面功能要求：用GridView显示购物历史记录，如图4.8所示。

用例7

图4.9 联系我们界面

联系我们页面功能要求：静态页面，注意div布局。