[网页设计,元素,视觉]浅析视觉元素在网页设计中的表达与运用

浅析视觉元素在网页设计中的表达与运用

随着科学与技术的发展，信息传播的方式也越来越多样化，除了传统的纸质媒介，互联网和移动设备越来越成为人们生活与工作不可或缺的部分。界面设计，UI设计这些新兴名词渐渐进入大家的视野，成为互联网时代的调味剂。90年代中后期出现了许多新技术，如java 语言，动态HTML，FLASH以及虚拟现实造型语言等技术，使网页设计变得更为生动和精彩。网页的版面布局可以说是网页设计中的一个关键环节，与网站性质贴切吻合的版面布局，不但会给初次浏览者良好的第一印象，同时还能最大程度地宣传网站自身形象，明确网站运营宗旨。网页设计中包含了文字、图片与图形、色彩这三大块视觉元素，它们之间的组合与变化形成了丰富多彩的页面效果。任何视觉图形或文字信息，都可以简化或趋近于点、线、面的视觉元素.文字作为页面设计中的点，图片和图形作为线，色彩作为面，三者相辅相成。

网页设计中的文字主要分为标题文、正文、辅助文字这三大类，优秀的文字排版适合于各种情境下的设计，能够保持良好的可读性与识别性。

图片图形在网页设计中占有很大的比例，视觉冲击力相对同等面积的文字强.但这并非表明语言或文字表现力可以忽略，而是应使图片在视觉信息传达上能辅助文字，帮助理解.因为图片能具体而直接地把信息内容高素质、高境界地表现出来，使本来平淡的事物变成强而有力的诉求性画面，体现出更强烈的创造性.图片在版面构成要素中，充当着形成独特画面风格和吸引视觉关注的重要角色，具有烘托视觉效果和引导阅读两大功能。随着科技的进步，图片的呈现方式由原来静态的，幻灯片式的演变到了动态图形的插入;视频类的版块，从听觉，视觉上刺激体验者，而不再是千篇一律的框架式布局，有效地防止用户出现审美疲劳。色彩元素在网页设计中同样占据着非常重要的地位，是最先也是最持久地反映和代表网站风格的视觉元素.它是调适浏览者视觉心理、引起受众注意的重要手段之一。不同色调的网页设计给观者带来的视觉感受也不同，色彩的表达使整体设计变得更加的生动和有趣，能很好地烘托气氛，给观者强烈视觉上的刺激。

下面我从四大类型的网站来分析视觉元素在网页设计中的表达方式与特征。

一、儿童游戏类

这一类的网站在视觉风格上比较轻松活泼，具有趣味性。摆脱了网站固有的框架模式，除了动画和涂鸦，设计师采用了视差滚动的手法，所谓视差滚动，是指让多层背景以不同的速度移动，形成立体的运动效果，从而带来出色的视觉体验。作为当下网页设计的热点趋势，越来越多的网站应用了这项技术。尤其是在以插画为主的页面设计中体现突出，经常看到设计师运用这种鼠标滚动式的效果来增加网页与读者的互动和趣味性，较适合大画幅的背景墙与大场景的表达。

关于游戏设计的网站，大胆的撞色和明亮的色块是这款设计比较突出的表达方式，营造出活泼生动的氛围。网页使用了视差滚动的方式，从上到下依次展现画面。导航的呈现方式采用了地图式的转换，这种导航方式称之为路线引导，就像故事中的线索一样，给读者引出一条浏览路线。这种浏览方式与网站的主题十分契合，好像让体验者身临其境，已经融入在游戏当中了。文字方面，设计师采用了自己独特设计的字体代替标准印刷体，让设计更加独特耐看。整体上看设计以图为主，文字内容并不多，设计师主要从审美性和趣味性着手进行

创作。

二、商业类网站

商业网站以展示产品为主，大多采用图片轮播的形式，会省略掉一些繁琐的装饰，用极简主义的形式突出产品，使读者在最短的时间了解产品的属性，图片的质量在此类型的网站就尤为重要。在网页的视觉元素中，图片占据了大部分空间，对图片的处理能力也是设计师能力的检验。图片的大小对比，疏密对比，以及色调是否匹配整体网站风格等，这些都是不可忽略的视觉元素。关于首饰展示的网站，整体的画面元素并不多，除了醒目的大标题，就是产品的展示区域。在导航的形式上也采用最基本的全站式导航和辅助式导航。该导航系统设计简洁明了，布局清晰。整体框架结构采用的网格式结构，将产品进行了有效的分类。

三、电子商务类

这类网站最显著的视觉特征是信息量大，内容繁杂。最突出的视觉元素是文字和文本，大的标题和小的副标题。内容排的比较满，图形比较繁杂，大的广告语是吸引用户的主要手段。在视觉元素中色彩采用统一的色调，很好地保持了视觉一致性。对于商务类网站来说，保持品牌的一致性能更好地让客户有信任感，统一的设计和统一的主题能够增强网站的品牌识别性，这样更容易让用户记住和方便使用，让用户产生强烈的印象并且有舒适感。这类网站在审美性上相对弱一些，主要是功能性主导。

