请输入您要查询的百科知识:

 

词条 页面编排
释义

所谓编排就是将文字、插图、照片、图案、记号等平面造型的构成要素,给予视觉的塑理与配置,使其成为具有最大诉求效果的构成技术。编排的工作是处理这些不同作用的构成要素,做出均衡、调和、动态、视线诱导、空白版面、结构、比例等的关系设计,使其成为一个强有力的组织构成,给消费者提供正确而明快的信息。

网站页面编排的意义及目的

以报纸广告的编排为例:将构成报纸广告的商标、合成文字、插图、商品名、轮廊等造型要素,以及标题、副标题、说明文字、口号、公司名、地址等文字部分的内容要素,适当地安排于指定范围(版面、画面、篇幅)内,使它在同一画面上互相衬托,充分发挥其最大”的广告效果。

在编排时,须注意下列两点:

1.把上述信息内容作最优秀的图形处理(平面设计)。虽然直观的成份较多,但决不可以单纯的美术问题去判断编排的价值,必须以规定的信息传达手段是否适当为评定准则。在此最重要的是先依照信息内容,变化编排要素。

这虽然没有一定法则,不过一般总是先充分理解信息内容,并考虑各要素之间的相对重要性,然后决定强调什么或减弱什么。就是根据商品特性、媒体性格及对方状态,判断出各要素的重要性而作出的编排。尽管报纸广告整幅版面的左上方乱了一点,但是以大“正”字及倾斜推出商品,还是构成有力的构图,是可取的编排。

2.提高消费者与广告内容之间的心理接触效果。这一点是否成功,决定于从广告的表现主题至创造出信息内容的瞬间因素。换句话说,编排的第一步是分析广告主题,其次是将分析的各点加以结合,创造出最佳的信息构成,以强烈而正确的传达方式感动消费者,使其在心理上留下良好印象与深刻记忆。

因此从事编排设计,必须充分考虑商品的特性、媒体性格以及对方状态等因素,再决定传达什么信息,宣传什么广告,推销什么产品。

网页设计与页面编排原则

(一)、网页设计经常面对的问题

原则上,一个 HTML 网页页面的配置,能够加强作者所企图表达的概念与目的。页面上的每一个元素,都会影响读者对页面上其他元素的解读,在看一个页面时,我们应该把整个组合看做是一个统一的整体,而非许多小单位的集合。在进行版面配置时,应把焦点放在版面的平衡与留白空间的处理,设计者应该根据图像与背景的关系、对比的关系、类似的原理、以及比例的关系,将整个空间以最有效的方式加以分配、组织。

1、版面留白量

设计者可以很容易地改变背景颜色,因此,当我们提到“空白”时,所指的就是背景颜色,或是所谓图像与背景的关系的背景部分。在一个页面的组合中,留白的部分和被置于其上的元素同样重要。就像乐章中的休止符,让听者能据知对音乐达成理解与鉴赏一样,留白的空间让页面有了格式,因此,千万不要忽略留白的重要性。在早期的 HTML 版本中,要随心所欲地安排版面配置还很困难,由于在处理行列与对齐上的技术困难,使得版面常常陷入一种不平衡的局面。你必须考虑到所有的留白,这并不是说你得填满所有的空白,而是,你必须把这些留白也一起纳入考虑,达成页面的平衡。

2、视觉平衡的考量

在安排页面上的诸元素时,你应该考虑每个元素之间的视觉比重,这个比重可以由物件的大小、亮度﹝深色物件比浅色物件重﹞、以及纹路或内文的密度。视觉对比也很重要,如果加以有效地运用,对比可以很快地抓住读者的注意力。但是如果元素之间的对比过大,则容易造成反效果,使整体失去和谐与平衡。另外,视觉上的谐调和对比一样重要,你必须考虑物件之间大小比例的关系,将每一个元素对其他元素作相对的评估,比如说,一个很大的物件如果跟一个小物件放在一起,它会显得更大,而影响到整体的平衡。

3、对称式的平衡

