UI设计毕业论文正文.doc

1、毕业设计(论文)题 目 联信永益 SPM 2.0 项目管理系统 UI 设计 学院名称 计算机科学与技术学院 指导教师 李望秀 职 称 讲 师 班 级 08 数媒 01 班 学 号 20084100119 学生姓名 杨 静 2012 年 5 月 292目录摘要 .4关键词 .4第一章 绪论 .51.1 UI 简介 .5第二章 UI 设计现状 .62.1 软件开发业的界面设计现状 .62.2 联信永益的软件开发在 UI 方面的现状及缺点 .7第三章 软件界面设计基础 .83.1 软件界面设计的前期准备工作 .83.2 软件界面设计的原则 .93.3 软件界面的规划 .103.3.1 登陆界面的规划

2、 .103.3.2 应用界面的规划 .103.4 色彩 .20第四章 联信永益 SPM 2.0 项目管理系统 UI 设计语言简介 .244.1 HTML 语言 .244.1.1 HTML 语言特点 .244.1.2 HTML 的发展历史 .254.1.3 基于 HTML 的 UI 设计过程 .274.2 JAVASCRIPT 语言 .304.2.1 JAVASCRIPT 语言简介和特点 .30第五章 联信永益 SPM 2.0 项目管理系统的构架 .335.1 联信永益 SPM 2.0 项目管理系统主要组成部分 .335.1.1 登录模块 .335.1.2 首页模块 .335.1.3 管理空间模

3、块 .335.1.4 信息空间模块 .345.1.5 下载空间模块 .34第六章 联信永益 SPM 2.0 项目管理系统主模块 UI 设计及实现 .356.1 登录界面 .356.1.1 效果图 .356.1.2 关键代码 .356.2 个人首页 .366.2.1 效果图 .366.2.2 关键代码 .366.3 管理空间 .406.3.1 管理空间-项目管理 .406.3.1.1 效果图 .406.3.1.2 关键代码 .416.3.2 管理空间-部门管理 .456.3.2.1 效果图 .4536.3.2.2 关键代码 .456.3.3 管理空间-域账户管理 .486.3.3.1 效果图 .

4、486.3.3.2 关键代码 .516.3.4 管理空间-会议纪要管理 .536.3.4.1 效果图 .536.3.4.2 关键代码 .546.4 信息空间 .576.4.1 信息空间-项目汇总 .576.4.1.1 效果图 .576.4.1.2 关键代码 .576.4.2 信息空间-部门汇总 .626.4.2.1 效果图 .626.4.2.2 关键代码 .626.5 下载空间 .666.5.1 效果图 .666.5.2 关键代码 .666.6 顶部信息 .696.6.1 效果图 .696.6.2 关键代码 .70第七章 总结与展望 .71参考文献 .72致 谢 .73附 件 .744联信永益

5、 SPM 2.0 项目管理系统 UI 设计摘要软件设计可分为两个部分：编码设计与 UI 设计。编码设计大家都很熟悉，但是 UI 设计还是一个很陌生的词，即使一些专门从事网站与多媒体设计的人也不完全理解 UI 的意思。UI的本意是用户界面，是英文 User 和 interface 的缩写。从字面上看是用户与界面 2 个组成部分，但实际上还包括用户与界面之间的交互关系。界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是建立在科学性之上的艺术设计。检验一个界面的标准既不是某个项目开发组领导的意见也不是项目成员投票的结果，而是终端用户的感受。本文结合联信永益 SP

6、M 2.0项目管理系统实例研究如何设计高用户体验的软件 UI，并对软件界面的设计原则、方法、及过程进行分析。关键词UI;界面设计;后台管理系统Abstract: Software design can be divided into two parts: code design and UI design. Code design we are familiar, but the UI design is still a very strange word, specializing in website and multimedia design is not entirely unders

7、tand the meaning of UI. The intention of the UI is the user interface is the abbreviation of the English User interface. Literally the user and the interface composed of two parts, but in fact also includes the interaction between user and interface.Keywords: UI, Interface design, Background Managem

