网页的版式设计
在网页设计中根据特定的主题和内容,把文字、图形图像、动画、视频、彩等信息传达要素界定在一个范围内,有机的、秩序的、艺术性的组织在一起,形成美观的页面并不是容易的事。由于多数专业的计算机技术人员缺乏艺术设计的能力,致使许多网页一直都是按固定的格式来完成,只是在文字内容上有所变化,所以使很多网页看起来千篇一律,缺乏个性。为了让网页更具艺术魅力,必须加强制作人员的艺术素养,将艺术与技术有机的结合起来,使网络呈现更绚丽的彩。
网页的版面设计应从造型、视觉心理及版式构成几方面入手。
一、版式设计的造型
一亩地是几米x几米 在版式空间中标题、内容、主体图形、调、视觉中心、背景和留白都是造型的最基本元素,将这些基本元素在800*600像素或1024*768像素的版面中有机的结合起来就是设计的过程。网页版式设计常常借助多种形式的框架(骨骼),规则的框架与不规则的框架,可见的
框架与不可见的框架,同时还要与文字样式、调等因素紧密联系起来。
网页界面设计不同于报纸、杂志等版面的设计,它是动态的、变化的版面。多数人的显示器分辨率为800*600像素或1024*768像素,我们设计版面时就应以800*600像素为标准,除去滚动条所占的20像素,安全宽度应控制在780像素以内,这样才能浏览到全部的横向页面内容,垂直方向上,页面是可滚动的,版面的长度一般不作限制,但是一些较正规的网站要求滚动不超过3屏,针对这样动态的版面空间,设计起来就要存在较大的难度。为此,网页设计师应采取一些相应的对策:
1.运用自适应宽度技术。即在版面宽度超出800像素时,页面内容自动伸缩,充满整个版面,这样的技术就要求版面设计也要具有适应性。
双屏显示设置1024*768像素环境下的页面效果
800*600像素环境下的页面效果
2. 运用背景来适应不同分辨率的版面效果。
1024*768像素环境下运用背景填充空白部分 800*600像素环境下
3. 使版面保持固定尺寸,禁止滚动出现,增强对版面的控制,这样的方案非常适用于设计性较强的图形界面。
通常网页中还会有一些动态的信息,不仅活跃了画面气氛,还可通过不同内容的替换,增大信息量,不过动画效果的运用要合理,千万不能泛滥,造成喧宾夺主的效果,而且动画的形式与内容要与网页主题相适应,政治与教育等内容比较严肃的网页在动画应用上更是要慎重。
二、页面中的点、线、面及留白的处理
版面设计中,文字、图形图像根据其在画面中的大小、方向、排列可以视为点、线、面等构成要素,同时文字又有标题和正文之分;图片也有主次之分,所以在网页设计时都要加以考虑。图片与文字,还有动画这些信息都需要同时展示给观众,不加设计的简单地罗列在一个页面上,往往会使人感觉粗制滥造,使人不愿继续停留,所以必须要跟据主题内容的需要,将传递信息的图片和文字按照一定的次序和关系进行合理的编排和布局,使整个页面和谐统一,充满艺术性。
点、线、面、视觉中心、留白等元素所处位置不同,对观众的视觉和心理会产生的作用也不同。当设计主体处于版面的几何中心时,给人的感觉是平衡、稳重,不过相对就会显得呆板、缺乏灵活性;如将设计主体向一侧稍作偏移,既可打破了原有的稳定与平衡,形成一个动向,画面因此而造成不稳定趋势,这时需要在适当的位置添加平衡元素,使画面在变化中求稳定。
准考证号查询入口 下图是奥迪公司的一个宣传网页,页面将最为稳定的几何中心作为视觉中心,画面中的文字标题与按钮却安排在页面的偏左侧,冲破了画面的呆板构图,为取得平衡,右下角的奥迪标志起了重要的作用,同时还突出了页面的宣传重点。
天仙配演员表图
1.点的作用移动网上充值
在空间中单一的点有集中醒目的特点,给人明确、坚定、充实的感觉。所以可利用点的这一特性强调将要重点表现的对象。可利用“点”符号,对文字信息加以强调,也可采用点状图形图像形式加以提示。
可口可乐宣传网页中坐下部分的三张小图片,在这个页面中实际上起着点的作用,以图片的形式强调后面的信息,如图。
2.线与面的作用
线与面不仅能作为造型元素,同时还是划分空间的有力武器。由线和面形成的对空间的分割与遮挡使空间的层次得以延伸,形成距离美感。
下面一张普通的图片经线、面分割后,形成了调、面积等方面的对比关系,使画面的层次分明,突出了中心内容。
>河国荣
发布评论