在设计一个 HTML 页面时,有许多方法可以达成平衡,其中最简单的就是那种规规矩矩或是对称的版面,比如说左右两半或是上下部分彼此相似,甚至有些设计者把页面上的每个元素向中央对齐。在某些情况下,这种设计方式可以有不错的效果,但是通常内文的易读性就会大大地降低。一般而言,一个对称式的平衡是属于静态的,而无法引导读者的目光去搜寻页面上的其他元素。另外还有一种平衡的方式则是非制式且不对称的。

4、不对称的平衡

一个不对称的页面结构必须藉由技巧性地安排不同视觉比重的各种元素来达成。例如,一段很长的文字就可以用一个深色的图形来平衡,一系列的小元素可以用一个大的元素来平衡。其变化的可能性是有很多的。一个不对称的平衡页面有时是经由设计者的天赋巧思所设计出来的,有时则是经过仔细的计算。初学者可藉由格线的辅助来设计页面的平衡。一个不对称或是非制式的组合方式可以使页面在视觉上显得较生动活泼。

5、缺乏平衡的问题

一般而言,一个页面会出现不平衡的情况,若不是因为技术上的限制,就是因为设计者缺乏慨念。目前软体的技术已能符合大部分格式设计的要求,因此很快地,设计者就必须为失败的设计负起全责。有时候设计者的意图是要制造出一种让人感到不安、不稳定的感觉,这时一个不平衡的页面也许就可以适当地传达出这种概念或感觉,但如果这种不平衡不是出于故意的安排,那么,这样一个页面会让你的网站功效大打折扣。

6、网页设计前后的一致性

一般而言,你不会只设计一页网页,而是将许多页面以一个主题为中心相互连结起来,因此,在开始设计时,你必须将整个 WWW 网站的方案做全盘考量。由于超媒体的便利性,我们都习惯只需用滑鼠轻轻一点,就能从某一页跳到另一页,而在这种情形下,视觉上的改变可能会让读者认为我们已从一个网站跳到另一个网站,通常我们当然不希望读者在我们的网站中,从一页跳到另一页时产生这种错觉。因此,你就得在你的页面之间建立一个统一性,例如使用一个固定的标题图示、一种特别的版面安排、或是一组特定的色系。记住,在考虑如何让你的页面具有一致性时,对这一致性做一点点的变化,会使你的网站更具有视觉趣味,并且使读者更有兴趣去浏览它。有时你也许会想要对你的页面设计作变化,让它不那么枯燥无聊,有时你也可能想要建立一个版面规格让每一页的内容配置都能保有一致性。

7、纸上设计与网页设计的比较

在设计 WWW 时,我们应记住的是,电脑的荧幕通常是宽大于高,这使得我们很难同时在电脑上和纸上作设计,几年前,有人预言一个无纸的时代即将来临,但到了今日,看起来我们的用纸量比过去有过之而无不及,无论电脑多么方便,人们还是习惯把网页列印出来看,如果你是以水平而非垂直的方向在扩展你的网页,那就会有些列印上的问题。有些浏览器会在列印前先把页面重新安排过,但是通常这也会破坏所有有趣的页面设计。因此,你必须了解,有些材料最好是以垂直的格式来表现,这样比较便于列印。

8、使用设计参考格线

在设计版面时,利用格线来安置物件的位置是一个蛮不错的建议。格线就像是隐形的路标,有助于在网站的页面中建立组织化的单元。许多的桌面排版软体中都附有标线以便于物件的对齐,有些编写网页的工具也会提供这类的工具,但一般的文书编辑器则没有。在这种情况下,你可以为你的页面画一个草图,一但你决定了所依据的格线,你就可以用这个架构去对齐你的图像与文字,让你的页面达到平衡。HTML 的分割页框的功能,则可以让你在页面上定义出不同的区 块,这使你只需更新有改变的元素即可,而不用每次都重新修改一整页。有些人可能会觉得使用格线会让画面的整体设计变得单调无趣,但其实如果运用得当的话,并不会如此。一但你建立了网页的架构,你就可以在这个格线架构下衍生出许多种安排物件的方式,并且每页之间在元素排列上的变化是非常重要的。一个元素可以占据一个或两个、甚至更多个区域,文字也可以放在一块本来被拿来放图像的区块,你可以为一个网站准备两个或以上的格线,然后依照每一页的内容做不同的应用,通常当一个网站中使用多个格线模式时,是为了要在页面转换之间,创造出视觉上的韵律感。

