Blog管理系统开发文档-2系统设计-2 用户界面设计.doc

博客管理系统 用户界面设计报告 文件状态： [ ] 草稿 [√] 正式发布 [ ] 正在修改 文件标识： ITjob-Blog-SD-UI 当前版本： V1.0 作 者： 杨勇 完成日期： 2008-6-19 版 本 历 史 版本/状态 作者 参与者 起止日期 备注 V0.1 杨勇 刘建中，刘意，安维 陶忠喜 2008-6-19至2008-6-20 初稿 V1.0 杨勇 刘建中，刘意，安维 陶忠喜 2008-6-20至2008-6-22 完善各个模块，生成数据字典 目 录 1. 文档介绍 4 1.1 文档目的 4 1.2 文档范围 4 1.3 读者对象 4 1.4 参考文献 4 1.5 术语与缩写解释 4 2. 应当遵循的界面设计规范 5 3. 界面的关系图和工作流程图 5 4. 主界面 5 5. 子界面A 5 6. 美学设计 6 7. 界面资源设计 6 1. 文档介绍 1.1 文档目的 本文档是对于博客管理系统的界面有一个参照的标准。 1.2 文档范围 用户界面的设计，包括主页面和各级子页面。 1.3 读者对象 读者分类 目 的 市场人员/客户代表 了解本文档对需求的理解是否和他们要求的一致 系统分析人员 理解用户需求，转化为系统需求 系统设计人员 理解用户需求，在设计时把握用户需求。 系统测试人员 了解用户需求，为测试提供参考 文档人员 编写用户使用和操作手册 1.4 参考文献 编号 文档名称 作者 发布日期 出版单位 备注 01 博客管理系统概要设计说明书V1.0 杨勇 2008-05-13 第1小组 正式发布 02 博客管理系统需求规格说明书V1.0 杨勇 2008-05-13 第1小组 正式发布 1.5 术语与缩写解释 缩写、术语 解 释 HTML Hypertext Markup Language, 中文也就是超文本链接标示语言。HTML（HyperTextMark-upLanguage）即超文本标记语言，是WWW的描述语言。 JavaScript 一种新的描述语言，此一语言可以被箝入 HTML 的文件之中。 网站美工 网站美工设计就是怎样把网站和应用程序做的好看一些。 2. 应当遵循的界面设计规范 一、设计风格1、依照网站的定位确定整体的设计风格。 2、主体框架页面、内容页尽量采用方型结构。禁用长距离的斜线及弧线结构，可允许小范围内的斜线及弧线。封面页、专题页可不受此限制。 3、设计时尽量在方块区边缘、按钮、标题装饰块上体现设计技巧，拐角可以有曲线变化。拐角块最大不得超过18像素。同一页面弧度尽量保持一致。 4、各主要栏目之间要求使用一致的布局，包括一致的页面元素；一致的导航形式，使用相同的铵钮，相同的顺序。可跟首页有变化。 5、首页及各级页面都必须带有网站的LOGO(建议小于150×54)，并链接到网站首页。6、统一按兼容分辨率800*600设计。为了使显示更友好，建议使用778或者760 px设计。7、网站页面长度建议1屏半到2屏。原则上长度不超过3屏，宽度不超过1屏。根据用户习惯和网站需要，国内中文网站综合类、门户类(包括垂直门户)网站可设计超过3屏。二、图形设计规范 1、 图片标准尺寸全尺寸banner为468×60px，半尺寸banner为234×60px，小logo为88×31px另外150×68、120×90，120×60也是标准尺寸，网站logo一般控制在150×54以内，客户要求或特殊广告图片可另定尺寸。建议首页存储大小不得超过150K(包括图片)，其它页面经压缩后尺寸不得超过70K。2、 图片的分类及命名规则☆ 名称分为头尾两两部分，用下划线隔开。☆ 头部分表示此图片的大类性质，例如广告、标志、菜单、按钮等等。☆ 一般来说:放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner标志性的图片我们取名为：logo在页面上位置不固定并且带有链接的小图片我们取名为button在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu装饰用的照片我们取名：pic不带链接表示标题的图片我们取名：title依照此原则类推。☆ 尾部分用来表示图片的具体含义，如果有类似图片就用数字区别。☆ 下面是几个样例，大家应该能够一眼看明白图片的意义：banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif,title_top01.gif, title_top02.gif☆小标一定做成透明的。3、