版面构图的要点

摆放图片时的注意事项

如何放置图片能够让版面更有特色？

（倒三角形与对角线构图）

注意阅读顺序与稳定感

◆ 利用对角线构图——创造版面的稳定感

◆ 制作留白的空间——让页面动起来

◆ 妥善放置大量的图片

 

 

如何让杂乱的图片变得井然有序

当页面中图像较多时，该如何提高可读性？

（充分运用风格系统）

利用平均分割的网格，整齐地呈现内容

虽然这样的设计容易显得单调呆板，但是只要在网格间或是版面的配色上多下工夫，就能让版面活泼起来。

◆  分别集中配置不同元素，以强调页面的统一性。

◆  拉大网格间距，避免压迫感。

◆  利用网格分割跨页版面

 

 

如何避免规划出单调的风格系统

如何保留版面的整齐感，同时增添不同的页面变化？

（在网格的配置规则上下工夫）

利用连接网格的方式创造页面变化

◆  以不同比重的区域，创造不同的版面比重

◆  同时运用网格系统与分割线

◆  网格的连接方式

 

 

如何设计出华丽而热闹的版面

如何将大量的图像编排出节奏感？

（利用去背图片进行自由式的版式设计）

利用不固定形状的去背图片让版面产生节奏感

◆  利用3个散开的图像为页面创造动感

◆  交错放置大小不一的图片

◆  对齐页面底端以强调稳定感

 

 

让矩形图片变得更柔和

如何能让图片感觉不是那么方方正正？

（以自由式版式设计方式进行宽松的编排）

豪迈地呈现出类比感

图片的风格是否与版面氛围吻合，便是此版式设计的要点所在

◆  制作出随意贴在墙上的图片效果

◆  强调高低起伏的线段，以制造调皮童趣

◆  利用大小不一的图片，呈现自由随意的感觉

 

 

整齐的内文与有节奏感的版面

如何将杂乱烦琐的信息整理得清楚易懂？

（在版面里设置轴线）

利用横长的对象作为主轴

除了能沿着轴线清楚地引导读者的阅读顺序外，还能整理文本信息。也能分割版面区域，并赋予含有多张图片的页面稳定感与整体性。

◆  图片与内文区域也能成为轴线

◆  配置色块以强调轴线（赋予统一感）

◆  用图片创造出对角线方向的版面轴线

 

 

如何整合散乱的页面

如何让页面散发沉稳感与统一性？

（用图片或内文制造版面轴线）

运用看不见的轴线来优化页面

当页面看来没有重点，或是很散乱的时候，便可考虑设置轴线的方式来整理它。

◆  设置垂直、水平双轴线

◆  利用内文产生垂直方向的轴线

◆  将轴线设置在页面下方以稳定版面

◆   

 

 

让琐碎的元素变得和条理

如何将众多复杂的信息井然有序地呈现出来？

（运用背景或配置方式为元素分类）

将版面整理得更清楚易懂

最典型的做法，就是放置多张去背图片，元素分类时，可在背景处填上不同底色，或是将同样属性的图片放置在同一区域中，而关键就在于能明确地区分群组。

◆  利用填色网格增加动感

◆  以区域的方式编辑图片位置

◆  利用背景色块的形状，为版面增添重点装饰 

 

 

将多篇报道分别独立突显

如何区别同级别的不同信息？

（运用背景色进行分类）

利用不同大小的背景色创造版面节奏感

◆  利用白色底+色彩框，呈现轻盈的版面印象

◆  以卡片风的食谱创造有趣的版面结构

◆  利用色块统一矩形图片组

 

 

分割出简单易懂的版面结构

如何整齐地呈现各元素？

（将每段内容分别做成一个区域）

用图片分割版面

分割版面的方法有很多种，包括分割线、背景色、色块、标题和留白等。目的就是让页面区域化，整理成可读生强的版面。

◆  利用留白+小标题，干净利落地分割版面

◆  使用分割线以垂直方式分割版面

◆  以3行文字的小标题作为设计重点

让红色为页面创造出重点，也强化了各区域的整体感。

 

 

如何做出清爽整齐的版面

如何做出看起来既稳定又整齐的版面？

（对齐版面里的矩形图片）

