网页的基本视觉元素
网页设计是指在网页制作中运用平面设计的基本视觉元素进行合理的组合构成,从而达到信息传达和审美的目的。网页设计中涉及的视觉元素主要包括网站标志、文字、图形和图像、色彩等。各视觉元素及其组合构成方式,是网页设计准确传递信息以及符合视觉审美规律的基本要求。在设计过程中,设计师必须遵循构图的形式美法则,才能设计出更合理美观的信息传达形式。美的形式不仅可以感染受众,还能使人们产生良好的形象记忆,从而更有效地达到表现网站主题内容的设计的。
2.网页的版式风格设计
网页是网站构成的基本元素,而网页的精彩与否与其版式风格是紧密相关的。
(D网页的风格定位
网页设计首先要考虑风格的定位。任何网页的风格都由其主题内容决定,只有形式与内容达到完美统一,才能实现更好的宣传效果。目前网站的应用范围曰益扩大,几乎涉及所有的行业,归纳起来大体可分为:新闻机构、政府机关、科教文化、娱乐艺术、电子商务、网络数码、医疗保健等。不同行业的网页,应体现出不同的风格。例如:政府机关的网页风格一般较严谨庄重,而娱乐行业则活泼生动,文化教育类的风格则高雅大方,等等。网页风格的形成主要依赖于网页的版式设计和页面的色调处理,以及图片与文字的组合形式等,因此,网页的设计和制作者要具有一定的美术素质和修养。
(2)网页的版式设计
网页的版式设计,是指在有限的显示器屏幕空间上将视听多媒体元素进行有机的排列组合,是一种区别于传统媒体的具有独特风格和艺术特色的视听传达方式。网页在传达信息的同时也使浏览者产生感官与精神上和谐的美的享受。为使网页达到最佳的视觉效果,设计师需要反复推敲网页版式的合理性,使浏览者有一个流畅的视觉体验。
网页的版式设计通常包括:视觉元素及其组织形式、页面间的转场以及网站的导航形式等。
"视觉元素的组织"包括元素的大小和数量、表格的布局、散点组合与块状组合、主题形象的体现、留白效果的表现、图与文的关系、曲线与直线的组织、水平线与垂直线以及斜线的比较,等等。根据不同的组织形式,可以将网页的版式大致划分为以下几种类型:骨骼型、满版型、分割型、中轴型、倾斜型、对称型、焦点型、三角型、自由型。
骨骼型
网页中骨骼型是一种规范、严谨的分割方式,类似于报刊的版式。常见的网页骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。通常以竖向分栏居多。这种版式给人以和谐、理性的美。
骨骼型版式常为综合门户、新闻媒体类网站所采用。
满版型
满版型页面以图像充满整版。主要以图像为诉求点,可将部分文字置于图像之上。视觉传达效果直观而突出,给人以生动大方的感觉。
满版型版式被各种网站所采用,其中以韩国网站居多。
图2-2教育机构网站采用实体图为背景进行满幅构图,丰富的画面给人以轻松、活泼、向上的感受。
图2-3采用卡通图画作背景,导航形式与背景内容融为一体,形式统一,感觉轻松自然。
图2-4色彩鲜明,内容形式活泼,整个画面充满了孩童般的阳光气息,海面、白云元素的出现,使画面更添空间感。
分割型
分割型版式指把整个页面分成上下或左右两部分,分别安排图片或文字内容。两部分形成对比,使图片部分感性而具表现力,文字部分则理性而具说服力。可以调整图片和文字所占的面积比例,来调节对比的强弱。如果图片比例过大,文字字体过于纤细,段落疏松,会造成视觉心理的不平衡,显得生硬。如果通过文字或图片将分割线虚化处理,就会产生自然和谐的效果。
分割型版式常被各类网站所采用。
图2-5图片与文字分割为上下两部分,图片一目了然,突出网站性质,文字设计清新淡雅,给人以轻松舒适的感觉。
图2-6以象征主题内容的高品质图像为主,色彩鲜亮夺目,突出健康食品的特征。
图2-5图片与文字分割为上下两部分,图片一目了然,突出网站性质,文字设计清新淡雅,给人以轻松舒适的感觉。
图2-6以象征主题内容的高品质图像为主,色彩鲜亮夺目,突出健康食品的特征。
图2-7以火炬的形象为中轴线划分整个页面,卷曲的背景形式给人以较强的空间感。
图2-8用反差较大的背景色将页面一分为二,突现产品性能的实体图像,使页面更显生动。
倾斜型
倾斜型版式是将页面主题形象或多幅图片、文字作倾斜编排,形成不稳定感或强烈的动感,引人注目。
倾斜型版式为各类网站所采用
图2-9色彩协调,边缘淡化,倾斜的页面显得轻松悠闲,体现了该网站的诉求特征。
图2-10倾斜的画面形式突出网站的主题,增添动感,强烈的艺术处理效果、斑驳的边缘使网站突显个性。
图2-11图片与文字内容均采用倾斜式,加以鲜明强烈的"可口可乐"元素,使画面更具动感,刺激人的感官。
对称型
对称型版式的页面给人稳定、严谨、理性的感觉。对称分为绝对对称和相对对称。一般采用相对对称的手法,以避免呆板。左右对称的页面版式比较常见。四角型对称也是其中一种,指在页面四角安排相应的视觉元
图2-12以健康、明快的嫩绿色为背景将画面上下分割,文字与图片的结合,增添了真实感和趣味性。
图2-13红黑两色将画面分为左右对称的形式。不但背景对称,画面图像也相对对称,突出了页面主题的气氛。
焦点型
焦点型的网页版式通过对浏览者视线的诱导,可以使页面产生强烈的视觉效果,如集聚感或膨胀感等。焦点型分三种情况:
中心一一将图片或文字置于页面的视觉中心。向心_视觉元素引导浏览者的视线向页面中心聚拢。
离心一一视觉元素引导浏览者的视线向外辐射。焦点型版式为各类网站使用。
图2-14视觉元素环绕光盘图形,引导浏览者的视线,色彩活跃,体现了网站的主题特征。
图2-15利用文字元素组成焦点形式,引导浏览者的视线向外辐射,富有趣味性。
图2-16利用浏览者操作鼠标带动图片形成视线引导的强烈效果,加以丰富的色彩,使画面更具动感、现代感,刺激人的感官。
三角型
三角型版式指网页各视觉元素呈三角形或多角形排列。正三角形最具稳定性,倒三角形则可产生动感。侧三角形构成一种均衡版式,既安定又有动感。
三角型版式各类网站所采用。
图2-17利用色彩划分构图,侧三角形构成一种均衡版式,既安定又有动感。
图2-18利用三块版面将整个界面划分成三角构图,整体显得稳定、均衡。
图2-19将两个三角形分别放置在呼应的对角上,配以标志及导航,处理得当,突显主题内容,使画面更具动感、现代感。
自由型
自由型版式的页面具有活泼、轻快的气氛。
自由型版式也可应用于多种网站。
图2-20自由组合的活泼版式,夸张的人物形象,有趣的导航悬挂其中,这样的搭配组合,让浏览者乐于接受。
以上介绍的版式基本类型并不是固定不变的,在实际设计中,设计师可以根据网页所要传达的主题内容来灵活地变化版式。在设计前要认真分析网站的定位,在设计中要灵活把握版式结构,才能更好地达到设计目的。