界面设计论文.doc

.我国这两年的网络发展非常快，每天都有数以千计的诞生，其中的网页数量更是成几何式的增长，然而关乎形象和浏览者用户体验的界面设计却不容乐观除了一些大的专业在版面的编排上比较讲究之外，其他很少见到界面设计考究、美术创意优秀的中文如何设计出美观（吸引受众眼球）的网页，如何用优秀的用户体验赢得受众的一次又一次的浏览仿佛一夜间就摆在了众设计师的案头就此本文从以下几点讨论了关于界面设计所需要重视的问题今日的已经不单单只是人们查询资料的工具，它已糅合了多种功能于一身，在为人们的学习、生活、工作、娱乐提供越来越重要的信息时，人们都它的要求也与日俱增，对界面的要求也不仅仅是停留在美观上就此，本文在讨论一些基本的网页设计原理的同时还特别强调了UI在网页设计中的运用关键词： 网页  界面设计 UI 布局  色彩  一、认识UI（一）什么是 UI ：      UI的本意是用户界面，是英文User和　interface的缩写二）什么是 GUI：     Graphics User Interface 图形用户界面，也就是我们今天要主要研究的东西三）什么是用户界面设计：    在人和机器的互动过程中，最重要的一个方面就是我们所说的界面（。

用户界面设计是屏幕产品的重要组成部分大致界面可分为感觉（视觉、触觉、听觉等）和情感两个层次界面设计是一个需要多方面专业知识的工作，认知心理学、设计学、语言学等在此都扮演着重要的角色用户界面设计的三大原则是：置界面于用户的控制之下；减少用户的记忆负担；保持界面的一致性从字面上看是用户与界面2个组成部分，但实际上还包括用户与界面之间的交互关系，所以这样可分为3个方向，他们分别是：用户研究、交互设计、界面设计 1.用户研究 用户研究包含两个方面：一是可用性研究，研究如何提高产品的可用性，使得界面的设计更容易被人承受、使用和记忆；二是通过可用性的研究，发掘用户的潜在需求，为技术创新提供另外一条思路和方法用户研究是站在人文学科的角度来研究产品，研究用户的需要，站在用户的角度介入到产品的开发和设计中对于设计师来说就是研究如何使自己的页面更收浏览者的欢迎 用户研究通过对于用户的使用环境、浏览习惯等研究，使得在界面设计的前期能够把用户对于功能的期望、对设计和外观方面的要求融入到的开发与设计过程中去 2.交互设计 这部分指人与机之间的交互工程，在过去交互设计也由程序员来做，其实程序员擅长编码，而不善于与最终用户交互。