9、视觉焦点的安排

在完成了一个页面的编写之后,用浏览器开启它,往后站一步来看。不要读内文的文字,把你的眼睛闭上几秒钟,然后打开,看着你的 WWW 网页。页面上的哪个部分最吸引你的眼光?你目光的下一个目标又是哪里?试着去追溯你的眼睛浏览整个页面的轨迹。作为一个设计者,也许你会有些偏见,所以你可以找别人来帮你看看你的焦点与浏览路径是否适当。如果你的焦点在颜色对比、大小、密度或是色值上太过强势,那么读者的目光就会很难从上面移开,而其他的部份就会被认为是不重要的。但如果页面上的所有元素看起来都差不多,那们读者就很容易被搞糊涂,不知道该从哪里看起,也不知道下一步要看哪一项。无论如何,不管设计者是否是有意识地考虑到读者的目光,你都要记得,目光浏览的路径,也会影响到读者对这个网页的满意度与阅读经验。

(二)、适合内容的绘图

用在网页上的图形应该要支援并能够增强 HTML 文件的内容,在设计图形时必须考虑很多事情,包括技术上的限制到美学上的考量。技术上的限制虽然都已渐渐地获得解决,但是仍然不可忽视;而关于图像与用及设计的美学问题,则不会有太大的改变,我们今天所讨论的这些原则,将一直适用于大多数的应用实例中。

1、绘图与美术修养

当一个艺术家在为多媒体设计图像时,有许多小花招。如果要设计一个成功的图像,则必须要体认到一点∶电脑不会替你创造艺术 ─ 好的艺术必须出自有艺思的天赋与努力练习。当然,这并不是说如果你不是一个艺术家,你就没有办法创造出一个好的图像。

2、鉴赏的眼光

要做出成功的图像,有一个很重要的技巧是要有一双具批判性的眼光。如果你能够客观地评量你的作品并且发现它的缺点,那么你就能够改进它。如果你相信你的作品只是〝还不错″,那么它就还有一点点变得更好的可能。许多艺术家一直不断地在寻求自身艺术造诣的更上层楼,而为了要训练自己具有批判性的眼光,最好的方式就是常常接收他人对自己作品的回馈。发现其他人对同一作品会有不同于我的观点的解释,甚至常常有些人会指出完全没注意到的部分,而这个部分一但被注意到,也就能产生另一种不同的观点。

当你向他人寻求对你的作品的忠告时,你必须要能够不带防卫地接受那些具建设性的批评。想想看别人所说的话,然后自己在心中衡量一下,要不就是回绝这个建议,要不就是改变你的图像来改正有问题的部分。如果你回绝这个建议,那么你也要能够合理地解释为什么这不是一个好建议。“因为我想要这样子做”并不是一个好理由。去找到一个愿意提出诚实并有意的评语的人是很重要的,像“我喜欢”这样的评语并不能帮助你把作品做得更好,请对方说说这个图像在效用上的优缺点会是个不错的方式。

3、绘图技巧

光是想着要改进你的技巧,并且具有批判的眼光是不够的,你将会发现若想要创作出成功的图像,艺术技巧是绝对必要的。你可以依循某些规则或诀窍来学习发展这些技巧。虽然我们在网路上可以看到许多经过处理的影像,但是大部分的时候我们也必须具备实际绘图的能力,手跟眼之间的协调、以及将眼睛所见的 3D 立体物体转换成电脑上 2D 的平面图像所需的视觉转换能力,都需要许多年的训练与经验才能做得好。能提出的最好的建议是,你可以随身带着一本素描簿,并且在任何时候画下你所见的事物,这样不久你就能够自然且随意地表达你所想表达的东西。要有创意地处理影像也需要技巧,你必须考虑颜色、整体设计、对比、色值、符号意涵、以及许多其他的因素。要用 PHOTOSHOP 把两个影像放在一起,然后制造出一个图像放在你的网页上,这看起来很容易,但你必须注意,如果你在设计一个图像时,将它独立于整体网页的设计考量之外,那么你的网页可能会显得杂乱无章而使得效果有所打折。

