网页的版式设计

合集下载

什么是版式设计?

什么是版式设计?

什么是版式设计?版式设计是指在平面设计中,根据内容和展示需求,将文字、图片、色彩等元素有机地结合起来,形成有视觉冲击力和艺术美感的页面布局的过程。

版式设计在印刷、网页、画册、海报等多个领域都有广泛应用,对于传达信息和产生视觉效果起着重要作用。

一、版式设计的重要性版式设计对于提升内容的可读性和吸引力至关重要。

一个好的版式设计不仅可以让读者更容易理解和接受信息,还可以通过形式美感和视觉效果引起读者的兴趣和共鸣。

好的版式设计能够给人以美的享受,并且能够增加内容的品质和价值。

1. 提升可读性好的版式设计可以合理安排文字的排版和行间距,使得文字更加清晰易读。

适当的字号和字距选择不仅可以提升可读性,还可以优化文章的整体视觉效果。

同时,合理的断行和分栏能够使得阅读更加方便和自然。

2. 强化信息传递版式设计可以通过调整文字、图片、表格等元素的大小、位置和颜色等来强化信息的传递。

通过设计清晰的标题和副标题,读者能够更快速地获取到重点内容。

使用合适的配色方案和设计元素可以让信息更加突出和易于理解。

3. 提高视觉吸引力版式设计可以通过合理的布局和配色引起读者的视觉冲击力,使得阅读体验更加愉悦。

通过运用艺术和创意的手法,版式设计可以将信息展现得更加有吸引力和感染力,进而提高内容的传达效果。

二、版式设计的基本原则1. 一致性版式设计需要保持一致性,即在整个设计中保持统一的风格和形象。

文字的字号、字距和行距要保持一致,标题和正文的样式要统一,色彩的搭配也要协调一致。

通过一致性的设计,可以让读者更容易理解和接受信息。

2. 平衡性版式设计需要保持平衡性,即在页面上各个元素之间要有适当的间距和比例。

文字和图片的组合要平衡,不要让页面显得过于拥挤或空洞。

同时,要考虑到版面的整体平衡,避免设计元素过于集中或不均匀。

3. 重点突出版式设计要合理安排信息的重点,通过设计字体大小、颜色等来突出重点内容。

重点信息应该比较大、醒目,能够吸引读者的注意力。

版式设计的原理和应用

版式设计的原理和应用

版式设计的原理和应用1. 引言版式设计是指在平面设计和印刷设计中对页面的布局和排版进行规划和设计的过程。

良好的版式设计能够提高用户体验,增强信息传达效果和视觉冲击力。

本文将介绍版式设计的原理和应用,以及一些实用的技巧和注意事项。

2. 版式设计的原理2.1 对齐原则对齐原则是指将元素在页面上按照一定的线条和边缘进行对齐,以创建一种有序和整洁的视觉效果。

常见的对齐方式包括左对齐、居中对齐和右对齐。

对齐原则能够帮助用户理解页面结构和信息层次,提高可读性和易用性。

2.2 黄金比例黄金比例是指一种比例关系,即两个数的比等于较大的数与整体的比值。

在版式设计中,黄金比例可以用来确定文字和图像的大小和位置,以创造一种和谐和平衡的视觉效果。

2.3 反差对比反差对比是指在版式设计中使用不同色彩、大小或形状等元素之间的对比,以增加视觉冲击力和吸引力。

反差对比能够吸引用户的注意力,突出重要信息,提高可视性。

3. 版式设计的应用3.1 平面设计在平面设计中,版式设计是非常重要的一部分。

一个好的版式设计能够使作品更加美观和专业,提高作品的可读性和传达效果。

在海报设计、名片设计、宣传单页设计等领域,版式设计的应用非常广泛。

3.2 印刷设计版式设计在印刷设计中也扮演着重要的角色。

通过合理的版式设计,可以在印刷品中传递信息、增加视觉吸引力,并提高印刷品的整体效果。

在书籍、杂志、报纸等印刷品设计中,版式设计是不可或缺的一环。

3.3 网页设计在网页设计中,版式设计同样起着至关重要的作用。

通过合理的版式设计,可以使网页内容更加清晰和易读,提高用户体验。

在网页的导航菜单、文章排版、图片展示等方面,版式设计是网页设计中不可或缺的一部分。

4. 实用技巧和注意事项4.1 使用恰当的字体和字号在版式设计中,字体和字号的选择非常重要。

