网页设计中的视觉传达应用

2023-03-08

随着计算机网络技术的发展, 网站建设越来越接近于一门艺术而不仅仅是一项技术, 网页的艺术设计日益被浏览者和网站建设者所注重[1]。网页艺术设计包含的视觉传达效果以主题鲜明、形式与内容相统一为设计原则。文字内容的精心组织、图片的唯美设计、和谐的色彩搭配都是吸引浏览者访问网站的基本因素。网页的各种构成要素在页面内有效地进行搭配才能构成一个精美的网页, 不仅要体现页面内容的精彩, 还要有效地利用页面的有效显示空间, 选择适合网站的页面布局, 保持站点主体色彩的一致, 在合理进行页面布局的同时合理搭配色彩, 使浏览者在大脑中形成记忆符号, 并留下很深刻的印象。

1 网页的页面布局

1.1 合理布局页面的造型元素

在网页界面中, 构成版面空间的基本造型元素, 有点、线、面及空白。页面布局的设计过程就是在版面空间中组织好这些点、线、面、空白, 使其传达出特定的美感。当点、线、面这些实体处于版面的不同位置时, 产生的视觉效果和心理作用是不同的。一般来说, 居于版面几何中心时, 有庄重感或平衡感。

1.2 页面的空白

网页界面中除了点、线、面这些实体造型元素, 其余的空间就是“空白”, 其形式、大小、比例决定了版式设计的质量和信息传达的能力。在安排图形图像、文字的位置和进行大小变化以及斟酌图形图像、文字之间的呼应关系时时, 应该考虑空白的位置和大小。页面中巧妙地留白, 有助于更好地烘托主题、渲染气氛、集中视线、加强空间层次, 使版面疏密有序、布局清晰。但这并不是说, 空白越多、图文越少越好, 页面空白量的多少, 需根据网页的内容和整体风格而定[2]。

1.3 页面的内容

合理地进行了页面布局以后需要添加页面的内容, 一般来说网页图文并茂, 相得益彰能够加深浏览者的印象, 页面内容主要是文字以及图片或者动画。页面文字和图片具有一种相互补充的视觉关系, 页面上文字太多, 就显得沉闷, 缺乏生气。最理想的效果是文字与图片的密切配合, 互为衬托, 既能活跃页面, 又使主页有丰富的内容。

2 色彩搭配

无论是平面设计, 还是网页设计, 色彩永远是最重要的一环。网页的色彩是冲击人视觉的第一要素。距离较远的时候, 看到的不是网页的版面设计, 而是网页的色彩。网页的色彩必须要有自己独特的风格, 这样才能显得个性鲜明, 给浏览者留下深刻的印象。网页色彩搭配合理, 能给人一种和谐, 愉快的感觉, 应避免采用单一色彩, 这样容易造成视觉疲劳。目前很多人在设计网页时常常被如何配色所困扰, 虽然设计出了好的页面布局, 但由于配色不合理, 导致网页的可读性、观赏性、舒适性大大降低。所以, 在配色选择上要注意网页所表现的风格概念、想给予浏览者什么样的心情, 从而选择适合的颜色。对于网页的色彩搭配, 应该在网页开始制作前, 做好规划及设计, 这样就不会到着手制作页面时造成设计混乱。

2.1 网页色彩搭配原则

整体性:网页色彩要保持整体性。同一个网站的不同页面能够局部使用同一色彩, 这样就可以通过色彩将页面之间的联系传达给浏览者, 由此产生整体和谐之美。

适应性:色彩本身有自己的情感, 不同的色彩能够表达不同的心理感受。色彩的选择应有针对性, 要根据望着的特点, 选择与主题相一致的色彩。

不同的类型的网站应选择不同的色彩, 例如教育机构类网站一般选择蓝色、灰色, 表达含蓄、睿智, 有一种内敛的、浓浓的书香气息;航空航天类网站以象征天空的蓝色为背景色;儿童类网站以色彩丰富的鲜艳色彩为主;农林类网站选择绿色为主。同时, 网页的色彩还要迎合浏览者的喜好, 尽可能的采用符合浏览者审美倾向的色彩, 以吸引其注意力[3]。

独特性:网页要想给浏览者留下深刻印象, 就必须具备与众不同的色彩设计, 从而形成自己的风格与个性。如一些个人网站上有时会见到采用反差强烈的黑、白两色搭配的网页, 表达鲜明的个性。

2.2 网页色彩搭配技巧

(1) 采用一种主色调。

首先要定位网站是什么类型, 它要表现什么样的内容和情感。然后采用一种合适的主色调。

(2) 主色与辅助色协调搭配。

页面色彩的和谐统一, 离不开辅助色的作用。辅助色起着缓冲和强调的作用, 能让页面有生气, 使主色调流畅。一般情况下, 可选择一到两种辅助色配合使用。主色与辅助色通常是邻近色。

(3) 无彩色与有彩色搭配。

在网页中适当运用无彩色能产生良好的视觉效果, 有强烈的艺术感。页面用无彩色构成主体部分, 以少量有彩色与它构成对比, 更能生动展示个性。

(4) 文字与背景。

网页色彩设计要注意文字与背景色彩的明暗对比, 文本要易读、图像要易于识别, 使用户在浏览网页时减少屏幕刺激, 减轻视觉疲劳。比如所以浅色背景用深色字深色背景用浅色字;以冷色、暗色、浅色作为背景等。

(5) 标志标准色。

制作网页时, 要将企业的标志和标准色运用在页面上。使浏览者在网站上与实际事物之间产生联系。通过在每个页面上采用标志和标准色, 反复强调重复刺激, 给浏览者留下印象[4]。

3 应用

在Dreamweaver或者Frontpage等网页设计软件里, 都可以以表格的形式进行页面布局。网页使用表格有一个缺点, 就是表格布局中, 使用过多表格时, 页面执行时间加长, 显示效果很差, 这样就会影响网站的形象, 浏览者也不愿意访问这样的网站。目前互联网上最流行的页面布局方式是DIV+CSS, 这种布局的优点是:页面载入快;修改设计时效率高;能够保持视觉的一致性;对浏览者和浏览器更具亲和力。

使用DIV+CSS技术, 只需对CSS代码进行简单设置, 即可对改变网页的布局和色彩搭配。以三行二列式网页布局为例:

HTML文件主要代码:

3.1 页眉和导航

3.2 页面主体

3.3 页脚

3.4 主要CS S代码

3.5 效果图 (图1)

4 结语

如何设计一个好的网站一直是网页设计人员讨论的一个重要话题。吸引浏览者来访问网站是网站的最终目的, 在浏览者访问网页的时候, 网页的视觉传达效果是浏览者对网站的第一印象, 只有在网页设计的时候充分考虑浏览者的因素, 使网页的布局合理、色彩搭配协调、页面展示速度快, 才能使浏览者更多地了解网站内容。网页设计是一门包含艺术设计和技术设计的综合性工程, 网站的所有页面就是设计师的艺术作品, 设计师只有不断学习, 数量熟练掌握网页的视觉传达效果原理和先进的设计技术才能设计出令人满意的作品。

摘要：从网页的页面布局和色彩搭配两个方面对网页设计的视觉传达进行了分析和研究。通过对网页的页面元素特点和布局类型介绍, 详细地阐述了如何合理进行网站的页面布局, 并在此基础上对网页色彩搭配原则和实用的搭配技巧进行了深入的研究。最后结合先进的技术对上述理论知识进行了实际的应用设计。

关键词：网页设计,视觉传达,布局,色彩搭配,DIV+CSS