4、图像性质一致

你的网页上的每一个图像都与彼此有着紧密的关联,所以,当它们被合置在一个网页上时,你不能对它们作各自独立的处理,因此,发展一套图像的规则并且确实地应用在图像的创造上就非常重要了。例如,你可以藉由在每一个图像上加一道 3 个像素宽的边框,并且让每一个图像保持 1" X 1" 的大小,让图像间拥有一个共同的特质。当你建立起一套规则并实际地运用到你的网页图像上时,人们也许并不会注意到,但是,如果你的图像大小不一,有的有边框、有的没有,那么人们就很容易注意到,而使你的网页不那么吸引人。

5、阴影表现方式一致

当你在一个图形或文字上使用阴影时,这通常表现出一种深度的错觉;当你在文字下方加上阴影,会使得那文字似乎栩栩地跃然于纸上,这阴影用于图像时,它也会让读者觉得这影像比较逼近自己。并不是所有时候都必须使用阴影,你应该小心并有创意地用它。在使用阴影效果时,你应该了解到,有阴影就表示有一个潜在的光源,比如说,你的物件有一个下方 4 个像素、右方 5 个像素的阴影,那么看的人就会有意识或无意识地认定在相反方向的地方有一个光源。一个常见的错误是,在某个物体的某一边制造出阴影,却又在同一页或同一个影像上的相反的那一边也制造出阴影,这样的错误会导致视觉混淆,而让人无法确定光源到底来自哪个方向。

6、图像大小有统一性

当处理成对出现或一系列的图像时,你应该注意让所有的图像保持统一的规格,如果这些图像都是以同样的比例制作的,那么这倒不是难事,但是如果这些图形有的是水平的、有的是垂直的,那么要把它们统一起来就有些难度了。如果可能的话,就把垂直和水平的影像分别集中在一起,并且统一它们的规格。如果你把垂直和水平的影像放在同一个区块中,那么就重新调整它们的大小,让其中一个向度保持一样的尺寸,这将有助于建立统一感。由于我们一般都习惯使用固定的行间距,所以,调整影像让它在同一向度上具有一样的长度,将有助于维持整齐的行列。当一个影像以水平方向向其他影像对齐时,就调整影像使它的高度相等,而垂直方向的对齐,则有赖于影像宽度的一致。

7、图像排列有序

在一个有许多图像的网页上,即使每个图像都有一致的规格,仍然有可能因为缺乏有创意地排列,而显得凌乱随便。如果你事先为你的网页建立了格线,那么只要将你的图像依格线对齐,就能够强制产生一个架构。不管你是否使用格线,你都必须有意识地决定如何安排这些图像的位置,不要被 HTML 的技术限制住你对图像编排的控制。

8、模仿其它媒体表现

有些时候艺术家们会模仿其他的媒体来创作图像,比如说,我们都已习惯看到图像后方出现阴影,而未曾质疑在电脑的影像上是不可能像现实世界中一样出现阴影的。作为一个艺术家,他常常会去模拟或是借用某种媒材的视觉特性,并把它转换到另一种媒材上面。在某些情况中,它的意图是要在 2D 平面上制造出三度空间的幻觉,有许多技巧可以制造出这种三度空间的效果∶

线条透视画法﹝将线条延伸聚集在无限远的一点上﹞

将两个影像轮廓重叠﹝在上者看起来比较近﹞

色彩透视画法﹝较远的物体具有较浅的颜色、且较不精细﹞

大小关系﹝大的物体看起来比较近﹞

做立体模型 做阴影做渐层﹝将物体件加上立体效果﹞

以方向性灯光制造阴影﹝强调物体到表面的距离﹞

在平面上的位置﹝上面的物体看起来比较远﹞

粗线条﹝看起来向前方前进﹞

色彩﹝亮暖色系看起来向前方前进,暗冷色系则看起来像在后退﹞