淘宝网的主页，整体基调采用暖红，这也是近年来商业用色的主流趋势。排版整体感觉分类清晰、易于操作。导航的方式采用了水平式和垂直式，水平式为主导航，垂直式为副导航。总体框架结构分类清晰，适应于大众消费人群。文字元素方面也是采用的基本字体，没有太多花哨的装饰字体，让消费者在最短的时间内检索到需要的产品。

四、个人品牌类

这类网站的特点就是设计师发挥的空间比较大，内容形式多种多样。个人类网站往往向个性化的方向打造，引入多媒体技术，从视觉、听觉上给用户留下深刻印象，比较突出个性化设计，强调与众不同。从静态的表现方式到动态的视觉传达，从二维的图形到三维的动画效果，从具象的图片到抽象的概念表达，科学和技术的进步给了设计师更大的发挥空间和想象力。

一个创意工作室的网站，设计师大胆的将主界面设计成一个向中心集中心式的抽象图形，8个小的图形组成了导航，鼠标滑过各个不同板块的内容依次出现。主页的风格呈现出简洁时尚的动感，整体色调以淡蓝色为主色调，没有太多繁杂的细节，简洁明了，迎合了当下扁平化的设计风格，图标先行。画面整体的视觉元素比较统一，以圆形图案为主，将图形做了视觉上的效果，用了渐变的方式使主体立体化。

不同类型的网站都有其自身不同的表达方式，有些偏重功能，有些偏向审美趣味性，有些则突出个人风格，总而言之，只有将网页中的视觉元素合按照设计法则合理的运用才能事半功倍。

1.突出页面主要元素

第一时间抓住观者的眼球，用最简练的话说清楚。网站设计师要怎样进行协调平衡，使那些创新网络开发者和保守的终端用户都能感到满意呢?一个较好的办法是，在任何一个网站只做一个新尝试，这样用户就可以集中精力理解这唯一的新想法，而网站中的其余部分都应是他们平常十分熟悉的。找出一个亮点的地方做足文章，吸引到读者。

2.塑造鲜明的视觉风格

根据网页设计不同的分类可总结其多方面的特点，从心理学的角度来看，界面可分为感觉、视觉、触觉、听觉等感觉和情感两个层次;从技术方面来说网络界面具有数字化，多媒体的技术特征;从传播方面来说，网络界面具有多元化、个性化、交互性、快捷性、广泛性的传播特征。塑造鲜明的风格是网页设计中设计师在设计时很重要的表现手法，往往那些特色主题鲜明的网站更容易被用户记住。各个类型的网站有其不同的功能和想展示给观众的地方，一件东西越具有吸引力，人们看它的时间就越长。视觉效果作为整个网站的门面，在设计过程中当然应该遵守这种法则。要根据目标人群的不同而进行有针对性的设计，创建不同的风格。例如，比较轻松活泼的网站所吸引的大部分年轻的用户群，网站在设计中大多选用幽默的手法，对于网站界面的设计来说，幽默的画面和操作形式能给用户带来浏览的乐趣。相比较而言，对于一些商务类网站，则界面的结构用色方面就略显严谨一些，这类网站更多的是偏向功能性一些。

3.注重视觉传达的有效性和情感性

好的网页设计能让浏览者迅速抓住网页的重点诉求对象，对网页的主要内容有所了解，提高信息传达的效率。在进行设计的时候要突出重点，主次分明，明确自己的主页要说明些什么。在网页设计中，导航决定着浏览者能否顺利地使用该网站。一般来说，导航要素应直观明确，符合网站整体风格。版式设计让网页页面中各视觉信息合理，有序的排列。在与浏览者的认识过程的心理顺序和思维发展的逻辑一致的基础上，根据信息的主次(即传达的重点)合理布局，确定各元素的顺序，设计出合理准确的视觉流程。注意到这几点，则能让网页在传达信息的过程中更加有效和快捷。

对于网页设计来说，界面的色彩，板式和风格都可以称作艺术中的形式，如何将这些形式创作成有意味的形式，从而激发浏览者的审美情感，这也是设计师当下思考比较多的方面。带有情感化的网页设计更能拉近设计师与体验者的距离，让用户会心一笑，产生共鸣，而并不是仅仅追求视觉上的华丽与美观。不管是拟物化的表达，还是抽象简洁的呈现方式，设计师都在寻求一个更能拉近与用户距离的表达方式。通过视觉元素的不同排列组合，赋予一定的情感在其中，营造一个独特的传媒世界，创造一种愉悦的视觉环境，使浏览者获得一种全身心的享受与共鸣。