《界面设计论文》由会员分享，可在线阅读，更多相关《界面设计论文（10页珍藏版）》请在金锄头文库上搜索。
1、我国这两年的网络发展非常快，每天都有数以千计的网站诞生，其中的网页数量更是成几何式的增长，然而关乎网站形象和浏览者用户体验的网站界面设计却不容乐观。除了一些大的专业网站在版面的编排上比较讲究之外，其他很少见到界面设计考究、美术创意优秀的中文网站。如何设计出美观（吸引受众眼球）的网页，如何用优秀的用户体验赢得受众的一次又一次的浏览仿佛一夜间就摆在了众设计师的案头。就此本文从以下几点讨论了关于网站界面设计所需要重视的问题。今日的网站已经不单单只是人们查询资料的工具，它已糅合了多种功能于一身，在网站为人们的学习、生活、工作、娱乐提供越来越重要的信息时，人们都它的要求也与日俱增，对界面的要求也不仅仅是
2、停留在美观上。就此，本文在讨论一些基本的网页设计原理的同时还特别强调了UI在网页设计中的运用。关键词：网页界面设计UI布局色彩一、认识UI（一）什么是UI：UI的本意是用户界面，是英文User和interface的缩写。（二）什么是GUI：GraphicsUserInterface图形用户界面，也就是我们今天要主要研究的东西。（三）什么是用户界面设计：在人和机器的互动过程中，最重要的一个方面就是我们所说的界面（。用户界面设计是屏幕产品的重要组成部分。大致界面可分为感觉（视觉、触觉、听觉等）和情感两个层次。界面设计是一个需要多方面专业知识的工作，认知心理学、设计学、语言学等在此都扮演着重要的角色
3、。用户界面设计的三大原则是：置界面于用户的控制之下；减少用户的记忆负担；保持界面的一致性。从字面上看是用户与界面2个组成部分，但实际上还包括用户与界面之间的交互关系，所以这样可分为3个方向，他们分别是：用户研究、交互设计、界面设计。1.用户研究用户研究包含两个方面：一是可用性研究，研究如何提高产品的可用性，使得网站界面的设计更容易被人接受、使用和记忆；二是通过可用性的研究，发掘用户的潜在需求，为技术创新提供另外一条思路和方法。用户研究是站在人文学科的角度来研究产品，研究用户的需要，站在用户的角度介入到产品的开发和设计中。对于设计师来说就是研究如何使自己的网站页面更收浏览者的欢迎用户研究通过对于
4、用户的使用环境、浏览习惯等研究，使得在网站界面设计的前期能够把用户对于网站功能的期望、对设计和外观方面的要求融入到网站的开发与设计过程中去。2.交互设计这部分指人与机之间的交互工程，在过去交互设计也由程序员来做，其实程序员擅长编码，而不善于与最终用户交互。在使用网站的过程中最能给浏览者留下深刻印象的一定是网站的视觉因素，也就是我们所谈论的网站界面。所以，很多的网站虽然功能比较齐全，但是交互方面设计很粗糙，繁琐难用，使用困难。如何使浏览者在使用网站时可以轻松自如的找到自己想要的资源，如何轻松实现网站的功能，给浏览者以愉悦的心情，拉拢浏览者下一次的登陆，这些都需要在网站的交互设计上下足工夫。3.界
5、面设计在漫长的软件发展中，界面设计工作一直没有被重视起来。做界面设计的人也被贬义的称为“美工”。其实网站界面设计就像工业产品中的工业造型设计一样，是产品的重要买点。一个友好美观的界面会给人带来舒适的视觉享受，拉近人与电脑的距离，为网站创造卖点。如果把网站比做一个人的话，网站的后台编程好比人的骨骼与肌肉，而界面则是者个人的外表，人人都喜欢美人，同样有着良好视觉感受的网站界面也是网站拉拢人气的关键所在。网站界面是网站灵魂的外在表现，忽略网站的界面设计最终会使你的网站输在起跑线上。界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是纯粹的科学性的艺术设计。检验一个
6、界面的标准即不是某个项目开发组领导的意见也不是项目成员投票的结果，而是最终用户的感受。（四）界面构成要素互联网与传统媒体最大的不同就在于除了文字和图像以外，还包含声音、视频和动画等新兴多媒体元素，增加了网页界面生动性的同时也使得网页设计者需要考虑更多页面元素合理性运用。1.文字从网页最初的纯文字界面发展至今，文字元素作为网站内容传达的主体，文字有着其他任何元素无法取代的重要作用。首先是文字信息符合人类的阅读习惯，其次因为文字所占存取空间小，节省了下载和浏览时间。网页中的文字主要包括标题、信息、文字链接等形式。文字作为占据页面重要比率的元素，同时又是信息重要载体，它的大小、字体、颜色和排布对页面
7、整体设计影响极大。以文字排布为主的网页界面，只要文字排布得当，版面同样可以生动活泼，分类条例清晰，不会给人单调感觉。2图形在大多数网页中，图形占据了重要的位置，有的甚至是全部页面。图形往往能引起人们的注意，并激发阅读兴趣，合理的运用图形，可以生动直观、形象地表现设计主题。网页中常用的图形格式包括JPG、GIF和BMW。图形元素包括标题、背景、主图、链接图标四种。以图像作为标题和链接可以使网页具有更好的视觉效果，配合文字增强生动和形象性。主图与背景在装饰性上小有不同，背景是衬托主题，主图则是突出表现主题。主图是整个网页的视觉中心，它具有直观性强的特点，可以为单调的文字信息增强活力，不需要像文字那
8、样去逐句阅读，可以不受文化水平的限制，能给人强烈的视觉信息。3多媒体随着网络硬件设备的日益完善，网页构成中的多媒体元素运用的也越来越多，主要包括音频、视频和动画。这些是界面构成中最吸引人的元素，好的多媒体元素不但可以增加网站的活力还可以有效的提高网站与浏览者之间的互动交流。二、网站界面布局网页设计源于平面设计但又与平面设计有所区别不同，相同的是在设计中多运用平面构成的基本原理，不同的是它的大小比较固定，传载的媒体只限于电子显示器（包括手机、PDA等），这样就为设计者提出了更为苛刻的要求。（一）页面尺寸由于网页的浏览多是基于显示器实现的，所以显示器的分辨率就决定了网页设计者设计网站页面的大小，目
9、前比较流行的显示器的尺寸为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)10
10、07(+17)585(+183)1263(+17)841(+183)Opera9.0781(+19)461(+139)1005(+19)629(+139)1261(+19)885(+139)一般情况下宽度是一定的但页面的宽度则可以根据内容的多少而进行调整，但设计宽度始终要比显示器的实际大小窄20像素，这为的是给右侧的滚动条留有一定的空间（见图1）（图例1）1.最保守而最有兼容性的一屏大小是：7794322.最广泛的一屏大小是：10036003.适合目前国内的情况，一屏大小是779600（二）视觉顺序网页是通过视觉元素的引人注目而实现信息内容的传达，为了使网页获得最大的视觉传达功能，使网络真正成
11、为可读强性而且新颖的媒体，网页的设计必须适应人们视觉流向的心理和生理的特点，由此确定各种视觉构成元素之间的关系和秩序。因此，设计时应该研究各种视觉造型元素之间的距离、位置、面积和视觉流程的问题。视觉流程的形成是由人类的视觉特性所决定的。因为人眼晶体结构的生理构造，只能产生一个焦点，而不能同时把视线停留在两处或两处以上的地方。人们在阅读一种信息时，视觉总有一种自然的流动习惯，先看什么，后看什么，再看什么。视觉流程往往会体现出比较明显的方向感，它无形中形成一种脉络，似乎有一条线、一股气贯穿其中，使整个版面的运动趋势有一个主旋律。心理学的研究表明，在一个平面上，上半部让人轻松和自在，下半部则让人稳定
12、和压抑。同样，平面的左半部让人轻松和自在，右半部让人稳定和压抑。所以平面的视觉影响力上方强于下方，左侧强于右侧。这样平面的上部和中上部被称为“最佳视域”，也就是最优选的地方。在网页设计中一些突出的信息，如主标题、每天更新的内容等通常都放在这个位置。当然视觉流程是一种感觉而非确切的数学公式，只要符合人们认识过程的心理顺序和思维发展的逻辑顺序，就可以更为灵活地运用。在网页设计中，灵活而合理地运用视觉流程和最佳视域，组织好自然流畅的视觉导向，直接影响到传播者传达信息的准确与有效性。所以在网页的编辑设计中，视觉导向是一个要点，网页的设计是一种创造，首先要立足信息的传达，但又要符合人们较为普遍的思维习惯
13、，做到视觉流程自然、合理、畅快。成功的视觉流程安排，能使网页上的各种信息要素在一定空间内合理分布，能使页面上各信息要素的位置、间隙、大小保持一定的节奏感和美感。（图例2视觉顺序）在布局设计中多使用平面的设计规律如“九分法”等（见图2）（三）布局步骤1.草图这时设计师面对的是一张白纸，要做的就是简单的用画笔在纸上将创意的大致轮廓画在纸上，以便给以后的设计做大致的指导。2.粗略布局将纸上的轮廓在电脑上体现出来，对画面进行分割，也可以用色块进行填充，确定好在什么地方布置什么栏目，他们的大小等。（见图例4）（图例4）3.将布局细化将粗略的布局进行细化，使色彩，LOGO，导航条等实现，一般用的工具多为P
14、HOTOSHOP和FIREWORKS（见图例5）（图例5）4.点、线、面的运用在网页设计中同样离不开平面设计中最基本的点、线、面的运用4.1点的运用在内容繁杂的网页上为了可以让浏览者更轻松的找到自己想要的信息，点的引导作用必不可少（见图5）（见图6）4.2线的运用线不但起到了页面的分割作用，很好的运用线条还使网页锦上添花（见图7）（图例7）5.布局的原则屏幕布局因功能不同考虑的侧重点不同。各功能区要重点突出，功能明显。无论哪一种功能设计，其屏幕布局都应遵循如下五项原则：平衡原则。注意屏幕上下左右平衡。不要堆挤数据，过分拥挤的显示也会产生视觉疲和接收错误。预期原则。屏幕上所有对象，如窗口、按钮、
15、菜单等处理应一致化，使对象的动作可预期。经济原则。即在提供足够的信息量的同时还要注意简明，清昕。特别是媒体，要运用好媒体选择原则。顺序原则。对象显示的顺序应依需要排列。通常应最先出现对话，然后通过对话将系统分段实现。规则化。画面应对称，显示命令、对话及提示行在一个应用系统的设计中尽量统一规范。三、色彩在设计中的运用（一）色彩的常识最基本的有三种（红，黄，蓝），其它的色彩都可以由这三种色彩调和而成。我们称这三种色彩为“三原色”。黑白灰属于非彩色系列。其它的色彩都属于彩色。任何一种彩色具备三个特征：明度、纯度和色相，其中非彩色只有明度属性。明度，也叫亮度指的是色彩的明暗程度的大小，明度越大，色彩越发亮。比如一些购物，儿童类网站。用的是一些鲜亮的颜色，让人感觉绚丽多姿，生气勃勃。明度越低，颜色越暗。主要用于一些游戏类网站，充满神秘感；一些个人站长为了体现自身的个性，也可以运用一些暗色调来表达个人的一些孤僻，或者忧郁等性格。有明度差的色彩更容易调和。如紫色（#993399）跟黄色（#ffff00），暗红（#cc3300）跟草绿（#99cc00
