基于Dreamweaver的网页界面视觉导向设计

都桂英

青海交通职业技术学院，青海西宁 810003

基于Dreamweaver的网页界面视觉导向设计

都桂英

青海交通职业技术学院，青海西宁 810003

网页界面的设计当中应该注重视觉导向设计，使浏览网页的用户在网站中的任何位置，都能顺利通过页面上的文字、图形、符号、颜色、多媒体等元素所承载的信息准确、顺利抵达目的地。

网页界面；视觉导向；导向设计

用户界面设计是网页设计的重要组成部分。界面设计有以下几个基本的准则：界面的一致性、友好性、互动性。

1 网页界面设计中的视觉导向设计要素

1.1 页面布局的合理与统一

网页界面的布局设计没有一定的绝对的方式，主要是从网站性质的开发需要、网站所表现的内容以及想要传达的信息考虑，考虑适合表现、传播、开发等因素确定一种能够体现网站内容及主题的布局形式。

一般网站的网页布局设计方法是上左右式布局。这种布局的特征是通常在网页界面的上方设置为网站标志（LOGO）和主要的菜单导航条，中部左侧为点击出现的细分栏目导航条和较主要的栏目及小广告等，中部右侧为内容区域，下方为网站相关版权信息。而电子商务、政府网站、教育机构比较喜欢的网页布局一般是上左中右布局或称为3分栏布局，同上左右布局不同的是中间部分为内容区域，右侧则是该网站较重要的内容导航区域，或是登录、搜索区域、小广告等。

除页面布局合理统一外，还要考虑页面尺寸的大小对用户浏览的影响。影响网页页面尺寸的因素有2个，一个是显示器大小及分辨率，另一个是用户使用的浏览器。目前常见的主流显示器的尺寸基本上在1 024×768及1 440×900之间。通常情况下，页面以一屏能显示为好，左右最好不拖动，上下拖动一般不超过三屏，目前一般常用的尺寸是：分辨率在800×600的情况下，页面宽度应保持在778以内，高度视版面内容决定，全屏在778×432；分辨率在1 024×768的情况下，页面宽度应保持在1 002以内，高度视版面内容决定，全屏在1 002×600。

除此之外，还要考虑页面的整体设计对用户的心理影响。不同的形态会带给人们不同的视觉感受、心理感受，如几何形体具有规整、秩序、严肃、稳定、单纯等特征，有机形体有着勃勃生机、膨胀、优美、弹性等特征，无规则形体则会有着具有人情味、温暖感、情趣性等特征，矩形有有规则、稳定的感觉，圆形代表着柔和、团结、温暖、安全等，三角形代表着力量、权威、牢固、侵略等，菱形代表着平衡、协调、公平。

1.2 界面元素的统一

网页界面中文字是较为主要的元素，各级界面的文字的字体、字号、颜色、行距、字间距、排列方式等要统一，如主要标题文字、二级标题文字、需要提醒的文字、具有超链接的文字、正文、标注文字、段落文字、公告文字等。其中必须重视的是文字必须是准确的，文字的导向要考虑文字在不同的状态下出现的不同要求，如具有超链接的文字最起码都具备正常、鼠标经过、鼠标点击的3个基本状态；静态的文字，字体可以相对复杂、颜色可以多变、字号可以相对较小等，动态的文字，如在动画或在多媒体中出现或文字本身具有动态的效果，文字字体就要简洁醒目，字号要偏大，文字内容要言简意赅。

1.3 元素功能性的统一

在网页界面设计中，各种元素所承载的这些功能都必须有相同的操作方法。通过对这些元素的功能性的统一，使用户在熟练使用了一个网页界面后，切换到另外一个网页界面就能够很轻松的推测出各种功能，让浏览过程变得轻松自然，方便易用。