整齐排列图片后，再稍微错开以创造动感

◆  用4个正方形作为一个版面区域

◆  将同类图片重叠放置，增加区域的整体感

◆  包围跨页版面的图片放置方式

 

 

让版面读起来更加有趣

如何利用图片的放置方式来活泼气氛？

（用直线与曲线创造动感）

忘掉网格的编排方式，制造有幽默感的设计

◆  能牢牢抓住视线的X型图片配置

◆  利用对角线放置的图片创造阅读顺序

◆  沿着S型放置图片，让读者越读越有趣

 

 

 

用装饰性元素分割页面

怎样才是有效的页面分割方法？

（应用分割线）

同时具备功能性和装饰性的设计元素

◆  将段落之间的分割线当做装饰

◆  活用色块稳定地切割版面

◆  使用不同的背景色来切割版面

 

 

如何让各篇文章的界限更清楚明快

如何整理版面，让多篇文章显得更易读？

（利用分割线与背景色进行分割）

制造明显的分界，设计出更易读的页面

如果界限不够清楚，会减弱读者想快速浏览的兴趣。

◆  利用没切齐的框线与间隔，让版面显得更轻巧

◆  利用原点分割线，不着痕迹地增添装饰效果

由于圆点分割线比一般分割线更具轻盈、柔和的特点，因此它能很地融入杂志设计中，也很适合运用在可爱风格的设计里。

◆  利用4种背景色块来整理信息

运用不同的背景色分割出4块主题。

 

 

 

在分块的版面中突显设计重点

如何为琐碎的信息增添节奏感？

（利用编号以及色块制作引人注目的标题设计）

利用标题设计也能表现文章区域的统一性

在放置了多块琐碎信息区域的版面里，除了要考虑整体感外，还要避免让版面显得无聊。

尤其是在以并列方式介绍大量内容时，版面特别容易显得单调而缺乏动感。在此要介绍的例子，是在各区域中加入了重点设计，使之成为版面的有效装饰。其中，在每个区域里加上图像式编号的设计，也十分常见，而这样的数字除了引人注目并让版面产生律动感外，也能有效整理信息。

◆  利用编号创造出个性十足的版面

◆  利用黑色色块统一整个版面

◆  同时使用编号、分割线和小标题的组合技巧

◆   

 

 

做出冷静而稳重的页面

如何编排使版面呈现自然的安定感？

（善用黄金比例）

利用1：1.618的比例，就能产生自然的安定感

◆  利用黄金比例的长方形，将版面均分为3等分

◆  交互放置垂直、水平方向的黄金比例长方形

◆  以左右对称的方式组合对象

◆   

 

 

均衡地放置版面元素

如何营造版面的稳定感？

（稳定版面重心）

色调的浓淡与留白的程度，决定了版面的重心与平衡

◆  均匀摆放图片，由文字产生版面重心

◆  大而轻以及小而重的图片

◆  大而重的图片以及小而轻的图片

 

 

营造出有条不紊的氛围

如何整理易显杂乱的图片信息？

（以网格为基础进行编排）

不要轻易使用自由式版面编排设计

图片数量较多时，很容易导致过度统一，因此自然会想采用自由式的版式设计。但若未经设计而盲目摆放，往往会给人凌乱散漫的感觉。在这种情况下，不要勉强采用自由式版式设计，而应导入网格系统，在编排上才不会发生太大的问题。不过这样的方式也经常会造成过度统一而缺乏变化的问题，应适度缩放图片尺寸，以增添其强弱对比。

◆  突显单张图片

◆  在页面下部以带状形式编排图片

利用宽松的版式设计为商品营造豪华氛围时，偶尔会因留白不当而破坏掉版面平衡。此时，可让图片以带状形式摆放在版面下方，以稳定版面的重心。

◆  三角形的图片编排设计

除了主图外，还需要摆放其他图片时，可利用三角形构图的方式，建立出图片的平衡重心。

 

 

用直观感受传达内容

如何运用元素来构造版面？

（利用三角形构图的方式制作大小变化）

在呈现节奏感的同时，也能明确传达出内容

