资料
科技信息
计算机与网络
网站建设中的版式设计
南京化工职业技术学院 石艳红
[摘 要]版式设计是网站页面设计的核心,通过调配图片、表格、照片及版面等诸多元素,使之成为一种沟通的语言。排版设计最重要的原则是,设计者要把观点和艺术内涵清晰地传达给观者,以便使版面上的思想能进入观者的心灵。[关键词]网站建设 版式设计 网页设计
0、引言
一般多媒体网站含有以下几种页面元素:文字和旁白;图案和插画;静态的照片;图表和图形;视频和动画;音乐和音效。
版式设计就是要将上述构成要素有机地组合,表达出美与和谐。虽然网页设计不等同于平面设计,但它们都要讲究编排和布局,有许多相通之处,应充分加以利用和借鉴。
一般来讲,网页设计类软件的发展趋势是给设计师提供更大发挥空间和对页面元素的更强劲的控制能力,页面的美观与否,依赖于技术而并非决定于技术,学习和掌握一定的艺术原理并应用于实践,是设计人员成功的必经之路。
1、版式与网站设计
每个人都可以判断美与丑,和谐与冲突的差异,别于知识性的思考,可称为“形象思维”。,用“形象思维”来思索点、线、,:、、对比、比例、平衡、调和、律动。
1.1渐变“渐变”就是逐渐的改变,并在渐变的过程中有一定的秩序与规律。
任何构成元素的渐变,都有其开始与终结,或由一方开始,经渐变又回复原来的循环现象。例如形象渐变,可从某一形状开始,逐渐变化成为另一形状,或由另一形状又逐步回复到某一形状。无论是开始或终结,在渐变的设计中均可成为设计上的焦点,且在开始与终结的整个重复过程中,均会造成节奏感。
渐变形成的方式可由上而下、由左而右、或由中央发射、或作多元化的发展。渐变的表现形式主要包括:自然形象渐变、形状渐变、大小渐变、位置渐变、方向渐变、色彩渐变(Photoshop中有专门的渐变工具)
1.2对称
视觉上,以一个点或一条线为基准,上下或左右看起来相等的形体,称为“对称”。“对称”具有相称、均齐、均整的意思。左右对称的形体向来都被认为是具有安定机能的。
“对称”的表现形式包括:线对称、点对称、感觉对称。
通常对称的图形具有单纯简洁的美感以及静态的安定感,但容易流于单调和呆板。一般来说,单纯的对称图形具有大方、强力的性格;细密的对称图形则能增加作品的充实感,许多商品设计都基于特性而设计。
1.3对比
将相对的要素放置在一起,相互比较,而形成两种抗拒的紧张状态,称为“对比”。造成相对排斥性质的要素,即称为“对比要素”。“对比要素”包含的范围非常广泛,涵盖了造型、色彩、质感、方向、面积等页面构成的主要因素。圆形、三角形、方形是属于造型的对比,但红砖、金砖两者具有相同的造型也具有对比的性质。对比现象的强弱与否,依赖对比要素的配置关系。一般而言,不同的要素结合在一起,彼此刺激,会产生对比的现象,这使得强者更强、弱者更弱;大者更大、小者更小。“对比”的表现形式包括:线形的对比、形状的对比、份量的对比、明度的对比、彩度的对比、色相的对比、质地的对比、动态的对比、位置的对比
1.4比例
在造型上所谓的“比例”是指长度或面积这类可以度量的数据之间的一种比率,它描述的是部分或部分与总体之间的关系。
其中最重要的比例就是“黄金比例”。古希腊人把“黄金比例”认为是最完美的比例而广泛应用于造型中。
它的基本方法是把一条线分割成大小两段,小线段与大线,其数值通常近似认为是0.618。这种比例分割方法就是。在设计建筑物的长度、、“黄金比”来处理,.是指几个力量相互保持的意思,也就是说是把两种以上的构成要素,互相均匀地配置在一个基础的支点上,以保持力学上的平衡而达到安定的状态。
在造型的秩序中,“平衡”是极重要的一项。由于平面造型的作品并不是真正讲究实际的重量关系,所以“平衡”一词在平面造型的世界中,应当是属于视觉的平衡。这和力学的平衡
、数学的平衡以及其他学科中所讲的“平均”是不一样的。
对“平衡”来说,有对称和非对称平衡之分。在“平衡”应用练习中,着眼点在于如何求得视觉上的安定与心理上的平衡。例如形态、色彩在画面中所具有的重量、大小、明暗、强弱等特征,都必须保持平衡状态,才会令人产生安定的感觉。
1.6调和
当两种构成要素共同存在时,若特征差距过大,即造成“对比”。若两种构成要素相近,则对比刺激变小,可能产生共同秩序使两者达到调和的状态。如黑与白是一种强烈对比的颜色,而存于其中的灰色便是两者的“调和”。
“调和”在视觉上可使我们产生美感。因此,调和的原则一直是人们关心的课题。为了达到“调和”,各要素间的统一仍是必要的,例如色相的配合、色调的配合以及明度的配合,都能产生“调和”。在造型上如线的粗细与形状的大小均会影响调和。
1.7律动
凡是规则的或不规则的反复排列,或属于周期性、渐变性的现象,均是“律动”。它具有抑扬顿挫而又有统一感的运动现象。
2、设计原理综合应用
2.1网页设计中的基本概念
由于互联网具备同时传送文字、动画、图形、声音等多媒体的能力,使之成为最多才最多艺的媒体。很多公司企业的网站都会提供一个“首页(homepage)”。读者根据首页的指引可以进入其他的“页面(page)”,了解更多相关的信息。
通常“首页”包含了公司的商标、经营理念和公司的背景信息、产品信息以及新闻等。
对一个在互联网上提供信息的公司或企业来说,包括首页及其他页面,总称为“网站(website)”。
2.2网页形式与内容的统一
编排的形式与内容的统一,就是在进行页面编排时,形式语言必须符合页面的内容,能够体现内容的丰富含义。
—196—
资料
科技信息
计算机与网络
形式多变的版式具有丰富的表现力,将一个无生命的网页变成充满活力的生命体。基于内容之上运用不同的版式,能够形成不同的趣味和造型效果,有利于创造风格新颖独特的页面,在设计实战中需要注意单纯与秩序、对比与调和、对称与平衡、节奏与韵律以及留白等问题。
2.3规划网站结构和导航
对于一个网站,大部分浏览者有三个问题:我在哪儿?这里有什么东西是我所需要的?我怎样才能找到它们?也就是说,一个设计优秀的网站首先应该对这三个问题作出令浏览者满意的答复。读者如果花费很多精力在你设计好的网站里寻找,那可不是一件好事,除非你的站点是关于古典迷宫游戏的内容。
2.3.1“深”、“浅”的位置安排
当你在组织一个网站的信息时,你可以在第一层次的导航结构中设置比较多的选项,以便用户不必过于深入;另一种方式是一开始就将网站划分为几个“子站点”,并将相关条目放到子站点之下。这两种模式可以根据网站的信息门类和信息总量来选择,正确的做法是应该保证浏览者通过不超过三次点击就可以到达站点任何感兴趣的地方。
2.3.2其他注意事项
如果希望站点具有更生动、更方便的界面结构,设计者还需要考虑以下几点:对于网站中可以单击、拖动或编辑的对象,注意用一致的方式指明;同的形状、功能和位置。;,请用表示;进行处理时,;允许浏览者犯错误和取消操作,设计不应过于刻板。
2.3.3页面内容的组织原则2.3.3.1建立秩序
我们首先将页面涵盖的内容依整体布局的需要进行分组归纳,进行具有一定内在联系的组织排列,反复推敲标题文字措词、图形与整体版面的关系,找到适合它们的位置(或主或从),创造秩序使版面的各构成元素成为丰富多彩而又简洁明确的统一整体。
另一方面,创建秩序也要求版面分布具有条理性。页面排版要求符合浏览者的阅读习惯,心理秩序和思维发展的逻辑认知顺序。例如一般在页面的上面或左面安排导航或目录,就是为了符合人们平时阅读养成的习惯。
2.3.3.2中心突出
当许多构成元素位于同一个页面上时,必须考虑浏览者的视觉中心,这个中心一般在屏幕的中央,或者在中间偏上的部位。因此,一些重要的文章和图片一般可以安排在这个部位,在视觉中心以外的地方就可以安排那些稍微次要的内容,这样在页面上就突出了重点,做到了主次有别。
2.3.3.3相互呼应
较长的文章或标题,不要编排在一起,要注意安排一定的距离。对待图片的安排也是这样,要互相错开,大小之间要有一定的间隔,这样可以使页面错落有致,避免重心偏离形成的不稳定状态。
2.3.3.4清晰易读
在页面布置时也会有内容摆布的混乱出现,内容过分庞杂会产生反作用,消弱了整体的可读性,无法让读者抓住核心;没有考虑不同内容的空间框架、编排秩序以及在页面中所处的权重,就会没有流畅的视觉流程。
2.3.4应用线的形态意象构思版面线是点移动的轨迹,在移动中因方向、长短、宽窄的不同而形成不同感觉的线。一般的页面编排形式,都默认为矩形版式,其他形式都属于在此基础之上的变形。矩形版式四角皆成直角,给人很有规律、表情少的感觉,而其他的变形则呈现出丰富的情感体验。譬如锐角的三角形有锐利、鲜明感;近于圆形的形状有温和、柔弱之感。
曲线作为面的边界,显示了其独特的调节页面氛围的能力。相同的曲线,也有不同的表情,由规规矩矩画出来的圆有硬质感,可是徒手画出来的圆就有柔和的圆形曲线之美,借助运笔的力量可以创造富有生命力的形象。
3、版式设计实战3.1整体版面
3.1.1版面尺寸规范
设计面向主流用户的站点通常以屏幕分辨率800×600为基准,具体设计规范:页面宽,不超过一屏;页面高,不超过三屏。即分辨率为8003600,实际尺寸为7783434。
对于用户群体特殊的站点,,用1024×768,,不过很少有。
.。.1.3重要信息
重要信息的呈现方式有如下几种:
重要信息应置于标题之后,首页链接点或内文之前;重要信息可以置于前端明显或突出的图像强调;重要信息可以运用不同颜色区块强调。3.1.4关于讯息的连贯性
保持固定的版式,求取统一感,方便阅读与搜寻。人的视觉对从右上到左下的流向较为自然。编排文字时,将右下角空着来编排标题与插画,就会产生一种很自然的流向。如果把它逆转就会失去平衡而显得不自然。这种左右方向的平衡感,可能是和人们惯用右手有点关系吧!
3.2使用图形的注意事项
在页面中使用图形要力求清晰可见、意义简洁。对于图形内包含文字的情况,要特别注意不要因压缩文件而导致无法识别。同时图形内文字的装饰不要过分花哨,妨碍识别。
运用背景图片时,背景与主体明度对比在3:1到5:1之间为宜。一般淡色系列的背景有助于整体和谐,而过于清晰的图片背景会影响文字识别。
3.3使用线框
线框多用在需对版面个别内容进行着重强调时,另外对诸多内容进行区块划分以建立秩序也会起到很大作用。线框在页面中通常都起强调和限制作用,使页面中的各元素获得稳定与流动的对比关系,反衬出页面的动感。
在页面设计中,用积极的线框限定空间,会使被限定的各要素产生紧张感而引起浏览者注意。线框内局部内容与整个页面相对独立,又使整个页面在布局中获得清晰的空间关系。
4、结语
要提高版面设计的水平,第一是要多看,多看成功之作
,分析一下为什么要这么做。一个页面要设计得好,要花费大量的精力,制作一个重要页面时,要花更多的时间来进行版面构思。第二是模仿。模仿是提高水平的捷径,模仿得多,慢慢懂得哪些是美的,哪些是合理与不合理的。在你上网浏览时,把那些你认为不错的站点收集起来,仔细推敲琢磨。
—197—
