Phpcms内部管理系统UI设计

1、南阳理工学院成人教育学院本科毕业设计（论文）（计算机科学与技术专业）Phpcms内部管理系统UI设计专 业： 计算机科学与技术 学 生 姓 名： 指 导 教 师（职称）： 完 成 日 期： 2015年5月 南阳理工学院成人教育学院毕业论文（设计）选题表年级： 2008级 层次：专升本 姓 名学号专业计算机科学与技术工作单位南阳理工学院现任工作通讯地址南阳市长江路80号邮政编码473004联系电话在单位所做技术业务工作入学前入学后南阳理工学院你拟选论文题目及论文提纲是什么？论文题目为：Phpcms内部管理系统UI设计论文提纲为：一、UI的简介、发展及现状 二、软件界面设计基础 三、软件系统UI设

2、计标记语言 四、Phpcms内部管理系统的构架函授教学辅导站： 2015年 4 月 6 日3南阳理工学院成人教育学院毕业 论文(设计)任务书 函授教学辅导站： 年级： 2008级 层次： 专升本 学生姓名： 专 业： 计算机科学与技术 指导教师： 工作单位： 南阳理工学院 设计(论文)题目: Phpcms内部管理系统UI设计 设计（论文）主要内容： Phpcms内部管理系统的UI设计流程以及有关UI设计的实习经验总结要求完成的主要任务: Phpcms内部管理系统建设指导教师签名： 函授教学辅导站负责人签名： 函授教学辅导站盖章 年 月 日Phpcms内部管理系统UI设计 计算机科学与技术专业摘

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

4、则、方法、及过程进行分析。关键词UI；界面设计；后台管理系统目 录1、绪论.51.1UI简介 52、UI设计现状5 2.1软件开发业的界面设计现状5 2.2Phpcms内部系统软件开发在UI方面的现状及缺点63、软件界面设计基础6 3.1软件界面设计的前期准备工作.6 3.2软件界面设计的原则.73.3软件界面的规划.83.4色彩.154、Phpcms内部管理系统UI设计语言简介.16 4.1 HTML语言.16 4.2基于HTML的UI设计过程. 185、Phpcms内部管理系统的构架. 195.1登录模块. 195.2首页模块. 205.3管理模块. 20结束语22参考文献23致谢241绪

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

6、发上的投入人得多。GUI(Graphical User Interface)是一种结合计算机科学、美学、心理学、行为学，及各商业领城需求分析的人机系统工程，强调人一机一环境三者作为一个系统进行总体设计。对大多数人来说，用户界面就是软件本身.所以，掌握用户界面设计的技巧与技术是让软件走向市场的最直观因素.界面是一个窗口。界面设计是开发中最重要的方面，并将涉及到整个开发队伍。对于应用软件来说，一个基本现实就是:用户界面是面向用户的。用户需要的是开发者开发的应用软件满足其需求，并且易于使用，用户界面走到今天直是千锤百炼，要做到易用就更是难上加难.太多的开发者自以为是艺术天才，他们不去尽力遵循用户界面

7、设计标准，或花精力使得产品好用；相反，他们错误地认为编写更灵巧的代码或是使用一套确实有趣的颜色方案才是重要的事。Constantine(1995)指出，好的用户界面使得人们不用阅读用户手册或接受培训就能使用应用软件.对于软件公司来说，软件产品就是他们的商品，面软件界面就是他们产品的外观，界面的美观与否，直接关系到了软件产品的营销成败。2 UI设计现状2.1软件开发业的界面设计现状人机交互和计算机用户界面刚刚走过基于字符方式的命令语言式界面.目前正处于图形用户界面时代.用户界面(User Interface)是当前用户界面的主流.广泛应用于各档台式微机和图形工作站。当前各类图形用户界面的共同特点