在使用的过程中最能给浏览者留下深刻印象的一定是的视觉因素，也就是我们所谈论的界面所以，很多的虽然功能比较齐全，但是交互方面设计很粗糙，繁琐难用，使用困难如何使浏览者在使用时可以轻松自如的找到自己想要的资源，如何轻松实现的功能，给浏览者以愉悦的心情，拉拢浏览者下一次的登陆，这些都需要在的交互设计上下足工夫3.界面设计 在漫长的软件发展中，界面设计工作一直没有被重视起来做界面设计的人也被贬义的称为“美工”其实界面设计就像工业产品中的工业造型设计一样，是产品的重要买点一个友好美观的界面会给人带来舒适的视觉享受，拉近人与电脑的距离，为创造卖点如果把比做一个人的话，的后台编程好比人的骨骼与肌肉，而界面则是者个人的外表，人人都喜欢美人，同样有着良好视觉感受的界面也是拉拢人气的关键所在界面是灵魂的外在表现，忽略的界面设计最终会使你的输在起跑线上界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是纯粹的科学性的艺术设计检验一个界面的标准即不是某个项目开发组领导的意见也不是项目成员投票的结果，而是最终用户的感受四）界面构成要素互联网与传统媒体最大的不同就在于除了文字和图像以外，还包含声音、视频和动画等新兴多媒体元素，增加了网页界面生动性的同时也使得网页设计者需要考虑更多页面元素合理性运用。

    1.文字从网页最初的纯文字界面发展至今，文字元素作为容传达的主体，文字有着其他任何元素无法取代的重要作用首先是文字信息符合人类的阅读习惯，其次因为文字所占存取空间小，节省了下载和浏览时间网页中的文字主要包括标题、信息、文字等形式文字作为占据页面重要比率的元素，同时又是信息重要载体，它的大小、字体、颜色和排布对页面整体设计影响极大以文字排布为主的网页界面，只要文字排布得当，版面同样可以生动活泼，分类条例清晰，不会给人单调感觉2图形在大多数网页中，图形占据了重要的位置，有的甚至是全部页面图形往往能引起人们的注意，并激发阅读兴趣，合理的运用图形，可以生动直观、形象地表现设计主题网页中常用的图形格式包括JPG、GIF和BMW图形元素包括标题、背景、主图、图标四种以图像作为标题和可以使网页具有更好的视觉效果，配合文字增强生动和形象性主图与背景在装饰性上小有不同，背景是衬托主题，主图则是突出表现主题主图是整个网页的视觉中心，它具有直观性强的特点，可以为单调的文字信息增强活力，不需要像文字那样去逐句阅读，可以不受文化水平的限制，能给人强烈的视觉信息3多媒体随着网络硬件设备的日益完善，网页构成中的多媒体元素运用的也越来越多，主要包括音频、视频和动画。

这些是界面构成中最吸引人的元素，好的多媒体元素不但可以增加的活力还可以有效的提高与浏览者之间的互动交流 二、界面布局网页设计源于平面设计但又与平面设计有所区别不同，相同的是在设计中多运用平面构成的基本原理，不同的是它的大小比较固定，传载的媒体只限于电子显示器（包括、PDA等），这样就为设计者提出了更为苛刻的要求一）页面尺寸由于网页的浏览多是基于显示器实现的，所以显示器的分辨率就决定了网页设计者设计页面的大小，目前比较流行的显示器的尺寸为800*600、1024*768、1125*864、1280*720、1280*768、1280*960、1280*1024而目前主流设计页面的大小一般为600*300、760*420、995*436 有效可视区域（单位：px）屏幕一二三800600102476812801024IE6.0779(+21) 432(+168) 1003(+21) 600(+168) 1259(+21) 856(+168) IE7.0779(+21) 452(+148) 1003(+21) 620(+148) 1259(+21) 876(+148) Firefox2.0783(+17) 417(+183) 1007(+17) 585(+183) 1263(+17) 841(+183) Opera9.0781(+19) 461(+139) 1005(+19) 629(+139) 1261(+19) 885(+139) 一般情况下宽度是一定的但页面的宽度则可以根据容的多少而进行调整，但设计宽度始终要比显示器的实际大小窄20像素，这为的是给右侧的滚动条留有一定的空间（见图1）（图例1）1. 最保守而最有兼容性的一屏大小是：779×432 2. 最广泛的一屏大小是：1003×600 3. 适合目前国的情况，一屏大小是779×600 （二）视觉顺序  网页是通过视觉元素的引人注目而实现信息容的传达，为了使网页获得最大的视觉传达功能，使网络真正成为可读强性而且新颖的媒体，网页的设计必须适应人们视觉流向的心理和生理的特点，由此确定各种视觉构成元素之间的关系和秩序。

