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

1、 新闻发布系统用户界面设计报告 1 - 1 新闻发布系统 用户界面设计报告 文件状态： 草稿 正式发布 正在修改 文件标识： Hands-On-新闻发布系统 -SD-UI 当前版本： 1.0 作 者： 完成日期： 07-03-14 机构公开信息 - 2 - 新闻发 布系统用户界面设计报告 2 版 本 历 史 版本 /状态 作者 参与者 起止日期 备注 1.0 新建 新闻发布系统用户界面设计报告 3 - 3 目目 录录 0. 文档介绍 . 5 0.1 文档目的 . 5 0.2 文档范围 . 5 0.3 读者对象 . 5 0.4 参考文献 . 5 0.5 术语与缩写解释 . 5 1. 应当遵循的界

2、面设计规范 . 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.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 添

4、加类别功能一览 . 21 - 4 - 新闻发 布系统用户界面设计报告 4 4.2.5 分类管理页面 . 21 4.2.6 类别管理功能一览 . 22 5 日志管理 . 22 5.1 用户日志管理页面 . 22 5 2 新闻日志管理页面 . 错误 !未定义书签。 6 新闻评论管理 . 22 7 文章审核管理 . 23 新闻发布系统用户界面设计报告 5 - 5 0. 文档介绍 0.1 文档目的 新闻发布系统用户界 面设计报告。是为了开发新闻发布系统而编写，主要面向系统分析员、程序员、测试员、实施员和最终用户。 本说明书是整个软件开发的依据，它对以后阶段的工作起指导作用。本文也是项目完成后系统验收的

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

6、mat 的缩写图像交换格式的缩写 - 6 - 新闻发 布系统用户界面设计报告 6 1. 应当遵循的界面设计规范 界面是软件与用户交互的最直接的层，界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作，起到向导的作 用。 用户原则 : 1.1：易用性： 按钮名称应该易懂，用词准确，屏弃模 棱 两可的字眼，要与同一界面上的其他按钮易于区分，能望文知意最好 , 理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。 1.2 易用性细则 ： 1):完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。 2):按功能将界面划分局域块，用 Frame 框

7、括起来 ,并要有功能说明或标题。 3):界面上首先应输入的和重要信息的控件在 Tab 顺序中应当靠前 ,位置也应放在窗口上较醒目的位置。 4):同一界面上的控件数最好不要超过 10 个，多于 10 个时可以考虑使用分页界面显示。 5):复选框和选项框按选择几率的高底而先后排列。 6):复选框和选项框要有默认选项，并支持 Tab 选择。 7):选项数相同时多用选项框而不用下拉列表框。 8):界面空间较小时使用下拉框而不用选项框。 9):选项数较少时使用选项框，相反使用下拉列表框。 10):专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性词眼。 2. 界面的关系图和工作流程图 2.1

8、 前台管理界面功能一览 界面名称 界面标识 功能说明 登录 Login.jsp 对用户的身份进行验证 普通注册用户介面 register.jsp 据用户权限进入新闻的管理页面 (当日新闻一览 , 新闻统计量 , 文章是否允许评论 , 新 闻 发 布 ,新 闻 管 理 ) 新闻发布系统用户界面设计报告 7 - 7 非注册用户界面 (普通注册用户 ) Index.jsp 查看在线新闻并对新闻发表评论 (注册用户可以进行自身资料的修改，没有注册用户的可在此进行注册 ) 当日新闻一览 scan_tody_news.jsp 用户浏览当日发布的，并经过管理员审核的所有新闻 新闻统计量 newstatist

9、ic.jsp 用户查看权限范围内所有的新闻的统计量并可查看据年， 月，日排序的各新闻的统计量 文章是否允许评论 comment_news.jsp 用户对自己发布的新闻进行管理决定是否允许别人进行评论。（包括单个和批量的禁止和允许评论） 新 闻 发 布 info_add.jsp 发布新闻 新 闻 管 理 Info_manager.jsp 对权限内的新闻进行管理。（可以更换新闻类别查询文章）。 查看更多新闻 News.jsp 可以根据需要查看更多的新闻并发表评论 查看新闻的具体内容 Newsinfo.jsp 根据需要查看新闻的具体内容 表 2-1 新闻发布系统客户 端界面一览表 2.2 后台管理员