恰当选择字体和字号可以使文字更易读和吸引眼球。

同时,注意字体的一致性,避免在同一个页面中使用过多的字体。

4.2 合理运用白空间白空间是指页面中没有被填满的空白区域。

介绍骨骼式版式设计

介绍骨骼式版式设计

介绍骨骼式版式设计骨骼式版式设计(Grid Layout Design)是一种以网格系统为基础的页面布局设计方法,通过将网格分割为一系列的列和行,来协调并组织页面元素,使页面达到良好的视觉效果和功能性。

骨骼式版式设计的目的在于提供一种统一且可重复使用的设计模式,使得页面更加易于浏览、吸引读者的注意力、降低设计和排版的难度,从而提高用户体验。

骨骼式版式设计的核心理念是将页面划分为网格,通过将内容元素放置在这些网格中的一些位置,来实现整洁有序的页面布局。

网格可以是均匀分布的也可以是不同大小的。

这种设计方法可以应用于各种媒体,如印刷、电子和互联网等。

骨骼式版式设计的优点之一是提供了一种一致性的视觉框架,使得内容元素能够更好地协同工作,并为用户提供一种易于使用和导航的模式。

通过将内容组织在网格中,可以实现内容的层次化,并突出重点信息。

此外,网格系统可以帮助设计师更好地掌握页面的比例和比例关系,使得整个页面看起来更加和谐和平衡。

骨骼式版式设计的另一个优点是提高了排版的效率。

通过将元素定位在网格中的位置,设计师可以快速且准确地对页面进行布局,降低了设计和排版的难度。

此外,网格系统还可以帮助设计师控制内容的尺寸和间距,从而实现页面设计的一致性和干净整洁的效果。

骨骼式版式设计还具有一定的灵活性和可扩展性。

网格系统可以根据不同的需求和设计风格进行调整和自定义。

设计师可以根据页面的特点和内容的需求选择不同的网格布局,从而实现页面布局的多样性和创造性。

此外,通过添加或删除行和列,设计师还可以在不破坏整体布局的情况下对页面进行扩展和调整。

虽然骨骼式版式设计有很多优点,但也存在一些挑战和限制。

首先,设计师需要具备一定的技术知识和经验,才能正确地应用骨骼式版式设计。

其次,仅依靠网格系统并不能保证设计的成功,还需要考虑其他因素,如色彩、字体、图像等。

最后,不同的设备和屏幕尺寸可能对网格系统产生不同的影响,设计师需要经过一定的调整和测试,以确保页面在不同的设备上具有良好的显示效果。

网站网页设计流程

网站网页设计流程

网站网页设计流程
网页设计设计流程步骤:
1.确定设计思路
企业在设计一个网页之前,一定要先确定好设计方案,这个方案一定要确定网站的整体风格和特色,从而为后期的设计做好基本的准备。

这里的设计思路要根据所设计的网页的不同有所不同。

2.版式设计
网页设计一定要特别注意网页中各个板块的排版和布局。

每个板块都分布清楚后,还要看整个网页的布局,反复推敲布局的合理性以及用户的体验度。

3.色彩搭配
和谐的色彩、均衡的搭配,这些都会给网页加分。

同时,不同色彩对于人们心理的影响也不同,设计者可以根据这一点好好地运用色彩的作用。

4.内容形式
一个好的网页一定要有好的内容和布局形式,内容的设计一定要注意运用对称美、节奏美和留白等等。

通过空间、文字、图形等等之间的相互关系巧妙地建立整体的均衡状态,让之产生和谐的美感。

以上四点仅仅是网页设计中最为基础的流程,其中还有很多细节需要注意。

网站策划中的网页版式和排版原则

