新闻发布系统用户界面设计.docx

1、新闻发布系统用户界面设计新闻发布系统用户界面设计报告文件状态： 草稿 正式发布 正在修改文件标识：Hands-On-新闻发布系统-SD-UI当前版本：1.0作 者：完成日期：07-03-14机构公开信息版 本 历 史版本/状态作者参与者起止日期备注1.0新建 目 录 0. 文档介绍 50.1 文档目的 50.2 文档范围 50.3 读者对象 50.4 参考文献 50.5 术语与缩写解释 51. 应当遵循的界面设计规范 61.1：易用性： 61.2易用性细则 62. 界面的关系图和工作流程图 62.1前台管理界面功能一览 62.2 后台管理员界面功能一览 72.3 界面关系及工作流程 72.3.

2、1用户界面关系 72.3.2后台管理界面关系 83. 界面关系 93.1 登录界面 93.1.1 登录界面视图 93.1.2 登录界面功能一览 93.2 用户浏览新闻主界面 103.2.1 主界面视图 103.3用户新闻管理界面 173.3.1 新闻发布界面 183.3.2 新闻管理页面 193.3.3 新闻管理功能一览 193.3.4当日新闻一览页面 203.3.5 新闻统计量页面 213.3.6 文章是否允许评论页面 214 后台管理页面 224.1管理员管理 234.1.1添加用户页面 234.1.2 添加用户页面功能一览 234.1.3 管理用户页面 244.2类别管理 264.2.1

3、 添加栏目页面 264.2.2添加栏目功能一览 264.2.3栏目管理页面 274.2.4 栏目管理功能一览 274.2.5添加子类页面 284.2.4 添加类别功能一览 284.2.5分类管理页面 294.2.6类别管理功能一览 295 日志管理 305.1 用户日志管理页面 3052新闻日志管理页面 306新闻评论管理 317 文章审核管理 310. 文档介绍0.1 文档目的新闻发布系统用户界面设计报告。是为了开发新闻发布系统而编写，主要面向系统分析员、程序员、测试员、实施员和最终用户。本说明书是整个软件开发的依据，它对以后阶段的工作起指导作用。本文也是项目完成后系统验收的依据。0.2 文

4、档范围本文档主要包含以下几部分：1. 文档介绍2. 界面设计规范3. 界面关系图4. 主界面说明0.3 读者对象本文档的读者主要包含以下几类：1. 界面设计人员2. 美工人员3. 编码人员4. 测试人员0.4 参考文献提示：列出本文档的所有参考文献（可以是非正式出版物），格式如下：标识符 作者，文献名称，出版单位（或归属单位），日期例如：AAA 作者，立项建议书，机构名称，日期SPP-PROC-SD SEPG，系统设计规范，机构名称，日期0.5 术语与缩写解释缩写、术语解 释GIFGraphics Interchange Format的缩写图像交换格式的缩写1. 应当遵循的界面设计规范界面是软

5、件与用户交互的最直接的层，界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作，起到向导的作用。 用户原则:1.1：易用性：按钮名称应该易懂，用词准确，屏弃模棱两可的字眼，要与同一界面上的其他按钮易于区分，能望文知意最好, 理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。1.2易用性细则：1):完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。2):按功能将界面划分局域块，用Frame框括起来,并要有功能说明或标题。3):界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。 4):同一界面上的控

6、件数最好不要超过10个，多于10个时可以考虑使用分页界面显示。 5):复选框和选项框按选择几率的高底而先后排列。6):复选框和选项框要有默认选项，并支持Tab选择。7):选项数相同时多用选项框而不用下拉列表框。8):界面空间较小时使用下拉框而不用选项框。9):选项数较少时使用选项框，相反使用下拉列表框。10):专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性词眼。2. 界面的关系图和工作流程图2.1前台管理界面功能一览界面名称界面标识功能说明登录Login.jsp对用户的身份进行验证普通注册用户介面register.jsp据用户权限进入新闻的管理页面(当日新闻一览, 新闻统计量,

7、 文章是否允许评论, 新 闻 发 布 ,新 闻 管 理)非注册用户界面(普通注册用户)Index.jsp查看在线新闻并对新闻发表评论(注册用户可以进行自身资料的修改，没有注册用户的可在此进行注册)当日新闻一览scan_tody_news.jsp用户浏览当日发布的，并经过管理员审核的所有新闻新闻统计量newstatistic.jsp用户查看权限范围内所有的新闻的统计量并可查看据年，月，日排序的各新闻的统计量文章是否允许评论comment_news.jsp用户对自己发布的新闻进行管理决定是否允许别人进行评论。（包括单个和批量的禁止和允许评论）新 闻 发 布info_add.jsp发布新闻新 闻 管