利用大小不同的图片创造节奏感，同时仔细摆放图片的位置，则能通过页面整体印象，传达版式设计内在的概念。如果图片的数量不多，或是内文字数较少时，元素间的平衡比版面的节奏感更为重要，并可通过留白的方式，避免编排出过于牵强的版面。

◆  利用不同大小的图片，为版面增添变化

将矩形图片分在大、中、小3种，再以倒三角形的方式完成版式设计。

运用不同大小的图片，除了能引导读者视线，也能产生出一定的节奏感。

◆  利用对角线实现版面平衡

放弃平行方向的编排，改用对角线这样相互错开的构图方式，除了能避开过于工整的印象，还能突显版面稳定性。再搭配倒三角形的结构，更加强了视觉上的效果。

◆  用留白活跃版面

 

 

让图片呈现出轻盈感

如何避免版面过于单调？

（有节奏地摆放图片）

呈现律动感，就能表现轻巧气氛

矩形图片摆放得毫无比重变化，摆放位置缺乏设计感，也没有创造出动感，使得版面呆板、无趣。可以为版面分为上、下两个群组，利用图片的位置创造出节奏感，也同时让整个版面产生出轻盈的印象。

◆  将图片编排在对角线上以创造对比效果

◆  利用不同尺寸的图片展现出轻盈感

◆  巧妙运用不同的比例

 

 

呈现出层次分明的内容

如何避免杂乱的印象？

（灵活地分割版面空间）

在版面里设置轴心，以分割出不同区域

◆  利用色块分割版面区域

◆  运用留白均匀分割页面

◆  垂直分割版面，整齐地排列内容

 

 

编排出更具整体感的页面

如何更有效的传达内容？

（利用群组化的方式对内容进行分类）

利用群组化的方式，巧妙地对内容进行分类和整理

以颜色和形状这类视觉元素为主，再加上其他有意义的元素组成区域，这样的分类方式称为群组化。可能效地为页面分类外，还能带来井然有序的印象，而这样的手法在处理大量商品的介绍页面时，非常有效果。

颜色、形状、尺寸和花纹这些条件，都可以作为群组化的主要依据，而只要群组化的依据够明确，就能完成简单易懂的版面设计。

◆  统一大小比例，创造群组性

◆  沿着网格进行编排

◆  利用网格+颜色来群组化元素

 

 

将各元素配置得简单易懂

如何表现版面元素之间的比重？

（明确地设计出对比构造）

采取能产生对比意识的编排策略

◆  在两侧的页面边缘上设立重心

◆  垂直错开对比构造，为版面创造动感

◆  以单页为单位构成对比

 

 

用更适合的方法引导视线

如何创造明确的阅读顺序？

（灵活运用的轴线）

利用“轴”引导视线，并让元素更明确

◆  由上到下引导视线

◆  由右至左引导视线

◆  以左右非对称的方向引导视线

 

 

让插图更令人印象深刻

如何引导读者进入插画的世界？

（在插图上搭配图片）

在插画里配置照片，并将两者巧妙结合

关键在于必须把插图与照片整合在同样的构图结构中。

举例来说，如果是要将有人风景图片与插图搭配，队了要考虑图片的构图之外，还必须将图片里的一部分做成插图，以避免因透视角度不同而产生不协调感。因此，图片与插图不可完全分开处理，而必须同步制作。

◆  将图片融入插图中

◆  将插图尺寸夸张化

◆  将图片融入地图中

 

 

为单调的版面增添一些变化

如何利用有限的素材制作版面中的重点装饰？

（加入能够引人注意的重点设计）

将变化暗藏于简单的版面里

◆  设置部分文字颜色

◆  利用背景色创造变化

◆  突显数字序号，以作为设计重点

 

 

将内容编排得更有编辑性

如何编排出视觉上显得简单易懂的版面？

（运用流程表的形式设计版面）

将能分区处理或能对应至轴线的内容，用流程表表现

◆  将内容融入年代表中

◆  利用轴线整理内容

◆  将版面编排成流程图

 

 

将内容编排得既好懂又美观

如何美观而又整齐地呈现出统计图表与资料？

（试着加入视觉化设计）

只要妥善运用视觉化元素，统计图也能成为华丽的设计元素

◆  将折线图的折点替换成图案

◆  将数量与种类视觉化

以尺寸大小来反映销售数量