当第一次看到某些模拟手法时,我们常常会觉得惊讶或是新鲜。例如,在网页上看到一个木质的边框没什么了不起,可是从电脑荧幕上看到一个金属材质的注册标志,就很少见了。当你仿照其他的媒体而创造出图像,就有可能引起浏览者的好奇心,因而继续浏览你的网页。

9、模仿工具﹝filters﹞

虽然有创意的处理能够加强你的网站的视觉效果,但你也要知道,有许多处理的方式都已经被过度使用而变成陈腔滥调了。例如,页尾卷起的效果,在一开始被引进时,就被大量地引用,不管这样的效果有没有意义或是它和页面的内容图片有没有关系。伦敦字体﹝一种中古世纪风格的、亮灿的草书字体处理方式﹞也是如此,人们把这种字体用在未来派写作、科技观点、以及其他并不合适的地方。所以,当你发现一种新的滤镜效果时,要小心,这样的处理方式可能会被误用或是过度使用,而使的原来的本意大打折扣。当你使用滤镜时,要谨慎并且要有选择性,试着避免直接使用它的预设值,并且尽量将多种滤镜组合使用,以创造出不能被归类为某一种滤镜效果的图形。对电脑新手来说,你的作品中所使用的滤镜效果可能会令他们眼花撩乱,但是对从事图像创作的艺术家而言,你的作品只是,比如说,误用柔焦滤镜而产生的结果,而贬抑你的努力,认为那是个老套的东西。

10、破除框框的安排形式

另一种艺术工作者常用的小技巧是打破大多数图形所遵从的直线栏框。一般的图形都是被预设为以矩形的形状储存,虽然矩形的格式可以让你的画面看起来比较有组织,但是有时候一个突破框架限制的图形能够引起视觉上的刺激,并形成一个新的架构,这样子的挑战创新能够让你的文件看起来更具动态。当你在设计 GIF 图形档时,你可以将这个档案设定为以某一种颜色当作透明罩遮,当你用浏览器看这个图形时,这个颜色就会变成透明的。这种透明效果只能用在 GIF ,而不能用在 JPG 档,用得好的话,它可以让你的 WWW 网页生色不少。

11、动画

WWW 的引进对网际网路的意义,就像是电视的发明之于收音机的世界一样,我们可以看到影像并且很容易地接收资讯,但是你能够想像如果电视上的所有影像都是静态的图像吗?电视就像是一连串的幻灯片或弹匣。早期的 WWW 浏览器只能经由外挂程式来看这些时间导向的媒体,因此,影片的内容和网页的内容是分开的。后来程式设计师们发明了一种聪明的方法来从伺服器〝推动″图像,以模拟动画的效果,但是频宽的问题却让这项发明无法广为大家所用,目前则有配合伺服器之推动动作的动画型态的 GIF 格式,以及 Shockwave 档,和一些其他的小技巧,能够在浏览器视窗内模拟动画图形的效果。

动画效果对你的网页可以说是既能载舟,也能覆舟,所以你必须仔细考虑何时 以及为何要使用动画,在许多例子中,动画是被用来标示你的画面上的一些新鲜有趣的东西,有时动画则可以增加资讯的负载量,制造出某一种气氛、或是配合支援网页的内容。要记住,在大部分的情况中,动画都会使得下载的速度变慢,而让连线必须一直处于开启状态。

如果你创造了一个动画,请仔细的想想看这个动画会与网页上的其他元素产生怎样的互动?它会对读者的感受与所要传达的资讯有帮助吗?动画的动作跟色彩或是其中元素的安排一样重要。如果你打算要放进一个动画,那就让它值得观赏者花费那些下载的时间,并且让你的动画变动的动作看起来尽可能地顺畅。

(三)、色彩的意义与选择

当你在为网页设计图形时,应该特别注意色彩的选择。如同前面所提到的,网页上的影像并不能独立于其他元件单独运作。因此在对图形加入色彩之前,你应该首先考虑网页的整体色彩架构。

在网页中使用色彩的原因应当如下:

区分项目

统一元件

唤起情绪反应

提高视觉反应