8、ent System5第一章 绪论1.1 UI 简介现 今 随 着 计 算 机 硬 件 的 飞 速 发 展 ， 过 去 的 软 件 程 序 已 经 不 能 适 应 用 户 的 要 求 。 软 件产 品 在 激 烈 的 市 场 竞 争 中 ， 仅 仅 有 强 大 的 功 能 是 远 远 不 够 的 ， 不 足 以 战 胜 强 劲 的 对 手 。幸 运 的 是 在 国 内 一 些 高 瞻 远 瞩 的 民 族 企 业 已 经 开 始 意 识 到 UI 给 软 件 产 品 带 来 的 巨 大卖 点 了 ， 例 如 金山公 司 的 影 霸 、 词 霸 、 毒 霸 、 网 标 ， 由 于 重 视 UI 的

9、 开 发 与 地 位 ， 才使 得 金 山 产 品 在 同 类 软 件 产 品 中 首 屈 一 指 。 联 想 软 件 的 UI 部 门 积 极 开 展 用 户 研 究 与使 用 性 测 试 ， 将 易 用 与 美 观 相 结 合 ， 推 出 的 双 模 式 电 脑 、 幸 福 系 列 等 成 功 UI 范 例 ，为 联 想 赢 得 全 球 消 费 PC 第 三 的 称 号 等 等 、 等 等 .实 践 证 明 ， 各 商 家 只 要 在 产 品 美 观 和易 用 设 计 方 面 很 小 投 入 ， 将 会 有 很 大 产 出 。 其 投 入 产 出 比 ， 要 比 在 功 能 领 先 性 开

10、 发 上 的投 入 大 得 多 。GUI(Graphical User Interface)是 一 种 结 合 计 算 机 科 学 、 美 学 、 心 理 学 、 行 为 学 ，及 各 商 业 领 域 需 求 分 析 的 人 机 系 统 工 程 ， 强 调 人 机 环 境 三 者 作 为 一 个 系 统 进 行 总体 设 计 。对 大 多 数 人 来 说 ， 用 户 界 面 就 是 软 件 本 身 。 所 以 ， 掌 握 用 户 界 面 设 计 的 技 巧 与 技 术是 让 软 件 走 向 市 场 的 最 直 观 因 素 。界 面 是 一 个 窗 口 。界 面 设 计 是 开 发 中 最 重

11、要 的 方 面 ， 并 将 涉 及 到 整 个 开 发 队 伍 。对 于 应 用 软 件 来 说 ， 一 个 基 本 现 实 就 是 ： 用 户 界 面 是 面 向 用 户 的 。 用 户 需 要 的 是 开发 者 开 发 的 应 用 软 件 满 足 其 需 求 ， 并 且 易 于 使 用 ， 用 户 界 面 走 到 今 天 真 是 千 锤 百 炼 ， 要做 到 易 用 就 更 是 难 上 加 难 。 太 多 的 开 发 者 自 以 为 是 艺 术 天 才 ， 他 们 不 去 尽 力 遵 循 用 户 界面 设 计 标 准 ， 或 花 精 力 使 得 产 品 好 用 ； 相 反 ， 他 们 错

12、误 地 认 为 编 写 更 灵 巧 的 代 码 或 是 使用 一 套 确 实 有 趣 的 颜 色 方 案 才 是 重 要 的 事 。 Constantine(1995)指 出 ， 好 的 用 户 界 面使 得 人 们 不 用 阅 读 用 户 手 册 或 接 受 培 训 就 能 使 用 应 用 软 件 。对 于 软 件 公 司 来 说 ， 软 件 产 品 就 是 他 们 的 商 品 ， 而 软 件 界 面 就 是 他 们 产 品 的 外 观 ，界 面 的 美 观 与 否 ， 直 接 关 系 到 了 软 件 产 品 的 营 销 成 败 。6第二章 UI 设计现状2.1 软件开发业的界面设计现状人

13、机 交 互 和 计 算 机 用 户 界 面 刚 刚 走 过 基 于 字 符 方 式 的 命 令 语 言 式 界 面 ， 目 前 正 处 于图 形 用 户 界 面 时 代 。用 户 界 面 (User Interface)是 当 前 用 户 界 面 的 主 流 ， 广 泛 应 用 于 各 档 台 式 微 机 和图 形 工 作 站 。 当 前 各 类 图 形 用 户 界 面 的 共 同 特 点 是 以 窗 口 管 理 系 统 为 核 心 ， 使 用 键 盘 和鼠 标 器 作 为 输 入 设 备 。 窗 口 管 理 系 统 除 基 于 可 重 叠 多 窗 口 管 理 技 术 外 ， 广 泛 采 用