8、 理Info_manager.jsp对权限内的新闻进行管理。（可以更换新闻类别查询文章）。查看更多新闻News.jsp可以根据需要查看更多的新闻并发表评论查看新闻的具体内容Newsinfo.jsp根据需要查看新闻的具体内容表 2-1 新闻发布系统客户端界面一览表2.2 后台管理员界面功能一览界面名称界面标识功能说明登录Login.jsp对用户的身份进行验证管理员管理菜单页admin.jsp根据用户权限进入管理页面（管理员管理，分类管理，管理日志，评论管理，文章审核，系统管理，使用帮助）管理员管理userAdd.jsp添加新用户。（默认是不用审核的）userList.jsp对用户进行管理（用户锁

9、定，用户审核，用户权限更改）userAuditing.jsp对注册的用户进行审核（后台用户添加的默认通过）UserDetail.jsp用户的详情页Updatepassword.jsp修改密码 找回密码 （前后台通用）分类管理addcolumn.jsp添加栏目columnList.jsp对栏目进行管理包括（栏目的修改和删除）addType.jsp添别相应栏目下的类别typeList.jsp对类别进行管理包括（类别的修改和删除及对类别所属栏目的修改）管理日志Loginlist.jsp用户登录日志管理（对日志进行单个或批量删除）评论管理Commentlist.jsp对新闻评论进行管理（可查询某条新的

10、所有相关评论）文章管理newsAuditing.jsp对发布的新闻进行审核（所有能显示的文章都是经过审核的）Addnews.jsp发布新闻（后台发表的默认通过审核）Newsdetail.jsp新闻详情页，可以回复Newslist.jsp显示所有通过审核的新闻系统管理CopyrightList.jsp系统相关信息的查看及修改表 2-2 新闻发布系统服务器端界面一览表 2.3 界面关系及工作流程2.3.1用户界面关系图2-1新闻发布系统客户端界面关系及工作流程图2.3.2后台管理界面关系图2-1新闻管理系统服务器端界面关系及工作流程图3. 界面关系3.1 登录界面3.1.1 登录界面视图图 3-1

11、新闻发布系统登录界面login.jsp注：新闻发布系统登录页面1：管理员可登录到后台管理页面。2：注册用户前台登陆到主页.3：验证码验证4：忘记密码通过邮箱找回3.1.2 登录界面功能一览登录对象标识功能操作普通注册用户Login.jsp是非锁定的经过审核的注册用户登录到新闻管理页面，管理员则登录到管理员管理页面.登录管理员Login.jsp3.2 用户浏览新闻主界面3.2.1 主界面视图图 3-1闻发布系统用户浏览新闻主界面index.html注：用户浏览新闻主页面1：热点新闻：显示今日的热点新闻。点击可浏览新闻详细内容。1：没有注册的用户可以点击注册进行用户注册。2：注册的用户可以点击修改

12、进行我的资料修改。3：所有用户都可以浏览某个栏目下的新闻。4：点击频道可以查看当前栏目的所有类别。图 3-2 闻发布系统查看更多类别界面newsinclass.html查看某栏目下所有类别页面：显示新闻栏目下的所有新闻类别。1：点more可以浏览类别下更多的新闻。2：直接点击新闻标题可以浏览新闻详细内容。图 3-3 闻发布系统查看某个类别所有新闻界面news.jsp查看某个类别下的所有新闻:当点击某个类别时，显示某个类别下的所有新闻，用户可以点击新闻标题查看新闻详细内容。图 3-4 闻发布系统用户个人信息user_modpass.jsp1:用户资料修改页面：用户可以修改自己的资料，其中：1：用

