谈网站界面设计(UI设计)(2)

二、网站界面布局
网页设计源于平面设计但又与平面设计有所区别不同，相同的是在设计中多运用平面构成的基本原理，不同的是它的大小比较固定，传载的媒体只限于电子显示器（包括手机、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(+168)  1003(+21)  600(+168)  1259(+21)  856(+168)
IE7.0 779(+21)  452(+148)  1003(+21)  620(+148)  1259(+21)  876(+148)
Firefox2.0 783(+17)  417(+183)  1007(+17)  585(+183)  1263(+17)  841(+183)
Opera9.0 781(+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.布局的原则
屏幕布局因功能不同考虑的侧重点不同。各功能区要重点突出，功能明显。无论哪一种功能设计，其屏幕布局都应遵循如下五项原则：
　　平衡原则。注意屏幕上下左右平衡。不要堆挤数据，过分拥挤的显示也会产生视觉疲和接收错误。
　　预期原则。屏幕上所有对象，如窗口、按钮、菜单等处理应一致化，使对象的动作可预期。
　　经济原则。即在提供足够的信息量的同时还要注意简明，清昕。特别是媒体，要运用好媒体选择原则。
　　顺序原则。对象显示的顺序应依需要排列。通常应最先出现对话，然后通过对话将系统分段实现。
　　规则化。画面应对称，显示命令、对话及提示行在一个应用系统的设计中尽量统一规范。