14、的 另 一核 心 技 术 是 事 件 驱 动 (Event-Driven)技 术 。 图 形 用 户 界 面 和 人 机 交 互 过 程 极 大 地 依 赖视 觉 和 手 动 控 制 的 参 与 ， 因 此 具 有 强 烈 的 直 接 操 作 特 点 。在 用 户 把 软 件 买 回 去 后 ， 他 们 和 企 业 的 联 系 ， 以 及 该 企 业 形 象 在 客 户 眼 中 的 表 现 ，很 大 一 部 分 是 通 过 软 件 的 界 面 来 传 达 的 ， 美 观 友 好 的 用 户 界 面 对 于 宣 传 企 业 文 化 ， 给 客户 灌 输 企 业 理 念 ， 甚 至 于 对 企 业

15、 的 宣 传 运 做 都 将 是 非 常 有 益 的 ， 美 观 的 界 面 都 会 给 客 户以 信 心 和 良 好 的 印 象 。纵 观 国 际 相 关 产 业 在 图 形 化 用 户 界 面 设 计 方 面 的 发 展 现 状 ， 许 多 国 际 知 名 公 司 早 己意 识 到 UI 在 产 品 方 面 产 生 的 强 大 增 值 功 能 ， 以 及 带 动 的 巨 大 市 场 价 值 ， 因 此 在 公 司 内部 设 立 了 相 关 部 门 专 门 从 事 UI 的 研 究 与 设 计 ， 同 业 间 也 成 立 了 若 干 机 构 ， 以 互 相 交 流UI 设 计 理 论 与 经

16、 验 为 目 的 。 我 们 可 以 清 楚 地 看 到 ， 微 软 公 司 对 软 件 界 面 设 计 的 重 视 。仔 细 将 WIN2000 与 WIN98 和 WIN95 以 及 NT4.0 相 比 是 否 惊 叹 他 界 面 的 美 观 性 与 易 用 性 ？而 WINDOWS XP 系 统 ， 则 更 在 其 界 面 的 美 观 性 和 简 洁 性 上 下 了 大 功 夫 ， 简 单 大 方 的 界 面让 使 用 者 的 心 情 也 大 为 舒 畅 ！ 金 山 公 司 的 金 山 词 霸 就 是 国 内 软 件 成 功 的 例 子 了 ， 从 金 山词 霸 3.0 到 金 山 词

17、霸 2001 的 变 化 堪 称 经 典 。 著 名 的 网 页 动 画 制 作 软 件 Flash 从 3.0到 4.0， 仅 仅 修 改 了 图 标 和 窗 体 ， 立 即 大 为 增 色 。现 今 世 界 上 成 功 的 软 件 公 司 都 非 常 重 视 软 件 界 面 的 美 化 设 计 ， 因 为 他 们 深 刻 地 知 道 ，在 激 烈 的 市 场 竞 争 中 ， 仅 仅 有 强 大 的 功 能 是 远 远 不 够 的 。 设 计 良 好 的 界 面 能 够 引 导 用 户自 己 完 成 相 应 的 操 作 ， 起 到 向 导 的 作 用 ， 同 时 界 面 如 同 人 的 面

18、孔 ， 具 有 吸 引 用 户 的 直 接优 势 。 设 计 合 理 的 界 面 能 给 用 户 带 来 轻 松 愉 悦 的 感 受 和 成 功 的 感 觉 ， 相 反 由 于 界 面 设 计的 失 败 ， 让 用 户 有 挫 败 感 ， 再 实 用 强 大 的 功 能 都 可 能 在 用 户 的 畏 惧 中 付 诸 东 流 。 国 内 软件 业 在 软 件 产 品 的 人 机 交 互 界 面 设 计 水 平 发 展 上 日 显 滞 后 ， 这 对 于 提 高 产 业 综 合 素 质 ，提 升 与 国 际 同 等 业 者 的 竞 争 能 力 等 等 方 面 无 疑 起 了 制 约 的 作 用