13、户名不能输入非法字符，如“*”。2：原密码不能为空。3：新密码不能为空。在页面通过javascript验证，可以让其用户名不含非法字符，原密码，新密码不为空。如果用户修改电话号码，Email,QQ,出生日期。则验证这些输入的合法性，电话号码是否都是数字，Email是否符合格式，如 xiaoming 等。控件名称控件名称描述文本框（text）username用户名文本框（text）PassWord密码文本框（text）Qqqq文本框（text）phone手机号文本框（text）email电子邮件文本框（text）isAdmin管理员文本框（text）锁定锁定注：红色（*）号为必添项用户注册页面：

14、未注册的用户可在此注册，成为新闻发布系统的注册新用户。如图可知，1:用户输入的用户名不能为空且不能包含非法字符.2:密码及确认密码均不能为空。3:当用户输入电话号码，Email,QQ,出生日期时验认其输入是否有效.4:当用户点击注册时，在后台验认其用户名是否存在，若存在则提示用户“用户名已存在”控件名称控件名称描述文本框（text）username用户名文本框（text）PassWord原 密 码文本框（text）checkpass新密码文本框（text）phone电话号码文本框（text）email电子邮件文本框（text）qqQQ文本框（text）birthday出生日期图 3-7 闻发布

15、系统提示用户注册成功user_inserted.htm注：当用户注册成功时，跳转到login.jsp；图 3-6 新闻发布系统新闻内容界面注：新闻详细内容页面.用户可以查看新闻的详细内容.图 3-7 闻发布系统发布新闻评论界面1：评论人可以为空。图3-7闻发布系统查看评论页面-commentcontent.htm注：用户点击“查看评论”可以查看某条新闻的所有评论。3.3用户新闻管理界面 图 3-8 新闻发布系统用户登录页面index.jsp新闻发布管理页面：注册用户登录后就时入到新闻发布系统新闻管理页面：用户可以进行的操作有：1：类别管理2：新闻管理3：栏目管理4：用户管理5：评论管理6：日志

16、管理7：版权信息3.3.1 新闻发布界面图 3-9 新闻发布系统新闻发布页面 info_add.html新闻发布页面：注册用户可以在此发表新闻控 件 类 型控 件 名 称描 述文本框（text） (News_Title)输入新闻标题（新闻标题不能为空）上传控件 (News_price)上传图片下接列表框(select)News_Item（选择栏目）文本框（text） (News_Key)输入关键字文本框（text）News_Date发布时间文本框（text）News_userID发布人文本框（text）News_Source信息来源富文本编辑器EditorDefault信息内容下拉列表框是否允

17、许被评论SubmitSubmit提交要发布的新闻3.3.2 新闻管理页面图 3-10 新闻发布系统-新闻管理页面-info_manager.jsp新闻管理页面：用户可以对新闻进行管理：1：可以修改发布的新闻。2：可以对发布的新闻进行删除：用户一条一条的删除新闻，也可以批量删除新闻.3：可以据新闻标题，新闻内容，关键字进行新闻的检索。5:所有新闻分页显示，每个页面只能显示八条新闻。3.3.3 新闻管理功能一览1：用户可以浏览当日发表的并通过管理员审核的当日新闻。2：点击新闻标题可以查看新闻的详细内容。3.3.5 新闻统计量页面图3-12新闻发布系统-新闻统计量页面用户可以查看每条新闻的点击量包括

18、年，月，日，总的点击量。也可按年，月，日将其重新排序显示.4 后台管理页面4.1管理员管理4.1.1添加用户页面用户添加页面-User_add.jsp用户添加页面：后台管理员可以添加用户。1：添加的用户名不能为空且不能包含非法字符，如 “*”。2：密码不能为空。3：满足各类验证注：上述操作均可以使用javascript脚本验证实现.4.1.2 添加用户页面功能一览控 件 类 型控 件 名称描述文本框(text)UserName 管理员输入要添加用户的用户名文本框(text)PassWord输入密码图3-15新闻发布系统-用户添加页面4.1.3 管理用户页面图 3-15 新闻发布系统-管理用户页

