《UI设计毕业材料正文.doc》由会员分享，可在线阅读，更多相关《UI设计毕业材料正文.doc（83页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、毕业设计(论文)题 目 联信永益SPM 2.0项目管理系统UI设计 学院名称 计算机科学与技术学院 指导教师 李望秀 职 称 讲 师 班 级 08数媒01班 学 号 20084100119 学生姓名 杨 静 2012年5月29目录摘要4关键词4第一章 绪论51.1 UI简介5第二章 UI设计现状62.1 软件开发业的界面设计现状62.2联信永益的软件开发在UI方面的现状及缺点7第三章 软件界面设计基础83.1软件界面设计的前期准备工作83.2软件界面设计的原则93.3软件界面的规划103.3.1登陆界面的规划103.3.2应用界面的规划103.4色彩20第四章 联信永益SPM 2.0项目管理系
2、统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管理空间模块335.1.4信息空间模块345.1.5下载空间模块34第六章 联信永益SPM 2.0项目管理系统主模块UI设计及实现356.1登录界面356.1.1效果图356.1.2关键代码356.2
3、个人首页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效果图456.3.2.2关键代码456.3.3管理空间-域账户管理486.3.3.1效果图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下载
4、空间666.5.1效果图666.5.2关键代码666.6顶部信息696.6.1效果图696.6.2关键代码70第七章 总结与展望71参考文献72致 谢73附 件74联信永益SPM 2.0项目管理系统UI设计摘要软件设计可分为两个部分：编码设计与UI设计。编码设计大家都很熟悉，但是 UI设计还是一个很陌生的词，即使一些专门从事网站与多媒体设计的人也不完全理解UI的意思。UI的本意是用户界面，是英文User和 interface的缩写。从字面上看是用户与界面2个组成部分，但实际上还包括用户与界面之间的交互关系。界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是
5、建立在科学性之上的艺术设计。检验一个界面的标准既不是某个项目开发组领导的意见也不是项目成员投票的结果，而是终端用户的感受。本文结合联信永益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
6、, 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
7、 user and interface.Keywords: UI, Interface design, Background Management System第一章 绪论1.1 UI简介现今随着计算机硬件的飞速发展，过去的软件程序已经不能适应用户的要求。软件产品在激烈的市场竞争中，仅仅有强大的功能是远远不够的，不足以战胜强劲的对手。幸运的是在国内一些高瞻远瞩的民族企业已经开始意识到UI给软件产品带来的巨大卖点了，例如金山公司的影霸、词霸、毒霸、网标，由于重视UI的开发与地位，才使得金山产品在同类软件产品中首屈一指。联想软件的UI部门积极开展用户研究与使用性测试，将易用与美观相结合，推出的双模
8、式电脑、幸福系列等成功UI范例，为联想赢得全球消费 PC第三的称号等等、等等.实践证明，各商家只要在产品美观和易用设计方面很小投入，将会有很大产出。其投入产出比，要比在功能领先性开发上的投入大得多。GUI(Graphical User Interface)是一种结合计算机科学、美学、心理学、行为学，及各商业领域需求分析的人机系统工程，强调人机环境三者作为一个系统进行总体设计。对大多数人来说，用户界面就是软件本身。所以，掌握用户界面设计的技巧与技术是让软件走向市场的最直观因素。界面是一个窗口。界面设计是开发中最重要的方面，并将涉及到整个开发队伍。对于应用软件来说，一个基本现实就是：用户界面是面向
9、用户的。用户需要的是开发者开发的应用软件满足其需求，并且易于使用，用户界面走到今天真是千锤百炼，要做到易用就更是难上加难。太多的开发者自以为是艺术天才，他们不去尽力遵循用户界面设计标准，或花精力使得产品好用；相反，他们错误地认为编写更灵巧的代码或是使用一套确实有趣的颜色方案才是重要的事。Constantine(1995)指出，好的用户界面使得人们不用阅读用户手册或接受培训就能使用应用软件。对于软件公司来说，软件产品就是他们的商品，而软件界面就是他们产品的外观，界面的美观与否，直接关系到了软件产品的营销成败。第二章 UI设计现状2.1 软件开发业的界面设计现状人机交互和计算机用户界面刚刚走过基于
10、字符方式的命令语言式界面，目前正处于图形用户界面时代。用户界面(UserInterface)是当前用户界面的主流，广泛应用于各档台式微机和图形工作站。当前各类图形用户界面的共同特点是以窗口管理系统为核心，使用键盘和鼠标器作为输入设备。窗口管理系统除基于可重叠多窗口管理技术外，广泛采用的另一核心技术是事件驱动(Event-Driven)技术。图形用户界面和人机交互过程极大地依赖视觉和手动控制的参与，因此具有强烈的直接操作特点。在用户把软件买回去后，他们和企业的联系，以及该企业形象在客户眼中的表现，很大一部分是通过软件的界面来传达的，美观友好的用户界面对于宣传企业文化，给客户灌输企业理念，甚至于对
11、企业的宣传运做都将是非常有益的，美观的界面都会给客户以信心和良好的印象。纵观国际相关产业在图形化用户界面设计方面的发展现状，许多国际知名公司早己意识到UI在产品方面产生的强大增值功能，以及带动的巨大市场价值，因此在公司内部设立了相关部门专门从事UI的研究与设计，同业间也成立了若干机构，以互相交流UI设计理论与经验为目的。我们可以清楚地看到，微软公司对软件界面设计的重视。仔细将WIN2000与WIN98和WIN95以及NT4.0相比是否惊叹他界面的美观性与易用性？而WINDOWS XP系统，则更在其界面的美观性和简洁性上下了大功夫，简单大方的界面让使用者的心情也大为舒畅！金山公司的金山词霸就是国
12、内软件成功的例子了，从金山词霸3.0到金山词霸2001的变化堪称经典。著名的网页动画制作软件Flash从3.0到4.0，仅仅修改了图标和窗体，立即大为增色。现今世界上成功的软件公司都非常重视软件界面的美化设计，因为他们深刻地知道，在激烈的市场竞争中，仅仅有强大的功能是远远不够的。设计良好的界面能够引导用户自己完成相应的操作，起到向导的作用，同时界面如同人的面孔，具有吸引用户的直接优势。设计合理的界面能给用户带来轻松愉悦的感受和成功的感觉，相反由于界面设计的失败，让用户有挫败感，再实用强大的功能都可能在用户的畏惧中付诸东流。国内软件业在软件产品的人机交互界面设计水平发展上日显滞后，这对于提高产业
13、综合素质，提升与国际同等业者的竞争能力等等方面无疑起了制约的作用。2.2联信永益的软件开发在UI方面的现状及缺点联信永益的软件开发存在着目前国内软件开发业的通病，就是界面设计很粗糙。由于大部分的界面均由软件开发人员设计，并没有专门的界面处理人员，同时，开发人员也把精力重点放在对软件性能的学习和实现上，没有多余的精力来仔细的处理界面，这也就形成了其开发的软件在功能上比较强，但是在人机交互方面糟糕，用户经常会遭遇面对一堆输入框和几个窗口，却无从下手，不知道如何进行操作的尴尬局面。于是软件开发人员经常花费好多时间去写如何使用软件的用户指南文档，但是往往事半功倍。与其这样，还不如稍微花点时间在图形界面
14、设计上，简单大方的界面能自然的引导用户，突出重点，从而让用户能在最短的时间内熟悉该软件，而且找到自己想要使用的东西。随着客户对软件界面的高度重视，网页设计的概念也辐射到了软件界面设计，软件的界面设计也逐渐受到了大家的重视。软件开发期待着界面设计的苏醒。第三章 软件界面设计基础3.1软件界面设计的前期准备工作（一）确定软件的主题。不管要设计什么东西，设计前就应该先确立好设计的主题。而软件的主题的确立则与软件的功能与目的有关。比如一个图书管理系统的软件，其主题就是“图书管理”，远程教育系统的主题就是“远程教育”。于是软件界面的设计就要围绕着主题来进行，让用户一看软件的界面就知道这个软件是做什么的，
15、不能软件的界面与软件的主题相差十万八千里，假如一个电脑硬件管理系统软件的界面上尽是和电脑无关的东西，比如花草，山水，这样，就不能反应该软件的主题与功能，让人丈二和尚摸不着头脑，这样，这个软件的界面就是失败的。（二）美工作为界面美化的主要人员，不但拥有艺术设计、包装设计的才能，还应该穿插整个项目，给界面程序设计人员提出系统参考意见。 1：软件设计前期，美工参与需求了解，分析同类软件界面有缺点，提出主色调、典型界面风格、以及构思整个美术包装等。 2：界面原型设计过程中，与开发人员共同修改、商榷最终表现样式，以及确立UI标准。 3：用户调研。拟定需求，初步建立界面原型。4：任务分析。根据任务的复杂性
16、、难易程度等，详细分解任务动作，进行合理分工，确定适合于用户的交互方式。4：程序开发过程中，提供标准风格的资源文件（icon,cur,bmp等），并总结出统一风格的资源的设计过程，形成规范文档。 （三）确定界面根据用户的自身特性以及系统任务、环境、成本效益，确定量为适合的界面类型。这时，在着手进行软件界面设计前，须在心里大致有个谱，对要设计的软件的功能有了解，同时对该软件的界面设计有成形的构想。3.2软件界面设计的原则（一）一致性原则要求软件的概念模式、显示方式等的一致性，在类似的情况下具有一致的操作序列：如在提示、菜单和帮助中产生相同的术语；具体是指在不同的应用系统中都具有相似的界面外观、布
17、局、相似的交互方式以及相似的信息显示等。界面设计保持高度一致性，用户不必进行过多的学习就可以掌握其共性；还可以把局部的知识和经验推广使用到其他场合。人机界面设计的一致性要求对构成易学易用是极为重要的。无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，做到真正的一致。 这样得到的好处：1：使用户使用起来能够建立起精确的心里模型，使用熟练了一个界面后，切换到另外一个界面能够很轻松的推测出各种功能，语句理解也不需要费神理解 2：降低培训、支持成本，支持人员不会行费力逐个指导。 3：给用户统一感觉，不觉得混乱，心情愉快，支持度增加（二）合理利用空间，保持界面的简洁简单易用就是好。不
18、要将界面设计的过于复杂，那样会影响程序的快捷使用，人为降低了程序的运行效率。界面设计最重要的就是遵循美学上的原则简洁与明了。一个软件，特别是应用软件，其界面不需要很华丽。太过华丽花哨的界面容易让人的眼睛疲惫，让人心浮气躁，把注意力过多的集中到花哨的图案和颜色上，从而影响软件的可信度以及实用性。因此，界面设计需在空间使用上，合理的布局和设计，在简洁的同时让人的眼球得到艺术欣赏，并且能感觉放松，突出软件的性能，使界面设计成为软件性能一个出色的辅助项目但是却不喧宾夺主，始终作为一个衬托，让软件界面更友好，更能为用户所喜爱和接受。（三）从用户的观点考虑。一个软件界面是用来方便用户与软件的交互的，因此，
19、要从用户的角度去考虑和设计软件界面，想他们所想，做他们所做，并且界面中要使用能反应用户本身的语言，而不是设计者的语言以及使用习惯。（四）记忆负担最小化。人脑不是电脑，在设计界面时必须要考虑人类大脑处理信息的限度。人类的短期记忆极不稳定、有限，24小时内存在25%的遗忘率。所以对用户来说，浏览信息要比记忆更容易。一个画面的信息量不可过于复杂和庞大。（五）清楚，和谐的排列。保证界面的协调性。控件摆放位置要合理、均衡，让人便于浏览和使用。不要给人们带来“前重后轻、左宽右窄”的不良感觉，要将重要的控件摆放在明显位置，这样才能突出重点。此外，一定要符合人们的日常使用习惯。同时，背景图案和颜色的设计要帮助
20、排列，甚至有时候作为分隔符，让界面看上去和谐美丽。3.3软件界面的规划3.3.1登陆界面的规划应用软件的登陆窗口一般只有输入用户名、密码的内容，所以不宜过大，大小大概为屏幕的1/4，太大给人一种画面太空旷的感觉，太小则给人以拥挤的感觉。位置为居中。这样让用户把注意力自然的集中到窗口上，且符合一般用户的使用习惯。3.3.2应用界面的规划（一）菜单的规划（1）菜单设计的原则。1 菜单、按钮名称应该易懂，用词准确，摈弃模棱两可的字眼。2 菜单的命名要直观，含义清晰，不可有二义性。3 菜单命名最好能望文知意，理想的情况是用户不用查阅帮助就能知道该命令的功能，并能进行相关的正确操作。4 菜单命名要与同一
21、界面上的其他按钮易于区分，含义不能雷同。5 菜单的字体、大小通常为宋体、五号。6 菜单中的命令长度一般为25个字符。7 菜单的命令格式一般为“动词名词”，即“操作方法操作对象”，或者为“名词名词”，即“所有者属性”等等。8 主菜单的宽度要接近，每个菜单的字数能相同最好。（2）菜单组织1 菜单的形式有下列几种：下拉式菜单，线状序列菜单，树状结构菜单，选项式菜单，弹出式菜单。2 菜单可以是文字式，图标式或图标文字混合式。3 主菜单为单排布置。4 菜单前的图标不宜太大，与字的高度保持一致最好。5 菜单和工具条要有清楚的界限，菜单要求凸出显示，这样在移走工具条时仍有立体感。6 如果该命令菜单会引出一个
22、对话框，则该菜单后面应该加省略号“”，表示需要用户提供更多的信息才能使用该菜单命令。7 如果该菜单是一个级联菜单，即其下还有子菜单，则菜单标题后面应该有向右的箭头“ ”。8 尽可能从用户角度设计菜单的语义系统。9 专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性词眼。10 按照逻辑功能来将菜单命令分组。11 在下拉菜单中用分隔线将功能更相关的项目分组排列，完成相同或相近功能的菜单命令放在同一位置。12 在同一菜单中避免使用多个相同功能的菜单项。13 避免使用没有下拉项的菜单项，因为孤立的菜单项和按钮没什么区别。14 当子菜单的划分有多个标准时，应该采用同一个标准，不能多个标准共用
23、。15 子菜单在语义逻辑上不应该同属于几个主菜单。16 不要在同一菜单层次上应用相同或相似的词汇。17 下拉式菜单深度一般要求最多控制在三层以内。18 菜单前的图标能直观的代表要完成的操作。19 当菜单是层次的，则应该是循环式的网络结构，用户能从上一级菜单到下一级菜单，也能从下一级菜单返回到上一级菜单，切忌采用非循环的结构。20 允许跳转到前层的菜单和主菜单。21 常用菜单要有命令快捷方式，不常用的可以没有快捷键。22 应该在所有子菜单中都提供访问键（菜单项中带有下划线的字母，称为菜单的访问键）。23 正在起作用的命令菜单应该在菜单的表现形式上有所不同，如菜单下凹或菜单前打勾等等。24 在当前
24、状态下，对与正在进行的操作无关的菜单命令要用加以屏蔽处理，如变灰，但应该还可见。25 对于在当前位置或状态下始终用不到的命令，在界面上应该完全屏蔽，即不可见。如果采用动态加载方式（即只有需要的菜单才显示）最好。26 动态加载方式的菜单只显示最近用过的菜单命令，久未运用的菜单将会自动隐藏起来，需要的时候又可以打开。27 系统所有的功能项都应该在菜单中有对应的菜单命令。28 右键上下文菜单采用与菜单相同的准则。29 上下文菜单中的命令应该与当前操作环境或状态密切相关。30 上下文菜单中允许有不直接出现在菜单中的命令。但该命令应该是某个菜单的一个部分，可以在某个菜单中找到该功能命令。（3）菜单位置细
25、则1 菜单通常采用“常用主要次要工具帮助”的位置排列，符合流行的Windows风格。2 菜单命令在使用时如果有先后顺序，应该按使用先后次序排列。3 没有顺序要求的菜单项按使用频率和重要性排列，常用的菜单排列在前面，不常用的靠后放置；重要的放在开头，次要的放在后边。4 下拉菜单要根据菜单的含义进行分组，组与组之间有明显的分隔形式要，比如用横线隔开。5 下级菜单对于上级菜单应该有隶属关系。6 广而浅的菜单树优先于窄而浅的菜单树。7 如果菜单选项较多，应该采用加长主菜单的长度而减少子菜单深度的原则排列。（二）按钮的规划（1）按钮的字体和大小。按钮的字体在应用软件中多用宋体，但是具体情况应该根据该软件
26、界面的整体风格来定。比如界面的风格比较古典，这时则可以采用隶书的字体。按钮的字号要看按钮的大小来确定。字的高度为按钮高度的1/21/3为佳，同样，字的宽度为按钮宽度的1/21/3比较好看。（2）按钮的颜色。按钮的颜色最好与整个界面的主色调统一。按钮的颜色不宜用和界面主色调不一致的色彩。如图1。（图1）但是，设计是灵活的，并不是说按钮的颜色一定要与主色调一模一样，也并不是说按钮的颜色一定要与主色调相同，一切都要视具体设计情况与设计者的设计思路来看。（3）按钮的风格。在应用软件中，比较流行的按钮风格有APPLE公司的水晶按钮， WIN XP风格的按钮以及像素按钮。（图2）按钮的风格取决于整个软件界
27、面的风格，两者的风格应该和谐统一。（三）文字的规划文字是软件界面的主体，也是传达信息的主要工具。因此，文字的规划绝对不可以马虎。软件文字的字号一般为宋体，大小为5号。宋体显得比较严肃认真，让用户在心理上觉得可靠，这对应用软件来说非常重要。（四）图案的规划图案的规划是界面设计的重点，也是最难的地方。它实质上是对软件产品进行艺术包装。在这个阶段，设计人员需要充分发挥自身的艺术设计能力。（1）图案的选择图案须和软件的主题有关联，要能反应出软件的相关信息，因为这些图案就是对软件的高度抽象化，它要既能让人觉得赏心悦目，又能体现软件的宗旨。比如一个电力系统的软件，对它进行图案的设计时，就应该选择与电力相关
28、的图案。如图3。（图3）软件界面左方是个高压电网的图案，让人一看了，就知道这个软件的性质，就知道它是一个与电力系统有关的软件，这样，这个图案就起到了画龙点睛的作用。同样，一个图书管理系统的软件，就要在界面上显示与图书类有关的东西，不能天南地北，不着边际的选择图案。如下面两幅图，我们来比较一下两者。（图4）（图5）两幅图都是为图书管理系统做的界面，但是图4的图案选择的是用一幅翻开的书的图案和一个显示器的图案。书很明显的表示了该软件的功能与书籍有关，而显示器则增加了一些现代的感觉，使整个画面看起来不至于过于休闲，显示器中是堆成山的书和一幢建筑，这正好显示了该软件与图书馆的功能类似，它是现实中的图书
29、馆在电脑中的表现。画面看起来宁静而不呆板。而现在来看看图5的软件界面设计图。左边的小狗让人第一眼看去，以为这个软件是个与宠物有关的，而再看软件的名字，则让人哭笑不得。整个界面看起来不伦不类，这个界面设计就是完全失败的。因此，图案的选择和设计非常关键，它决定着整个软件包装的成败。（2）图案的处理图案的处理和图案的选择一样重要。任何设计都没有现成的图案，设计一个图案，需要在各个图片上选取自己所需要的部分，或者自己用画图软件去画出自己需要的效果。这个过程是需要时间最长的，也是需要反复斟酌和推敲的。这个阶段，也许会推翻很多过去的方案，它是一个不断对界面重新进行艺术设计和完善的过程，因此，在着手设计前，
30、最好能准备几套不同的设计方案，以便在这个阶段能有多种选择，而从中选择一个最好的方案。准备好需要进行处理的图案后，需要把这些图案柔和起来形成一个和谐的整体，或者需要对图片进行处理，使其具有更丰富，更立体化的效果，要去其粗，取其精，使其能更好的体现软件的主题。如下面的图6。（图6）图6是未经过处理的图做的图书管理系统软件的界面。可以看到图上有一杯咖啡和一盘面包，虽然从色彩上来说，这幅图更加丰富，但是，咖啡和面包和图书管理系统没有关系，它们的出现只会让人觉得奇怪，整个图案看起来也过于休闲，与软件的主题相去甚远，那这幅图的选择也就失败了。但是这个图中的书报却是做这个软件界面所需要的，因此，取其书报的部
31、分，而将其他的部分隐去，突出书的重点，那这幅图又变得可用了。任何设计都是如此，有时候需要从很多幅不同的图上选取部分来综合，这些工作则需要设计人员有丰富的联想和熟练的技术。也可以自己去拍照，以使设计更加漂亮，更符合自己的心意。（3）图案的其他设计效果。选择好了图案，并将其处理成了一个可用的整体，图案规划的工作却仍然没有完成。一张单一的图，看起来是平面的，这样，就无法突出重点，图案也没有层次，让人在视觉上没有远近之分，因此，还需要对图案进行修饰和润色。如图7和图8。（图7）（图8）两幅都是为种质资源库做的软件界面设计。首先来观察图7。图案的选择是中国的地图作为前景，而用连绵的崇山峻岭的图片来作为背
32、景。图案的选择没有问题，而图案的处理也已经完成，中国地图经过处理，采用黄色和蓝色来突出西南这块地方，表示了该软件面向的范围是中国西南地区。然而，整个画面看起来的感觉是将一幅图压在了一块玻璃下面，平淡而没有重点。地图左方的空间过于空，让人觉得左轻右重，界面看起来空洞。这时，就需要对它进行修饰，让它更丰富，有轻有重，让人看起来不那么无味。再来看图8。可以看到，中国地图的边缘加上了光圈，使它看起来有立体的感觉，同时，边缘的柔和让整个画面看起来也更柔和。背景图片的左上方加了一点红色，相比较前一幅图，这幅图则更朦胧，更有美感，而且画面的颜色也不像前一幅图一般清淡，它更鲜亮。而在左方，加上了几种动植物的图
33、片，这些图片让界面看起来丰富了不少，而且反应了该软件的主题野生动植物保护。同样，对标题字和左下的字也进行了修饰，画面看起来就和谐多了。比较图6和图4，也可以发现，图案修饰的重要性。图6只是一张整齐的图片，基本上没有修饰。这个界面看起来更像是一个相框，把图片框是里面，让人觉得狭隘，没有可发展的思维余地。比图4，在图4中，书页超出了框的范围，延伸到外面，而且书页有好几个影子，这样，看起来，画面就马上立体许多，整个界面的构图看起来也更漂亮。（四）图标的规划。图标是每个软件界面中必不可少的一部分。它的比例虽小，但是却一点马虎不得，一个优秀的软件界面，小小的图标，往往能起到画龙点睛的作用，成为一个亮点。
34、然而，图标的设计，也需要注意以下几点：（1）形象的一致性。这和软件风格的一致性原则一样，风格杂乱的图标让人觉得界面很乱。（2）形象的可识别性。图标的设计要符合一般的识别规律，设计的时候可以参考同类软件或权威软件的类似图标。（3）大小。不论多么高深的画功，都要注意，图标受到大小的限制，这也就决定了图标的内容不可过多。图标须简洁、明快的表达其内容。 （图9）如图9。目前，网络上有很多现成的图标，各种类型和样式，因此，不是特别需要的话，可以去网上下载合适的图标，从而省去设计制作图标的时间。3.4色彩色彩是艺术表现的要素之一。在进行设计时，要根据和谐、均衡和重点突出的原则，将不同的色彩进行组合搭配来构
35、成美丽的页面。 根据色彩对人们心理的影响，合理地加以运用。（一）色彩的感情会因其色相、明度、彩度的不同，表现不同的色彩感觉。我们面对这些色彩也会产生不同的心理影响。按照色彩的记忆性原则，一般暖色较冷色的记忆性强；色彩还具有联想与象征的物质，如红色象征血、太阳；蓝色象征大海、天空和水面等。所以设计出售冷食的虚拟店面，应使用淡雅而沉静的颜色，使人心理上感觉凉爽一些。（二）冷色与暖色蓝色、蓝绿、蓝紫等色，予人凉爽的感觉，称为冷色。而红、橙、黄等予人温暖的感觉，称为暖色。明度高的色彩较凉爽，明度低的色彩较温暖。如图10和图11。 冷色调（图10） 暖色调（图11）（三）色彩的运用由于国家和种族宗教和信
36、仰的不同， 以及生活的地理位置文化修养的差异等，不同的人群对色彩的喜恶程度有着很大的差异。如：儿童喜欢对比强烈个性鲜明的纯颜色；生活在草原上的人喜欢红色；生活在闹市中的人喜欢淡雅的颜色；生活在“沙漠”中的人喜欢绿色。在设计中要考虑主要用户群的背景和构成。如：流行音乐软件的面向用户群大多是年轻人，宜采用鲜亮的颜色，来体现年轻和活力；而冠心病调查软件的用户群一般是中老年人，则应采用柔和的颜色，让用户觉得宁静平和。色彩的搭配具有极强的目的性，是一个非常具体的、创造性的审美过程。黑、白、灰最能体现优雅、理性、高贵、神秘类型的气质，将此三色艺术化搭配，简单中蕴藏着无穷变化，更具意想不到的惊人效果。常用的
37、多色相配色以少量色种为基础，按“大统一协调、小对比”的规则配色。以相同或相近色相加、以明度和纯度的变化体现区别的弱对比配色系列，具有统一协调、柔和素雅的效果，但缺少动感，易显得单调平淡。中对比配色系列和强对比色系列的共同点是具有不同程度的鲜明醒目、兴奋热烈的视觉效果，但也不易统一协调，容易引起视觉疲劳。色彩高明度格调的作品会形成优雅明亮的氛围，具轻松温和明快的效果；中明度格调的作品中，中明度、高纯度的配色饱满有力，中明度、中纯度的配色则显得含蓄庄重；低明度格调的作品具有沉静庄重、严肃忧郁、文弱内向等效果。色彩纯度越高，颜色越鲜艳华丽，效果越活跃热烈；纯度越低，色彩越灰暗迷朦，效果越朴素沉静，甚
38、至有软弱内向的感觉。一般而言，高明度和纯度的色彩体现暖、轻、动、近、大、兴奋、华丽等情感效应；反之，则体现出冷、重、静、远、小、沉静、质朴等情感效应。在形象设计中，要充分利用色彩的情感效应来调节改善视觉效果和展现人物个性；利用膨胀收缩、远近大小等错觉来调整体型、脸型的轮廊以掩饰人物形象的缺陷，突出其优美之处。如下图的软件截图。（图12）（图13）（图14）上面三幅图为同一个软件的界面，但是颜色各不相同。图12是软件的初始颜色。蓝色是冷色调，该软件作为一款播放器，有种平静，酷的感觉。而图13的紫色则给人一中诡异不感觉，觉得很不舒服，比较刺眼。图14则是采用红色这个暖色调做主色调，第一眼看上去，就
39、觉得心绪不宁，让人心浮气躁，而且容易让人视觉疲劳。第四章 联信永益SPM 2.0项目管理系统UI设计语言简介4.1 Html语言4.1.1 Html语言特点HTML（HyperTextMark-upLanguage）即超文本标记语言，是WWW的描述语言。html 是在 sgml 定义下的一个描述性语言，或可说 html 是 sgml 的一个应用程式，html 不是程式语言，它只是标示语言。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点
40、取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。 HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。 另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。神奇吗?一点都不神奇,因为现在你看到的就是这种语言写的页面. 也许你听说过许多可以
41、编辑网页的软件,事实上,你不需要用任何专门的软件来建立HTML页面；你所需要的只是一个文字处理器（如Microsoft Word记事本写字板等等）以及HTML的工作常识。其实你很快就会发现,基础的HTML语言简直容易死了。 HTML只不过是组合成一个文本文件的一系列标签。它们很乐队的指挥,告诉乐手们哪里需要停顿,哪里需要激昂. 一个HTML文档是由一系列的元素和标签组成.元素名不区分大写.HTML用标签来规定元素的属性和它在文件中的位置， HTML超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。 下面是一个最基本的html文档的代
42、码:11.html - 开始标签 - 一个简单的HTML示例 | 头部标签 - - | 欢迎光临我的主页 | | | 文件主体 | 这是我第一次做主页 | | | - - 结尾标签 在文档的最外层， 文档中的所有文本和html标签都包含在其中，它表示该文档是以超文本标识语言（HTML）编写的。事实上，现在常用的Web浏览器都可以自动识别HTML文档，并不要求有 标签，也不对该标签进行任何操作，但是为了使HTML文档能够适应不断变化的Web浏览器，还是应该养成不省略这对标签的良好习惯。 是HTML文档的头部标签, 在浏览器窗口中，头部信息是不被显示在正文中的,在此标签中可以插入其它标记, 用以说
43、明文件的标题和整个文件的一些公共属性。和是嵌套在头部标签中的，标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。 标记一般不省略，标签之间的文本是正文，是在浏览器要显示的页面内容。上面的这几对标签在文档中都是唯一的，HEAD标签和BODY标签是嵌套在HTML标签中的。4.1.2 Html的发展历史HTML是万维网文档发布和浏览的基本格式。它具有很多特点，如独立于平台的格式、结构化设计，特别是超文本链接，这些特点使它成为万维网较好的文档格式。 一. HTML的起源HTML作为定义万维网的基本规则之一，最初由蒂姆本尼斯李（Tim Berners-Lee）于1989年在CERN（Conseil
44、 Europeen pour la Recherche Nucleaire）研制出来。HTML的设计者是这样考虑的：HTML格式将允许科学家们透明地共享网络上的信息，即使这些科学家使用的计算机差别很大。因此，这种格式必须具备如下几个特点： 独立于平台，即独立于计算机硬件和操作系统。这个特性对各种受从是至关重要的，因为在这个特性中，文档可以在具有不同性能（即字体、图形和颜色差异）的计算机上以相似的形式显示文档内容。 超文本。允许文档中的任何文字或词组参照另一文档，这个特性将允许用户在不同计算机中的文档之间及文档内部漫游。 精确的结构化文档。该特性将允许某些高级应用，如HTML文档和其他格式文档间互相转换以及搜索文本数据库。本尼斯李选择使用标准通用标记语言（SGML，standard generalized markup language）作为HTML的开发模版。作为一种当时正在出现的国际标准，标准通用标记语言具有结构化和独立于平台的优点。SGML的标准化水平也确保了它长久的生命力，这意味着采用SGML格式的文档在相当长的时间里不需要重新构建。SGML是独立于平台的，因为它对文档的语义结构或含义进行编码描述