UI设计毕业论文正文

毕业设计(论文)

题 目 联信永益SPM 2.0项目管理系统UI设计 学院名称 计算机科学与技术学院 指导教师 李望秀 职 称 讲 师 班 级 08数媒01班 学 号 20084100119 学生姓名 杨 静

2012年5月29

目录

摘要 ............................................................................................................................ 4 关键词 ........................................................................................................................ 4 第一章 绪论 .............................................................................................................. 5 1.1 UI简介 ................................................................................................................. 5 第二章 UI设计现状 ................................................................................................. 6 2.1 软件开发业的界面设计现状 ............................................................................. 6 2.2联信永益的软件开发在UI方面的现状及缺点 ................................................ 7 第三章 软件界面设计基础 ...................................................................................... 8 3.1软件界面设计的前期准备工作 .......................................................................... 8 3.2软件界面设计的原则 .......................................................................................... 8 3.3软件界面的规划 ................................................................................................ 10 3.3.1登陆界面的规划 ............................................................................................. 10 3.3.2应用界面的规划 ............................................................................................. 10 3.4色彩 .................................................................................................................... 19 第四章 联信永益SPM 2.0项目管理系统UI设计语言简介 ............................. 23 4.1 HTML语言 .......................................................................................................... 23 4.1.1 HTML语言特点 ............................................................................................... 23 4.1.2 HTML的发展历史 ........................................................................................... 24 4.1.3基于HTML的UI设计过程 ........................................................................... 26 4.2 JAVASCRIPT语言 ................................................................................................. 29 4.2.1 JAVASCRIPT语言简介和特点 .......................................................................... 29 第五章 联信永益SPM 2.0项目管理系统的构架 ................................................ 32 5.1联信永益SPM 2.0项目管理系统主要组成部分 ............................................ 32 5.1.1登录模块 ......................................................................................................... 32 5.1.2首页模块 ......................................................................................................... 32 5.1.3管理空间模块 ................................................................................................. 32 5.1.4信息空间模块 ................................................................................................. 33 5.1.5下载空间模块 ................................................................................................. 33 第六章 联信永益SPM 2.0项目管理系统主模块UI设计及实现 ..................... 34 6.1登录界面 ............................................................................................................ 34 6.1.1效果图 ............................................................................................................. 34 6.1.2关键代码 ......................................................................................................... 34 6.2个人首页 ............................................................................................................ 35 6.2.1 效果图 ............................................................................................................ 35 6.2.2关键代码 ......................................................................................................... 35 6.3管理空间 ............................................................................................................ 39 6.3.1管理空间-项目管理 ........................................................................................ 39 6.3.1.1效果图 .......................................................................................................... 39 6.3.1.2关键代码 ...................................................................................................... 40 6.3.2管理空间-部门管理 ........................................................................................ 44 6.3.2.1效果图 .......................................................................................................... 44

2

6.3.2.2关键代码 ...................................................................................................... 44 6.3.3管理空间-域账户管理 .................................................................................... 47 6.3.3.1效果图 .......................................................................................................... 47 6.3.3.2关键代码 ...................................................................................................... 50 6.3.4管理空间-会议纪要管理 ................................................................................ 52 6.3.4.1效果图 .......................................................................................................... 52 6.3.4.2关键代码 ...................................................................................................... 53 6.4信息空间 ............................................................................................................ 56 6.4.1信息空间-项目汇总 ........................................................................................ 56 6.4.1.1效果图 .......................................................................................................... 56 6.4.1.2关键代码 ...................................................................................................... 56 6.4.2信息空间-部门汇总 ........................................................................................ 61 6.4.2.1效果图 .......................................................................................................... 61 6.4.2.2关键代码 ...................................................................................................... 61 6.5下载空间 ............................................................................................................ 65 6.5.1效果图 ............................................................................................................. 65 6.5.2关键代码 ......................................................................................................... 65 6.6顶部信息 ............................................................................................................ 68 6.6.1效果图 ............................................................................................................. 68 6.6.2关键代码 ......................................................................................................... 69 第七章 总结与展望 ................................................................................................ 70 参考文献 .................................................................................................................. 71 致 谢 ........................................................................................................................ 72 附 件 ........................................................................................................................ 72

3

联信永益SPM 2.0项目管理系统UI设计

摘要

软件设计可分为两个部分：编码设计与UI设计。编码设计大家都很熟悉，但是 UI设计还是一个很陌生的词，即使一些专门从事网站与多媒体设计的人也不完全理解UI的意思。UI的本意是用户界面，是英文User和 interface的缩写。从字面上看是用户与界面2个组成部分，但实际上还包括用户与界面之间的交互关系。

界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是建立在科学性之上的艺术设计。检验一个界面的标准既不是某个项目开发组领导的意见也不是项目成员投票的结果，而是终端用户的感受。本文结合联信永益SPM 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 understand 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 Management System

4

第一章 绪论

1.1 UI简介

现今随着计算机硬件的飞速发展，过去的软件程序已经不能适应用户的要求。软件产品在激烈的市场竞争中，仅仅有强大的功能是远远不够的，不足以战胜强劲的对手。幸运的是在国内一些高瞻远瞩的民族企业已经开始意识到UI给软件产品带来的巨大卖点了，例如金山公司的影霸、词霸、毒霸、网标，由于重视UI的开发与地位，才使得金山产品在同类软件产品中首屈一指。联想软件的UI部门积极开展用户研究与使用性测试，将易用与美观相结合，推出的双模式电脑、幸福系列等成功UI范例，为联想赢得全球消费 PC第三的称号等等、等等.实践证明，各商家只要在产品美观和易用设计方面很小投入，将会有很大产出。其投入产出比，要比在功能领先性开发上的投入大得多。

GUI(Graphical User Interface)是一种结合计算机科学、美学、心理学、行为学，及各商业领域需求分析的人机系统工程，强调人—机—环境三者作为一个系统进行总体设计。

对大多数人来说，用户界面就是软件本身。所以，掌握用户界面设计的技巧与技术是让软件走向市场的最直观因素。

界面是一个窗口。

界面设计是开发中最重要的方面，并将涉及到整个开发队伍。

对于应用软件来说，一个基本现实就是：用户界面是面向用户的。用户需要的是开发者开发的应用软件满足其需求，并且易于使用，用户界面走到今天真是千锤百炼，要做到易用就更是难上加难。太多的开发者自以为是艺术天才，他们不去尽力遵循用户界面设计标准，或花精力使得产品好用；相反，他们错误地认为编写更灵巧的代码或是使用一套确实有趣的颜色方案才是重要的事。Constantine(1995)指出，好的用户界面使得人们不用阅读用户手册或接受培训就能使用应用软件。

对于软件公司来说，软件产品就是他们的商品，而软件界面就是他们产品的外观，界面的美观与否，直接关系到了软件产品的营销成败。

5