8、是以窗口管理系键盘和鼠标器作为输入设备。窗口管理系统除基于可重叠多窗口管理技术外，广泛采用的另一核心技术是事件驱动(Event-Driven)技术。图形用户界面和人机交互过程极大地依赖视觉和手动控制的参与.因此具有强烈的直接操作特点。在用户把软件买回去后，他们和企业的联系.以及该企业形象在客户眼中的表现，很大一部分是通过软件的界面来传达的，美观友好的用户界面对于宜传企业文化，给客户灌输企业理念.甚至于对企业的宣传运作都将是非常有益的，美观的界面都会给客户以信心和良好的印象。纵观国际相关产业在图形化用户界面设计方面的发展现状.许多国际知名公司早己意识到UI在产品方面产生的强大增值功能。以及带动的

9、巨大市场价值，因此在公司内部设立了相关部门专门从事UI的研究与设计，同业间也成立了若干机构，以互相交流UI设计理论与经验为目的。我们可以清楚地看到.微软公司对软件界面设计的重视。仔细将WIN2000与WIN98和WIN95以及NT4. 0相比是否惊叹他界面的美观性与易用性？而WINDOWS XP系统，则更在其界面的美观性和简洁性上下了大功夫.简单大方的界面让使用者的心情也大为舒畅！金山公司的金山词霸就是国内软件成功的例子了，从金山词霸3.0到金山词霸2001的变化堪称经典.著名的网页动画制作软件Flash从3.0到4.0，仅仅修改了图标和窗体，立即大为增色.现今世界上成功的软件公司部非常重视软

10、件界面的美化设计，因为他们深刻地知道，在激烈的市场竞争中，仅仅有强大的功能是远远不够的。设计良好的界面能够引导用户自己完成相应的操作，起到向导的作用，同时界面如同人的面孔，具有吸引用户的直接优势.设计合理的界面能给用户带来轻松愉悦的感受和成功的感觉，相反由于界面设计的失败，让用户有挫败感，再实用强大的功能都可能在用户的畏惧中付诸东流。国内软件业在软件产品的人机交互界面设计水平发展上日显滞后，这对于提高产业综合素质，提升与国际同等业者的竞争能力等等方面无疑起了制约的作用。2.2 Phpcms内部管理系统软件开发在UI方面的现状及缺点Phpcms的软件开发存在着目前国内软件开发业的通病，界面设计很

11、粗糙。由于大部分的界面均由软件开发人员设计，并没有专门的界面处理人员.同时，开发人员也把精力重点放在对软件性能的学习和实现上，没有多余的精力来仔细的处理界面.这也就形成了其开发的软件在功能上比较强.但是在人机交互方面糟糕.用户经常会遭遇面对一堆输入框和几个窗口，却无从下手，不知道如何进行操作的尴尬局面。于是软件开发人员经常花费好多时间去写如何使用软件的用户指南文档，但是往往事倍功半。与其这样，还不如稍微花点时间在图形界面设计上.简单大方的界面能自然的引导用户，突山重点，从而让用户能在最短的时间内熟悉该软件，而且找到自己想要使用的东西。随着客户对软件界面的高度重视，网页设计的概念也辐射到了软件界

12、面设计，软件的界面设计也逐渐受到了大家的重视。软件开发期待着界面设计的苏醒.第三章软件界面设计基础3.1软件界面设计的前期准备工作(一)确定软件的主题.不管要设计什么东西，设计前就应该先确立好设计的主题.而软件的主题的确与软件的功能与目的有关.比如一个图书管理系统的软件.其主题就是“图书管理，.远程教育系统的主题就是远程教育”。于是软件界面的设计就要围绕着主题来进行，让用户一看软件的界面就知道这个软件是做什么的，不能软件的界面与软件的主题相差十万八千里，例如一个电脑硬件管理系统软件的界面上尽是和电脑无关的东西.比如花草，山水，这样，就不能反应该软件的主题与功能，让人丈二和尚摸不着头脑，这样.这