网站策划中的网页版式和排版原则
字体选择:选择易于阅读和辨识的字体,确保用户在浏览网页时能够快速获取信 息
色彩搭配:选择适当的颜色搭配,使页面看起来协调、舒适
内容层次分明
标题:网页版式设计的首要原则是内容层次分明,确保用户能够快速找到所需信息。 导航栏:导航栏是网页的重要组成部分,应清晰明了,方便用户浏览和查找。 内容区域:内容区域应保持简洁明了,避免过多的文字和图片堆砌,使用户能够快速获取信息。 侧边栏:侧边栏可以用于补充信息或提供额外链接,但不应干扰主要内容,确保内容层次分明。
媒体查询可以实现不同设备的自适应显示,提高用户体验,使页面在不同设备上都能得到良好的展示效果。 媒体查询可以针对不同的屏幕尺寸和分辨率进行布局调整,使页面在不同设备上都能得到最佳的视觉效果。
媒体查询可以实现页面的流式布局和固定布局的结合,使页面在不同设备上都能得到良好的展示效果。
适配不同屏幕尺寸的技巧
考虑图片的版权问题,确保使用的 图片不侵犯任何知识产权
图标设计
简洁明了:图 标应简洁易懂, 避免过多的细 节和复杂的图
案。
易于识别:图 标应具有辨识 度,能够快速 传达其代表的 含义或功能。
一致性:图标 应与网站或应 用的风格保持 一致,以增强
用户体验。
可选性:提供 多种图标设计 方案,以满足 不同用户的需
根据品牌或主题选择主色调
主色调选择
保持一致性,避免频繁更换主色调
添加标题
添加标题
考虑目标受众的喜好
添加标题
添加标题
利用色彩心理学,增强用户体验
辅助色运用
定义:辅助色是用于补充主色的色彩,使整个页面更加丰富和协调
选择方法:根据主色调和主题来选择辅助色,可以是相近色、对比色或冷暖色等
运用技巧:辅助色可以用于强调重点内容、划分区域或引导视线等,但要注意不要过多使用, 以免干扰主色的效果

专题学习网站的版式设计

专题学习网站的版式设计

3、专题学习网站版式设计的形态要素与视觉呈现
专题学习网站从静态网站发展到动态交互式网站,其制作 技术不断变革和完善,但是不论技术如何革新,最终呈现出来 的仍然是版式、图文等的编排和搭配。也就是说专题学习网站 在保证教学信息正确有效的传递的同时,其版式设计也是网站 建设中不容忽视的重要组成部分。 3.1 文字的格式化 3.1.1 网页中文字的整体编排 在版式设计中,为了处理上的方便,我们从视知觉上经常 把所有的元素都看作为图形,并且将文字本身作为一种艺术形 式来对待。 页面中显出来的文本是多个文字的集合体。这种集合体编 排的方式会对浏览者在情感和个性方面产生一定的影响。我们 要从字体、字号和行距入手以达到最好的编排效果。 3.1.2 文字的强调 文字的强调使用最多的一般是行首文字的强调、引文的强
调、个别文字的强调三种。 利用“首字下沉”的效果来实现文本的强调是版式设计中 常用的一种方法。 将文本中一些提纲挈领性的文字进行强调称为引文强调。 运用对比的法则可以使个别文字得到强调。当有需要突出 强调的文字对象时,我们通常会使用倾斜、加粗、下划线、改 变颜色等手段来有意识地增加文字的呈现,以增强视觉效果。 3.2 图形图像 专题学习网站中的图像设计是由主观和客观两种因素共同作 用的结果。客观因素是相应的教学原理和可以使用的网络技术, 主观因素则是网页设计者所要实现的艺术创意。Photoshop图像 处理软件是目前被广泛使用的较为优秀的图像处理软件之一。 3.2.1 网页图像的前期处理 图像在应用到网站中之前,一般都要进行必要的处理,以 满足使用需求。改善图像的视觉效果是处理的主要目的之一, 同时还可以通过处理来突出有用信息、或者是减少文件大小以 降低传输时间或减小对网络带宽的压力,这种处理主要表现为 调整、修改和合成这样三种形式。 3.2.2 静态图像的编排设计 当图像被应用到专题学习网站的网页中以后,页面中其它 的元素如文字等就都与图像产生了密切的联系,我们应该对元 素进行统一的规划和协调,因此,一套图像编排设计的规则就 显得必不可少。对图像进行编排设计的目的,是使图像与图像 之间,图像与页面其它元素之间能有一个良好的、合适的视觉 关系,以便为网站的信息传达和浏览者的信息获取服务。 图像的编排要满足形式美的要求,同时也要达到视觉传达 的最佳效果。在满足这样两个前提下,图像在网页中的位置可 以突破视觉焦点的约束而不受限制。如果一个网页中有很多幅 图像需要排列。我们一般采用的方式是把他们按照水平或者垂 直的方向进行序状排列,这是整体划一的排列,可以给人一种 整体美感和秩序美感。 3.2.3 图像的数量编排艺术 网页中使用图像的数量的多少,也是由其内容和主题表达 的需要来确定的。当网页上只有一幅图像时,高精质量的图像 再加上独特、精美的图像编排形式,可以一针见血的突出主题 内容,它能够将浏览者的视线集中起来,也可以使整个页面显 得安定,给浏览者以高雅稳健的视觉享受。当网页中运用多幅 图像时,页面会因为图像间的对比和响应而变得活跃,我们要 通过协调图像之间的比例关系来突出重要图像,一般将需要展 示的主要图像设计得较大,而将次要图像设计得较小,给人以 主次分明、层次分明的感觉。 3.2.4 动态数字图像的设计 动态图像与静态图像相比,无论是在视觉感知还是在信息 含量上都具有较强的优势。它能够在有限的空间内展示和表达 较多的信息和内容,吸引更多的注意,让网站显得更加生动活

