谈网站界面设计(UI设计)-好资料免费分享
内容摘要：
今日的网站已经不单单只是人们查询资料的工具，它已糅合了多种功能于一身，在网站为人们的学习、生活、工作、娱乐提供越来越重要的信息时，人们都它的要求也与日俱增，对界面的要求也不仅仅是停留在美观上。就此，本文在讨论一些基本的网页设计原理的同时还特别强调了UI在网页设计中的运用。
关键词：网页界面设计 UI 布局色彩
绪论
上世纪最伟大的发明莫过于互联网的发明，进入21世纪，互联网代表着一种崭新的信息交流方式，它使信息的传播突破了传统的政治、经济、地域及文化的阻隔，使信息传达的范围、速度与效率都产生了质的飞跃。如果把互联网比做一棵大树，那成千上万的网站则是组成这参天大树的枝条，而每个网站都是由诸多网页构成那么网页就是这参天大树上数不清的叶子，故网页是构成互联网的基本元素。我国这两年的网络发展非常快，每天都有数以千计的网站诞生，其中的网页数量更是成几何式的增长，然而关乎网站形象和浏览者用户体验的网站界面设计却不容乐观。除了一些大的专业网站在版面的编排上比较讲究之外，其他很少见到界面设计考究、美术创意优秀的中文网站。如何设计出美观（吸引受众眼球）的网页，如何用优秀的用户体验赢得受众的一次又一次的浏览仿佛一夜间就摆在了众设计师的案头。就此本文从以下几点讨论了关于
网站界面设计所需要重视的问题。
一、认识UI
（一）什么是 UI ：
UI的本意是用户界面，是英文User和interface的缩写。
（二）什么是 GUI：
Graphics User Interface 图形用户界面，也就是我们今天要主要研究的东西。
（三）什么是用户界面设计：
在人和机器的互动过程中，最重要的一个方面就是我们所说的界面（。用户界面设计是屏幕产品的重要组成部分。大致界面可分为感觉（视觉、触觉、听觉等）和情感两个层次。界面设计是一个需要多方面专业知识的工作，认知心理学、设计学、语言学等在此都扮演着重要的角色。用户界面设计的三大原则是：置界面于用户的控制之下；减少用户的记忆负担；保持界面的一致性。从字面上看是用户与界面2个组成部分，但实际上还包括用户与界面之间的交互关系，所以这样可分为3个方向，他们分别是：用户研究、交互
设计、界面设计。
1.用户研究
用户研究包含两个方面：一是可用性研究，研究如何提高产品的可用性，使得网站界面的设计更容易被人接受、使用和记忆；二是通过可用性的研究，发掘用户的潜在需求，为技术创新提供另外一条思路和方
法。用户研究是站在人文学科的角度来研究产品，研究用户的需要，站在用户的角度介入到产品的开发和设计中。对于设计师来说就是研究如何使自己的网站页面更收浏览者的欢迎
用户研究通过对于用户的使用环境、浏览习惯等研究，使得在网站界面设计的前期能够把用户对于网站功能的期望、对设计和外观方面的要求融入到网站的开发与设计过程中去。
2.交互设计
这部分指人与机之间的交互工程，在过去交互设计也由程序员来做，其实程序员擅长编码，而不善于与最终用户交互。在使用网站的过程中最能给浏览者留下深刻印象的一定是网站的视觉因素，也就是我们所谈论的网站界面。所以，很多的网站虽然功能比较齐全，但是交互方面设计很粗糙，繁琐难用，使用困难。如何使浏览者在使用网站时可以轻松自如的找到自己想要的资源，如何轻松实现网站的功能，给浏览者以愉悦的心情，拉拢浏览者下一次的登陆，这些都需要在网站的交互设计上下足工夫。
3.界面设计
在漫长的软件发展中，界面设计工作一直没有被重视起来。做界面设计的人也被贬义的称为“美工”。其实网站界面设计就像工业产品中的工业造型设计一样，是产品的重要买点。一个友好美观的界面会给人带来舒适的视觉享受，拉近人与电脑的距离，为网站创造卖点。如果把网站比做一个人的话，网站的后台编程好比人的骨骼与肌肉，而界面则是者个人的外表，人人都喜欢美人，同样有着良好视觉感受的网站界面也是网站拉拢人气的关键所在。网站界面是网站灵魂的外在表现，忽略网站的界面设计最终会使你的网站输在起跑线上。界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是纯粹的科学性的艺术设计。检验一个界面的标准即不是某个项目开发组领导的意见也不是项目成员投票的
结果，而是最终用户的感受。
（四）界面构成要素
互联网与传统媒体最大的不同就在于除了文字和图像以外，还包含声音、视频和动画等新兴多媒体元素，增加了网页界面生动性的同时也使得网页设计者需要考虑更多页面元素合理性运用。
1.文字
从网页最初的纯文字界面发展至今，文字元素作为网站内容传达的主体，文字有着其他任何元素无法取代的重要作用。首先是文字信息符合人类的阅读习惯，其次因为文字所占存取空间小，节省了下载和浏览时间。网页中的文字主要包括标题、信息、文字链接等形式。文字作为占据页面重要比率的元素，同时又是信息重要载体，它的大小、字体、颜色和排布对页面整体设计影响极大。以文字排布为主的网页界面，只要文字排布得当，版面同样可以生动活泼，分类条例清晰，不会给人单调感觉。
2图形
在大多数网页中，图形占据了重要的位置，有的甚至是全部页面。图形往往能引起人们的注意，并激发阅读兴趣，合理的运用图形，可以生动直观、形象地表现设计主题。网页中常用的图形格式包括JPG、G IF和BMW。图形元素包括标题、背景、主图、链接图标四种。以图像作为标题和链接可以使网页具有更好的视觉效果，配合文字增强生动和形象性。主图与背景在装饰性上小有不同，背景是衬托主题，主图则是突
出表现主题。主图是整个网页的视觉中心，它具有直观性强的特点，可以为单调的文字信息增强活力，不需要像文字那样去逐句阅读，可以不受文化水平的限制，能给人强烈的视觉信息。
3多媒体
随着网络硬件设备的日益完善，网页构成中的多媒体元素运用的也越来越多，主要包括音频、视频和动画。这些是界面构成中最吸引人的元素，好的多媒体元素不但可以增加网站的活力还可以有效的提高网站
与浏览者之间的互动交流。
二、网站界面布局
网页设计源于平面设计但又与平面设计有所区别不同，相同的是在设计中多运用平面构成的基本原理，不同的是它的大小比较固定，传载的媒体只限于电子显示器（包括手机、PDA等），这样就为设计者
提出了更为苛刻的要求。
（一）页面尺寸
由于网页的浏览多是基于显示器实现的，所以显示器的分辨率就决定了网页设计者设计网站页面的大
小，目前比较流行的显示器的尺寸为
800*600、1024*768、1125*864、1280*720、1280*768、1280*960、1280*1024
而目前主流设计网站页面的大小一般为
600*300、760*420、995*436
有效可视区域（单位：px）
屏幕
一二三
800 600 1024 768 1280 1024
IE6.0
779(+
21)
432(+1
68)
1003(+
21)
600(+1
68)
1259(+
21)
856(+16
8)
IE7.0
779(+
21)
452(+1
48)
1003(+
21)
620(+1
48)
1259(+
21)
876(+14
8)
Firefox2. 0
783(+
17)
417(+1
83)
1007(+
17)
585(+1
83)
1263(+
17)
841(+18
3)
Opera9.0
781(+
19)
461(+1
39)
1005(+
19)
629(+1
39)
1261(+
19)
885(+13
9)
一般情况下宽度是一定的但页面的宽度则可以根据内容的多少而进行调整，但设计宽度始终要比显示器的实际大小窄20像素，这为的是给右侧的滚动条留有一定的空间（见图1）
（图例1）
1. 最保守而最有兼容性的一屏大小是：779×432
2. 最广泛的一屏大小是：1003×600
3. 适合目前国内的情况，一屏大小是779×600
（二）视觉顺序
网页是通过视觉元素的引人注目而实现信息内容的传达，为了使网页获得最大的视觉传达功能，使网络真正成为可读强性而且新颖的媒体，网页的设计必须适应人们视觉流向的心理和生理的特点，由此确定各种视觉构成元素之间的关系和秩序。因此，设计时应该研究各种视觉造型元素之间的距离、位置、面积和视
觉流程的问题。
视觉流程的形成是由人类的视觉特性所决定的。因为人眼晶体结构的生理构造，只能产生一个焦点，而不能同时把视线停留在两处或两处以上的地方。人们在阅读一种信息时，视觉总有一种自然的流动习惯，先看什么，后看什么，再看什么。视觉流程往往会体现出比较明显的方向感，它无形中形成一种脉络，似乎有一条线、一股气贯穿其中，使整个版面的运动趋势有一个主旋律。心理学的研究表明，在一个平面上，上半部让人轻松和自在，下半部则让人稳定和压抑。同样，平面的左半部让人轻松和自在，右半部让人稳定和压抑。所以平面的视觉影响力上方强于下方，左侧强于右侧。这样平面的上部和中上部被称为“最佳视域”，
也就是最优选的地方。
在网页设计中一些突出的信息，如主标题、每天更新的内容等通常都放在这个位置。当然视觉流程是一种感觉而非确切的数学公式，只要符合人们认识过程的心理顺序和思维发展的逻辑顺序，就可以更为灵活地运用。在网页设计中，灵活而合理地运用视觉流程和最佳视域，组织好自然流畅的视觉导向，直接影响到传播者传达信息的准确与有效性。所以在网页的编辑设计中，视觉导向是一个要点，网页的设计是一种创造，首先要立足信息的传达，但又要符合人们较为普遍的思维习惯，做到视觉流程自然、合理、畅快。成功的视觉流程安排，能使网页上的各种信息要素在一定空间内合理分布，能使页面上各信息要素的位置、间隙、大
小保持一定的节奏感和美感。
（图例2 视觉顺序）
在布局设计中多使用平面的设计规律如“九分法”等（见图2）
（三）布局步骤
1. 草图
这时设计师面对的是一张白纸，要做的就是简单的用画笔在纸上将创意的大致轮廓画在纸上，以便给
以后的设计做大致的指导。
2. 粗略布局
将纸上的轮廓在电脑上体现出来，对画面进行分割，也可以用色块进行填充，确定好在什么地方布置
什么栏目，他们的大小等。（见图例4）
（图例4）
3. 将布局细化
将粗略的布局进行细化，使色彩，LOGO，导航条等实现，一般用的工具多为PHOTOSHOP和FIRE
WORKS（见图例5）
（图例5）
4. 点、线、面的运用
在网页设计中同样离不开平面设计中最基本的点、线、面的运用
4.1点的运用
在内容繁杂的网页上为了可以让浏览者更轻松的找到自己想要的信息，点的引导作用必不可少（见图
5）
（见图6）
4.2线的运用
线不但起到了页面的分割作用，很好的运用线条还使网页锦上添花（见图7）
（图例7）
5.布局的原则
屏幕布局因功能不同考虑的侧重点不同。各功能区要重点突出，功能明显。无论哪一种功能设计，其
屏幕布局都应遵循如下五项原则：
平衡原则。注意屏幕上下左右平衡。不要堆挤数据，过分拥挤的显示也会产生视觉疲和接收错误。
预期原则。屏幕上所有对象，如窗口、按钮、菜单等处理应一致化，使对象的动作可预期。
经济原则。即在提供足够的信息量的同时还要注意简明，清昕。特别是媒体，要运用好媒体选择
原则。
顺序原则。对象显示的顺序应依需要排列。通常应最先出现对话，然后通过对话将系统分段实现。
规则化。画面应对称，显示命令、对话及提示行在一个应用系统的设计中尽量统一规范。
三、色彩在设计中的运用
（一）色彩的常识
最基本的有三种（红，黄，蓝），其它的色彩都可以由这三种色彩调和而成。我们称这三种色彩为“三原色”。黑白灰属于非彩色系列。其它的色彩都属于彩色。任何一种彩色具备三个特征：明度、纯度和
色相，其中非彩色只有明度属性。
明度，也叫亮度指的是色彩的明暗程度的大小，明度越大，色彩越发亮。比如一些购物，儿童类网站。用的是一些鲜亮的颜色，让人感觉绚丽多姿，生气勃勃。明度越低，颜色越暗。主要用于一些游戏类网站，充满神秘感；一些个人站长为了体现自身的个性，也可以运用一些暗色调来表达个人的一些孤僻，或者忧郁等性格。有明度差的色彩更容易调和。如紫色（#993399）跟黄色（#ffff00），暗红（#cc3300）跟草绿（#99cc00），暗蓝（#0066cc）跟橙色（#ff9933）等。
纯度，指色彩的鲜艳程度，纯度高的色彩纯，鲜亮。儿童、动漫、时尚、购物等多用亮色调，给人以活泼、明朗、大方特点，纯度底的色彩暗淡，含灰色。多用于艺术、科技等技术含量高的领域，给人以深远、
稳重之感。
色相，指的是色彩的名称。这是色彩最基本的特征，是一种色彩区别于另一种色彩的最主要的因素。比如说红色，绿色，蓝色等等都代表了不同的色相。同一色相的色彩，调整一下亮度，或者纯度很容易搭配，
比如，深红，暗暗，桃红等。
暖色，暖色跟黑色调和可以达到很好的效果。暖色一般应用于购物类网站，电子商务网站，儿童类网站等等，用以体现商品的琳琅满目，儿童类网站的活泼，温馨等等效果。
冷色，冷色一般跟白色调和可以达到一种很好的效果。冷色一般应用于一些高科技，游戏类网站，主要表达严肃，稳重等效果，绿色，蓝色，蓝紫色等等都属于冷色系列。
相近色：色环中相邻的三种颜色。相近色的搭配给人的视觉效果很舒适，很自然。所以相近色在网站
设计中极为常用。
互补色，色环中相对的两种色彩。对互补色，调整一下补色的亮度，有时候是一种很好的搭配。
色彩均衡，网站让人看上去舒适，协调，除了文字，图片等内容的合理排版，色彩的均衡也是相当重要的一个部分。比如一个网站不可能单一的运用一种颜色，所以色彩的均衡问题是设计者必须要考虑的问题。色彩的均衡，包括色彩的位置，每种色彩所占的比例，面积等等。比如鲜艳明亮的色彩面积应小一点，让人感觉舒适，不刺眼。这就是一种均衡的色彩搭配。
（二）色彩的运用
蓝色是现代商务领域的流行色，也是最“安全”的WEB流行色。如果设计师对自己控制色彩的能力没有太大把握，那么使用蓝色是最好的选择。蓝色受设备偏色的影响最小。
红色既可以象征着热血、激情、冲动、勇气与力量也可以象征恐怖与暴力，在主要由红色构成的色彩中，有桃红色的浪漫与温馨，也有深红色的稳健与深沉，由于红色本身的亮度和饱和度都比较强，所以在与亮度和饱和度同样比较强的冷色（如蓝色绿色）相配时，中间最好能有一些过渡行的颜色。比如纯红与纯蓝搭配时可以在中间插入面积适中的白色，这样一来，页面中各视觉元素之间的冲突就不会那么强烈。
黄色是一种非常难以驾驭的颜色，同一种黄色与其他颜色搭配在不同的环境下表现出的视觉和心理效应往往会有很大差异，同样的黄色既可以在某个环境中表现出热情奔放的一面也可以在另一种环境中表现出
阴险狡诈的一面。
绿色由于自身很难与其他颜色搭配，所以是网页设计中比较少用的颜色，在以绿色为主的优秀网页设
计中大多会有橙色的参与。
橙色是朝阳的颜色也是柑橘的颜色，橙色象征着快乐、温馨、时尚和动感。橙色有红色热情奔放的特点，但又不像红色那么鲜艳和夺目；橙色有黄色敏快和爽朗的一面但又不像黄色那么容易产生平庸的感觉，大面积使用橙色的网页，可以让人感觉到扑面而来的温暖与活力。另一方面，网页设计师们越来越喜欢在白色、绿色、蓝色、灰色、黑色的网页中使用小巧而醒目的橙色元素，比如，橙色的小箭头、小按钮等元素，
这种设计可以非常有效的吸引浏览者的注意力。
紫色与红色蓝色在色调上有着近似的关系，与黄色、绿色、橙色等可以形成鲜明的对比，深紫色适于表现幽雅、神秘、忧郁等主题，浅紫色则适于表现浪漫温馨等主题。
（三）确定网站的主题色
一个网站不可能单一的运用一种颜色，让人感觉单调，乏味；但是也不可能将所有的颜色都运用到网站中，让人感觉轻浮，花俏。一个网站必须有一种或两种主题色，不至于让客户迷失方向，也不到于单调，乏味。所以确定网站的主题色也是设计者必须考虑的问题之一。
一个页面尽量不要超过4种色彩，用太多的色彩让人没有方向，没有侧重。当主题色确定好以后，考虑其它配色时，一定要考虑其它配色与主题色的关系，要体现什么样的效果。另外哪种因素占主要地位，
是明度，纯度还是色相。
（四）色彩的搭配
在学习了解了色彩的一些基本概念及色彩的一些搭配问题，具体运用到网页中，各要素的色彩又
是如何搭配的呢？
1、网页标题
网页标题是网站的指航标，浏览者要在网页间跳转，要了解网站的结构，网站的内容，都必须通过导航或者页面中的一些小标题。所以我们可以使用稍微具有跳跃性的色彩，吸引浏览者的视线，让他们感觉网站清晰、明了，层次分明。想往哪里走都不会迷失方向。
2、网页链接
一个网站是由许多页面组成的，实现网页间相互跳转的就是网页的链接，所以文字与图片的链接是网站中不可缺少的一部分。这里特别指出文字的链接，因为链接区别于文字，所以链接的颜色不能跟文字
的颜色一样。大多数浏览者不会花太多的时间用在寻找网站的链接上。设置了独特的链接颜色，让人感觉他的独特性，自然而然好奇心必然趋使他移动鼠标，点击鼠标。
3、网页文字
多数网站都会运用背景颜色，这就要求设计者考虑到背景颜色的用色，以及前景文字的搭配等问题。一般的网站侧重的是文字，所以背景可以选择纯度或者明度较低的色彩，文字用较为突出的亮色。让人
一目了然。
4、网页标志
网页标志是宣传网站最重要的部分之一，所以这两个部分一定要在页面上突迎而出。怎样做到这一点呢？我们将LOGO和BANNER做的鲜亮一些，也就是色彩方面跟网页的主题色分离开来。有时候为了
更突出，也可以使用与主题色相反的颜色。
5、网页的留白
中国的书法讲究留白，好的留白的运用可以带给浏览者对画面的联想，更为重要的一点就是，在网站使用中浏览者通常会划动鼠标来快速浏览页面，如果没有留白，浏览者很可能会误点链接，给浏览带来不便。
为了能让自己的网页设计得更靓丽、更舒适，为了增强你的页面的可阅读性，必须合理，恰当地
运用与搭配页面各要素间的色彩！
综上所述，我们了解到网站的界面不单单是美工设计那么简单，它包括了心理学，生理学，平面构成，色彩构成等多方向的知识，只有了解并可以很好的运用这些知识，我们设计出的网站才能更好的为受众服务。