网页版式设计

网页版式设计（共7篇）

网页版式设计 篇1

摘要：在这个互联网的时代, 浏览网页就成了人们必不可少的生活方式, 那么网页设计这个行业便逐渐走俏, 为了便于人们设计出布局合理, 形式独特的网站, 网页设计的版式设计将变得越来越重要, 本篇文章便是对如何将版式设计合理的运用在网页中进行研究。

关键词：网页设计,互联网,浏览网页

1 网页的原则

网页设计由于是在电脑屏幕上观看的, 还需要跟浏览者进行互动, 这就和普通的平面设计有了质的不同。观看载体不同, 所以我们在研究网页设计的时候, 除了要研究网页的美观还要研究浏览者在面对网页的心理感受, 要让读者先从功能上对其有个认知, 在认知基础上才能进行制作版面的设计。这就使得网页设计的这门技术还需我们做更多的相关探究。

2 网页的布局风格

网页布局, 就是以最适合浏览的方式将图片和文字排放在页面的不同位置。看看我们经常用到的版面布局形式:

(1) “同”字型布局。这种布局结构的最上面一般是网站的标志、广告以及导航栏;下面是主要内容, 左有一些栏, 右也有一些栏目, 在结构的中间位置是内容主体;结构的最下面是一些网站的基本信息及版权信息。国内一些大中型网站常见的是这种结构布局方式。这种结构的优点是把版面充分的利用了起来, 让读者有很大的信息量进行阅读;它的缺点是页面看上去灵活性不够, 有时也给人一种拥挤的感觉。

(2) “厂”字型局:这种布局结构的特点是在页面的顶部设为标志和广告条, 下方左面为主菜单, 右面显示正文信息。本布局方式是目前应用比较广泛的一种。本布局的优点是主次非常分明, 页面结构一目了然, 很清晰;它的缺点是对色彩搭配要求比较高, 如果搭配不当的话, 会给人以规矩呆板, 甚至容易引人厌烦。

(3) “框架”型布局:这种布局结构一般为上下或左右布局, 一栏是导航栏, 一栏是正文信息。也有将页面分为三栏的, 上边一栏放图片广告, 左侧栏放导航栏, 右侧为正文信息。

3 网页布局清晰的原则

3.1 网页的标题设计

在网页的版式设计中成功的标题可以让人一目了然和赏心悦目, 也能给整个网站提高气氛。网站的首页上方会有公司的标题, 标题后面的背景也有静态的和动态的区分, 也可以形成交互性。这也是网页的版式与普通印刷品版式的区别。

3.2 文字的编排

文字本身是以传达内容和表达信息为主题的。在网页设计过程中, 网页的设计一定要抓住这个主题不要放松, 但是同时也可以利用字体也表达一定的感情, 例如:粗体字强壮有力, 有男性特点, 适合机械、建筑业等内容;细体字高雅细致, 有女性特点, 更适合服装、化妆品、食品等行业的内容。同时设计者也要考虑到一些细节的内容, 如很多读者的计算机中只装有三种字体及一些相应的特定字体, 如果没有特别强的针对性的要求, 最好采用缺省字体。

字号的大小也有一定的要求, 如标题和其他需要强调的地方用字号大一些, 如9磅, 而网页的正文, 这是人们阅读量最大的, 12磅的字体是比较合适的, 像一些页脚的和辅助性的信息, 可以使用能小一点的字号。

页面里的正文部分, 这个部分是最重要的部分, 这部分的内容是由许多单个文字经过编排组成的群体, 这个群体影响着读者的阅读, 可以从艺术、个性、情感方面对这部分进行处理, 以达到最好的抓住读者眼球的作用。

3.3 图文结合

版式有可以分为无图的版式和有图的版式, 有图的版式钢架丰富, 无图的版式需要给人不容易枯燥的感觉就需要巧妙的排版了, 两种版式都不可缺少, 当然网站上更多的还是图文结合的版式。

