用户界面设.docVIP

界面设计 1．登陆界面设计 说明：所有页面设计要求使用div布局完成。 验证码，自动生成查看商品找回密码点这里注册网站公告 验证码，自动生成 查看商品 找回密码 点这里注册 网站公告 图1.1用户登陆首页 用户登陆首页要求：只有当用户名、密码和验证码都正确时才能通过验证。“网站公告”部分为由下到上的滚动字幕，“查看所有商品”部分为从右到左的滚动字幕。点“注册会员”时，弹出添加新会员窗口，如图1.2所示。点“忘记密码？”，弹出找回密码页面，如图1.4所示。点“查看所有商品”，弹出商品展示页面，如图1.7所示。点网站公告信息，弹出该公告的详细信息页面，如图1.9所示。 会员注册页面：（如图1.2所示） 图1.2 用户注册页面 会员注册页面要求：用户登陆名只能为数字和字母以及“_”“-”，不得使用其它字符。并且用户登陆名不能少于4位，密码不能少于6位，最多不超过10位，email和电话都要进行有效性验证，除了地址和身份证号外，其他信息不能为空。提交后若注册成功则提示，如图1.3所示。 图1.3 注册成功提示信息 找回密码页面：（如图1.4所示） 图1.4 找回密码页面 找回密码页面要求：首先只显示用户登陆名填写部分，如图1.4所示。验证该用户是否存在，不存在则报错，若存在则显示找回密码问题和答案框部分，如图1.5所示。 图1.5用户存在后显示用户和密码框界面 如果问题和答案都填写正确，则显示输入新密码部分，如图1.6所示。 图1.6 问题和答案完全正确提交后的新密码界面 输入新密码后提交，则显示：“恭喜您，重新设置密码成功，请牢记”，确定后，找回密码页自动关闭。 商品展示页面：（如图1.7所示） 图1.7商品展示页面 商品展示页面功能要求：用DataList展示所有商品，如图1.7所示，要求实现翻页和模糊查询功能，点“放入购物车”后报告“请登录后购买！！”，如图1.8所示。 图1.8放入购物车时提示 公告详细信息浏览页面：（如图1.9所示） 图1.9公告详细信息页面 公告详细信息页面功能要求：显示公告标题和内容，点“关闭”按钮可以关闭窗体。 2．后台管理主界面设计 内容页部分功能菜单部分个人基本信息 内容页部分 功能菜单部分 个人基本信息 图2.1 后台管理主界面 主界面功能要求： 要求使用母版页设计主界面，如图2.2所示，使用TreeView展示用户功能菜单，内容首页展示待审核的新用户和用户汇款，如图2.1所示。管理员菜单包括：个人管理、系统管理、综合信息3个父级模块，个人管理包括：修改资料、审核操作2个菜单，系统管理包括：用户管理、角色管理、分类管理、游戏卡管理、汇款审核、公告管理6个菜单项，综合信息包括：销售统计、浏览投诉2个菜单项。 图2.2 后台管理主页面设计 3．后台管理用例界面实现 //*用例界面实现是对需求的进一步明确和以可视化的方式呈现，作为编码和实现依据*// 用例1 个人修改资料界面：（如图2.3所示） 图2.3修改个人资料界面 修改个人资料页面功能要求：显示用户基本信息如图2.3所示，修改资料时的限制如注册时相同。 用例2 审核操作界面：（如图2.4所示） 图2.4审核操作界面 审核操作页面功能要求：用两个GridView分别显示待审核的用户和汇款信息，如图2.4所示，都有“查看详细”功能。点“通过审核”实现通过审核功能，如果汇款出现错误，点“撤回汇款”则以系统消息的形式通知用户。 用例3 用户管理界面：（如图2.5所示） 图2.5 用户管理界面 用户管理页面功能要求：用GridView展示用户基本信息，点“查看详细”可以查看更详细的信息，如图2.4所示，选中用户后，点页面上的四个操作按钮，即可以实现把用户设置为普通会员、vip会员、管理员和删除选中用户功能。另外添加全选功能，选择不同的用户角色，GridView重新绑定相应的用户信息。 用例4 角色管理页面：（如图2.6所示）