13、个软件的界面就是失败的。(二)美工作为界面美化的主要人员，不但拥有艺术设计、包装设计的才能，还应该穿插整个项目，给界面程序设计人员提出系统参考意见，1.软件设计前期，美工参与需求了解，分析同类软件界面优缺点，提出主色调、典型界面风格、以及构思整个美术包装等。2.界面原型设计过程中，与开发人员共同修改、商榷最终表现样式，以及确立UI标准。3.用户调研。拟定需求，初步建立界面原型.4.任务分析。根据任务的复杂性、难易程度等，详细分解任务动作，进行合理分工，确定适合于用户的交互方式。5.程序开发过程中，提供标准风格的资源文件(icon. cur.bmp德)，并总结出统一风格的资源的设计过程.形成规范

14、文档。 （三)确定界面根据用户的自身特性.以及系统任务、环境、成本/效益，确定何为适合的界面类型. 这时，在着手进行软件界面设计前，须在心里大致有个谱，对要设计的软件的功能有了解，同时对该软件的界面设计有成形的构想。3.2软件界面设计的原则 （一）一致性原则要求软件的概念模式、显示方式等的一致性，在类似的情况下具有一致的操作序列:如在提示、菜单和帮助中产生相同的术语;具体是指在不同的应用系统中都具有相似的界面外观，布局、相似的交互方式以及相似的信息显示等。界面设计保持高度一致性，用户不必进行过多的学习就可以掌握其共性，还可以把局部的知识和经验推广使用到其他场合。人机界面设计的一致性要求对构成易

15、学易用是极为重要的. 无论是控件使用.提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准做到真正的一致。这样得到的好处:1、使用户使用起来能够建立起精确的心里模型，使用熟练了一个界面后，切换到另外一个界面胜够很轻松的推测出各种功能，语句理解也不需要费神2、降低培训、支持成本.支持人员不需要费力逐个指导。3、给用户统一感觉，不觉得混乱，心情愉快，支持度增加 (二)合理利用空间，保持界面的简洁。简单易用就是好.不要将界面设计的过于复杂，那样会影响程序的快捷使用，人为降低了程序的运行效率.界面设计最重要的就是遵循美学上的原则简洁与明了。一个软件，特别是应用软件，其界面不需要很华丽。太过花哨的界面容

16、易让人的眼睛疲惫，让人心浮气躁，把注意力过多的集中到花哨的图案和颜色上，从而形响软件的可信度以及实用性。因此，界面设计需在空间使用上，合理的布局和设计，在简洁的同时让人的眼球得到艺术欣赏，并且能感觉放松，突出软件的性能，使界面设计成为软件性能一个出色的辅助项目但是却不喧宾夺主，始终作为一个衬托.让软件界面更友好.更能为用户所喜爱和接受。 (三)从用户的观点考虑. 一个软件界面是用来方便用户与软件的交互的，因此，要从用户的角度去考虑和设计软件界面.想他们所想.做他们所做.并且界面中要使用能反应用户本身的语言.而不是设计者的语言以及使用习惯。(四)记忆负担最小化。人脑不是电脑，在设计界面时必须要考

17、虑人类人脑处理信息的限度。人类的短期记忆极不稳定、有限，24小时内存在25%的遗忘率。所以对用户来说，浏览信息要比记忆更容易。一个画面的信息量不可过于复杂和庞大。（五）清楚，和谐的排列。保证界面的协调性。控件摆放位置要合理、均衡，让人便于浏览和使用。不要给人们带来“前重后轻、左宽右窄”的不良感觉。要将重要的控件摆放在明显位置，这样才能突出重点。此外，一定要符合人们的日常便用习惯.同时，背景图案和颜色的设计要帮助排列，甚至有时候作为分隔符，让界面看上去和谐美丽.3.3软件界面的规划3.3.1登陆界面的规划应用软件的登陆窗口一般只有输入用户名、密码的内容，所以不宜过大，大小大概为屏幕的1/4，太人