在视觉顺序上, 从吸引人的注意力角度来说, 图形对人眼球的吸引力远远是超过了纯文字对人眼球的吸引力, 图形给人的视觉印象要比文字强烈得多, 这是因为图形的色彩变化明显, 所含内容也异常丰富, 同时图片的引入也对页面起到好很好美化作用。可以说, 要使网页更好的吸引人的眼球, 更好的抓住人们的视线, 并在纯文本基础上变得更有趣味, 最为简捷省力的办法就是使用图片。几乎所有的网页都用到了图形, 善于使用图形, 可以让网页的主题表现的更加生动、形象和直观, 同时也较好地增强网页的宣传力、号召力和感染力, 吸引读者的注意, 引起读者的兴趣。网页可以图文并茂地向用户提供信息, 成倍地加大了它所提供的信息量。对于一条信息来说, 图片对浏览者的吸引远远超过单纯的文字。页面的节奏韵律。这也是图文排版的魅力所在。

4 网页视觉美观的原则

网页的颜色表达一种情感, 也象征不同的含义。这些象征含义在人们思想交流形成了复杂的问题, 如人们的时代、民族、年龄、地域、阶层、工作能力、经济地区、通过不同的颜色组合, 呈现给他们的心理感受是截然不同的。如紫红和土黄搭配, 可以产生高贵的, 的气氛。粉色和白色混合, 能体现柔顺、雅致、浪漫的气氛。金色和大红、金色的搭配能渲染喜庆的气氛。而橙色和黄色的搭配则会给人带来暖意。设计主题的不同, 颜色搭配的方法也随之改变。兼顾网页的适应性, 应尽量使用网页安全色。可先确定一种能表现主题的主体色, 然后根据具体的需要, 应用颜色的近似和对比来完成整个页面的配色方案。整个页面在视觉上应是一个整体, 以达到和谐、悦目的视觉效果。

总是, 一个优秀网页的实现离不开以上几点原则, 只要每个细节都做到合理设计一定能够呈现出一个精彩的网站。

参考文献

[1]董海斌.平面视觉元素在网页设计中的应用研究[J].科技信息, 2008 (05) :155.

[2]尹振鹤.云计算的特点及应用分析[J].硅谷, 2014 (12) :126.

[3]邹钰.Auto CAD动态块在室内设计制图中的应用[J].硅谷, 2014 (12) :126.

[4]杨翠芳.浅析视错觉手段在平面设计中的运用技巧[J]。电脑知识与技术, 2011 (11) :8037.

网页版式设计 篇2

字、图片图形、颜色），根据特定内容的需要进行组合排列，并运用造型要素及

形式原理，把构思与计划以视觉形式表达出来。

1、定义

2、解析 也就是寻求

艺术手段来正确地表现版面信息，是一种直觉性，创造性的活动。编排，是制造

和建立有序版面的理想方式。排版设计是平面设计中最具代表性的一大分枝，它

不仅在二维的一面上发挥其功用，而且在三维的立体和四维的空间中也能感觉到

它的效果，如包装设计中的各个特定的平面，展示空间的各种识别标识之组合，以及都市商业区中悬挂的标语、霓虹灯等等。范例 色彩与线条的极端搭配 图

形的重组与字体的结合排版设计是平面设计中重要的组成部分，也是

一切视觉传达艺术施展的大舞台。排版设计被广泛地应用于报纸广

告、招贴、书刊、包装装潢、直邮广告(DM)、企业形象(VI)和网页等所有平面、影像的领域。排版设计为人们营造新的思想和文化观念提供了广阔天

地，排版设计艺术已成为人们理解时代和认同社会的重要界面。19世

纪 下半叶，英国兴起了“工艺美术运动” ,标志着现代设计时代的到来。19世纪中叶，英国设计师、色彩专家欧文??琼斯写成《装饰法则》一书，通过

大量有关美的设计原理、方法和实例而成为19世纪美术设计师的一本“圣经”。20世纪初，现代主义设计运动在世界范围内蓬勃兴起。1950-60年代?大众消费

年代 1960-70年代?文化反叛与设计颠覆 1980-90年代?数字科技时代 1990-2000年代?多元媒体兴起

1、发展历史 二.版式设计元素分析 Elemental

analysis文字 图形 颜色 字体、字号 字距、行距 段落、对齐 1.文字 元素、符号 图片、特效 层次、机理 2.图形 抽象元素，影像的轮廓化处理 元素的组

合，仿古纸张机理的运用 突出、对比 图片、特效 层次、机理 3.色彩 热烈、沸腾、膨胀 忧伤、回忆、温暖 神秘、渴望、畅

想 三.版式设计的应用 1.平面媒介

1、纸媒（纸张、开本的选择）

2、印刷艺

术（印刷知识）