10、界面功能一览 界面名称 界面标识 功能说明 登录 Login.jsp 对用户的身份进行验证 管理员管理菜单页 admin.jsp 根据用户权限进入管理页面（管理员管理，分类管理，管理日志，评论管理，文章审核，系统管理，使用帮助） 管理员管理 userAdd.jsp 添加新用户。（默认是不用审核的） userList.jsp 对用户进行管理（用户锁定，用户审核，用户权限更改） userAuditing.jsp 对注册的用户进行审核（后台用户添加的默认通过） UserDetail.jsp 用户的详情页 Updatepassword.jsp 修改密码 找回密码 （前后台通用） 分类管理 addcol

11、umn.jsp 添加栏目 columnList.jsp 对栏目进行管理包括（栏目的修改和删除） addType.jsp 添别相应栏目下的类别 typeList.jsp 对类别进行管理包括（类别的修改和删除及对类别所属栏目的修改） 管理日志 Loginlist.jsp 用户登录日志管理（对日志进行单个或批量删除） 评论管理 Commentlist.jsp 对新闻评论进行管理（可查询某条新的所有相关评论） 文章管理 newsAuditing.jsp 对发布的新闻进行审核（所有能显示的文章都是经过审核的） Addnews.jsp 发布新闻（后台发表的默认通过审核） Newsdetail.jsp 新闻

12、详情页，可以回复 Newslist.jsp 显示所有通过审核的新闻 系统管理 CopyrightList.jsp 系统相关信息的查看及修改 表 2-2 新闻发布系统服务器端界面一览表 2.3 界面关系及工作流程 2.3.1 用户界面关系 - 8 - 新闻发 布系统用户界面设计报告 8 用 户 登 录 页 面 主 窗 体新 闻 管 理当 日 新 闻 一 览新 闻 统 计 量新 闻 发 布文 章 是 否 允 许 评 论通 过 验 证新 闻 管 理用 户 浏 览新 闻 页 面用 户点 击 注 册用 户 注 册 页 面点击修改用 户 资 料 修 必 页 面点 击 栏 目 下 的 类 别显 示 类 别

13、下 的 所 有 新 闻图 2-1 新闻发布系统客户端界面关系及工作流程图 2.3.2 后台管理界面关系 管 理 员 登 录 页 面 主 窗 体管 理 用 户添 别 栏 目添 别 用 户栏 目 管 理通 过 验 证管 理 员 管 理类 别 管 理添 别 类 别分 类 管 理管 理 日 志评 论 管 理文 章 审 核系 统 管 理新 闻 日 志 管 理日 志 管 理文 章 审 核新 闻 评 论 管 理系 统 管 理图 2-1 新闻管理系统服务器端界面关系及工作流程图 新闻发布系统用户界面设计报告 9 - 9 3. 界面关系 3.1 登录界面 3.1.1 登录界面视图 图 3-1 新闻发布系统登录界

14、面 login.jsp 注：新闻发布系统登录页面 1：管理员可登录到后台管理页面。 2：注册用户 前台登陆到主页 . 3：验证码验证 4：忘记密码通过邮箱找回 3.1.2 登录界面功能一 览 登录对象 标识 功能 操作 普通注册用户 Login.jsp 是非锁定的经过审核的注册用户登录到新闻管理页面，管理员则登录到管理员管理页面 . 登录 管理员 Login.jsp - 10 - 新闻发 布系统用户界面设计报告 10 3.2 用户浏览新闻主界面 3.2.1 主界面视图 图 3-1 闻发布系统用户浏览新闻主界面 index.html 注：用户浏览新闻主页面 1：热点新闻：显示今日的热点新闻。点击可浏览新闻详细内容。 1：没有注册的用户可以点击注册进行用户注册。 2：注册的用户可以点击修改进行 我的 资料修改。 3：所有用户都可以浏览某个 栏目下的新闻。 4：点击频道可以查看当前栏目的所有类别。 图 3-2 闻发布系统查看更多类别界面 newsinclass.html 查看某栏目下所有类别页面：显示新闻栏目下的所有新闻类别。 1：点 more 可以浏览类别下更多的新闻。