18、给人一种画面太空旷的感觉.太小则给人以拥挤的感觉。位置为居中。这样让用户把注意力自然的集中到窗口上，且符合般用户的使用习惯。3.3.2应用界面的规划 (一)菜单的规划(1)菜单设计的原则 1.菜单、按钮名称,应该易懂、用词准确，摒弃模棱两可的字眼。 2.菜单的命名要直观，含义清晰，不可有二义性. 3.菜单命名最好能望文知意，理想的情况是用户不用查阅摺助就能知道该命令的功能。并能进行相关的正确操作。 4.菜单命名要与同一界面上的其他按钮易于区分，含义不能雷同。 5.菜单的字体、大小通常为宋体、五号。 6.菜单中的命令长度一般为2-5个字符。 7.菜单的命令格式一般为“动词+名词”，即“操作方法+

19、操作对象”，或者为“名词+名词.，即“所有者+属性”等等。 8.主菜单的宽度要接近，每个菜单的字数能相同最好。(2)菜单组织 1.菜单的形式有下列几种:下拉式菜单，线状序列菜单，树状结构菜单，选项式菜单，弹出式菜单. 2.菜单可以是文字式.图标式成图标文字混合式。 3.主菜单为单排布置。 4.菜单前的图标不宜太人，与字的高度保持一致最好。 5.菜单和工具条要有清楚的界限，菜单要求凸出显示，这样在移走工具条时仍有立体感. 6如果该命令菜单会引出一个对话框，则该菜单后面应该加省略号.，表示需要用户提供更多的信息才能使用该菜单命令.7.如果该菜单是一个级联菜单，即其下还有子菜单，则菜单标题后面应该有

20、向右的箭头.8.尽可能从用户角度设计菜单的语义系统。9.专业性强的软件要使用相关的专业术语.通用性界面则提倡使用通用性眼。10.按照逻辑功能来将菜单命令分组。11.在下拉菜单中用分隔线将功能更相关的项目分组排列，完成相同或相近功能的菜单命令放在同一位置。12.在同一菜单中避免使用多个相同功能的菜单项。 13.避免使用没有下拉项的菜单项，因为孤立的菜单项和按钮没什么区别。14.当子菜单的划分有多个标准时，应该采用同一个标准，不能多个标准共用。15.子菜单在语义逻辑上不应该同属于几个主菜单。16.不要在同菜单层次上应用相同或相似的词汇。17.下拉式菜单深度一般要求最多控制在三层以内。18.菜单前的

21、图标能直观的代表要完成的操作。19.当菜单是层次的，则应该是循环式的网络结构，用户能从上一级菜单到下一级菜单.也能从下一级菜单返回到上一级菜单.切忌采用非循环的结构。20.允许跳转到前层的菜单和主菜单。21.常用菜单要有命令快捷方式，不常用的可以没有快捷健。22.应该在所有子菜单中都提供访问健(菜单项中带有下划线的字毋，称为菜单的访问健).23.正在起作用的命令菜单应该在菜单的表现形式上有所不间.如菜单下凹或菜单前打勾等。 24.在当前状态下.对与正在进行的操作无关的菜单命令要用加以屏蔽处理如变灰但应该还可见。25.对于在当前位置或状态下始终用不到的命令，在界面上应该完全屏蔽.即不可见，如果采

22、用动态加载方式(即只有需要的菜单才显示)最好。26.动态加载方式的菜单只显示最近用过的菜单命令，久未运用的菜单将会自动隐藏起来，需要的时候又可以打开。27.系统所有的功能项都应该在菜单中有对应的菜单命令.28.右健上下文菜单采用与菜单相同的准则。29.上下文菜单中的命令应该与当前操作环境或状态密切相关.30.上下文菜单中允许有不直接出现在菜单中的命令。但该命令应该是某个菜单的一个部分，可以在某个菜单中找到该功能命令。 （3）菜单位置细则1.菜单通常采用.“常用一主要一次要一工具一帮助”的位置排列，符合流行的Windows风格.2.菜单命令在使用时如果有先后顺序，应该按使用先后次序排列。3.没有