3、特殊材料（PVC板、KT板、墙画等）2.视频媒介

1、影视

广告（电视广告）

音乐网页中版式设计的视觉表现 篇3

关键词：音乐网页；版式；空白与虚实

一、音乐网页版式设计的背景

近年来，随着计算机技术的迅猛发展和人们生活水平的不断提高，互联网越来越广泛的深入到人们的日常生活和工作当中。与此同时，信息传播业也面临着一场深刻的变革。互联网作为一种崭新、迅捷的信息交流方式，它使信息的传播突破了传统方式的阻隔，使信息传达的范围、速度与效率都产生了质的飞跃。

互联网络作为一种全新的传媒方式，具有迅捷、及时、价廉、交互性好、传播面广的特点，为视觉传达设计的传播提供了良好的条件。但是网络上不乏充斥了纯粹为了炫耀技术的网站，比如把文字、图像、动画等元素毫无秩序的堆在网页上，浏览这样的网页有些像在人满为患的公交车上，让人感到头晕目眩。视觉效果恶劣的网页，不但毫无美感可言，而且还会影响向用户传达信息。

如今现代社会生活、工作节奏日趋加快，人们无暇去慢慢欣赏繁琐的网页，并且因文化素质的提高和价值观念的变化，生活情趣和审美趣味更趋向简洁、单纯化，页面设计以需求功能为目标，要求简练、准确，“简约设计”由此深入人心，是各种艺术形式都必须遵循的普遍原则，也是网页设计的趋势。

二、音乐网页版式设计的表现手法

（一）风格的定位

对于网页设计来说，要做的第一步工作就是确定网页整体的风格，不同类型的网站需要有不同的风格，而且风格要与主题内容相统一。为了顺应“简约设计”，让杂乱的网页变得轻薄简洁而美观更好的表达音乐网站的主题，页面版式去掉一切无关主题的元素。实现简化设计的第一步，不是简单的去掉大部分图片，而是要重新考虑内容并将其简化到无遮盖的需求。只有这样才能让页面中的音乐主题实现预期的效果。

（二）版面的排版

网页的版式设计同报刊杂志等平面媒体的版式设计有很多共同之处，它在网页的艺术设计中占据着重要的地位。但网页的排版与书籍杂志的排版又有很多差异。印刷品都有固定的规格尺寸，网页则不同，它是通过互联网显示在用户电脑屏幕上，页面尺寸与显示器大小及其分辨率有关。网页版式的局限性就在于无法突破显示器的范围，以及浏览器也会占去一些空间，留下的页面变得更小。当确定了网页总体风格之后，根据现有的图片、文字等素材进行页面划分，文字作为最原始、最有力的信息传递方式，在网页设计中也是至关重要的。

1.音乐网页设计中的视觉规律

由于网页风格的不同，人们在浏览网页的同时会产生不同的视觉和心理感受，为了使网页发挥最大的视觉传达功能，在进行网页设计时必须考虑到人们视觉流向的心理和生理特点，由此确定各种视觉构成元素之间的关系和秩序。

2 .虚实和留白的应用

简洁、单纯、可用是当今网页设计的主流。迅速、有效地传达信息，少用装饰，简洁的网页成为人们的追求。留白作为一种经典的版式设计方法，已经延伸到当今各个设计领域。网页版式设计留白是网页艺术性的需要，更是实用网页可用性的要求。

留白是一种艺术形式，在音乐网页版式设计中，留白可以发挥重要作用。利用留白来达到页面的平衡，使整个页面布局松紧有度，形成虚实、轻重的效果，给人以跌宕起伏的感觉。并且可以引导浏览者的视线转移到页面的四周，使页面版式具有“透气”的感觉。没有很好的留白，页面就会显得拥挤不堪，用户会不知道视线该停留在哪里，更不用说表达主题了。音乐网页版式设计是以传达音乐信息为主要目的的，留白最重要的是体现网页的可用性。简洁明快、富于美感的页面版式更具有可浏览性，方便浏览者更快找到自己感兴趣的信息。认知心理学的研究证明，留在空白之中的东西更容易被人注意和想起，留白对浏览起强调和停顿的作用，有助于突出设计主题。