网页设计制作方案

网页设计制作方案

网页设计制作方案先来说说网页设计技巧:一、首页设计技巧网站首页是企业网上的虚拟门面,在此,提醒上网的企业注意自己门面的设计,决不能敷衍了事、马马虎虎。

我们会经常看到印刷精美的产品目录或广告,当您屡屡看到那些印有产品目录或广告的精美印刷制品的时候,相信您或多或少会对有关的产品形成一种好感,即使您不会购买,也必然对这些产品形成一定程度的认同。

而对于设计毛糙的宣传品,您肯定会怀疑其内容的真实性,从而对其产品或服务产生质疑。

好,现在说说网站的设计,相信您会同意这种说法:网站的页面就好比是“无纸的印刷品”。

既然如此,我们会因此而得出一个结论:精良和专业网站的设计,如同制作精美的印刷品,会大大刺激消费者(访问者)的购买欲望,反之,您公司所提供的产品或服务将不会给消费者(访问者)留下较好的印象。

值得一提的是,除非您的企业有专业的网站规划、设计人员,否则您最好找专业公司或专业人员为您设计制作,一个优秀的专业设计人员会很快明白您的意图,并根据您的建站目的提出建设性的意见。

二、风格保持一致——内页设计技巧:利用导航取得统一:导航是网站的一项重要组成部分,一个出色的导航将会给人留下深刻的印象。

三、色彩搭配:我的页面顶部有一点朴素沉闷,这与我想突出文字的沉韵气质有关,但这样为免让人压抑,于是在首页中用了大篇幅的粉色系图案来减轻这种沉闷,同时又使用了含金属光泽的边框来给人干净理性的感觉。

再来说说网站制作:一、制作前的准备:我们都知道制作网页效果图之前,首先需要进行相应的准备,而不是打开软件上来就进行制作,首先要分清你要什么,你有什么。

(一)、网站的策划阶段:1.所要设计网站的类型。

(我所做的这个网站是小说推荐网,它的类型属于使用者通过浏览器就可以获得网站所提供的信息与服务,我是信息的收罗者和部分信息的提供者)。

2.网页的构成。

