多语言展示
当前在线:472今日阅读:84今日分享:32

谈网页版面设计

版面设计也可以理解为布局设计,就是我们在浏览器上看到的一个完整的页面。我们如何将所有要体现的内容完整的分布布局,达到一种视觉效果,这就叫做版面设计。
方法/步骤
1

1、结构的搭建、布局(构思)       版面结构是指一种能够让浏览者清楚、容易地理解作品传达的信息的东西,一种将不同介质上的不同元素巧妙的排列方式。再次,就是要正确看待建设网站的内容,不能把所有的网站都以一种固定样式进行制作,而是要根据具体的内容来安排所制作的网页版面格式。比如说:娱乐性的网站要求格式千变万化,而教育类网站总体上要求要单调一点较好。有些页面是很吸引人的、而有的呢却无法让人们停留他们的眼球,那就是网页的版面是否遵从读者的心理。这里网页版面设计包括网页的版面布局、版面的设计原则、版面设计的美化。

2

2、网页的布局分为:1.页面尺寸:页面尺寸和显示器大小及分辨率有关系,自己设计网页的整体宽度不能超过显示器的大小。  (1)分辨率在1024*768的情况下,页面的显示尺寸为1007*600;  (2)分辨率在800*600的情况下,页面的显示尺寸为780*428;  (3)分辨率在640*480的情况下,页面的显示尺寸为620*311。2.图像的运用:图形与文本的接合应该层叠有序,有机统一。虽然,显示器和浏览器都是矩形,但对于页面的造型,你可以充分运用自然界中的其它形状以及它们的组合:矩形,圆形,三角形,菱形等。3.图像的面积:图像的大小不仅决定着主从关系,也控制着页面的均衡与运动。(1)大小对比强烈,给人跳跃感,使主角更突出;(2)大小对比减弱,则页面稳定、安静。    这是因为,访问者在浏览页面时,首先会注意到大图像,然后再看到较小的图像,这种由大到小的引导,使浏览者的视线在页面上流动,便造成一种动势,使页面活泼起来。4.图像的数量:图像的数量是根据内容决定的。只用一幅图像,会使内容突出、页面安定。增加一幅图像,页面会因为有了对比和呼应而活跃起来。再增加一幅,则更加热闹、活泼。但是,限于目前网络的传输速度,使用图像时一定要谨慎,大的图像会降低页面显示速度,即使是小图像,如果运用数量过多,同样会使页面下载速度变慢。随着网络环境及技术条件的改善,这种情况已经有了很大的改观。5.图像与背景的关系:网页图像与背景是对比和统一的关系。也就是说,图像与背景在和谐统一的基础上,应存在一定的对比,以使主要图像更加突出。如精密的相机镜头以粗糙的岩石为背景,明亮的文字以深邃的星空为背景,或者使用没有背景及陪衬物的退底图像,周围留出大面积空白,都是利用对比对主体形象起到突出作用。6.图像在长页面中的应用 :网页一般都是纵向的(也有特意设计成横向滚屏的),其长度从一屏到三屏不等,有时甚至更多。访问者在浏览页面时,通过拖动垂直滚动条使网页一屏一屏地显示,但这并不意味着我们可以将整个页面分割开来,孤立地进行每一屏的设计。页面的整体感是建立在形象的启承关系上,尽管页面被分割成几屏来显示,但图像或文字的延续性应使浏览者得到完整、统一的视觉感受。设计者所要做的就是进行通盘考虑。

3

3、文字的运用:1、显示在页面上的纯文字,没有特殊字体,默认是宋体或仿宋。当然有些网站特别强调设计感觉或添加一些文字,比如微软字体,这个需要在样式表里面进行声明。注意:如果访客没有安装该字体,显示出来还是宋体。2、用图片的形式来表现。意思是特殊字体做成图片的形式,插入进来。注意:自己电脑里面要安装一些特殊字体。微软系列、汉仪系列、方正系列、颜色:关于字的颜色用灰度是比较多#333、#666。显得比较干净些。字号大小:页面上出现比较多的是12px、14px、16px。借助字号大小,可以体现出层次感。(1)文字跳动(2)文字中太多留白

4

4、平衡性原则:版面构图的基本元素是点、线、面,其中单个的字符是点,由字符组成的行是线,由行组成的段落是面。线和面的运动方向可以归纳为水平、垂直和倾斜三种形式。水平和垂直给人以安静和固定的感觉,倾斜则具有运动感。水平、垂直和倾斜组合起来使用会给版面带来丰富和生动的效果,从而使版面在整体上保持平衡的前提下具有动感和变化。如有的期刊把文章的篇名、作者、摘要、关键词等前置部分采用右顶格排(而不是习惯上居中排) ,这种构图上的适度倾斜可以给读者在视觉上产生“顺势而下”的流畅感觉。

5

5、空间间隙:       从样式表可以设置填充(内部的)和间距(外部的)都可以做出空隙。我们需要合理的空隙,会让层次更清楚。(同时还可以避免不同的浏览器出现的对间距理解的不同带来的问题)不合理的空隙会显得“挤”或者“太空”有这样的感觉。       网页中版式的节奏感及韵律,来源于排版中的疏密的间隔安排。在网页中可以通过一系列的重复和固定的间隔来建立一种视觉和谐的美感,如在一些字体大小,行距、模块与模块间的距离等等的制定。纵向的节奏在网页设计中是比较运用广泛且明显的,如大部分资讯型的站点。网页纵向节奏感是为网站设定一个纵向的单元高度,就好比我们的记事本那样,每一页都是布满了固定高度的线。如果文字正好处于单元高度上,那版面就能获得连贯的纵向平衡和节奏感。按纵向垂直节奏排列的设计更加容易扫描或阅读,因为它使内容的“出现”更加有规律。这个方法不仅适用在局部的文字内容区,对于整个页面的内容排布也是有用的。

6

6、网页版面设计的统一性(颜色):关于颜色的基调与搭配的问题:logo、主导航、标头的颜色。基调:基本色调。在基本色调的基础上进行搭配。一般网站在3个颜色之间进行搭配使用。    统一是指事物的相继出现,并带有联属关系的属性。这里所讲的统一是指网页中应该出现的文字、图片等按照一定的规律有机的结合。网站页面的版面设计要求有统一的设计标准、统一的色彩和统一的风格,由此加深别人对此风格的认同。

7

7、网页版面设计的广告性:网页版面的广告性就是该网页版面设计的醒目程度,它是表现网页内容的重要手段之一,被视为一种促销手段、一种说服艺术。在目前,网页的广告大致有三种表现形式:   1、内容直接展示型;   2、醒目展示型;   3、注重版面文字的潜在力。

推荐信息