当用户被满满的文字、图像等淹没时，适当的留白会让我们可以轻松浏览信息。当前的音乐网页，页面上堆积的信息可以“多”、“乱”来形容，从视觉上区别其他网页的有效办法就是运用版式的留白。通过虚实的表现使文字、图形之间形成节奏感、版块层次感、内容主次感，创造“透气”的虚实感受，给浏览者带来轻松、愉悦的享受和无限的想象空间，从而更好地体会经典音乐中所潜藏的过往记忆。

（三）表现形式

方形图使图像内容更突出且将主体形象与环境共融，可以完整地传达音乐主题思想，富有感染性。加上方形图的页面，给人以稳重、理性和安静的感觉。

导航栏又把整个页面分成上下两部分，分别安排图片和歌曲信息。两个部分形成对比：有图片的部分感性而具活力，歌曲信息部分则理性而平静。不同的子页面可以通过导航栏的移动来调整图片和歌曲信息所占的面积，来调节对比的强弱，就会产生变化丰富的的效果。

（四）色彩的应用

在音乐网页设计中，好的色彩搭配可以更好地烘托音乐的主题。色彩的合理选择会使网页成功一半，其中主色调应当蕴含主题文化的心理信息。

由“怀旧”联想到上个世纪的黑白电视机，而轻快的白色可以给人很好的轻快速度感，大面积的白色可以让其它颜色呈现出深度、明度和饱和度的不同层次，通过对比让亮色更加明快。整洁、大空白的同时让用户保持欢快的情感进行浏览。

三、音乐网页版式设计中的审美需求与审美趋势

（一）审美需求

人们对美的追求是不断深入的，网页设计同样如此。网页不光是把各种东西放上去，能看就行，更要考虑如何使受众能更好地和更有效率地接收网页上的信息。这就需要从审美的方面入手，制作出清晰、整体性好的页面，使人浏览起来产生愉悦感，更容易接受信息。

当我们打开电脑收听音乐时，上网一看，好像每个音乐网页都是一样的。从标题的放置，歌曲的搜集，按钮的编排到动画的采用都是如此，没有发挥自己的网页的特点。但是中看不中用的网页也是不少。例如有些音乐网页将按钮溶入到页面的图片中去，倒是比较漂亮了，整体感强了。但是有时候却找不到播放按钮，造成困难，这同样是不可取的。因此，我喜欢的音乐网页设计是有故事有主题的，在版式上区别与其他同类网页。

（二）审美趋势

音乐网页设计拥有传统的媒体的不具有的优势，例如能够把声音、图片、文字、动画相结合，营造一个生动的视觉表现。但是最基本的模式还是平面设计的内容，所以依然要顺应“简约设计”这个趋势。

随着时代的不同，特别在生活节奏如此快的互联网时代，人们的审美观念也在不断地變更，但是美的本质是一样的。厌倦了嘈杂的人们越来越喜欢简单的版面，单纯的元素可以让人静下心来好好欣赏音乐。“简约设计”的出现无疑给人们一种简洁、清新的感觉，是大众所向往的，迅速、有效地传达信息，少用装饰，更是网页设计师所追求的。（作者单位：武汉纺织大学）

参考文献

[1] 侯慧俊、钱永宁著.网页界面设计创意指南.上海科学技术文献出版社，2009年

[2] 倪洋著.网页设计.上海人民美术出版社，2006年6月第1版

[3] 王建民著.网页设计.湖南大学出版社，2006年9月第一版

[4] （德）鲁道夫·阿恩海姆著艺术与视知觉湖南美术出版社2008年

网页版式设计 篇4

1 网页版式设计

1.1 网站制作流程

每个网站在主题、内容、规模、功能等方面都各有不同, 但是有一个基本的开发流程可以遵循。第一阶段是规划网站和准备素材;第二阶段是网站的总体设计和网页版式设计及具体制作;第三阶段是测试、发布、推广与维护网站。可见网页版式设计是网站制作过程中一个非常重要的环节。

1.2 网页版式设计步骤

网页版式设计就是我们在浏览器上看到的一个完整页面。设计师依据网站理念, 将造型、结构、信息、色彩等视听多媒体元素进行有机的排列组合, 将理性思维个性化地表现出来, 达到某种视觉效果, 从而形成网页风格的整体设计。它是网站风格的重要体现, 是决定网站外观的直接表现形式。用photoshop进行网页版式设计的步骤如下:

1.2.1 构思