19、。72.2 联信永益的软件开发在 UI 方面的现状及缺点联 信 永 益 的 软 件 开 发 存 在 着 目 前 国 内 软 件 开 发 业 的 通 病 ， 就 是 界 面 设 计 很 粗 糙 。 由于 大 部 分 的 界 面 均 由 软 件 开 发 人 员 设 计 ， 并 没 有 专 门 的 界 面 处 理 人 员 ， 同 时 ， 开 发 人 员也 把 精 力 重 点 放 在 对 软 件 性 能 的 学 习 和 实 现 上 ， 没 有 多 余 的 精 力 来 仔 细 的 处 理 界 面 ， 这也 就 形 成 了 其 开 发 的 软 件 在 功 能 上 比 较 强 ， 但 是 在 人 机 交 互

20、 方 面 糟 糕 ， 用 户 经 常 会 遭 遇面 对 一 堆 输 入 框 和 几 个 窗 口 ， 却 无 从 下 手 ， 不 知 道 如 何 进 行 操 作 的 尴 尬 局 面 。于 是 软 件 开 发 人 员 经 常 花 费 好 多 时 间 去 写 如 何 使 用 软 件 的 用 户 指 南 文 档 ， 但 是 往 往事 半 功 倍 。 与 其 这 样 ， 还 不 如 稍 微 花 点 时 间 在 图 形 界 面 设 计 上 ， 简 单 大 方 的 界 面 能 自 然的 引 导 用 户 ， 突 出 重 点 ， 从 而 让 用 户 能 在 最 短 的 时 间 内 熟 悉 该 软 件 ， 而 且

21、 找 到 自 己 想 要使 用 的 东 西 。随 着 客 户 对 软 件 界 面 的 高 度 重 视 ， 网 页 设 计 的 概 念 也 辐 射 到 了 软 件 界 面 设 计 ， 软 件的 界 面 设 计 也 逐 渐 受 到 了 大 家 的 重 视 。 软 件 开 发 期 待 着 界 面 设 计 的 苏 醒 。8第三章 软件界面设计基础3.1 软件界面设计的前期准备工作（ 一 ） 确 定 软 件 的 主 题 。不 管 要 设 计 什 么 东 西 ， 设 计 前 就 应 该 先 确 立 好 设 计 的 主 题 。 而 软 件 的 主 题 的 确 立 则与 软 件 的 功 能 与 目 的 有 关

22、 。 比 如 一 个 图 书 管 理 系 统 的 软 件 ， 其 主 题 就 是 “图 书 管 理 ”，远 程 教 育 系 统 的 主 题 就 是 “远 程 教 育 ”。 于 是 软 件 界 面 的 设 计 就 要 围 绕 着 主 题 来 进 行 ，让 用 户 一 看 软 件 的 界 面 就 知 道 这 个 软 件 是 做 什 么 的 ， 不 能 软 件 的 界 面 与 软 件 的 主 题 相 差十 万 八 千 里 ， 假 如 一 个 电 脑 硬 件 管 理 系 统 软 件 的 界 面 上 尽 是 和 电 脑 无 关 的 东 西 ， 比 如 花草 ， 山 水 ， 这 样 ， 就 不 能 反 应

23、 该 软 件 的 主 题 与 功 能 ， 让 人 丈 二 和 尚 摸 不 着 头 脑 ， 这 样 ，这 个 软 件 的 界 面 就 是 失 败 的 。（ 二 ） 美 工 作 为 界 面 美 化 的 主 要 人 员 ， 不 但 拥 有 艺 术 设 计 、 包 装 设 计 的 才 能 ， 还 应该 穿 插 整 个 项 目 ， 给 界 面 程 序 设 计 人 员 提 出 系 统 参 考 意 见 。 1： 软 件 设 计 前 期 ， 美 工 参 与 需 求 了 解 ， 分 析 同 类 软 件 界 面 有 缺 点 ， 提 出 主 色 调 、典 型 界 面 风 格 、 以 及 构 思 整 个 美 术 包

