浅析Internet网页的视觉传达
发布时间：2015-07-06 10:59
【摘要】网页设计在网络高速发展的今天已经成为重要的设计门类，不仅是对平面视觉传达设计美学的一种继承和延伸，更是艺术与技术的高度统一。作者以哈尔滨商业大学设计艺术学院网页设计为例分析网页的平面设计，尝试从平面艺术设计的内容、原则和形式美等方面分析；从网页的色彩设计和网页心理学方面分析，对这个新的艺术设计领域进行初步的归纳总结和理论探讨。
【关键词】网页与平面设计 色彩 心理学
１ 网页的平面设计
每个网站都是由诸多网页构成，故网页是构成互联网的基本元素。我国这两年的网络发展非常快，网站数量也以倍率增长，然而网页的设计却不容乐观。除了一些大的专业网站在版面的编排上比较讲究之外，其他很少见到界面设计考究、美术创意优秀的中文网站，这是因为没有和平面设计紧密结合。网页本身就是无数个“页面”的平面，平面设计规则也适用网页设计，网页设计的审美需求是对平面视觉传达设计美学的一种继承和延伸。两者的表现形式和目的都有一定的相似性，把传统平面设计中美的形式规律同现代的网页设计的具体问题相结合起来，才能设计出符合审美规则的网页。故设计者应该巧妙利用平面设计的设计规则，结合网络媒体的特点，认识网络，了解平面的特征，才能使网页更加适合于网络上的传播。
平面设计中如变化和统一、条理与反复、对比和调和、均齐与平衡等，对网页中文字、图形、色彩的设计都是十分有效的视觉规律。首先，网页的内容与形式的表现必须统一和具有秩序，形式表现必须服从内容要求，网页上的各种构成要素之间的视觉流程，能自然而有序地达到信息诉求的重点位置。在我们把大量的信息塞到网页上去的时候，考虑怎样把它们以合理的统一的方式来排布，使整体感强的同时又要有变化，怎样使它们脉络清楚又富有清晰的视觉效果等等。例如哈尔滨商业大学设计艺术学院网页设计之欢迎界面，在黄色的背景衬托下，各种线条贯穿其中，运用平面设计中的图形设计加以修饰，增加网页设计的美感和大众的视觉审美需求。符合设计学院的设计的理念，又有学术机构的沉稳。内容与形式的表现达到了高度的统一。其次，突出主题要素，必须在众多构成要素中突出一个清楚的主体，它应尽可能地成为阅读时视线流动的起点。哈尔滨商业大学设计艺术学院网页设计之主页设计作为设计的主体，如果没有这个主体要素，浏览者的视线将会无所适从，或者导致视线流动偏离设计的初衷。主页设计中各构成要素在组合时，要注意其结构的轻重大小、虚实、多少等对比因素，加强视觉力度，以强化页面的整体吸引力。再次，网页版式的新意，网页的版式设计同报刊杂志等平面媒体的版式设计有很多共同之处，它在网页的艺术设计中占据着重要的地位。所谓网页的版式设计，是在有限的屏幕空间上将视听多媒体元素进行有机的排列组合，将理性思维个性化地表现出来，是一种具有个人风格和艺术特色的视听传达方式，它在传达信息的同时，也产生感官上的美感和精神上的享受。哈尔滨商业大学设计艺术学院网页设计的版式设计赋予了很多心意，版面运用欢快轻盈的风格进行设计，打破常理设计规范，有鲜明的节奏感，给人以生机盎然的感受，版面中的文字和图片利用线条隔开，主题突出，追求某种富于活力的图文编排与设计。
２ 网页视觉设计中色彩的设计
网页的色彩，是最先也是最持久地给浏览者以网站形象的因素，浏览者在浏览网页时，留下的第一印象就是页面的色彩设计。色彩本身是无任何含义的，有的只是人赋予它的。但色彩确实可以在不知不觉间影响人的心理，左右人的情绪，所以就有人给各种色彩都加上特定的含义：红色：强有力、喜庆的色彩，很容易使人有兴奋感觉，是一种雄壮的精神体现；黄色：亮度最高的色，给人感觉就是很有温暖感；绿色：美丽、优雅，给人感觉大度、宽容；蓝色：永恒、博大，给人感觉平静、理智；紫色：神秘、女性、温柔、冒险；黑色：有时给人沉默、虚空的感觉，但有时也给人一种庄严肃穆的感觉；白色：有时给人无尽的希望感觉，但有时也给人一种恐惧和悲哀的感受；灰色：具有中庸、平凡、温和、谦让、中立和高雅的感觉。网页的色彩使用得当可以产生强烈的视觉效果，使页面更加生动。巧妙使用色彩可以直接影响阅读者的观赏兴趣，因此，色彩设计在网页设计中居于十分重要的地位。网页的色彩设计应把握以下几个方面：
2.1 确定主体色。确定一个主色调，可以有利于体现网站主题，遵循主从关系，这是最稳定的处理色彩原则，在网页设计页面上，除白色为背景外大量使用的颜色，就是这个网页的主体颜色。如果在同一个页面内运用了多种颜色，把握不好的话，就无法确定哪个是主体色。因为其他的颜色面积不能过大，要遵循主从关系。我们现在看到的网页，一般以浅颜色为背景的居多，如浅灰色、浅黄色、浅蓝色、浅绿色。以浅颜色为底，哈尔滨商业大学设计艺术学院网页的主体色就是以浅黄色、浅蓝色为主色调，整体感觉柔和、素淡，配上深颜色的字，如黑色，读来自然、流畅，也有利于突出页面的重点，有利于整个页面的配色，更容易为大多数人认可和掌握。
其他一些次要内容，如背景图片、线条适宜采用不抢眼的颜色，以免喧宾夺主。只有少量精心选择的元素，为了突出强调主页的视觉效果，题头部分采用明亮的色彩，这些彩色亮点就会产生强烈的视觉冲击，并有设计艺术学院的特色。
2.3 页面的色彩分配。网页标题是网站的指路灯，浏览者要在网页间跳转，要了解网站的结构，哈尔滨商业大学设计艺术学院网页设计的导航设计利用页面中的一些小标题，使用稍微具有跳跃性的色彩，吸引浏览者的视线，让他们感觉网站清晰明了，层次分明。网页标志是宣传网站最重要的部分之一，所以这两个部分一定要在页面上突迎而出。怎样做到这一点呢？logo和banner设计来源是哈尔滨商业大学设计艺术学院标志，鲜亮、对比强烈的标志设计寓意哈尔滨商业大学设计学院的设计精神和学术精神，logo和banner的色彩跟网页的主题色分离开来，突出主题。网页文字是网页传递信息的主体，如果一个网站用了背景颜色，必须要考虑到背景颜色的用色，与前景文字的搭配等问题。一般的网站侧重的是文字，所以背景可以选择纯度或者明度较低的色彩，文字用较为突出的亮色。让人一目了然。设计艺术学院网页页面当中的文字设计并没有使用大众的黑色，在白色背景的衬托下，深灰色的文字既有利于读者的阅读，又赋予了活跃的气氛。导航菜单所在区域是网民利用率比较高的，把菜单背景颜色设置暗一些，然后依靠较高的颜色对比度、比较强烈的图形元素或独特的字体将网页内容和菜单的不同目的准确地区分开。页脚，这一项最不重要，不应该喧宾夺主。可以考虑和侧栏相同的颜色，设计学院的页脚稍微压了一下深一些的颜色，也可以在配色上使用一些比较跳跃的颜色，用来引导视线。
３ 心理学与网页设计
人类在互通信息的同时也在交换彼此的情绪，如果没有好的沟通情绪，所谓话不投机半句多，双方可能说没有两句话就结束谈话了。因此若要利用网络的方式做有效的沟通，则必须让沟通双方有临场感，并引起彼此“良好沟通情绪”。由于网页在计算机屏幕上呈现给别人视觉画面，因此一方面观者要学习从计算机画面上看见信息；另一方面网页设计者要了解观者的“看见”的能力，从而设计能使人易懂的画面，协助观者能看见信息。由此就涉及到一个认知的过程。认知心理学可以定义为：为了解人类行为，而对人类心智历程及结构所作的科学分析。认知心理学的主要理论架构是“信息处理模式”。这个模式视人类为主动的信息处理者，探讨人类凭感官接受信息、贮存信息以及提取、运用信息等不同阶段所发生的事，所以认知心理学也常被称做“信息处理心理学”。而对于信息，感官记忆可贮存大量的信息，只是若不予以注意，信息很快就会失去。所以要进一步“注意”，作“图样辨识”，选择需要的感官信号做进一步的处理。一般说来，感觉刺激很少的信息很难被记忆，而那些能引起人们很强感觉刺激的信息很容易被人记忆。而现今社会是一个信息爆炸的时代，人们获取信息的方式主要是从网络获得，这就必定要求在网页的设计上要遵循认知心理学的要求，才可以被人们容易感知。网页设计就要善于通过信息处理心理学，唤起欣赏者身心结构上的类似反应，利用心理学在设计网页时，会缩短与网民的距离。设计学院网页设计运用了信息心理学和审美心理学进行设计，浏览者也会在高速的信息传递中快速掌握信息，让网民对页面有深刻的认识和感知，增强版面的表现力和可读性。
网页设计是一种综合性的设计，它所涉及的范围非常的广泛，包括消费者心理学、视觉设计美学、字体设计、标志设计、人机工程、哲学、等诸多方面，当然也离不开一定的科学技术发展。技术与艺术、色彩与版式、图片与文字、构成了网页设计，哈尔滨商业大学设计艺术学院网页设计只是网页设计中遵循原则的一个成功案例，在网络高速发展下，网页设计更似工作站，发挥更大的机能。
参考文献
1 徐珂等.网页视觉与设计[m].北京：人民邮电出版社，2003
2 张宪荣等.设计色彩学.北京：化学工业出版社，2005
3 张金霞.网页设计参考手册.北京：清华大学出版社，2009
【关键词】网页与平面设计 色彩 心理学
１ 网页的平面设计
每个网站都是由诸多网页构成，故网页是构成互联网的基本元素。我国这两年的网络发展非常快，网站数量也以倍率增长，然而网页的设计却不容乐观。除了一些大的专业网站在版面的编排上比较讲究之外，其他很少见到界面设计考究、美术创意优秀的中文网站，这是因为没有和平面设计紧密结合。网页本身就是无数个“页面”的平面，平面设计规则也适用网页设计，网页设计的审美需求是对平面视觉传达设计美学的一种继承和延伸。两者的表现形式和目的都有一定的相似性，把传统平面设计中美的形式规律同现代的网页设计的具体问题相结合起来，才能设计出符合审美规则的网页。故设计者应该巧妙利用平面设计的设计规则，结合网络媒体的特点，认识网络，了解平面的特征，才能使网页更加适合于网络上的传播。
平面设计中如变化和统一、条理与反复、对比和调和、均齐与平衡等，对网页中文字、图形、色彩的设计都是十分有效的视觉规律。首先，网页的内容与形式的表现必须统一和具有秩序，形式表现必须服从内容要求，网页上的各种构成要素之间的视觉流程，能自然而有序地达到信息诉求的重点位置。在我们把大量的信息塞到网页上去的时候，考虑怎样把它们以合理的统一的方式来排布，使整体感强的同时又要有变化，怎样使它们脉络清楚又富有清晰的视觉效果等等。例如哈尔滨商业大学设计艺术学院网页设计之欢迎界面，在黄色的背景衬托下，各种线条贯穿其中，运用平面设计中的图形设计加以修饰，增加网页设计的美感和大众的视觉审美需求。符合设计学院的设计的理念，又有学术机构的沉稳。内容与形式的表现达到了高度的统一。其次，突出主题要素，必须在众多构成要素中突出一个清楚的主体，它应尽可能地成为阅读时视线流动的起点。哈尔滨商业大学设计艺术学院网页设计之主页设计作为设计的主体，如果没有这个主体要素，浏览者的视线将会无所适从，或者导致视线流动偏离设计的初衷。主页设计中各构成要素在组合时，要注意其结构的轻重大小、虚实、多少等对比因素，加强视觉力度，以强化页面的整体吸引力。再次，网页版式的新意，网页的版式设计同报刊杂志等平面媒体的版式设计有很多共同之处，它在网页的艺术设计中占据着重要的地位。所谓网页的版式设计，是在有限的屏幕空间上将视听多媒体元素进行有机的排列组合，将理性思维个性化地表现出来，是一种具有个人风格和艺术特色的视听传达方式，它在传达信息的同时，也产生感官上的美感和精神上的享受。哈尔滨商业大学设计艺术学院网页设计的版式设计赋予了很多心意，版面运用欢快轻盈的风格进行设计，打破常理设计规范，有鲜明的节奏感，给人以生机盎然的感受，版面中的文字和图片利用线条隔开，主题突出，追求某种富于活力的图文编排与设计。
２ 网页视觉设计中色彩的设计
网页的色彩，是最先也是最持久地给浏览者以网站形象的因素，浏览者在浏览网页时，留下的第一印象就是页面的色彩设计。色彩本身是无任何含义的，有的只是人赋予它的。但色彩确实可以在不知不觉间影响人的心理，左右人的情绪，所以就有人给各种色彩都加上特定的含义：红色：强有力、喜庆的色彩，很容易使人有兴奋感觉，是一种雄壮的精神体现；黄色：亮度最高的色，给人感觉就是很有温暖感；绿色：美丽、优雅，给人感觉大度、宽容；蓝色：永恒、博大，给人感觉平静、理智；紫色：神秘、女性、温柔、冒险；黑色：有时给人沉默、虚空的感觉，但有时也给人一种庄严肃穆的感觉；白色：有时给人无尽的希望感觉，但有时也给人一种恐惧和悲哀的感受；灰色：具有中庸、平凡、温和、谦让、中立和高雅的感觉。网页的色彩使用得当可以产生强烈的视觉效果，使页面更加生动。巧妙使用色彩可以直接影响阅读者的观赏兴趣，因此，色彩设计在网页设计中居于十分重要的地位。网页的色彩设计应把握以下几个方面：
2.1 确定主体色。确定一个主色调，可以有利于体现网站主题，遵循主从关系，这是最稳定的处理色彩原则，在网页设计页面上，除白色为背景外大量使用的颜色，就是这个网页的主体颜色。如果在同一个页面内运用了多种颜色，把握不好的话，就无法确定哪个是主体色。因为其他的颜色面积不能过大，要遵循主从关系。我们现在看到的网页，一般以浅颜色为背景的居多，如浅灰色、浅黄色、浅蓝色、浅绿色。以浅颜色为底，哈尔滨商业大学设计艺术学院网页的主体色就是以浅黄色、浅蓝色为主色调，整体感觉柔和、素淡，配上深颜色的字，如黑色，读来自然、流畅，也有利于突出页面的重点，有利于整个页面的配色，更容易为大多数人认可和掌握。
其他一些次要内容，如背景图片、线条适宜采用不抢眼的颜色，以免喧宾夺主。只有少量精心选择的元素，为了突出强调主页的视觉效果，题头部分采用明亮的色彩，这些彩色亮点就会产生强烈的视觉冲击，并有设计艺术学院的特色。
2.2 背景色处理。在背景的色调搭配上一定要注意不能有强烈的对比，特别是同时使用色彩对立的颜色。大面积颜色适宜采用低比度，因为过于丰富的背景色彩会影响前景图片和文字的取色，严重时会使文字溶于背景中，不易辨识。所以，背景一般应以单纯为宜。如果需要一定的变化以增加背景的厚度，也应是在尽量统一的前提下的一种变化。例如在制用标题时，为追求醒目的视觉效果，可用比较深的颜色，配上对比鲜明的字体。实际上背景的作用主要在于统一整个网页的风格和情调，对视觉的主体起到一定的衬托和协调作用，一方面吸引网民的注意力，另一方面有助于体现网站的主题。对一些明度较高的网站，配以黑色，可以适当地降低其明度。白色是网站用的最普遍的一种颜色。很多网站甚至留出大块的白色空间，作为网站的一个组成部分，这就是留白艺术。哈尔滨商业大学设计艺术学院网页设计的二级界面就较多运用留白艺术。留白，给人一个遐想的空间，让人感觉心情舒适，畅快，恰当的留白对于协调页面的均衡起到相当大的作用。
2.3 页面的色彩分配。网页标题是网站的指路灯，浏览者要在网页间跳转，要了解网站的结构，哈尔滨商业大学设计艺术学院网页设计的导航设计利用页面中的一些小标题，使用稍微具有跳跃性的色彩，吸引浏览者的视线，让他们感觉网站清晰明了，层次分明。网页标志是宣传网站最重要的部分之一，所以这两个部分一定要在页面上突迎而出。怎样做到这一点呢？logo和banner设计来源是哈尔滨商业大学设计艺术学院标志，鲜亮、对比强烈的标志设计寓意哈尔滨商业大学设计学院的设计精神和学术精神，logo和banner的色彩跟网页的主题色分离开来，突出主题。网页文字是网页传递信息的主体，如果一个网站用了背景颜色，必须要考虑到背景颜色的用色，与前景文字的搭配等问题。一般的网站侧重的是文字，所以背景可以选择纯度或者明度较低的色彩，文字用较为突出的亮色。让人一目了然。设计艺术学院网页页面当中的文字设计并没有使用大众的黑色，在白色背景的衬托下，深灰色的文字既有利于读者的阅读，又赋予了活跃的气氛。导航菜单所在区域是网民利用率比较高的，把菜单背景颜色设置暗一些，然后依靠较高的颜色对比度、比较强烈的图形元素或独特的字体将网页内容和菜单的不同目的准确地区分开。页脚，这一项最不重要，不应该喧宾夺主。可以考虑和侧栏相同的颜色，设计学院的页脚稍微压了一下深一些的颜色，也可以在配色上使用一些比较跳跃的颜色，用来引导视线。
３ 心理学与网页设计
人类在互通信息的同时也在交换彼此的情绪，如果没有好的沟通情绪，所谓话不投机半句多，双方可能说没有两句话就结束谈话了。因此若要利用网络的方式做有效的沟通，则必须让沟通双方有临场感，并引起彼此“良好沟通情绪”。由于网页在计算机屏幕上呈现给别人视觉画面，因此一方面观者要学习从计算机画面上看见信息；另一方面网页设计者要了解观者的“看见”的能力，从而设计能使人易懂的画面，协助观者能看见信息。由此就涉及到一个认知的过程。认知心理学可以定义为：为了解人类行为，而对人类心智历程及结构所作的科学分析。认知心理学的主要理论架构是“信息处理模式”。这个模式视人类为主动的信息处理者，探讨人类凭感官接受信息、贮存信息以及提取、运用信息等不同阶段所发生的事，所以认知心理学也常被称做“信息处理心理学”。而对于信息，感官记忆可贮存大量的信息，只是若不予以注意，信息很快就会失去。所以要进一步“注意”，作“图样辨识”，选择需要的感官信号做进一步的处理。一般说来，感觉刺激很少的信息很难被记忆，而那些能引起人们很强感觉刺激的信息很容易被人记忆。而现今社会是一个信息爆炸的时代，人们获取信息的方式主要是从网络获得，这就必定要求在网页的设计上要遵循认知心理学的要求，才可以被人们容易感知。网页设计就要善于通过信息处理心理学，唤起欣赏者身心结构上的类似反应，利用心理学在设计网页时，会缩短与网民的距离。设计学院网页设计运用了信息心理学和审美心理学进行设计，浏览者也会在高速的信息传递中快速掌握信息，让网民对页面有深刻的认识和感知，增强版面的表现力和可读性。
网页设计是一种综合性的设计，它所涉及的范围非常的广泛，包括消费者心理学、视觉设计美学、字体设计、标志设计、人机工程、哲学、等诸多方面，当然也离不开一定的科学技术发展。技术与艺术、色彩与版式、图片与文字、构成了网页设计，哈尔滨商业大学设计艺术学院网页设计只是网页设计中遵循原则的一个成功案例，在网络高速发展下，网页设计更似工作站，发挥更大的机能。
参考文献
1 徐珂等.网页视觉与设计[m].北京：人民邮电出版社，2003
2 张宪荣等.设计色彩学.北京：化学工业出版社，2005
3 张金霞.网页设计参考手册.北京：清华大学出版社，2009