根据网站的主题及访问群体确定网站整体风格, 并设计版面布局。常见的网页版面布局类型:T型布局、口型布局、三型布局、POP布局等。用哪种布局需具体情况分析。如内容多, 可用口型或T型布局;如展示型企业网站或个人风采的主页, 则POP布局是首选。

1.2.2 用photoshop进行页面整体设计

根据设想的网页页面布局, 用photoshop设计网页页面的效果图。这一步主要是把网站的标志、广告条、菜单、导航条、图象等信息

1.2.3 对页面图象切片并形成网页文件

页面整体效果图设计好后, 利用切片工具将图象文件切割成小图象并优化, 保存为网页文件。一般来说, 头部的色彩丰富, 中间和底部的色彩比较少。为尽量缩减文件大小, 可以在photoshop中分别选择头部、中间、底部分别处理裁切, 另存为几个不同文件, 然后切图。

2 实例设计

本实例以为博士伦眼镜进行网站主页设计为例。首先打开photoshop, 新建一个文件, 尺寸为978*600像素, 颜色为RGB模式, 背景颜色为深灰色。然后根据网站主题, 图片色彩确定白色和灰色为网页主色调, 局部使用绿色、棕红色, 简洁明了, 视觉效果好。最后通过布局模块, 元素整合等步骤, 简单制作出一个网页雏形, 如图1。

本实例主要使用矩形选框工具、椭圆选框工具、钢笔工具, 使用填充命令填充颜色, 然后用文字工具将网页名、导航栏上的菜单名等输出并加入准备好的图片素材, 即可达到以上效果。

3 应用技巧

用photoshop进行网页设计时, 适当运用一些小技巧, 可增加网页的美感。如对本实例中进行一些细节设置, 即可让页面更生动。

3.1 图层样式使用

图层样式的阴影、发光、斜面和浮雕等效果多次作用, 能让网页元素更有立体感, 如本实例中的多处文字和图片均使用到图层样式。用铅笔工具分别选取一个较背景色更深的颜色和较背景色更浅的颜色紧挨着分别画一条直线, 即可得到如图2B的凹进去的效果。

3.2直线设计

图2A中的上下端线条为多次使用矩形选框工具并填充颜色得到的效果, 缺乏立体感。

3.3 自然光照效果

图1中网页每个模块的颜色都是简单的纯色组合, 其效果显得死板不生动。为让页面色彩更加丰富有质感, 可使用白色的软画笔工具, 点击新建图层, 调整图层不透明度, 即可得到图3的自然光照效果。

通过以上各种细节效果设置, 最后得到效果图如下:

与图1相比, 图4显得整体效果更佳美观高档, 从细节处体现出品质和水平。

4 结束语

Photoshop软件在网页的版式设计中发挥着巨大的作用。正确运用photoshop处理图像, 并对网页进行整体设计, 有利于网页各元素合理的整合, 增加网页的美观效应, 并提高网页的制作效率。

摘要：一个优秀的网站除了需要不断更新的内容、合理的色彩搭配、恰当的构图和先进的技术外, 大方的网页版式设计在网站的艺术设计中同样占据着非常重要的地位。笔者介绍了运用photoshop进行网页版式设计的思路和步骤, 并举实例介绍了一些相关的应用技巧。

关键词：网页版式设计,photoshop,应用与技巧

参考文献

[1]张楼英.Photoshop轻松布局网页[J].大众科技, 2012 (04) .

版式设计学习心得 篇5

为设计对象建立一个合适的网格。排版网格是由一些垂直和水平的线构成的结构，可以用来帮助内容结构化，它能够让对象产生秩序感。有些人说网格太过于呆板，影响设计创意，我个人觉得可以把网格当做一个整体大的框架，也可以作为设计师组织文字、图片的支架，它相当于是设计的基础，没有好的基础怎么能够谈得上出色的设计呢?所以网格不仅不影响创意的发挥，反而能使设计师思路得到理性地梳理。网格地使用，能较好地解决设计师关于页面中各元素定位的问题，在这基础之下可以做科学的精准的版式的规划。同时使用网格也是一个令您的设计变得高效的方法之一，在把草图转化为设计稿的过程中，在版式方面主要的难点是如何精确地安排各个元素，如果这时候呢够选择合适的网格进行设计，那么这个起点的意义是不可小看的。

网页中版式的节奏感及韵律，来源于排版中的疏密的间隔安排，它就好比音乐作品里的节拍，也是组织内容的一个重要单元。当然在绘画作品中也是能体现的，只不过绘画作品和设计作品有些类似，都是通过疏密的控制让对象形成画面节奏的和谐感受。