(我知道不同性质和类别的网站,页面的内容安排是不同的。

我所做的这个网站主页的基本内容包括标题、导航、主体内容等,其他页面相对简单。

浅谈网页版面设计

浅谈网页版面设计

浅谈网页版面设计【摘要】网页是网站构成的基本元素。

版面设计是网站页面设计的核心,是设计者在有限的屏幕空间上将多媒体元素进行有机组合,把观点和艺术内涵清晰地传达给观者,以便使版面上的思想能进入观者的心灵。

【关键词】版面;设计;视觉流程随着互联网的普及和发展,网站已成为企业或个人的形象宣传、外界沟通和自我推广的最新最快捷的一种方式。

网站,英文为Web Site,简单来说就是多个网页的集合,网页不仅仅是网站的构成体也是网站的灵魂!网页的构成要素包括文字、图形、图像、标志、色彩等造型要素及标题、信息菜单、信息正文、标语、单位名称等内容要素,网页的版面设计就是要将上述构成要素根据特定内容的需要恰当地组织在版面上, 将信息、观点、思想传达给读者,表达出美与和谐。

网页的版面设计同报纸杂志等平面媒体的版面设计有很多相通之处。

所谓网页的版面设计,是在有限的屏幕空间上将多媒体元素进行有机组合,将传达内容所必要的各种构成要素的均衡、调和、律动的视觉导向以及空白等,根据主题的要求予以必要的关系设计,进行一种视觉的关联和合理配置。

采用哪种版式并不是设计者的想当然,不同的网站主题(个人宣传、产品销售、提供服务等)对网页构成元素编排方式的要求是不同的,要依据受众的需求、市场的状况、版主的自身情况进行综合分析,还要明确建立该网站的目的、为谁提供产品或服务、能提供什么样的产品或服务、该网站的目标受众以及受众的特点等一系列定位之后才能决定的。

当明确了目标后,我们紧接着要考虑的是网页版面的形式与内容的统一。

现在的网站通常具有的内容是文字、图片、符号、动画、按钮等,其中文字占很大的比重,因为目前的网络基本上还是以传送信息为主,而用文字是非常有效率的一种方式。

既然文字是现在网页传输信息的主要工具,那么就得把页面上主要的部分留给它,网页上真正好的文本的排布是这样的:一般放在最显著的地方,如整个显示的中央稍微偏右下;文本的排布整体性好,使浏览起来通畅而丝毫没有阻碍,理解内容更加容易。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

网页的版式设计(一)编者按:很多从事网页设计的计算机专业人员,对于网页的制作技术驾轻就熟,但对于网页富有艺术性和个性的设计却感到力不从心。

特别是没有经过艺术设计专业训练的网页制作者,在掌握了网页制作技术的情况下,都渴望将自己的网页制作得更具创意和美感。

目前关于网页制作的讨论和介绍,多以讲解软件的技术性操作为主要内容,侧重艺术方面的非常之少。

经过作者同意,从这一期开始,我们选载《网页艺术设计》一书的部分章节,从最基本的内容讲起,希望对广大网页制作者有所助益。

一、文字的格式化1.字号、字体、行距字号大小可以用不同的方式来计算,例如磅(point)或像素(pixel)。

因为以计算机的像素技术为基础的单位需要在打印时转换为磅,所以,建议采用磅为单位。

最适合于网页正文显示的字体大小为12磅左右,现在很多的综合性站点,由于在一个页面中需要安排的内容较多,通常采用9磅的字号。

较大的字体可用于标题或其他需要强调的地方,小一些的字体可以用于页脚和辅助信息。

需要注意的是,小字号容易产生整体感和精致感,但可读性较差。

网页设计者可以用字体来更充分地体现设计中要表达的情感。

字体选择是一种感性、直观的行为。

但是,无论选择什么字体,都要依据网页的总体设想和浏览者的需要。

粗体字强壮有力,有男性特点,适合机械、建筑业等内容;细体字高雅细致,有女性特点,更适合服装、化妆品、食品等行业的内容。

在同一页面中,字体种类少,版面雅致,有稳定感;字体种类多,则版面活跃,丰富多采。

关键是如何根据页面内容来掌握这个比例关系。

从加强平台无关性的角度来考虑,正文内容最好采用缺省字体。

因为浏览器是用本地机器上的字库显示页面内容的。

作为网页设计者必须考虑到大多数浏览者的机器里只装有三种字体类型及一些相应的特定字体。

而你指定的字体在浏览者的机器里并不一定能够找到,这给网页设计带来很大的局限。

解决问题的办法是:在确有必要使用特殊字体的地方,可以将文字制成图像,然后插入页面中。

行距的变化也会对文本的可读性产生很大影响。

一般情况下,接近字体尺寸的行距设置比较适合正文。

行距的常规比例为10:12,即用字10点,则行距12点。

这主要是出于以下考虑:适当的行距会形成一条明显的水平空白带,以引导浏览者的目光,而行距过宽会使一行文字失去较好的延续性。

除了对于可读性的影响,行距本身也是具有很强表现力的设计语言,为了加强版式的装饰效果,可以有意识地加宽或缩窄行距,体现独特的审美意趣。

例如,加宽行距可以体现轻松、舒展的情绪,应用于娱乐性、抒情性的内容恰如其分。

另外,通过精心安排,使宽、窄行距并存,可增强版面的空间层次与弹性,表现出独到的匠心。

行距可以用行高(line-height)属性来设置,建议以磅或默认行高的百分数为单位。

例如:{line-height:20pt}、{line-height:150%}。

(以上内容节选自顾群业等编著的《网页艺术设计》一书,山东美术出版社出版。

)图1图2图1:通过文字大小疏密进行处理,突出重点,层次分明。

图2:上、中部文字编排疏散,传达出轻松愉快的感觉。

下部的文字编排采用较小的行距,与上面的编排方式形成对比,丰富了版面空间层次。

网页的版式设计(二)文字的整体编排页面里的正文部分是由许多单个文字经过编排组成的群体,要充分发挥这个群体形状在版面整体布局中的作用。

从艺术的角度可以将字体本身看成是一种艺术形式,它在个性和情感方面对人们有着很大影响。

在网页设计中,字体的处理与颜色、版式、图形等其他设计元素的处理一样非常关键。

从某种意义上来讲,所有的设计元素都可以理解为图形。

(1)文字的图形化字体具有两方面的作用:一是实现字意与语义的功能,二是美学效应。

所谓文字的图形化,即是强调它的美学效应,把记号性的文字作为图形元素来表现,同时又强化了原有的功能。

作为网页设计者,既可以按照常规的方式来设置字体,也可以对字体进行艺术化的设计。

无论怎样,一切都应围绕如何更出色地实现自己的设计目标。

将文字图形化、意象化,以更富创意的形式表达出深层的设计思想,能够克服网页的单调与平淡,从而打动人心。

图3(2)文字的叠置文字与图像之间或文字与文字之间在经过叠置后,能够产生空间感、跳跃感、透明感、杂音感和叙事感,从而成为页面中活跃的、令人注目的元素。

虽然叠置手法影响了文字的可读性,但是能造成页面独特的视觉效果。

这种不追求易读,而刻意追求“杂音”的表现手法,体现了一种艺术思潮。

因而,它不仅大量运用于传统的版式设计,在网页设计中也被广泛采用。

图4(3)标题与正文在进行标题与正文的编排时,可先考虑将正文作双栏、三栏或四栏的编排,再进行标题的置入。

将正文分栏,是为了求取页面的空间与弹性,避免通栏的呆板以及标题插入方式的单一性。

标题虽是整段或整篇文章的标题,但不一定千篇一律地置于段首之上。

可作居中、横向、竖向或边置等编排处理,甚至可以直接插入字群中,以新颖的版式来打破旧有的规律。

图5(4)文字编排的四种基本形式页面里的正文部分是由许多单个文字经过编排组成的群体,要充分发挥这个群体形状在版面整体布局中的作用。

两端均齐文字从左端到右端的长度均齐,字群形成方方正正的面,显得端正、严谨、美观。

居中排列在字距相等的情况下,以页面中心为轴线排列,这种编排方式使文字更加突出,产生对称的形式美感。

左对齐或右对齐左对齐或右对齐使行首或行尾自然形成一条清晰的垂直线,很容易与图形配合。

这种编排方式有松有紧,有虚有实,跳动而飘逸,产生节奏与韵律的形式美感。

左对齐符合人们阅读时的习惯,显得自然;右对齐因不太符合阅读习惯而较少采用,但显得新颖。

绕图排列将文字绕图形边缘排列。

如果将退底图插入文字中,会令人感到融洽、自然。

(以上内容节选自顾群业等编著的《网页艺术设计》一书,山东美术出版社出版。

)图6图3:将文字放大,不仅实现了字意与语义的功能,而且具备了视觉冲击力。

图4:由字符(ASCII码)组成的网站标志。

图5:通过文字的大小、明暗、疏密以及叠置等变化,产生杂音感,起到较好的视觉引导作用。

图6:文字与图片穿插排列,密集的文字形成块面,丰富了页面层次。

网页的版式设计(三)3.文字的强调(1)行首的强调将正文的第一个字或字母放大并作装饰性处理,嵌入段落的开头,这在传统媒体版式设计中称之为“下坠式”。

此技巧的发明溯源于欧洲中世纪的文稿抄写员。

由于它有吸引视线、装饰和活跃版面的作用,所以被应用于网页的文字编排中。

其下坠幅度应跨越一个完整字行的上下幅度。

至于放大多少,则依据所处网页环境而定。

(2)引文的强调在进行网页文字编排时,常常会碰到提纲挈领性的文字,即引文(也称为眉头)。

引文概括一个段落、一个章节或全文大意,因此在编排上应给予特殊的页面位置和空间来强调。

引文的编排方式多种多样,如将引文嵌入正文的左右侧、上方、下方或中心位置等,并且可以在字体或字号上与正文相区别而产生变化。

图7(3)个别文字的强调如果将个别文字作为页面的诉求重点,则可以通过加粗、加框、加下划线、加指示性符号、倾斜字体等手段有意识地强化文字的视觉效果,使其在页面整体中显得出众而夺目。

另外,改变某些文字的颜色,也可以使这部分文字得到强调。

这些方法实际上都是运用了对比的法则。

4.文字的颜色在网页设计中,设计者可以为文字、文字链接、已访问链接和当前活动链接选用各种颜色。

例如,如果你使用Frontpage编辑器,默认的设置是这样的:正常字体颜色为黑色,默认的链接颜色为兰色,鼠标点击之后又变为紫红色。

使用不同颜色的文字可以使想要强调的部分更加引人注目,但应该注意的是,对于文字的颜色,只可少量运用,如果什么都想强调,其实是什么都没有强调。

况且,在一个页面上运用过多的颜色,会影响浏览者阅读页面内容,除非你有特殊的设计目的。

图8颜色的运用除了能够起到强调整体文字中特殊部分的作用之外,对于整个文案的情感表达也会产生影响。

这涉及到色彩的情感象征性问题,限于篇幅,在这里不做深入探讨。

另外需要注意的是文字颜色的对比度,它包括明度上的对比、纯度上的对比以及冷暖的对比。

这些不仅对文字的可读性发生作用,更重要的是,你可以通过对颜色的运用实现想要的设计效果、设计情感和设计思想。

(以上内容节选自顾群业等编著的《网页艺术设计》一书,山东美术出版社出版。

)图7:下坠式的行首强调,有吸引视线与活跃画面的作用。

图8:根据页面色调灵活运用文字的色彩,既符合页面的整体氛围,又保证了可读性。

网页的版式设计(四)二、图像除了文本之外,网页上最重要的设计元素莫过于图像了。

一方面,图像的应用使网页更加美观、有趣;另一方面,图像本身也是传达信息的重要手段之一。

与文字相比,它直观、生动,可以很容易地把那些文字无法表达的信息表达出来,易于浏览者理解和接受。

1.图像的格式Web通常使用两种图像格式:GIF和JPEG。

除此以外,还有两种适合网络传播但没有被广泛应用的图像格式:PNG和MNG。

图92.图像的形式同印刷排版一样,静态图像在网页排版中的运用不外乎四种形式:方形图、退底图、出血图以及这三种形式的结合使用。

(1)方形图即图形以直线边框来规范和限制,是一种最常见、最简洁、最单纯的形态。

方形图使图像内容更突出且将主体形象与环境共融,可以完整地传达主题思想,富有感染性。

配置方形图的页面,给人以稳重、可信、严谨、理性、庄重和安静等感觉,但有时也显得平淡、呆板。

图10(2)退底图将图像中的背景去掉,只留下主题形象。

退底图形自由而突出,更具有个性,因而给人印象深刻。

配置退底图的页面,轻松、活泼,动态十足,而且图文结合自然,给人以亲和感。

但也容易造成凌乱和不整体的感觉。

图11(3)出血图图像的一边或几个边充满页面,有向外扩张和舒展之势。

一般用于传达抒情或运动信息的页面,因不受边框限制,感觉上与人更加接近,便于情感与动感的发挥。

图12(以上内容节选自顾群业等编著的《网页艺术设计》一书,山东美术出版社出版。

)图9:典型的方形图,四周留出边框,使图片内容突出。

图10:人物全部退底,文字色块的安排轻松随意,是面向年轻人的设计。

图11:四边出血,有强烈的扩张感。

图12:主体形象退底且两边出血。

主体形象的方向性与右侧文字的排列方式具有引导视觉的作用。

网页的版式设计(五)3.图像的编排(1)四角与中轴四点结构页面的四个角与对角线、中轴四点及水平与垂直的中轴线,具有支配页面结构的作用。

四角是页面边界相交形成的四个点,把四角连接起来的斜线即对角线,交叉点为页面中心。

中轴四点指经过页面中心的垂直线和水平线的端点。

这四个点可上、下、左、右移动。

通过四角与中轴四点结构的不同组合、变化,可以求得多样的页面结构。

在图像排版时紧紧抓住这八个点,可以突出网页的形式美感,网页的版式设计、视觉流程的筹划也得到相应简化。

相关文档
最新文档