《锋云手机商城》
系统界面
题  目：     
学生姓名：                     
学    号：             
院    系：               
专业年级：                     
指导教师：                   
2017年12月24日
目  录
第四章 锋云手机商城    1
4.1 界面讨论    1
4.1.1 参与角    1
4.1.2 问题讨论    1
4.2 网页设计模版    2
4.2.1 界面风格    2
4.2.2. 模版代码    2
4.3 页面设计    2
4.3.1 登录界面    2
4.3.2 首页    4
4.3.3 注册页面    6

第四章 锋云手机商城
4.1 界面讨论
4.1.1 参与角
项目经理、系统分析员、网页设计师、平面设计师、软件工程师
4.1.2 问题讨论
项目经理：网站的界面非常重要，既要体现出客户的经营特和理念，也要便于我们开发人员设计和实现，而且是我们后续开发工作的驱动，也可以说是开发成功与否的关键，因此希望各个岗位负责人员能够快速、准确、实用、美观、创意地设计和实现，看起来似乎要求很
高。其实也是一种变通和弥补，因为开发团队目前还不掌握更高级的后台技术，所以在前台界面更要精益求精。
系统分析员：虽然在需求分析和系统架构、设计阶段，对界面有很详细的规划设计，但是在实现阶段我们可以因为客户的需求变更，又要不断推翻以前的分析设计，重新设计，所以在这个阶段其实风险和挑战都很大，希望大家做好艰苦工作和积极协作的准备。
网页设计师：采用网页三剑客工具，需要大家能熟练使用，严格按照分析设计来做，同时能够考虑新链接的接口，为客户需求变更预留可扩展位置。
平面设计师：应该和客户在多次沟通，看着界面的分析设计文档，其中的界面风格和彩搭配还不确定，希望在大量工作之前明确这些。
软件工程师：网页设计中不要随意应用工具提供的脚本代码，要严格按照分析设计文档来编写静态页面，涉及的JSP和脚本应该由程序员和设计师沟通解决。编码期间应该和系统分析员多交流，多考虑代码如何重用并应及时做单元测试，争取代码可读、高效、稳健、易维护。
4.2 网页设计模版
4.2.1 界面风格
网站界面风格要配合锋云手机商城的经营理念，能够增强客户的购买意愿，而这个又是最不容易确定和衡量的问题，要求设计人员和实现人员能够准确把握，在做前期需求说明和系统分析的时候，就应该做些界面原型与项目干系人多讨论，不要等到在实现阶段发现整个界面风格不符合要求，可能要重新分析和设计，彻底地改头换面是最不可接受的变更。
4.2.2. 模版代码
在网站界面设计的交流过程中，任何文字说明都不能代替图形化的解说，所以要求我们能够预先设计和制作一些模版网页，帮助说明界面设计的文字风格、图片处理、彩搭建。不要怕这个阶段的工作耗时和成本，这个阶段对后期工作的潜在效用足以弥补时间和成本支出。
4.3 页面设计
4.3.1 登录界面
登录页面是一个简单却非常重要的网页，其页面元素可以简单到只有两个文本框的用户名、密码和一个提交按钮，但却是决定用户易用性极为关键的一页，因为很多用户在使用网站服务的时候,不是主动去单击注册链接,如图41所示，而是因为需要登录才注册的。专业的网站在登录页面设计中,要考虑如忘记密码、用户被锁定、等处理链接。
图41 登录
页面规划
比较常见的是在登录页面上，只放置两个输人框、一个提交按钮、忘记密码和新用户注册两个按钮，这样的设计是包含了应该表现的内容，做到了应该做的。如果想要页面更有“营销力”，就应该再增加对网站的一些核心描述、温馨提示功能及其对用户来说可获得的益处所以登录页面应该分为两栏，一栏为登录的主要信息，另一栏则为对网站服有“引力”的推销，而在设计主页时已经确定考勤网站页面框架和风格，登录页面在此基础上设计与实现。
设计要素
符合主页页面框架与显示风格。
LOGO以及网站名称、吉祥物图片。
网站导航栏以及搜索站内信息的表单。
最新公告、考勤流程、考勤查询、常见问题的链接或表单。
登录元素(用户名、密码和提交三个关键元素)，还有验证码等附加元表。
引起用户使用时特别要注意的链接与信息标注。
快速返回首页的链接。
验证码脚本、登录验证脚本。网页界面设计的网络系统有哪些
密码回与新用户注册链接。
网站版权信息及其。
登录页面描述
(1)在主页框架和风格的基础上，只需对中右部进行设计和实现。
(2)中右部分主要由三块构成，从上往下依次为:返回首页的链接与当前位置提示、用户登录表格框(用户注册温馨提示及其链接、用户名、密码、验证码及其刷新、密码回链接、登录按钮)、用户解冻温馨提示及其链接。
(3)如图4-1所示填写登录信息，然后单击登录按钮，启动登录脚本验证，信息验证无误再提交。
(4)使用专业网页工具创建登录的JSP文件，在主页框架和风格基础上参照模板设计登录表单及其内部元素，此时的页面文件主要包含HTML、JavaScript.CSS代码，然后将登录JSP文件导人到RAD创建的J2EE项目的Web模块的相应位置处,依据控制流程和业务逻辑填充或完善相应的JSP代码。
4.3.2 首页
用户访问的第一个页面，也是所有商品的显示页面，为网站的第一门户。
页面规划
在主页框架与风格基础上，针对其中部进行重新设计，放置一个表格框、两个按钮,这样的设计突出了应该表现的商品信息，简要而不拘泥。
设计要素
符合主页页面框架与显示风格。
LOGO以及网站名称、吉祥物图片。
网站导航栏以及搜索站内信息的表单。
快速返回首页的链接。
错误提示信息表格框。
快速返回上页按钮。
关闭当前窗口按钮。
网站版权信息及其。
页面样板
图42 首页
4.3.3 注册页面
注册页面是新用户必须填写的网页，其页面元素可以简单到只有三个文本框即用户名、密码、确认密码和一个注册按钮，也可以复杂到提供填写更多信息的文本框和信息提交前的验证脚本等等内容，既要能够收集必要的新用户信息，又要注意不能引起新用户的反感。
图43 注册页面
页面规划
比较常见的是在注册页面上，放置至少三个输人框、一个注册提交按钮，三个输人框包括新用户名框、密码框和确认密码框。
如果复杂点的注册页面还会包括、、通信地址和邮编以及个人爱好等输人框,这样的设计是希望能够尽可能多地收集用户信息，但是注意不能在未授权的情况下收集用户敏感信息，如身份证号码、银行账卡号等,同时要保证页面信息安全提交，不能泄露用户的注册信息。如果确实需要这些信息，必须经过专门机构的许可，给用户明确无误的说明，必要时提供签约界面来获取用户授权以保障双方权益。如果想要更有“吸引力”，就应该再增加对网站的一些核心描述、功能及其对用户来说可获得的益处。所以网站注册页面可以分为三栏，一栏为注册的基本信息；另一栏为注册的高级信息,还有一栏则为对网站服务有促进的营销信息。有些网站为了扩大注册用户数，利用一些用户随意的操作,弹出快捷有奖注册页面，这种手段在正规服务网站不能采用，会降低公众的关注度和信任指数。用户注册既能带来稳定客户，也带来应该担负的服务和安全责任,所以不要不验证，无限制盲目扩大。
设计要素
符合主页页面框架与显示风格。
LOGO以及网站名称、吉祥物图片。
网站导航栏以及搜索站内信息的表单。
最新公告、考勤流程、考勤查询、常见问题的链接或表单。
快速返回首页的链接以及当前位置。
注册元素(用户名、密码、确认密码输人框和注册提交按钮四个关键元素，还有用户名是否可用检查按钮、用户姓名、验证码等附加元素)。引起用户使用时特别要注意的链接与信息标注。验证码脚本、注册验证脚本。网站版权信息及其。
页面样板
注册页面描述
(1) 在主页框架和风格的基础上，只需对中右部进行设计和实现。
(2) 中右部分主要由两块构成，从上往下依次为: 返回首页的链接与当前位置提示、用户注册表格框(用户注册温馨提示及其链接、用户名、检查用户名是否可用、登录密码、确认密码输人框、用户姓名、验证码及其刷新、注册按钮)。
(3) 参考注意提示输人注册信息，打星号的文本框必须输人不能为空。
(4) 单击检查用户名是否可用按钮，查询数据库检验用户名是否存在，弹出相应页面。
(5) 单击注册按钮，注册脚本验证,校验两次密码是否一致，信息验证无误后再提交。
(6) 使用专业网页工具创建注册的JSP文件，在主页框架和风格基础上参照模板设计注册表单及其内部元素,此时的页面文件主要包含HTML、JavaScript、CSS代码将注册JSP文件导人到RAD创建的J2EE项目的Web模块的相应位置处，依据控制流程和商业逻辑填充或完善相应的JSP 代码。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。