在网页中可以通过一系列的重复和固定的间隔来建立一种视觉和谐的美感，如在一些字体大小，行距、模块与模块间的距离等等的制定。

网页版式设计 篇6

一、版式设计概述

版式设计, 是指视觉元素在平面空间中的构成, 即在一定的版面中, 有目的地运用各种设计元素, 如文字、图形、图表、色彩等加以组织优化的结构方式。是视觉传达设计中一个重要的组成部分。

二、中国古籍版式构成分析

中国传统古籍有着自身特殊的艺术魅力, 在版式、字体、插画等表现上充满了智慧。这些书籍带有很多精巧布局的痕迹, 和中国古代的社会、文化、教育、科技背景息息相关。

1. 文字

在中国的传统古籍当中, 汉字的应用可以算作是一种设计方法, 一本可以流传古今的书籍必然是规矩与度恰到好处的结合, 而一个好的版式设计同样离不开规矩与度的有机结合。

(1) 汉字形态

在中国传统古籍中, 运用到的字体大概可归为两类, 一类是以楷书为代表的书法字体, 另一类是具有现代感的宋体字。从视觉传达的角度来看, 宋体字的笔划横平竖直, 使整个版面的视觉效果整齐划一, 用作为书籍内页的文字时识别度较高。而楷书, 与行书、草书并列作为主要的书法字体之一, 视觉效果更为古朴, 更有书卷气息。

(2) 文字排列

从我国传统古籍的形态发展来看, 由于汉字在古代的书写形式为从右往左, 自上而下, 因此对书籍板式有着深远影响。

对于有大量文字的排版, 其排版的方式主要是整体编排, 突出并协调字体之间相互关系以及字体与其他视觉元素相互关系。相反如果是少量的文字排版, 那么单独的每个字都是支撑版面的重要元素, 这里不仅可以将单个汉字进行设计, 还可以选择拆分文字, 进行重新组合。

2. 插图

中国传统古籍自始至终都给人一种严整素雅的印象, 但在这其中不乏形式多样的插图设计。在传统古籍中, 插图配文的方式相当普遍, 通常不同的风格呈现在各个不同年代不同的版本中, 并伴随雕版印刷的出现, 由手绘插图进步为印制插图, 逐渐兴盛了起来。古代书籍中插图的主要作用是对文字内容的形象说明, 读者以清晰的形象概念, 加深人们对文字的理解, 仅体现了古人图文相辅的整体装帧理念。

3. 版式

(1) 留白

版式设计讲究的不仅在于内容元素的使用, 更关键的是把握好虚实空间。宋代时期的书籍发展出了线装书, 就更考究了, 为它的天头、地脚都布置空白, 天头大、地脚小, 不仅具有以视觉上稳定感, 同时, 也给人以悦目的美感。

中国艺术自古就讲究留白, 它是中国艺术的主要特点之一, 也是构成中国艺术之美的重要因素。我国古籍版式中除了视觉形象这些实体元素以外, 还存在着大量的空白。留白设计实为积极的文化行为, 这种文化行为具有审美性质, 包含了审美经验和审美价值的积淀。王羲之讲:“实处就法, 虚处藏神。”我国书籍封面设计中, 空白的质朴、肃静, 内页空白的井然有序, 或是优雅、或是规则, 都采用了不同虚实结合的方式, 利用了不同的对比语言, 强调出各自所需要传达的内容。

(2) 比例

从比例来看, 在版印刻书进入了兴盛时代的宋代, 书籍版面的文字排布疏密有致, 视觉元素排列有序、整体效果从容自然、开阔大气, 虽然简单质朴, 却不失和谐之美。如此美感的离不开版面内比例的合理运用, 以古籍中的分割空间排布文字的界行为例, 界行之间的距离如果太窄, 版面就会显得拥挤, 相反之间的距离若太宽, 版面就会显得松散。这种恰当的比例关系时刻体现在页面的设计元素之间, 并影响着整个版面观赏效果。

三、中国传统古籍版式设计对现代版式设计的影响

版式设计的应用范围广泛, 涉及到书籍、报纸、杂志刊物、海报招贴、和网页界面等平面设计各个领域。这里重点分析传统古籍中优良的排陈布版方式和深层的文化内涵对现代版式设计中的书籍设计和平面设计的影响。