23、顺序要求的菜单项按使用频率和重要性排列，常用的菜单排列在前面，不常用的靠后放置:重要的放在开头，次要的放在后边。4.下拉菜单要根据菜单的含义进行分组，组与组之间有明显的分割形式，比如用横线隔开。5.下级菜单对于上级菜单应该有隶属关系。6.广而浅的菜单树优先于窄面浅的菜单树。7.如果菜单选项较多，应该采用加长主菜单的长度而减少子菜单深度的原则排列。 (二)按钮的规划 （1）按钮的字体和大小按钮的字体在应用软件中多用宋休.但是具体情况应该根据该软件界面的整体风格来定。比如界面的风格比较古典，这时则可以采用隶书的字体。按钮的字号要看按钮的大小来确定。字的高度为按钮高度的1/2-1/3为佳，同样.字的

24、宽度为按钮宽度的1/2-1/3比较好看。 （2）按钮的颜色 按钮的颜色最好与整个界面的主色调统一。按钮的颜色不宜用和界面主色调不一致的色彩。如图1.但是，设计是灵活的。并不是说按钮的颐色一定要与主色调一模一样，也并不是说按钮的颜色一定要与主色调相同，一切都要视具休设计情况与设计者的设计思路来看。(3)按钮的风格。在应用软件中，比较流行的按扭风格有APPLE公司的水晶按钮，WIN XP风格的按钮以及像素按钮。 按钮的风格取决于整个软件界面的风格，两者的风格应该和谐统一。(三)文字的规划 文字是软件界面的主体，也是传达信息的主要工具.因此，文字的规划绝对不可以马虎。软件文字的字号一般为宋体.大小为

25、5号。宋体显得比较严肃认真，让用户在心理上觉得可靠，这对应用软件来说非常重要。(四)图案的规划图案的规划是界面设计的重点，也是最难的地方。它实质上是对软件产品进行艺术包装.在这个阶段，设计人员需要充分发挥自身的艺术设计能力。（1）图案的选择 图案须和软件的主题有关联，要能反应出软件的相关信息，因为这些图案就是对软件的高度抽象化.它要既能让人觉得赏心悦目，又能体现软件的宗旨。比如一个电力系统的软件，对它进行图案的设计时，就应该选择与电力相关的图案。如图3.软件界面左方是个高压电网的图案，让人一看了，就知道这个软件的性质，就知道它是一个与电力系统有关的软件，这样，这个图案就起到了画龙点睛的作用。同

26、样，一个图书管理系统的软件，就要在界面上显示与图书类有关的东西，不能天南地北.不着边际的选择图案。如下面两幅用，我们来比较一下两者.两幅图都是为图书管理系统做的界面，但是图4的图案选择的是用一幅翻开的书的图案和一个显示器的图案。书很明显的表示了该软件的功能与书籍有关.而显示器则增加了一些现代的感觉，使整个画面看起来不至于过于休闲，显示器中是堆成山的书和一幢建筑，这正好显示了该软件与图书馆的功能类似，它是现实中的图书馆在电脑中的表现。画面看起来宁静面不呆板。现在来看看图5的软件界面设计图。左边的小狗让人第一眼看去，以为这个软件是个与宠物有关的，而再看软件的名字，则让人哭笑不得，整个界面看起来不伦

27、不类，这个界面设计就是完全失败的.因此，图案的选择和设计非常关键，它决定着整个软件包装的成败。(2)图案的处理 图案的处理和图案的选择一样重要。 任何设计都没有现成的图案，设计一个图案.需要在各个图片上选取自己所需要的部分，或者自己用画图软件去画出自己需要的效果。这个过程是需要时间最长的，也是需怪反复斟酌和推敲的。这个阶段，也许会推翻很多过去的方案，它是一个不断对界面重断进行艺术设计和完善的过程，因此，在着手设计前，最好能准备几套不同的设计方案，以便在这个阶段能有多种选择，而从中选择一个最好的方案。准备好需要进行处理的图案后，需要把这些图案柔和起来形成一个和谐的整体，或者需要对图片进行处理，使