网页中的元素主要是图形和文字。在网页界面的设计当中，我们往往不是做一两个界面，而是有几十个甚至上百个的不同层级的界面，我们就必须要把握住图形功能性表达统一。同时要注意避免与已经既有的、既定概念的图形标志混淆使用。如已经行业标准化、国家标准化、国际标准化的图标符号，向公共信息图形符号、交通标志、安全标志、包装标志、环境保护标志、家用电器及办公设备、危险品等级图形标志、残疾人用图形符号。

网页界面中另外一个承载功能较多的就是文字元素了。在界面设计中，必须要考虑让同个词语或同个字、同个句子所具备的功能是相同的。还有就是要把点击过或正在浏览的超链接与未点击过和未浏览过的超链接区分开来，如可用不同的字体、字号及颜色等；图形链接可考虑采取不同的图形或者变为不可用状态、添加相关的提示等，这样才有助于浏览用户理解整个网页。

2 网页界面设计中的视觉导向设计方法

2.1 直接使用静态文字、图形、图片等元素进行导向

这是最简单的一种视觉导向设计方法。其方法是在网页中需要的地方添加静态文字、图形、图片等元素，并在该元素上添加页面的链接地址，在用户浏览时鼠标指针在添加了链接的元素上变为手形，单击后即可进入需要的网页。

这种导向设计方法简单，适用范围广泛，常用于网页当中的大量题目链接中，如新闻标题、图片新闻、相关链接等处。

2.2 使用Dreamweaver的导航条来制作导向

网页中的导航条也是很重要的一种导向元素，Dreamweaver提供了插入导航条的功能，利用该功能可以制作具有动感的导航条。

这种导航条通常具有4种状态——状态图像、鼠标经过时图像、按下图像和按下时鼠标经过图像，其中“状态图像”是网页在被打开后的初始图像，“鼠标经过时图像”是浏览者将鼠标移动到导航条上时所显示的图像，“按下图像”是指鼠标按下时显示的图像，“按下时鼠标经过图像”是指鼠标点击后当鼠标再次移动到这个部位上时显示的图像。用这种方法制作导航条时通常和图形图像的编辑制作软件结合使用，常用的方法是用图形图像编辑软件制作出大小相同、颜色不同的几类不同的图像（依据导航条的数目而定）。

一般地，每部位只设一到两种状态的图像。因为图像太多了，会影响网页页面的访问、浏览的速度。通常，这种导航条横向放置在网页中LOGO的下方。

2.3 使用“行为”来使不同的导航在点击时出现不同的属性

另一种称为“行为”的机制，可以帮助你构建页面中的交互行为。行为，就是在网页中进行一系列动作，通过这些动作实现用户与页面的交互。利用Dreamweaver的行为，你不需要书写一行代码，就可以实现丰富的动态页面效果，达到用户与页面的交互。

Dreamweaver提供了一个“改变属性”的行为，通过这个行为可以动态地改变对象属性，比如图像的大小、文字的背景色等。如一段文字在静态时可以设计为一种背景色，当鼠标移动到这段文字是时改变其背景色。

具体操作方法是：在“代码”窗口中，为对象添加“DIV”标签，单击行为面板中的加号按钮，从弹出的菜单中选择“改变属性”命令，设置“改变属性”对话框中的“对象类型”、“命名对象”、“属性选择”即可。

2.4 使用行为面板添加弹出式菜单导航

Dreamweaver提供了一个“显示弹出式菜单”的行为，利用该行为可以添加弹出式的导航。

具体操作方法是：在“设计”窗口中，选择需要添加弹出式子菜单对象，单击行为面板中的加号按钮，从弹出的菜单中选择“显示弹出式菜单”命令，单击“显示弹出式菜单”对话框中的“继续”按钮后进行相关的设置即可。

[1]曾广雄.中文Dreamweaver网页制作实例教程[M].北京：研 究出版社，2008：206.

[2]周奇.新编网页设计与制作教程[M].北京：研究出版社， 2008：185.

[3]贾勤.网页设计三合一能力教程[M].北京：中国铁道出版 社，2006：54.

TP3

A

1674-6708（2010）24-0216-02