1. 书籍设计

中国古代书籍版式涉及诸多版面设计普遍共识的设计原则, 和谐有序、比例恰当、对称平衡、变化统一、空间留白以及整体设计的意识等都是影响现代书籍设计的基本原则, 两者一脉相承、互生共存。它不仅为我们提供了基本的设计法则, 同时也提供了审美经验和设计理念。

在文字与图形、图像版式组合方面, 古籍对现代书籍设计有一大经典的启示, 即留白。从对古籍设计的研究发现:视觉空间中, 大小不等、多样的版式元素看似复杂, 其实有章可寻, 其负形留白的感觉是一种轻松、巧妙地留白。讲究阴阳、有无的空白之美, 是为了更好的衬托主题, 集中视线和拓展版面的视觉空间层次。设计者在处理版面时, 利用各种方式手段引导读者的视线, 并给读者恰当留出视觉休息和自由想象的空间, 使其在视觉上张驰有度。

2. 平面产品设计

版式设计在平面产品的设计中, 海报招贴, 网页设计, 交互界面设计这三方面的设计从中国传统书籍上同样也有借鉴之处。

海报的设计普遍遵循整体性和平衡, 而这两种设计原则在中国传统古籍中均有体现。由于古籍中的栏线界行将文字等视觉元素聚集在一起, 因此使文字内容在视觉上给读者整体性的感觉, 营造出了阅读时愉悦专注的环境。在古籍的版式中, 矩形的版框具有平衡视觉, 引导视觉的作用, 这种平衡是整齐一律的发展和变化, 是既对立又统一的空间关系中保持一种相对的稳定。

对于网页设计和交互界面设计, 它们虽具有交互性, 需要根据用户的需求来进行版面各区域的设计, 但在设计的本源上同样需要遵循传统书籍版式设计延续下来的设计特征, 只有在具有整体性, 画面给人以条理、自然的情况下, 才能给用户以愉悦之感, 使之能够深入其中。

四、结语

中国传统古籍版式古朴典雅、和谐有序, 是古代人将功能与秩序完美结合的智慧结晶、经典创造。在进行版式设计的过程中, 我们应在合理表达的基础上, 参考借鉴古代书籍的创作经典, 感悟传统古籍艺术的内在文化内涵。中国未来的版式设计, 不应仅仅追求表面的张扬, 而是应该在前任创造的基础上不断深入、不断沉淀, 给予后人以历史性的影响, 就像中国古代书籍对历史文化的继承一样, 精准而又深厚。

参考文献

[1]苗红磊.周作好.现代版式设计[M].成都:西南交通大学出版社, 2014.

[2]曾国兴.中国古代印本书版式设计的研究[D].中国美术学院, 2008 (6) .

[3]黄震宇.中国古代书籍版式形式与成因研究[D].南京艺术学院, 2005 (5) .

网页版式设计 篇7

一、空间的作用

空间指在版式中相对于图形和文字而言未被任何元素占用, 需要刻意经营的空白空间。它是版式设计的重要元素, 而不仅仅是图文的空白背景。同时, 空间也具有形状、面积、色彩和肌理等属性。在版式中经常使用的空间形式有刻意经营的空白及正负空间两种。

空间围绕在图形和文字的周围, 承载和衬托了整个版式讯息。我们常常只关注图文的编排, 却忽略了它们与空间的关系。图形是传递信息的载体, 而空间则使传递更有效、更有节奏。版式中的空间并非人们通常认为的那样仅仅是图文的背景和剩余无用的部分, 而是与图文同等重要并需要刻意经营的空白。因为, 空间对于图文的传达、页面的节奏和版式的风格都具有相当大的影响。在版式设计中, 空间往往和图文一样被作为设计的基本要素来进行精心处理。而正负空间的设计利用了知觉规律中的“图形/背景模式”规律, 使图形和空间通过共用边界而形成共生状态。在视觉焦点的转换中, 图形和空间不断产生有趣的互换。在图形创意课和构成基础课中同学们都曾经接触过这种空间造型方法。

二、空间在版式中的价值

简洁的空间和图文的对比可以减少于扰、衬托信息和增强主题。城市规划如果没有广场和草坪就没有城市的“肺”, 透不过气的环境不仅让人感到压抑, 也削弱了建筑本身的形态和魅力。书籍如果没有空间和图文的对比, 阅读就会混乱、压抑和缺乏节奏感。