28、其具有更丰富，更立体化的效果，要去其粗，取其精，使其能更好的体现软件的主题。如下面的图6.图6是未经过处理的图做的用书管理系统软件的界面。可以看到图上有一杯咖啡和一盘面包，虽然从色彩上来说，这幅图更加丰富.但是咖啡和面包和图书管理系统没有关系，它们的出现只会让人觉得奇怪，整个图案看起来也过于休闲.与软件的主题相去甚远，那这幅图的选择也就失败了。但是这个图中的书报却是做这个软件界面所需要的，因此，取其书报的部分.而将其他的部分隐去.突山书的重点，那这幅图又变得可用了。任何设计都是如此，有时候需要从很多幅不同的图上选取部分来综合.这些工作则需要设计人员有丰富的联想和熟练的技术。也可以自己去拍照。以

29、使设计更加漂亮，更符合自己的心意。(3)图案的其他设计效果.选择好了图案，并将其处理成了一个可用的整体，图案规划的工作却仍然没有完成.一张单一的图，看起来是平面的，这样，就无法突山重点.图案也没有层次.让人在视觉上没有远近之分，因此，还需要对图案进行修饰和润色。如图7和图8.两幅图是为种质资源库做的软件界面设计。首先来观察图7.图案的选择是中国的地图作为前景，而用连绵的崇山峻岭的图片来作为背景。图案的选择没有问题.而图案的处理也已经完成.中国地图经过处理，采用黄色和蓝色来突出西南这块地方，表示了该软件面向的范围是中国西南地区。然而，整个画面看起来的感觉是将一幅图压在一块玻璃下面.平淡而没有重点

30、。地图左方的空间过于空，让人觉得左轻右重。界面看起来空洞。这时.就需要对它进行修饰.让它更丰富，有轻有重，让人看起来不那么无味。再来看图8。可以看到，中国地图的边缘加上了光图，使它看起来有立体的感觉，同时，边缘的柔和让整个画面看起来也更柔和。背景图片的左上方加了一点红色，相比较前一幅图，这幅图则更朦胧.更有美感，而且画面的颜色也不像前一副图一般清淡，它更鲜亮。而在左方，加上了几种动植物的图片，这些图片让界面看起来丰富了不少，而且反应了该软件的主题“野生动植物保护”。同样，对标题字和左下的字也进行了修饰，画面看起来就和谐多了。比较图6和图4.也可以发现。图案修饰的重要性。图6只是一张整齐的图片，

31、基本上没有修饰。这个界面看起来更像是一个相框，把图片框在里面，让人觉得狭隘，没有可发展的思维余地。在图4中.书页超出了框的范围.延伸到外面.而且书页有好几个影子.这样.看起来.画面就马上立体许多，整个界面的构图看起来也更漂亮。（4）图标的规划图标是每个软件界面中必不可少的一部分。它的比例虽小，但是却一点马虎不得，一个优秀的软件界面.小小的图标.往往能起到画龙点睛的作用.成为一个亮点。然面，图标的设计，也需要注意以下几点: (1)形象的一致性.这和软件风格的一致性原则一样，风格杂乱的图标让人觉得界面很乱。 (2)形象的可识别性。图标的设计要符合一般的识别规律，设计的时候可以参考同类软件或权威软件

32、的类似图标. (3)大小。不论多么高深的画功，都要注意。图标受到大小的限制，这也就决定了图标的内容不可过多。图标须简洁、明快的表达其内容。如图9。目前，网络上有很多现成的图标，各种类型和样式.因此，不是特别需要的话，可以去网上下载合适的图标，从而省去设计制作图标的时间。 3.4色彩色彩是艺术表现的要素之一。在进行设计时，要根据和谐、均衡和重点突出的原则，将不同的色彩进行组合.搭配来构成美丽的页面。根据色彩对人们心理的影响，合理地加以运用。 （一）色彩的感情 会因其色相、明度、彩度的不同，表现不同的色彩感觉。我们面对这些色彩也会产生不同的心理影响。按照色彩的记忆性原则，一般暖色较冷色的记忆性强；

