网页设计论文

您当前的位置:学术堂 > 计算机论文 > 网页设计论文 >

网页页面中视觉语言的构成

来源:学术堂 作者:陈老师
发布于:2017-01-03 共5942字
  本篇论文快速导航:

展开更多

  2 网页页面中视觉语言的构成
  
  网页不是简单的书籍,也不是普通的 CD,更不是耳边的电视广播。当然它们又具有相似性,网页像书籍一样具有文字和图像;像电视一样具有动态影像和生动的声音;又类似光盘一样有多媒体的存在。网页具有自己独特的语言、美学,甚至不足。正是如此,网页与它们在根本上是不同的,它几乎融合了所有媒体的特性。当代的网页视觉设计由初期的信息堆砌到后来的图形化、抽象化,更到今天的信息视觉化,经历了相互递进而又迥然不同的过程。
  
  网页设计中对于一些视觉元素的应用,主要是利用视觉语言设计体现出文化现象,也就是一个时期内观者的审美及生活方式的表现,网页设计的视觉语言,增加了网页的大众传播和商业运作的美感和灵活性,这也是艺术创作的形式之一。而正这种是作为众多样式的视觉设计其中一分子的网页设计,通过对于网页的审美需求最终达到最佳的视觉效应体现。
  
  于是网页设计的工作人员们,努力的适应社会的新的变化和新的需求,重新审视当代的视觉文化现象、设计理念以及流潮流艺术等方面,积极发现并理解新的视觉语言的传播现象。正是这种利用视觉语言的艺术优势性,受到了很多观者的欢迎和接受,使网页浏览者在其中得到了生动而直观,具有美感的生活画面。
  
  2.1 网页设计中的视觉语言
  
  互联网是由数量众多的网站组成的,而网站又由大量的网页构成,网页又是通过众多的视觉语言相互作用完成最终的信息内容传达。通过这些设计元素,进行灵活而又合理的编排与整合,可以吸引观者最终实现网页内容与信息的有效传达,同时,还能够适应人们视觉流程的心理和生理特点。
  
  2.2 视觉语言的形态要素
  
  视觉语言由两个元素构成:形态要素和构成要素。视觉语言的构成要素是由设计中的基本形态点、线、面构成的。而这三种元素又是视觉传达设计中经常运用的最基本设计语言, 视觉语言设计中出现的文本与图像信息,都可以通过简化等手法,最终归纳成近似于点线面这三种基本形态的元素。
  
  点线面这三种基本的视觉形态要素,在网页视觉语言设计中,通过新的形式相互依存和作用。网页版面中更是如此,正是这些基本单位组合成各种各样的视觉信息, 形成千变万化的视觉语言,给浏览者带来强烈的视觉感受。所以,想要观者打开网站时,可以看到最佳视觉效果的网页。必须把基本视觉语言中的点、线、面等元素慎重而妥善处理好。
  
  2.2.1 视觉语言中关于点元素的处理
  
  从设计角度来看,“点” 是一切视觉形态的基础,它可以具有任何外形特点而且是具有空间位置的视觉单位。所以在网页设计的版式构图中,视觉构成的基本单位就是:点元素,通过它可以在网页设计页面中起到一种张力的作用, 最终在观者的心理上形成一种扩张感。
  
  几何学中的点是不具有面积大小的,而在网页视觉语言的元素应用中, 点不仅可以存在面积上的大与小。 还可以包含不同形状和元素所表现出的形态。其实可以这样理解:点的大小面积是相比较而言的, 任何单独细小的形象都可以被称之为点。可能是页面上的一个小按钮,也可能是网页中的一小块颜色甚至于新闻里的一个字符, 都能够展现出点的视觉感受。
  
  虽然只是小小一点,却能够在网页版面布局中发挥着占据空间的构图效果。通过对点要素的修改与排列,可以使小小的点元素就能够具有音乐中才会出现的节奏感。除此之外,通过不同排列的连续或间隔变化手段,还能出人意料地表现出空间感和距离感。
  
  一个完整的网站结构,是通过数量不同的网页和形态各异的元素构成。点要素通过形式美法则中的对比与协调、和谐与统一、节奏与韵律、均衡与对称、比例与尺度等多方面的进行构成。这样以来,网页页面在具备统一画面的同时,还有出人意料的点睛之笔出现。
  
  2.2.2 视觉语言中关于线元素的处理
  
  几何学中提到:点运动的轨迹形成线,线只有长度和曲折变化,没有粗细。从构成含义讲, 线不仅具有粗细变化、各种外形特征,还具有了位置、长度及宽度,是在网页设计中版面组构、连接引导、分割版面、形象刻画等方面不可或缺的视觉语言的构成元素。除此以外,线形态还可以主宰网页页面形式,表现版面主题;如果作为版面配角或利用线的指向性时,还能够起到穿针引线的作用。
  
  在情感特征表达上,线比点形态更据有明显性。 表现在艺术形态中的线可以是很规矩的几何线,或者是随手涂鸦似得手绘自由线。由于线的造型不同,所以线在作为视觉要素时,除了利用不同的艺术风格进行表现之外,还可以给予观众在审美上产生的各种不同形式的美感。例如:通过水平线的特点,表达平和安定之意;给人重量、下落、严肃、庄重、感觉的垂直线;斜线具有速度的感觉;直线带给人运动、向上、挺拔、的感觉;曲线则给人以柔软、婉转的感觉。线的厚度和方向也可以产生表达特定的感觉。锯齿状的线,如果带有锐利的角,可以让人感到危险和狂乱;比较柔和的轧制线和曲线会给人放松和平滑的感觉。由90 度角构成的线容易让产生坚硬和机械的感觉。
  
  在网页视觉设计中的线元素应用中,“线在网页中主要起分割画面的作用。
  
  但通过信息条理化编排,也可以形成一种页面内容线化的视觉构成,既便于浏览,又美化版面。另外,线还可以将各重要信息连接起来,明晰地表达网页内容组织的脉络结构。[2]”
  
  而在实际的网页视觉语言的应用中,通过利用不同类型的线会获得意想不到的视觉体验效果,.除此以外,还可以把图像元素或者文本信息通过线化手段进行处理,把需要展现的网页信息内容表达的淋漓尽致。正如所示的图片,网页首页页面中, 整个版面的视觉主体通过灯泡的连接以及经过线化处理的视觉元素构成,通过围绕,突出了中心主题文字内容。画面多留空间,以黑颜色、不同内容的数字和产品图像进行视觉构成,页面内容和重要信息一目了然,带给浏览者炫目神秘的巨大吸引力。另外, 经过线形连接的灯泡利用后期滤镜效果加亮后做统一的圆形方向排列, 与主体构图中心共同形成了强烈的韵律感,由图例可以看到,圆弧线在画面中可能会带来少许单调感,为了打破这种单调感,利用了周围围绕数字元素在颜色上进行统一,从而带动了整个画面,而且使其具有了动与静的明显对比。最终打破单调感,增加了网页页面活泼的视觉感受。(如图 2-1)。
  
  2.2.3 视觉语言中关于面元素的处理
  
  任何时候,当一条线的两个端点汇聚在一起时,就产生了面,也就是形状在视觉语言的构成元素中, 面元素一般有两种用途:作为图像元素和展示色块。
  
  在实际的网页视觉设计中,面元素的用途体现在背景渲染和标头塑造。除此以外,在页面设计中还可以作为网页的按钮和图标来使用。面元素除了圆形、三角形或是矩形等等这些规矩的有机形状之外,还有一些自由形状,也就是一些随意而成的面。其实这些有机形状,还可以称为自由面。自由面比几何形态的面更为抽象。
  
  自由面有一种可以自由流动的特性,它可以传达一种随意儿童时的感觉。实际运用时,他们可以代表某个产品、人的手势或者某种有组织的涂鸦。
  
  由于我们生活在一个三维世界里,空间中面的形态还可以用来表现各式各样的立体感觉,我们也已经学会了依靠视觉线索,对于网页中的各种面形态进行丰富的情感联想。比如幸福、热情、寂寞、空旷等。除此之外,数学中的几何面在设计业内,也具有独特的表情特征,例如规整四方的正方形, 三角形的稳定坚固,圆形的圆润丰满等其它有机形态。
  
  在不同主题、不同类型的网站网页设计的版面编排时,可以充分使用面进行情感表达,可以重点突出网站的主题和性质。例如一些娱乐类的网站要以轻松活泼为主,而一些官方的政治类网站则以严肃庄重的风格为主。这样以来,实现了不同类型网站使用风格迥异的展现方法。
  
  2.3 视觉语言的构成要素
  
  当浏览者打开网站的浏览界面时,出现在眼前的其实就是类似于书籍纸张和图文信息,只不过它们在电脑屏幕上是以数字化的形式出现和表达的。浏览者看到是和传统的平面视觉设计中相同的图像信息、文字信息、版式布局以及色彩表现等元素的排列,而这些就是视觉语言的构成要素。视觉语言的诸多构成元素在网页的页面设计中得到了直接运用。再根据网页页面的版式设计的具体需求,把这些元素之间进行分解重构。
  
  例如,文字元素除了在页面中以大量的文本形式出现,进行文本内容的信息的传递之外,还可以作为视觉元素和其它字体分解重构,最后利用形式美法则,使之成为单独的全新的艺术形式。还可以和一些图像素材共同通过排版组合形成版面。而图像的功能并不只限于此,它在辅助展示、传递文本内容信息的同时,还可以通过增加版面构成的形式感而单独或重复地应用于版面语言设计之中,色彩元素利用自己丰富的视觉感受来表达网站页面的主题情感和主页氛围的培养,带动观者情绪,丰富浏览者的体验感。另一方面,配合图像元素共同完成特殊需要版面的分割重构,最终是版面的形式多样,与众不同。
  
  2.3.1 网页中的文字表现
  
  在网页设计中,文字是最重要的构成要素之一,也是网页中重要信息的描述要素。“从某种意义上说,汉字是中国文化最具有代表性的东西,是本土文化的重要符号”所以在网页的视觉设计中,应该在网页设计中体现出独特的视觉效应以及视觉风格,营造出与网页风格相适应的氛围。
  
  不同主题的网站应有不同的设计思路,比如一些政府网站的文字风格以规整、稳重为主;一些娱乐网站的文字风格则以轻松、幽默为主要风格。所以,文字本身比其它视觉语言更加具有利于信息传达的直接性与明确性。虽然利用网络多媒体技术也能达到一样的效果,但是网页设计中的文字优势却很难被替代。比如网页中的标题、文字链接等形式。
  
  很早以前就对这个网站感兴趣了。可以说它在当时是属于表较前卫的那种设计。在内容与思想上有着自己独特的见解,浏览者看后会有很多的联想。在视觉表现上,有很多出乎意料的手法,可以体会到作者的独具匠心之处。网站包含很多栏目,不像一般的网页导航那样规矩排列,而是利用文字直接线性排列呈圆弧形,不仅在字体设计本身,而且在演示效果上都能看出其苦心追求。这种对网上文字语言独有的演示效果的探索,就像是网上的行为艺术,带给浏览者很多刺激(如图 2-2)。
  
  另一方面,对于一些信息量大的网站来说,文本内容会在网页页面中占据比较大的面积。这时,文字语言的表现好坏尤其应该注意,所以在网页的界面设计时,文字元素的设计,不仅仅要考虑到网页整体界面的效果,更加应该考虑的观者的浏览情况,观者在电脑前会阅读大量字体,很容易引起视觉疲劳,对阅读失去兴趣,由于电脑的字体选择主要来源于自身的系统字库进行显示内容,大部分人们的电脑系统里只有几种出厂预装的简单字体类型,所以这时所设计的特殊字体将无法显示预期效果,这种现象也给网页界面的视觉效应体现带来一定的局限性。解决的办法,则是通过把特殊字体以图形格式展现,也可以达到精彩的视觉效果。
  
  2.3.2 网页中的图形表现
  
  进入 21 世纪,随着网络多媒体技术的不断发展,可以说我们人类已经进入“读图时代”,图片较文字而言,是除文字以外最早运用到网络设计中的设计元素。在网页页面的视觉设计中,图片占有较大的面积,相较同样面积的文字和图片来说,图片具有强大的视觉冲击力,而这种现象并不是说可以忽略掉文字元素的表现力,应该说明图片在视觉语言设计上可以对文字起到辅助作用,帮助浏览者理解网页内容,使浏览变得更加轻松。除此之外,图片具有更加直观和寓意的传达信息的功能,还可以美化网页页面设计。
  
  作为以传达信息为主要功能的网页,自身也需要具有一定的艺术感染力,网络中有成千百万的各种类型的网站网页,怎样在其中做到与众不同,是值得我们深思之处。网页中的图形语言在页面中的构成及表现都应该符合浏览者的审美心理,使观众在浏览网页信息时,还能感受到图片语言带来的视觉冲击力以及艺术美感的享受。单独只使用文字元素的网页设计,不适合人们的阅读习惯,只有通过文字与图片语言的相互搭配,才能共同构成生动而又活泼的网络页面。文字元素与图片语言相辅相成,根据不同类型的网页进行灵活搭配,配合网站的定位,选择适合的风格,营造舒适的视觉环境,吸引浏览者的目光,再根据最佳视域以及视觉流动规律,主动对其浏览者进行引导阅读。
  
  2.3.3 网页中的色彩表现
  
  通过现在流行的色彩心理学,色彩性格等分析发现,其实色彩本身并不具有任何含义的,即使有,也是人们赋予它的。但是色彩也确实可以在不知不觉中影响到别人的心理以及情绪。在设计色彩教学中,提到各种颜色可体现的情感暗示,例如:给人以神秘感的紫色;蓝色,可给人以冷静、朴实的感觉;还有代表喜庆、吉祥和热烈的红色;健康而优雅的绿色;沉默而肃穆的黑色;纯净无染的白色等等。
  
  作为美术教育工作者经常提醒学生,应该使用眼睛进行观察,通过丰富的色彩来表达情感。我们生活在五彩斑斓的环境中,出色的色彩语言应用,可以给网站页面设计带来意料之外的惊喜。色彩的合理搭配,不仅能够加强视觉效果,还可以突出网站网页的主题意境和页面风格。绘画色彩、各种工艺与企业的色彩乃至自然物象的色彩,都可以被采用。
  
  在色彩语言运用中,要学会用色彩表达主题或行业的属性,运用设计色彩的规律,结合网站的特点,充分发挥色彩语言的特殊作用。通过对于网页主题内容的分析与评估,选用相应的颜色来向浏览者进行情感表达,以此作为网页用色基本定位,可以更好地向浏览者进行情感表达,将不同的色彩语言进行组合,可以搭配形成美丽的视觉语言,再通过恰当的色彩应用,可主动调动观者在心理上的感受。使之浏览网页信息的同时,产生共鸣。设计的网页才能更好的融入到人们的生活和使用环境中。
  
  同时色彩语言既能真实反映物象和产品的特定内容,也能够强烈地引起注意。网页色彩可以采用强对比、高纯度的色彩进行搭配或者颜色分割。通过各个色相之间的对比来增加阅读乐趣,而且能够加强浏览着对于网页的印象,为人们留下深刻的视觉感受,为企业树立完美的形象。德国着名的 Vitra 设计博物馆,由于它大量的收藏了建筑家以及设计家们设计的风格独特的椅子而闻名于世。Vitra 设计博物馆的这个网站大胆的使用了色彩分割来构成整个页面。页面内的窗口设计搭配高纯度色块,像这样独特而巧妙的表现,的确给浏览者带来一种新鲜的感觉。虽然这个网站的信息量不是很大,但它的设计却使我们叹服。
  
  大量的窗体结构设计,并且各个窗体都有一定的含义,随着内容的变化各窗口的色彩与包含的图像也都发生相应的变化,整个网页页面构图和整体视觉语言的表现的确是非常秀丽(如图 2-3)。由此看出,赏心悦目的页面色彩画面能刺激观者产生强烈的视觉冲击力,延长浏览者对页面的注目时间,从而把网页信息内容快捷而完整地传达给受众。
  
  总之,在网页设计表达上,灵活运用文字、图片、色彩等视觉语言之间的关系和特点,体现网页内容浏览的最佳视域,使其产生自然流畅的视觉导向,通过形式美法则的运用,使元素之间形成主次、强弱、大小、虚实、均衡的有效秩序,流畅自然的页面空间布局。使我们在浏览信息的同时可以完美体验视觉效应带来的视觉享受。
返回本篇论文导航
相关内容推荐
相关标签:
返回:网页设计论文