24、装 等 。 2： 界 面 原 型 设 计 过 程 中 ， 与 开 发 人 员 共 同 修 改 、 商 榷 最 终 表 现 样 式 ， 以 及 确 立UI 标 准 。 3： 用 户 调 研 。 拟 定 需 求 ， 初 步 建 立 界 面 原 型 。4： 任 务 分 析 。 根 据 任 务 的 复 杂 性 、 难 易 程 度 等 ， 详 细 分 解 任 务 动 作 ， 进 行 合 理 分工 ， 确 定 适 合 于 用 户 的 交 互 方 式 。4： 程 序 开 发 过 程 中 ， 提 供 标 准 风 格 的 资 源 文 件 （ icon,cur,bmp 等 ） ， 并 总 结 出统 一 风 格 的

25、 资 源 的 设 计 过 程 ， 形 成 规 范 文 档 。 （ 三 ） 确 定 界 面根 据 用 户 的 自 身 特 性 以 及 系 统 任 务 、 环 境 、 成 本 效 益 ， 确 定 量 为 适 合 的 界 面 类型 。这 时 ， 在 着 手 进 行 软 件 界 面 设 计 前 ， 须 在 心 里 大 致 有 个 谱 ， 对 要 设 计 的 软 件 的 功 能有 了 解 ， 同 时 对 该 软 件 的 界 面 设 计 有 成 形 的 构 想 。3.2 软件界面设计的原则（ 一 ） 一 致 性 原 则要 求 软 件 的 概 念 模 式 、 显 示 方 式 等 的 一 致 性 ， 在 类

26、似 的 情 况 下 具 有 一 致 的 操 作 序 列 ：9如 在 提 示 、 菜 单 和 帮 助 中 产 生 相 同 的 术 语 ； 具 体 是 指 在 不 同 的 应 用 系 统 中 都 具 有 相 似 的界 面 外 观 、 布 局 、 相 似 的 交 互 方 式 以 及 相 似 的 信 息 显 示 等 。 界 面 设 计 保 持 高 度 一 致 性 ，用 户 不 必 进 行 过 多 的 学 习 就 可 以 掌 握 其 共 性 ； 还 可 以 把 局 部 的 知 识 和 经 验 推 广 使 用 到 其他 场 合 。 人 机 界 面 设 计 的 一 致 性 要 求 对 构 成 易 学 易 用

27、 是 极 为 重 要 的 。无 论 是 控 件 使 用 ， 提 示 信 息 措 辞 ， 还 是 颜 色 、 窗 口 布 局 风 格 ， 遵 循 统 一 的 标 准 ， 做到 真 正 的 一 致 。 这 样 得 到 的 好 处 ：1： 使 用 户 使 用 起 来 能 够 建 立 起 精 确 的 心 里 模 型 ， 使 用 熟 练 了 一 个 界 面 后 ， 切 换 到另 外 一 个 界 面 能 够 很 轻 松 的 推 测 出 各 种 功 能 ， 语 句 理 解 也 不 需 要 费 神 理 解 2： 降 低 培 训 、 支 持 成 本 ， 支 持 人 员 不 会 行 费 力 逐 个 指 导 。 3

28、： 给 用 户 统 一 感 觉 ， 不 觉 得 混 乱 ， 心 情 愉 快 ， 支 持 度 增 加（ 二 ） 合 理 利 用 空 间 ， 保 持 界 面 的 简 洁简 单 易 用 就 是 好 。 不 要 将 界 面 设 计 的 过 于 复 杂 ， 那 样 会 影 响 程 序 的 快 捷 使 用 ， 人 为降 低 了 程 序 的 运 行 效 率 。 界 面 设 计 最 重 要 的 就 是 遵 循 美 学 上 的 原 则 简 洁 与 明 了 。一 个 软 件 ， 特 别 是 应 用 软 件 ， 其 界 面 不 需 要 很 华 丽 。 太 过 华 丽 花 哨 的 界 面 容 易 让 人的 眼 睛 疲 惫 ， 让 人 心 浮 气 躁 ， 把 注 意 力 过 多 的 集 中 到 花 哨 的 图 案 和 颜 色 上 ， 从 而 影 响 软件 的 可 信 度 以 及 实 用 性 。 因 此 ， 界 面 设 计 需 在 空 间 使 用 上 ， 合 理 的 布 局 和 设 计 ， 在 简 洁的 同 时 让 人 的 眼 球 得 到 艺 术 欣 赏 ， 并 且 能 感 觉 放 松 ， 突 出 软 件 的 性 能 ，