33、色彩还具有联想与象征的物质.如红色象征血、太阳；蓝色象征大海、天空和水面等。所以设计出手冷食的虚拟店面，应使用淡雅而沉静的颜色.使人心理上感觉凉爽一些.（二）冷色与暖色 蓝色、蓝绿、蓝萦等色，予人凉爽的感觉，称为冷色.而红、橙、黄等予人沮暖的感觉，称为暖色。明度高的色彩较凉爽，明度低的色彩较温暖.如图10和图11.（三）色彩的运用由于国家和种族、宗教和信仰的不同，以及生活的地理位置、文化修养的差异等，不同的人群对色彩的喜恶程度有着很大的差异.如:儿童喜欢对比强烈、个性鲜明的纯颜色；生活在草原上的人喜欢红色。生活在闹市中的人喜欢淡雅的顺色;生活在“沙漠”中的人喜欢绿色。在设计中要考虑主要用户群的

34、背景和构成.如，流行音乐软件的面向用户群人多是年轻人.宜采用鲜亮的颜色。来体现年轻和活力；而冠心病调查软件的用户群般是中老年人，则应采用柔和的颜色，让用户觉得宁静平和。色彩的搭配具有极强的目的性，是个非常具体的、创造性的审美过程。黑、白，灰最能体现优稚、理性、高贵、神秘类型的气质，将此三色艺术化格配，简单中蕴藏着无穷变化.更具意想不到的惊人效果.常用的多色相配色以少量色种为基础。按“大统一协调、小对比”的规则配色。以相同或相近色相加、以明度和纯度的变化体现区别的弱对比配色系列，具有统一协调、柔和素雅的效果，但缺少动感，易显得单调平淡。中对比配色系列和强对比色系列的共同点是具有不问程度的鲜明醒目

35、、兴奋热烈的视觉效果，但也不易统一协调，容易引起视觉疲劳。色彩高明度格调的作品会形成优雅明亮的氛围，具轻松温和明快的效果；中明度格调的作品中，中明度、高纯度的配色饱满有力.中明度、中纯度的配色则显得含蓄庄重；低明度格调的作品具有沉静庄重、严肃优郁、文弱内向等效果。色彩纯度越高.颜色越鲜艳华丽，效果越活跃热烈.纯度越低，色彩越灰暗迷朦.效果越朴素沉静.甚至有软弱内向的感觉。4.Phpcms内部管理系统UI设计Html语言简介4.1 Html语言特点 HTML (HyperTe:tgark-upLanguage)即超文本标记语言，是WWW的描述语吉。html是在sgml定义下的一个描述性语言，或可

36、说html是sgml的一个应用程式，html不是程式语言，它只是标示语言。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。HTML文本是由HTML命令组成的描述性文本.HTMl命令可以说明文字、图形、动画、声音，表格、链接等.HTML的结构包括头部(Head)、主休(Body)两大部分，其中头部描述浏览器器的信息.而主体则包含所要说明

37、的典体内容.另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。神奇吗?一点都不神奇.因为现在你看到的就是这种语言写的页面.也许称听说过许多可以编辑网页的软件，事实上.你不需要用任何专门的软件来建立HTML页面；你所需要的只是一个文字处理器（如Microsoft Word记事本、写字板等等)以及HTML的工作常识。其实你很快就会发现，基础的HTML语言很简单. HTML只不过是组合成一个文本文件的一系列标签.它们像乐队的指挥，告诉乐手们哪里需要停倾，哪里需要澎湃激昂

38、.一个HTML文档是由一系列的元素和标签组成，元素名不区分大小写.HTML用标签来规定元素的属性和它在文件中的位里.HTML超文本文档分文档头和文档体两部分.在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。 下面是一个最基本的html文档的代码:1一1. html<HTML>开始标签<HEAD><TITLE>一个简单的HTML示例</TITLE>头部标签</HEAD><BODY><H1>欢迎光临我的主页</H1><BR> <HR>文件主体<

