新闻发布系统用户界面设计.docx
《新闻发布系统用户界面设计.docx》由会员分享，可在线阅读，更多相关《新闻发布系统用户界面设计.docx（25页珍藏版）》请在冰豆网上搜索。
新闻发布系统用户界面设计
新闻发布系统
用户界面设计报告
文件状态：
[√]草稿
[]正式发布
[]正在修改
文件标识：
Hands-On-新闻发布系统-SD-UI
当前版本：
1.0
作者：
完成日期：
07-03-14
机构公开信息
版本历史
版本/状态
作者
参与者
起止日期
备注
1.0
新建
目录
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用户新闻管理界面17
3.3.1新闻发布界面18
3.3.2新闻管理页面19
3.3.3新闻管理功能一览19
3.3.4当日新闻一览页面20
3.3.5新闻统计量页面21
3.3.6文章是否允许评论页面21
4后台管理页面22
4.1管理员管理23
4.1.1添加用户页面23
4.1.2添加用户页面功能一览23
4.1.3管理用户页面24
4.2类别管理26
4.2.1添加栏目页面26
4.2.2添加栏目功能一览26
4.2.3栏目管理页面27
4.2.4栏目管理功能一览27
4.2.5添加子类页面28
4.2.4添加类别功能一览28
4.2.5分类管理页面29
4.2.6类别管理功能一览29
5日志管理30
5.1用户日志管理页面30
5．2新闻日志管理页面30
6新闻评论管理31
7文章审核管理31
0.文档介绍
0.1文档目的
新闻发布系统《用户界面设计报告》。
是为了开发新闻发布系统而编写，主要面向系统分析员、程序员、测试员、实施员和最终用户。
本说明书是整个软件开发的依据，它对以后阶段的工作起指导作用。
本文也是项目完成后系统验收的依据。
0.2文档范围
本文档主要包含以下几部分：
1.文档介绍
2.界面设计规范
3.界面关系图
4.主界面说明
0.3读者对象
本文档的读者主要包含以下几类：
1.界面设计人员
2.美工人员
3.编码人员
4.测试人员
0.4参考文献
提示：
列出本文档的所有参考文献（可以是非正式出版物），格式如下：
[标识符]作者，文献名称，出版单位（或归属单位），日期
例如：
[AAA]作者，《立项建议书》，机构名称，日期
[SPP-PROC-SD]SEPG，系统设计规范，机构名称，日期
0.5术语与缩写解释
缩写、术语
解释
GIF
GraphicsInterchangeFormat的缩写－图像交换格式的缩写
1.应当遵循的界面设计规范
界面是软件与用户交互的最直接的层，界面的好坏决定用户对软件的第一印象。
而且设计良好的界面能够引导用户自己完成相应的操作，起到向导的作用。
用户原则:
1.1：
易用性：
按钮名称应该易懂，用词准确，屏弃模棱两可的字眼，要与同一界面上的其他按钮易于区分，能望文知意最好,理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。
1.2易用性细则：
1）:
完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。
2）:
按功能将界面划分局域块，用Frame框括起来,并要有功能说明或标题。
3）:
界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。
4）:
同一界面上的控件数最好不要超过10个，多于10个时可以考虑使用分页界面显示。
5）:
复选框和选项框按选择几率的高底而先后排列。
6）:
复选框和选项框要有默认选项，并支持Tab选择。
7）:
选项数相同时多用选项框而不用下拉列表框。
8）:
界面空间较小时使用下拉框而不用选项框。
9）:
选项数较少时使用选项框，相反使用下拉列表框。
10）:
专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性词眼。
2.界面的关系图和工作流程图
2.1前台管理界面功能一览
界面名称
界面标识
功能说明
登录
Login.jsp
对用户的身份进行验证
普通注册用户介面
register.jsp
据用户权限进入新闻的管理页面（当日新闻一览,新闻统计量,文章是否允许评论,新闻发布,新闻管理）
非注册用户界面（普通注册用户）
Index.jsp
查看在线新闻并对新闻发表评论（注册用户可以进行自身资料的修改，没有注册用户的可在此进行注册）
当日新闻一览
scan_tody_news.jsp
用户浏览当日发布的，并经过管理员审核的所有新闻
新闻统计量
newstatistic.jsp
用户查看权限范围内所有的新闻的统计量并可查看据年，月，日排序的各新闻的统计量
文章是否允许评论
comment_news.jsp
用户对自己发布的新闻进行管理决定是否允许别人进行评论。
（包括单个和批量的禁止和允许评论）
新闻发布
info_add.jsp
发布新闻
新闻管理
Info_manager.jsp
对权限内的新闻进行管理。
（可以更换新闻类别查询文章）。
查看更多新闻
News.jsp
可以根据需要查看更多的新闻并发表评论
查看新闻的具体内容
Newsinfo.jsp
根据需要查看新闻的具体内容
表2-1新闻发布系统客户端界面一览表
2.2后台管理员界面功能一览
界面名称
界面标识
功能说明
登录
Login.jsp
对用户的身份进行验证
管理员管理菜单页
admin.jsp
根据用户权限进入管理页面（管理员管理，分类管理，管理日志，评论管理，文章审核，系统管理，使用帮助）
管理员管理
userAdd.jsp
添加新用户。
（默认是不用审核的）
userList.jsp
对用户进行管理（用户锁定，用户审核，用户权限更改）
userAuditing.jsp
对注册的用户进行审核（后台用户添加的默认通过）
UserDetail.jsp
用户的详情页
Updatepassword.jsp
修改密码找回密码（前后台通用）
分类管理
addcolumn.jsp
添加栏目
columnList.jsp
对栏目进行管理包括（栏目的修改和删除）
addType.jsp
添别相应栏目下的类别
typeList.jsp
对类别进行管理包括（类别的修改和删除及对类别所属栏目的修改）
管理日志
Loginlist.jsp
用户登录日志管理（对日志进行单个或批量删除）
评论管理
Commentlist.jsp
对新闻评论进行管理（可查询某条新的所有相关评论）
文章管理
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新闻发布系统登录界面login.jsp
注：
新闻发布系统登录页面
1：
管理员可登录到后台管理页面。
2：
注册用户前台登陆到主页.
3：
验证码验证
4：
忘记密码通过邮箱找回
3.1.2登录界面功能一览
登录对象
标识
功能
操作
普通注册用户
Login.jsp
是非锁定的经过审核的注册用户登录到新闻管理页面，管理员则登录到管理员管理页面.
登录
管理员
Login.jsp
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.jsp
1:
用户资料修改页面：
用户可以修改自己的资料，其中：
1：
用户名不能输入非法字符，如“*”。
2：
原密码不能为空。
3：
新密码不能为空。
在页面通过javascript验证，可以让其用户名不含非法字符，原密码，新密码不为空。
如果用户修改电话号码，Email,QQ,出生日期。
则验证这些输入的合法性，电话号码是否都是数字，Email是否符合格式，如xiaoming@等。
控件名称
控件名称
描述
文本框（text）
username
用户名
文本框（text）
PassWord
密码
文本框（text）
Qq
qq
文本框（text）
phone
手机号
文本框（text）
email
电子邮件
文本框（text）
isAdmin
管理员
文本框（text）
锁定
锁定
注：
红色（*）号为必添项
用户注册页面：
未注册的用户可在此注册，成为新闻发布系统的注册新用户。
如图可知，1:
用户输入的用户名不能为空且不能包含非法字符.
2:
密码及确认密码均不能为空。
3:
当用户输入电话号码，Email,QQ,出生日期时验认其输入是否有效.
4:
当用户点击注册时，在后台验认其用户名是否存在，若存在则提示用户“用户名已存在”
控件名称
控件名称
描述
文本框（text）
username
用户名
文本框（text）
PassWord
原密码
文本框（text）
checkpass
新密码
文本框（text）
phone
电话号码
文本框（text）
email
电子邮件
文本框（text）
qq
QQ
文本框（text）
birthday
出生日期
图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.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
信息内容
下拉列表框
是否允许被评论
Submit
Submit
提交要发布的新闻
3.3.2新闻管理页面
图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添加用户页面功能一览
控件类型
控件名称
描述
文本框（text）
UserName
管理员输入要添加用户的用户名
文本框（text）
PassWord
输入密码
图3-15新闻发布系统-用户添加页面
4.1.3管理用户页面
图3-15新闻发布系统-管理用户页面
管理用户页面：
管理员可以对用户进行管理，包括
1：
用户锁定由于某些原因管理员可以锁定用户使其不能再登录新闻发布系统新闻管理页面。
2：
用户审核由于管理员添加的用户默认是通过审核的，而前台注册用户是未通过审核的，所以在此要求管理员对新注册的用户进行审核。
如上图所示：
通过审核的用户显示已审核。
而未通过审核的用户则要等待管理员审核。
4.2类别管理
4.2.1添加栏目页面
图3-15新闻发布系统-添加栏目页面
栏目添加页面：
管理员可以添加栏目。
1：
填写的栏目名称不能为空且不能包含非法字符
2：
栏目描述不能为空且不能包含非法字符。
3：
栏目顺序为从数据库读出的不用管理员添加的，要想修改栏目顺序要到栏目管理中修改。
4：
只允许添加八个栏目，若满八个再添加则会提示管理员不能再添加.
4.2.2添加栏目功能一览
控件类型
控件名称
描术
文本框（text）
ClassName
栏目名称
文本框（text）
Dscription
栏目描述
文本框（text）
Quent
栏目顺序
4.2.3栏目管理页面
图3-15新闻发布系统-栏目管理页面
栏目管理页面：
1：
用户可以在此修改栏目的名称，描述，及顺序。
此处栏目顺序可以重复。
在前台显示时若栏目顺序相同则按添加时间顺序显示栏目。
（若输入不是数字则提示“只能输入数字”）
2：
更改完要修改的内容，点击“修改”可以修改栏目。
3：
当点击删除时，首先要检查其下是否有类别，若有类别则不能删除，提示管理员“您只能删除空类别”。
4.2.4栏目管理功能一览
控件类型
控件名称
描述
文本框（text）
Textfield（栏目名称）
输入文本（要修改的栏目名称）
文本框（text）
textfield2（栏目描述）
输入文本（要修改的栏目描述）
文本框（text）
textfield3（栏目顺序）
输入文本（描述信息顺序）
超链接（删除）
删除当前栏目
4.2.5添加子类页面
图3-16新闻发布系统-添加类别页面
类别添加页面：
管理员可以添加栏目下的类别
1:
类别名称不能为空且不能包含非法字符。
2：
分类描述不能为空且不能含有非法字符。
3：
分类顺序只能为数字。
4：
在后台按类别顺序显示类别。
4.2.4添加类别功能一览
控件类型
控件名称
功能
文本框（text）
（oneClassName）
输入文本（要添加的栏目及描述信息顺序）
下拉列表框（select）
select
选择增加在哪个栏目下的类别
文本框（text）
（dscription）
输入栏目描述
提交按钮（submit）
（quent）
输入栏目顺序
4.2.5分类管理页面
图3-17新闻发布系统-添加类别页面
管理员可以对类别进行管理：
1：
修改要进行修改的类别的内容，点击修改。
2：
分类名称不能为空。
3：
选择类别所属的栏目。
4：
填写要更改的顺序。
若输入不是数字则提示“只能输入数字”
5：
点击删除时：
先检查类别下是否有新闻，若有新闻则不能删除。
4.2.6类别管理功能一览
控件类型
控件名称
描述
文本框（text）
Classname（分类名称）
输入文本（要修改的类别及描述信息顺序）
文本框（text）
Description（描述）
修改当前类别信息（返回当页面）
文本框（text）
Classorder（顺序）
删除当前类别
下拉列表框（select）
Itemid（所属栏目）
反当前类别变换到其它栏目下
5日志管理
5.1用户日志管理页面
图3-19新闻发布系统-日志管理页面
6新闻评论管理
新闻评论管理：
1：
管理员可以查看所有的新闻评论。
2：
管理员可以检索某条新闻的所有评论。
3：
管理员可以删除或批量删除新闻评论。
7文章审核管理
管理员可以对用户发布的新闻进行审核，只有通过审核的新闻才能被用户看到；此页面显示的文章均需等待管理员进行审核.
1：
管理员选择要通过审核的文章，点击通过审核。
升级会员 