将观念符号化

打破传统

吸引注意力

在影像中的色彩,会受到周围色彩的影响。例如,当红色置于绿色附近,绿色会被增强。经过细心组合与安置的色彩可以让个别的颜色在视觉上彼此影响。互补的色彩有彼此机动配合的作用。对比的色彩,会令人产生一种紧张或兴奋的感觉。调和色彩,也就是在色彩轮盘上彼此靠近的颜色,会产生一种和谐与稳定的感觉。最好在你的影像上,选定一定范围的色彩,而不要运用如彩虹般众多的色彩。

1、色彩与情绪

德国的理论家,诗人与小说家哥德,曾经研究色彩对于观察者的感官与心理的效应。他相信当一个人观看色彩时,会建构出一复杂组合的心理经验,并认为色彩可以激发记忆与期待。虽然他的想法不被当时的科学界所接受,不过现在我们却发现他的研究具有实质的内容。虽然在不同文化之间,对于色彩的效应并不存在着所谓普遍的认知,我们依然可以肯定西方对于色彩在心灵上的效应所做的观察。譬如:

红色,橘色与黄色具有激励效应,快乐的,热情的特质

蓝色与绿色具有安抚与镇定的效应,忧郁的特质

紫色具有神秘与不安的特质

已经有研究显示,色彩甚至能影响观察者的新陈代谢与对他们所处的环境的感受。有报导说,在蓝色的房间内感觉较冷,而在黄色的房间内感觉较暖和。有人认为,在红色范围内的色调有助组织复原,然而蓝色与绿色会减少荷尔蒙的活动。

2、色彩与象征

在不同的文化中,色彩具有相当不同的象征意义。当为网际网路设计图形使用色彩时,须注意某些色彩被认为具有强烈的象征或宗教意义。在西方文化中,白色象征纯洁;当使用叠加色彩系统时,它是所有色彩的组合。然而,在某些亚洲文化中,白色象征死亡。黑色,没有光线时,普遍地象征夜晚;但是在某些文化中,也意指死亡,危险和邪恶。黄色经常让人联想到阳光,但是在世界上干热的地区,太阳被认为有害。黄色有时让人联想到黄金与富有,但是在某些文化中,也已被认为哀悼的色彩。红色象征热情与爱情,但是在某些文化中,意指低俗与怪异。因为对色彩的联想缺乏普遍的象征意义,使得很难认定全球的人如何诠释你所选择的色彩。

3、色彩与冷暖

如同前面所提到的,色彩被使用来对于你的图形创造一种三度空间的感觉。暖色系,﹝黄色,红色和橘色﹞,在构图中呈现往前跳跃。冷色系,﹝蓝色和绿色﹞,似乎产生后退的感觉。经由选择能帮助区分背景与前景的色彩,将对你有利。选择色彩使得背景变成明亮的黄色或橘色且使得前景物体变成蓝色或绿色,是一项常见的错误。假如你把焦点放在个别的色彩上,影像可能会集中在一起,但是当往后站立,当色彩似乎与设计者想要建立的空间关系相矛盾时,你会注意到有视觉的紧张与混淆。

4、有效的色彩与绘图

当设计图像时, 应考虑整个 WWW 网站,而不仅仅是为了个别的部分。你要考虑这个图像如何与你在其他地方所做的东西有一致性呢?假如你仅仅为了吸引观众的注意,而使用一个图像,并且在视觉上与观念上,对于内容没有任何关系,也许最好不要使用这个图像。设计图像最重要的事情是,避免不必要的图像或是那些会贬抑你的观念的图像。例如,没有必要为一个容易经由文字传达意念的事物,去创造图像,除非这个图像能超越仅用文字的表达方式。总之,当设计超文件网页时,图像可以是用来传达你的观念的有效的方式。但是,一定要注意整合图像,文字与其相关内容,以创造一个整体性的网页是重要的一件事。

(四)、文字的运用

无论是在哪一种版面配置中,文字都同时扮演了内文与网页上的图像元素这两种角色,前面对色彩、图像对齐等规则的建议,同时也都适用于文字。

1、文字为设计基本元素