39、FONT SIZE= 7 COLOR= red>这是我第一次做主页!</FONT></BODY></HTML>结尾标签<HTML></HTML>在文档的最外层，文档中的所有文本和HTML标签都包含在其中.它表示该文档是以超文本标识语育(HTML)编写的。事实上，现在常用的Web浏览器都可以自动识别HTML文档，并不要求有<HTML>标签.也不对该标签进行任何操作，但是为了使HTML文档能够适应不断变化的Web浏览器，还是应该养成不省略这对标签的良好习惯。<HEAD></HEAD>是HTML文档

40、的头部标签.在浏览器窗口中，头部信息是不被显示在正文中的.在此标签中可以抽入其它标记，用以说明文件的标题和整个文件的一些公共属性。<title>和</title>是嵌套在<HEAD>头部标签中的，标签之间的文本是文本标题.它被显示在浏览器窗口的标题栏。<BODY> </BODY>标记一般不省略，标签之间的文本是正文，是在浏览器要显示的页面内容.上面的这几对标签在文档中都是唯一的，HEAD标签和BODY标签是嵌套在HTML标签中的.4.2基于HTML的UI设计过程用Dreameeaver CS5创建html界面的方法很简单，首先是在本地

41、新建站点，其次在用一些html标签放所需的控件，如命令按钮、单选钮，文本框、标签、图片框等。然后针对每个控件设定特定的Css样式来美化界面。最后制作好的界面在浏览器中预览，做适当调整即可。一般说来.用Dreamveaver CS5创建html界面时.需要以下五步:1.建立网站站点在正式开始制作间页之前.最好先定义一个新网站.这是为了更好地利用站点窗口对站点文件进行管理.也可以尽可能的减少一些错误的出现。如路径、链接出错。1)首先打开Dreaoeaver CS5.2)点击顶部菜单栏【站点】下拉菜单3)点击新站点，出现如下对话框。4)按自己习惯填写相关信息，点击【保存】按钮.2.控件添加1)新建h

42、tml文档.如下图所示2)在适当的位置添加控件，如<li>标签，<div>标签等。3. div布局使用div确定标签的位置。4. css样式确定修改控件的Css样式，如 width, height，bodycolor等.5.顶览，修改。5.Phpcms内部管理系统的构架5.1登录模块用户必须拥有账户，输入正确的用户名和密码进行登录。用户名是分配的，不可修改的。密码可以使用Phpcms管理系统进行修改。登陆页设有验证码，放置恶意登陆。5.2首页模块 首页顶部用于显示当前登录的用户，以及【会员中心】【搜索】【站点首页】【退出】四个链接。内部用于显示当前用户的权限，登陆IP以

43、及Phpcms团队基本信息，以便于使用者遇到问题时联系我们。5.3管理模块管理模块里面设置内容管理、附件管理以及与内容相关的设置。内容里面主要为首页添加信息、材料所用；附件管理用于管理上传信息中的图片、视频、音频、文档等相关附件；设置里面分有栏目管理、模型管理、类别管理、推荐位管理，以方便用户根据自己的喜好设置主页模块以及显示方式。结束语纵观国际相关产业在图形化用户界面设计方面的发展现状，许多国际知名公司早己意识到UI在产品方面产生的强大增值功能.以及带动的巨人市场价值.因此在公司内部设立了相关部门专门从事UI的研究与设计，同业间也成立了若干机构，以互相交流UI设计理论与经验为目的.比较成熟的商品化系统有Apple的Macintosh 、IBM的PM(Presentation Manager)、 Microsoft的Windows和运行于Unix系统的X-Window、OpenLook和OSF/Motif等.我们可以清楚地看到.微软公司对软件界面设计的重视，仔细将WIN2000与WIN98和WIN95以及NT4.0相比是否惊叹其界