设计师简·奇错德曾经称空间为“好设计的肺”, 但这一点却经常被忽略。在我们周围有许多设计作品为了表现丰富的内容, 被图形和文字填充得满满当当, 然而期望和结果却正好相反, 出现了阅读困难、内容杂乱和格调低下的情况。低质量的设计往往就是那些忽视“肺”的设计。不同空间的设计, 不仅仅强化了主题, 还形成了阅读的节奏美。好设计的“肺”不仅仅在“呼吸”中产生了生命的律动。这种律动形成了阅读和愉快感及舒适感, 让版式产生出意境。根据研究表明, 具有高贵感和优雅感的设计如高档化妆品、高档香水、高雅文化产品、奢侈品牌的广告设计、包装设计和店面展示设计往往体现出一个共同特征:具备简洁的、大面积的空间。所以, 在我们的社会文化习惯中, 空间的运用不仅仅是一种设计效果, 还具有象征意义, 即代表着某种高贵的品质和“雅”的风格。

三、版式空间的设计方法

1、空间的支撑

空间的支撑指版式布局时, 需要有能够到达页面四周边缘或版心线的形态来支撑整个页面空间, 就像伞架和梁柱一样。这些形态确定了空间的尺度, 让整个版式在既定的页面上更完整, 而不会出现多余的无效空间。首先, 可以通过在版心线上放置元素来控制空间的完整性。在页面四周可以安排到达版心线的文字、照片、符号或线条等要素来支撑空间。其次, 也可以安排图文元素到达页面边缘。

2、空间的激活

空间的激活指版式布局时, 需要运用点化或者线化的小面积图形和文字来打破封闭而沉寂的空白, 使版式更加活跃。在设计时, 可以利用单独的大字、一行小字、缩短提行的段落、L0G0、几何形点或线、符号, 甚至页码作为元素来激活空间。如 (图一) 所示, 书法文字、图形、标题字和左上角的块状文字一起支撑住了版式空间, 使页面看起来更完整饱满。同时, 书法文字和段落小字也分别激活了页面右边和左边两个封闭的空间, 并激活了下面这个相对封闭的空间, 使版式更加活跃。

3、空间的简化

版式中如果空白留得太多就会造成讯息的复杂和混乱。即使是热情、活泼的版式, 也不能随意分布图文, 而造成数量众多的空间。空间的简化指在设计时, 耍控制图文间空白的数量, 从而使空间更好地衬托图文, 产生阅读节奏和提升版式格调。操作时, 可对各图文元素进行组合和聚集, 从而让琐碎的空间得到简化, 并形成更大的空间。在画面元素少而小, 空间过大时, 则可通过空间激活的方式来活跃页面。

上图图文间的空间被简化。图文聚集, 并有意留出了中间的矩形空白。空间衬托了图文讯息, 并使页面获得了轻松的阅读节奏。照片的构图也进行了空间的简化。蓝色的海洋使北极熊非常突出;迅速抓住了观众的注意力。右页中的标题和段落文字则是对上面简化的大面积空间的激活。

4、空间的面积关系

空间的面积关系指将版式中的多个空白按照一定的面积比例来布置, 让它们形成由大到小的变化和节奏。一方面, 空间的面积关系使页面获得了阅读的节奏。另一方面, 置于大面积空间上的图文元素又能够被强调和突出。首先, 需要对已经简化的空间设定出不同的面积比例, 避免这些空白大小相同。其次, 可通过对图文的缩放、聚集和增删来扩大或减小空间面积。再次, 可将重要的图文要素置于大面积空间之上, 以获得特别的强调和突出。

空间无处不在, 比起平铺直叙的版面, 空间感强烈的版面拥有更加丰富的表现层次, 视觉度会更高, 也更加耐人寻味。版式设计, 就是在版面上有限的平面“面积”内, 根据主题内容要求, 运用所掌握的美学知识, 进行版面的“点, 线, 面分割”, 运用“黑, 白, 灰”的视觉关系, 以及底子或背景的色彩“明度, 彩度, 纯度”合理应用, 文字的大小, 色彩, 深浅的调整等, 设计出美观实用的版面。

参考文献

[1]魏来.设计密码[M].中信出版社, 2010.

[2]原研哉.设计中的设计[M].上海美术人民出版社, 2002.