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

新闻发布系统用户界面设计报告机构公开信息版本历史目录0. 文档介绍 (5)0.1 文档目的 (5)0.2 文档范围 (5)0.3 读者对象 (5)0.4 参考文献 (5)0.5 术语与缩写解释 (5)1. 应当遵循的界面设计规范 (6)1.1：易用性： (6)1.2易用性细则 (6)2. 界面的关系图和工作流程图 (6)2.1前台管理界面功能一览 (6)2.2 后台管理员界面功能一览 (7)2.3 界面关系及工作流程 (7)2.3.1用户界面关系 (7)2.3.2后台管理界面关系 (8)3. 界面关系 (9)3.1 登录界面 (9)3.1.1 登录界面视图 (9)3.1.2 登录界面功能一览 (9)3.2 用户浏览新闻主界面 (10)3.2.1 主界面视图 (10)3.3用户新闻管理界面 (15)3.3.1 新闻发布界面 (16)3.3.2 新闻管理页面 (17)3.3.3 新闻管理功能一览 (17)3.3.4当日新闻一览页面.................................................................. 错误！未定义书签。

3.3.5 新闻统计量页面 (17)3.3.6 文章是否允许评论页面......................................................... 错误！未定义书签。

4 后台管理页面 (18)4.1管理员管理 (18)4.1.1添加用户页面 (18)4.1.2 添加用户页面功能一览 (19)4.1.3 管理用户页面 (19)4.2类别管理 (19)4.2.1 添加栏目页面 (19)4.2.2添加栏目功能一览 (20)4.2.3栏目管理页面 (20)4.2.4 栏目管理功能一览 (20)4.2.5添加子类页面 (21)4.2.4 添加类别功能一览 (21)4.2.5分类管理页面 (21)4.2.6类别管理功能一览 (22)5 日志管理 (22)5.1 用户日志管理页面 (22)5．2新闻日志管理页面.................................................................. 错误！未定义书签。

6新闻评论管理 (22)7 文章审核管理 (23)0. 文档介绍0.1 文档目的新闻发布系统《用户界面设计报告》。

是为了开发新闻发布系统而编写，主要面向系统分析员、程序员、测试员、实施员和最终用户。

本说明书是整个软件开发的依据，它对以后阶段的工作起指导作用。

本文也是项目完成后系统验收的依据。

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

而且设计良好的界面能够引导用户自己完成相应的操作，起到向导的作用。

用户原则:1.1：易用性：按钮名称应该易懂，用词准确，屏弃模棱两可的字眼，要与同一界面上的其他按钮易于区分，能望文知意最好, 理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。

1.2易用性细则：1):完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。

2):按功能将界面划分局域块，用Frame框括起来,并要有功能说明或标题。

3):界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。

4):同一界面上的控件数最好不要超过10个，多于10个时可以考虑使用分页界面显示。

5):复选框和选项框按选择几率的高底而先后排列。

6):复选框和选项框要有默认选项，并支持Tab选择。

7):选项数相同时多用选项框而不用下拉列表框。

8):界面空间较小时使用下拉框而不用选项框。

9):选项数较少时使用选项框，相反使用下拉列表框。

10):专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性词眼。

2. 界面的关系图和工作流程图2.1前台管理界面功能一览表 2-1 新闻发布系统客户端界面一览表2.2 后台管理员界面功能一览表 2-2 新闻发布系统服务器端界面一览表2.3 界面关系及工作流程2.3.1用户界面关系图2-1新闻发布系统客户端界面关系及工作流程图2.3.2后台管理界面关系图2-1新闻管理系统服务器端界面关系及工作流程图3. 界面关系3.1 登录界面3.1.1 登录界面视图图 3-1新闻发布系统登录界面login.jsp 注：新闻发布系统登录页面1：管理员可登录到后台管理页面。

2：注册用户前台登陆到主页.3：验证码验证4：忘记密码通过邮箱找回3.1.2 登录界面功能一览3.2 用户浏览新闻主界面3.2.1 主界面视图图 3-1闻发布系统用户浏览新闻主界面－index.html 注：用户浏览新闻主页面1：热点新闻：显示今日的热点新闻。

点击可浏览新闻详细内容。

1：没有注册的用户可以点击注册进行用户注册。

2：注册的用户可以点击修改进行我的资料修改。

3：所有用户都可以浏览某个栏目下的新闻。

4：点击频道可以查看当前栏目的所有类别。

图 3-2 闻发布系统查看更多类别界面－newsinclass.html 查看某栏目下所有类别页面：显示新闻栏目下的所有新闻类别。

