当前位置:
文档之家› 网页设计-02-网页版式设计说明
网页设计-02-网页版式设计说明
两端均齐 文字从左端到右端的长度均齐,字群形成方方正正的面,显得 端正、严谨、美观。
居中排列 在字距相等的情况下,以页面中心为轴线排列,这种编排方式 使文字更加突出,产生对称的形式美感。
左对齐或右对齐 左对齐或右对齐使行首或行尾自然形成一条清晰的垂直 线,很容易与图形配合。这种编排方式有松有紧,有虚有实,跳动而飘逸, 产生节奏与韵律的形式美感。左对齐符合人们阅读时的习惯,显得自然;右 对齐因不太符合阅读习惯而较少采用,但显得新颖。
除了对于可读性的影响,行距本身也是具有很强表现力的设计语 言,为了加强版式的装饰效果,可以有意识地加宽或缩窄行距,体现 独特的审美意趣。例如,加宽行距可以体现轻松、舒展的情绪,应用 于娱乐性、抒情性的内容恰如其分。另外,通过精心安排,使宽、窄 行距并存,可增强版面的空间层次与弹性,表现出独到的匠心。
将文字图形化、意象化,以更富创意的形式表达出深 层的设计思想,能够克服网页的单调与平淡,从而打动人 心。
9
2.1 文字的格式化
西南交通大学
图3:将文字放大,不仅实现了字意与语义的功能,而且具备了视觉冲击力。
10
2.1 文字的格式化
西南交通大学
❖ 文字的整体编排
(2)文字的叠置
文字与图像之间或文字与文字之间在经过叠置后,能 够产生空间感、跳跃感、透明感、杂音感和叙事感,从而 成为页面中活跃的、令人注目的元素。虽然叠置手法影响 了文字的可读性,但是能造成页面独特的视觉效果。这种 不追求易读,而刻意追求“杂音”的表现手法,体现了一 种艺术思潮。因而,它不仅大量运用于传统的版式设计, 在网页设计中也被广泛采用。
13
2.1 文字的格式化
西南交通大学
图5:通过文字的大小、明暗、疏密以及叠置等变化,产生杂音感,起到较好的视觉引导作用。
14
2.1 文字的格式化
西南交通大学
❖ 文字的整体编排
(4)文字编排的四种基本形式
页面里的正文部分是由许多单个文字经过编排组成的群体,要充分发挥这 个群体形状在版面整体布局中的作用。
11
2.1 文字的格式化
西南交通大学
图4:由字符(ASCII码)组成的网站标志。
12
2.1 文字的格式化
西南交通大学
❖ 文字的整体编排
(3)标题与正文
在进行标题与正文的编排时,可先考虑将正文作双栏、 三栏或四栏的编排,再进行标题的置入。将正文分栏,是 为了求取页面的空间与弹性,避免通栏的呆板以及标题插 入方式的单一性。标题虽是整段或整篇文章的标题,但不 一定千篇一律地置于段首之上。可作居中、横向、竖向或 边置等编排处理,甚至可以直接插入字群中,以新颖的版 式来打破旧有的规律。
西南交通大学
7
2.1 文字的格式化
西南交通大学
❖ 文字的整体编排
页面里的正文部分是由许多单个文字经过编排组成的群 体,要充分发挥这个群体形状在版面整体布局中的作用。 从艺术的角度可以将字体本身看成是一种艺术形式,它在 个性和情感方面对人们有着很大影响。在网页设计中,字 体的处理与颜色、版式、图形等其他设计元素的处理一样 非常关键。从某种意义上来讲,所有的设计元素都可以理 解为图形。
3
2.1 文字的格式化
❖字号、字体、行距
西南交通大学
粗体字强壮有力,有男性特点,适合机械、建筑业等内容;细体字 高雅细致,有女性特点,更适合服装、化妆品、食品等行业的内容。 在同一页面中,字体种类少,版面雅致,有稳定感;字体种类多,则 版面活跃,丰富多采。关键是如何根据页面内容来掌握这个比例关系。
最适合于网页正文显示的字体大小为12磅左右,现在很多的综合 性站点,由于在一个页面中需要安排的内容较多,通常采用9磅的字 号。较大的字体可用于标题或其他需要强调的地方,小一些的字体可 以用于页脚和辅助信息。需要注意的是,小字号容易产生整体感和精 致感,但可读性较差。
网页设计者可以用字体来更充分地体现设计中要表达的情感。字 体选择是一种感性、直观的行为。但是,无论选择什么字体,都要依 据网页的总体设想和浏览者的需要。
行距可以用行高(line-height)属性来设置,建议以磅或默认行 高的百分数为单位。例如:{line-height:20pt}、{line-height: 15:通过文字大小疏密进行处理,突出重点,层次分明。
6
2.1 文字的格式化
图2:上、中部文字编排疏散, 传达出轻松愉快的感觉。 下部的文字编排采用较小的行距, 与上面的编排方式形成对比, 丰富了版面空间层次。
网页设计
杨柳
西南交通大学
1
第二章 网页版式设计
❖ 文字的格式化
字号、字体、行距 文字的整体编排 文字的强调 文字的颜色
❖ 图像
图像的格式 图像的形式 图像的编排 图像的处理 图像在长页面中的应用
❖ 版式的基本类型
西南交通大学
2
2.1 文字的格式化
西南交通大学
❖字号、字体、行距
字号大小可以用不同的方式来计算,例如磅(point)或像素 (pixel)。因为以计算机的像素技术为基础的单位需要在打印时转换 为磅,所以,建议采用磅为单位。
4
2.1 文字的格式化
❖字号、字体、行距
西南交通大学
行距的变化也会对文本的可读性产生很大影响。一般情况下,接近 字体尺寸的行距设置比较适合正文。行距的常规比例为10:12,即用字 10点,则行距12点。这主要是出于以下考虑:适当的行距会形成一条 明显的水平空白带,以引导浏览者的目光,而行距过宽会使一行文字 失去较好的延续性。
8
2.1 文字的格式化
西南交通大学
❖ 文字的整体编排
(1)文字的图形化 字体具有两方面的作用:一是实现字意与语义的功能,
二是美学效应。所谓文字的图形化,即是强调它的美学效 应,把记号性的文字作为图形元素来表现,同时又强化了 原有的功能。作为网页设计者,既可以按照常规的方式来 设置字体,也可以对字体进行艺术化的设计。无论怎样, 一切都应围绕如何更出色地实现自己的设计目标。
从加强平台无关性的角度来考虑,正文内容最好采用缺省字体。 因为浏览器是用本地机器上的字库显示页面内容的。作为网页设计者 必须考虑到大多数浏览者的机器里只装有三种字体类型及一些相应的 特定字体。而你指定的字体在浏览者的机器里并不一定能够找到,这 给网页设计带来很大的局限。解决问题的办法是:在确有必要使用特 殊字体的地方,可以将文字制成图像,然后插入页面中。