因此，设计时应该研究各种视觉造型元素之间的距离、位置、面积和视觉流程的问题视觉流程的形成是由人类的视觉特性所决定的因为人眼晶体结构的生理构造，只能产生一个焦点，而不能同时把视线停留在两处或两处以上的地方人们在阅读一种信息时，视觉总有一种自然的流动习惯，先看什么，后看什么，再看什么视觉流程往往会表达出比较明显的方向感，它无形中形成一种脉络，似乎有一条线、一股气贯穿其中，使整个版面的运动趋势有一个主旋律心理学的研究说明，在一个平面上，上半部让人轻松和自在，下半部则让人稳定和压抑同样，平面的左半部让人轻松和自在，右半部让人稳定和压抑所以平面的视觉影响力上方强于下方，左侧强于右侧这样平面的上部和中上部被称为“最正确视域”，也就是最优选的地方在网页设计中一些突出的信息，如主标题、每天更新的容等通常都放在这个位置当然视觉流程是一种感觉而非确切的数学公式，只要符合人们认识过程的心理顺序和思维发展的逻辑顺序，就可以更为灵活地运用在网页设计中，灵活而合理地运用视觉流程和最正确视域，组织好自然流畅的视觉导向，直接影响到传播者传达信息的准确与有效性所以在网页的编辑设计中，视觉导向是一个要点，网页的设计是一种创造，首先要立足信息的传达，但又要符合人们较为普遍的思维习惯，做到视觉流程自然、合理、畅快。

成功的视觉流程安排，能使网页上的各种信息要素在一定空间合理分布，能使页面上各信息要素的位置、间隙、大小保持一定的节奏感和美感图例2 视觉顺序）在布局设计中多使用平面的设计规律如“九分法”等 （见图2）（三）布局步骤  1. 草图     这时设计师面对的是一白纸，要做的就是简单的用画笔在纸上将创意的大致轮廓画在纸上，以便给以后的设计做大致的指导2. 粗略布局将纸上的轮廓在电脑上表达出来，对画面进行分割，也可以用色块进行填充，确定好在什么地方布置什么栏目，他们的大小等见图例4）（图例4）3. 将布局细化将粗略的布局进行细化，使色彩，LOGO，导航条等实现，一般用的工具多为PHOTOSHOP和FIREWORKS（见图例5）（图例5）4. 点、线、面的运用在网页设计中同样离不开平面设计中最基本的点、线、面的运用4.1点的运用在容繁杂的网页上为了可以让浏览者更轻松的找到自己想要的信息，点的引导作用必不可少（见图5）（见图6）4.2线的运用线不但起到了页面的分割作用，很好的运用线条还使网页锦上添花（见图7）（图例7）5.布局的原则屏幕布局因功能不同考虑的侧重点不同各功能区要重点突出，功能明显无论哪一种功能设计，其屏幕布局都应遵循如下五项原则：　　平衡原则。

注意屏幕上下左右平衡不要堆挤数据，过分拥挤的显示也会产生视觉疲和接收错误 　　预期原则屏幕上所有对象，如窗口、按钮、菜单等处理应一致化，使对象的动作可预期　　经济原则即在提供足够的信息量的同时还要注意简明，清昕特别是媒体，要运用好媒体选择原则　　顺序原则对象显示的顺序应依需要排列通常应最先出现对话，然后通过对话将系统分段实现　　规则化画面应对称，显示命令、对话与提示行在一个应用系统的设计中尽量统一规三、 色彩在设计中的运用（一）色彩的常识　　最基本的有三种（红，黄，蓝），其它的色彩都可以由这三种色彩调和而成我们称这三种色彩为“三原色” 黑白灰属于非彩色系列其它的色彩都属于彩色任何一种彩色具备三个特征：明度、纯度和色相，其中非彩色只有明度属性 　　明度，也叫亮度指的是色彩的明暗程度的大小，明度越大，色彩越发亮比如一些购物，儿童类用的是一些鲜亮的颜色，让人感觉绚丽多姿，生气勃勃明度越低，颜色越暗主要用于一些游戏类，充满神秘感；一些个人站长为了表达自身的个性，也可以运用一些暗色调来表达个人的一些孤僻，或者忧郁等性格有明度差的色彩更容易调和如紫色（#993399）跟黄色（#ffff00），暗红（#cc3300）跟草绿（#99cc00），暗蓝（#0066cc）跟橙色（#ff9933）等。

 纯度，指色彩的鲜艳程度，纯度高的色彩纯，鲜亮儿童、动漫、时尚。