在一开始学习版面设计时,你最好不要拿有意涵的内文来用在你的版面上,你可试着把文字看做编织纹路,因为在讨论网页设计与排版时,文字的实际内容并不重要。当然,对一个网页设计来说,经过校对而没有任何文法或错字的文字内容是很基本必须的。为了将文字当作一个设计元素来讨论,我们要注意文字区块的形状与版面安排方式上面。

2、水平与垂直排列

无论你是否在网页中运用了隐藏的格线,你都应该将文字区块的边缘跟你的图形边框或是网页上的其他元素对齐。当然有时也会有效果不错的穿插着的文字,但它必须跟其他元素达到良好的平衡,让人觉得那是经过特意设计的,而不是一个设计错误。HTML 语法中的表格功能,让网页设计者更能够随意地控制文字的置中或对齐,而注意页面的规格与文字区块的宽度之间的关系,也是很重要的。

3、字型的运用要有统一性

要有效地使用字型与字体,设立一个规则并切实地遵守。例如,所有的英文书名都使用斜体字,所有的副标题字体都设为四级的大小,诸如此类的用法。这能让观众从文字体裁的式样,快速地了解网页的文字内容。

4、标题字的运用

如果你用标题或是较大字体的格式来作为对某一页的快速导览,那么观众通常就能很快地找到他们要的资讯。HTML 提供了从〈Hl〉到〈H6〉的旗标,来控制字体的大小,从一号到六号,其中一号代表最大的字体。所有的浏览器都支援这组旗标,不过实际上的字体大小多少会有些出入。另一种制作标题的方式就是用〈FONT SIZE = 4〉...〈/ FONT〉这组旗标,来设定字体的大小。这种方式在没有分段符号的情况下较具弹性,而你也可以用它来改变某一行的字体大小。

5、反锯齿状与锯齿状的文字

既然我们所做的是用在荧幕上的设计,那就难免会受到荧幕解析度的限制,在大部分的个人电脑以及麦金塔的标准解析度荧幕上,我们都可以清楚地以肉眼看出组成文字的像素,﹝尤其是有棱有角的字,如 W﹞,这对大标题以及斜体字的使用来说,是一个颇大的困扰。一般来说,这对 SGIs 及 SUN 的工作站荧幕则不是问题,因为他们有较高的解析度。有时你也许会使用反锯齿文字﹝即无锯齿线﹞,在这种情况下,你必须创造出一个包含这项文字的图形,当然,这是一种妥协,你想要增加你的字型品质,就得要花费较多的下载时间。有时你对格式的要求超出 HTML 所能提供的功能,例如想要让文字机动性地环绕着图像、具层次感、或是使用特殊字型等等,这时最好的方法大概就是把文字转换成图像的形式了,你可以以一种较低位元的格式储存你的文字,来减少档案传输所需要的时间。

6、可读性的问题