1：点more可以浏览类别下更多的新闻。

2：直接点击新闻标题可以浏览新闻详细内容。

图 3-3 闻发布系统查看某个类别所有新闻界面－news.jsp查看某个类别下的所有新闻:当点击某个类别时，显示某个类别下的所有新闻，用户可以点击新闻标题查看新闻详细内容。

图 3-4 闻发布系统用户个人信息－user_modpass.jsp1:用户资料修改页面：用户可以修改自己的资料，其中：1：用户名不能输入非法字符，如“*”。

2：原密码不能为空。

3：新密码不能为空。

在页面通过javascript验证，可以让其用户名不含非法字符，原密码，新密码不为空。

如果用户修改电话号码，Email,QQ,出生日期。

则验证这些输入的合法性，电话号码是否都是数字，Email是否符合格式，如xiaoming@ 等。

用户注册页面：未注册的用户可在此注册，成为新闻发布系统的注册新用户。

如图可知，1:用户输入的用户名不能为空且不能包含非法字符.2:密码及确认密码均不能为空。

3:当用户输入电话号码，Email,QQ,出生日期时验认其输入是否有效.4:当用户点击注册时，在后台验认其用户名是否存在，若存在则提示用户“用户名已存在”图 3-7 闻发布系统提示用户注册成功－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：日志管理7：版权信息图 3-9 新闻发布系统新闻发布页面 –info_add.html新闻发布页面：注册用户可以在此发表新闻图 3-10 新闻发布系统-新闻管理页面-info_manager.jsp 新闻管理页面：用户可以对新闻进行管理：1：可以修改发布的新闻。

2：可以对发布的新闻进行删除：用户一条一条的删除新闻，也可以批量删除新闻.3：可以据新闻标题，新闻内容，关键字进行新闻的检索。

5:所有新闻分页显示，每个页面只能显示八条新闻。

3.3.3 新闻管理功能一览1：用户可以浏览当日发表的并通过管理员审核的当日新闻。

2：点击新闻标题可以查看新闻的详细内容。

3.3.5 新闻统计量页面图3-12新闻发布系统-新闻统计量页面用户可以查看每条新闻的点击量包括年，月，日，总的点击量。

也可按年，月，日将其重新排序显示.4 后台管理页面4.1管理员管理4.1.1添加用户页面用户添加页面-User_add.jsp用户添加页面：后台管理员可以添加用户。

1：添加的用户名不能为空且不能包含非法字符，如“*”。

2：密码不能为空。

3：满足各类验证注：上述操作均可以使用javascript脚本验证实现.4.1.2 添加用户页面功能一览图3-15新闻发布系统-用户添加页面4.1.3 管理用户页面图 3-15 新闻发布系统-管理用户页面管理用户页面：管理员可以对用户进行管理，包括1：用户锁定由于某些原因管理员可以锁定用户使其不能再登录新闻发布系统新闻管理页面。

2：用户审核由于管理员添加的用户默认是通过审核的，而前台注册用户是未通过审核的，所以在此要求管理员对新注册的用户进行审核。

如上图所示：通过审核的用户显示已审核。

而未通过审核的用户则要等待管理员审核。

4.2类别管理4.2.1 添加栏目页面图 3-15 新闻发布系统-添加栏目页面栏目添加页面：管理员可以添加栏目。

1：填写的栏目名称不能为空且不能包含非法字符2：栏目描述不能为空且不能包含非法字符。

3：栏目顺序为从数据库读出的不用管理员添加的，要想修改栏目顺序要到栏目管理中修改。

4：只允许添加八个栏目，若满八个再添加则会提示管理员不能再添加.4.2.2添加栏目功能一览4.2.3栏目管理页面图 3-15 新闻发布系统-栏目管理页面栏目管理页面：1：用户可以在此修改栏目的名称，描述，及顺序。

此处栏目顺序可以重复。

在前台显示时若栏目顺序相同则按添加时间顺序显示栏目。

(若输入不是数字则提示“只能输入数字”)2：更改完要修改的内容，点击“修改”可以修改栏目。

3：当点击删除时，首先要检查其下是否有类别，若有类别则不能删除，提示管理员“您只能删除空类别”。

4.2.4 栏目管理功能一览新闻发布系统《用户界面设计报告》21 -4.2.5添加子类页面图 3-16 新闻发布系统-添加类别页面类别添加页面：管理员可以添加栏目下的类别1:类别名称不能为空且不能包含非法字符。

2：分类描述不能为空且不能含有非法字符。