19、面管理用户页面：管理员可以对用户进行管理，包括1：用户锁定 由于某些原因管理员可以锁定用户使其不能再登录新闻发布系统新闻管理页面。2：用户审核 由于管理员添加的用户默认是通过审核的，而前台注册用户是未通过审核的，所以在此要求管理员对新注册的用户进行审核。如上图所示：通过审核的用户显示已审核。而未通过审核的用户则要等待管理员审核。4.2类别管理4.2.1 添加栏目页面图 3-15 新闻发布系统-添加栏目页面 栏目添加页面：管理员可以添加栏目。1：填写的栏目名称不能为空且不能包含非法字符2：栏目描述不能为空且不能包含非法字符。3：栏目顺序为从数据库读出的不用管理员添加的，要想修改栏目顺序要到栏目管

20、理中修改。4：只允许添加八个栏目，若满八个再添加则会提示管理员不能再添加.4.2.2添加栏目功能一览控件类型 控 件 名 称描术文本框(text)ClassName栏目名称文本框(text)Dscription栏目描述文本框(text)Quent栏目顺序4.2.3栏目管理页面图 3-15 新闻发布系统-栏目管理页面栏目管理页面：1：用户可以在此修改栏目的名称，描述，及顺序。此处栏目顺序可以重复。在前台显示时若栏目顺序相同则按添加时间顺序显示栏目。(若输入不是数字则提示“只能输入数字”)2：更改完要修改的内容，点击“修改” 可以修改栏目。3：当点击删除时，首先要检查其下是否有类别，若有类别则不能

21、删除，提示管理员“您只能删除空类别”。4.2.4 栏目管理功能一览控 件 类 型控 件 名 称描述文本框(text)Textfield（栏目名称）输入文本（要修改的栏目名称）文本框(text)textfield2(栏目描述 )输入文本（要修改的栏目描述）文本框(text)textfield3(栏目顺序)输入文本（描述信息顺序）超链接(删除)删除当前栏目4.2.5添加子类页面图 3-16 新闻发布系统-添加类别页面类别添加页面：管理员可以添加栏目下的类别1:类别名称不能为空且不能包含非法字符。2：分类描述不能为空且不能含有非法字符。3：分类顺序只能为数字。4：在后台按类别顺序显示类别。4.2.4

22、 添加类别功能一览控 件 类 型控 件 名 称功 能文本框(text) (oneClassName)输入文本（要添加的栏目及描述信息顺序）下拉列表框(select)select选择增加在哪个栏目下的类别文本框(text) (dscription)输入栏目描述提交按钮(submit) (quent)输入栏目顺序4.2.5分类管理页面图 3-17 新闻发布系统-添加类别页面管理员可以对类别进行管理：1：修改要进行修改的类别的内容，点击修改。2：分类名称不能为空。3：选择类别所属的栏目。4：填写要更改的顺序。若输入不是数字则提示“只能输入数字”5：点击删除时：先检查类别下是否有新闻，若有新闻则不能删

23、除。4.2.6类别管理功能一览控 件 类 型控 件 名 称描述文本框(text)Classname（分类名称）输入文本（要修改的类别及描述信息顺序）文本框(text)Description（描述）修改当前类别信息(返回当页面)文本框(text)Classorder（顺序）删除当前类别下拉列表框(select)Itemid(所属栏目)反当前类别变换到其它栏目下5 日志管理5.1 用户日志管理页面图 3-19 新闻发布系统-日志管理页面6新闻评论管理新闻评论管理：1：管理员可以查看所有的新闻评论。2：管理员可以检索某条新闻的所有评论。3：管理员可以删除或批量删除新闻评论。7 文章审核管理管理员可以对用户发布的新闻进行审核，只有通过审核的新闻才能被用户看到；此页面显示的文章均需等待管理员进行审核.1：管理员选择要通过审核的文章，点击通过审核。