虽然我们已有许多种方式可以控制格式,但在字型变化的能力上则仍有待努力。由于平台之间相容性的问题,使得我们只能使用平台间某些共同的字型。虽然使用者能设定浏览器的预设字型,但是选择并不多。基本的选择就是非比例﹝non-proportional﹞﹝即所有的字元都具有一样的字元空间﹞,以及比例(proportional﹞字型。后者较容易阅读,但前者在行列的设计上有比较好的效果。﹝PRE﹞这个旗标除了注意到文字中的空白键以外,它也是以一种非比例的方式排列。

7、文章与字型的整合

﹝FONTFASE=" "﹞的旗标让网页设计者得以直接指定字型,虽然这让网页能够以一种比较有创造性的方式处理格式,但是当所指定的字型只在某些平台上受到支援时,它就常常会变成无效的设定。这种规格挑战了 WWW 的跨平台原理,它也为下一代的 WWW 对字型之支援的发展铺路。据说 Microsoft 将要推出一种方式,机动地让 HTML 所指定的字型随文件一同下载并嵌入。基本上,字型下载的方式让 Miocrosoft 得以将嵌入的压缩过的字型应用在 HTML 文件中,这项技术并不支援 Postscript 字型,它把字型的基本资料与专用的提示嵌入于文件中,而这样技术将只适用于 TrueType 字型,跨平台浏览器之间的支援是这项技术的一大问题。 Netscape 也宣布将要引进使用 Bitstream TrueDoc 技术的动态字型支援,据说 TrueDoc 同时可支援 TrueType 和 Postscript 两种字型,并且能够跨平台作用,它的原理类似 Microsof t把压缩为适当容量的字型嵌入于档案中的原理,除了包含大纲与提示以外,它也以高解析度记录了字元原始字型的形状,并创造出它自己附属于文件的特定提示,TrueDoc 也提供了反锯齿边以及数位过滤的功能。看起来,新的技术将能免除将字型转换成图像的麻烦。

8、英文大写字体的运用

在打字机的年代,我们对文字的格式并没有什么选择性,当我们想要让某些文字看起来格外醒目时,我们通常会用大写来打每一个字母。但现在再也不需要这样做了。虽然我们并没有很大量的字型可以选择,但我们的确可以使用一些字体来取代使用大写的方式。在聊天室或是电子邮件里,当你全部使用大写时,这会被认为是在大声嚷嚷,当你有重要的话要说而用这样的态度,不但太过粗鲁,另外一方面全部大写的字也会让人不易阅读。我们通常依照一个字的形状来辨识它,而很少会一个字母一个字母地去拼出〝the″这个字,我们很快速地认出这个字并继续阅读下面的文字。当全部使用大写时,每个字看起来就会变成一样的形状,只是长度不同罢了,这会让文字的可读性大大地降低。

9、浏览器与文字

人们就像一个浏览器,我们扫视过许多画面,但是只对其中很小的部分加以注意。当我们在网页之间移动时,不太可能在每个地方都停下来逐字逐句地读,阅读电脑荧幕上的文字要比阅读纸上的文字困难得多,这是因为眼睛容易紧绷着,而且电脑荧幕的位置也会造成影响。使用笔记型电脑可能可以让你安坐在躺椅里阅读,但是它的解析度和显示技术却又让人在阅读大量文字时更吃不消。一般来说,要阅读一个以文字为主的网站是不太容易的,因为人们通常并不想花费太多的时间在阅读一个网站的文件上,因此,保持讯息的简明,并控制文字的量是很重要的。对网页作适当的格式化安排,让它可以被印出来并且让人们能够不必经由电脑阅读它。如果你有许多文字资讯,那么把它们拆成几页,用目录或大纲的形式让使用者可以依照自己的进度依序阅读。一般原则是,一个网页的长度最好不要超过荧幕高度的三倍。

10、运用小字块

将一大块的文字分割成几个较容易控制的小区块也是不错的方式,使用分隔符号、图形,或是在段与段之间加以分隔,能够让人在视觉上稍作休息,再继续读下一段文字。一段简短的文字是要比一大块没有间断的文字要容易阅读得多。

11、文字与互动设计

文字可以以多种形式来增进互动性,除了超连结功能外,也可以让观众自己输入资讯,而有不同的体验。

(五)、关于内文设计部份

1、每一行文字的长度

1.最好 25 到 35 个中文字﹝50 到 70 个英文字母﹞

2、行距与字距

1.行距与字距已由软体内定。设计者能以段落与段落间空行,及首行

缩排方式以辅助阅读。

3、字体大小

1.标题以 H1 到 H3 为佳,内文 font size = 3 到 4 级为佳。

4、同版面的字型

1.三种字型以内。

5、文字的颜色

1.三种颜色以内。

6、已选过的文字

1.在颜色上要能与未选过之文字连结点辨别,也要与背景区分。

7、内文的排列

1.向左对齐并与左边界保持适当距离。可以善用表格填入文字以达此

效果。

8、表格或清单内的字

1.运用相同字型与字体大小,以利辨别。

随便看

 

百科全书收录4421916条中文百科知识,基本涵盖了大多数领域的百科知识,是一部内容开放、自由的电子版百科全书。

 

Copyright © 2004-2023 Cnenc.net All Rights Reserved
更新时间:2024/11/16 13:39:14