展示性版面的练习方法和设计流程

这些是课堂板书进行的快速练习，先讲解基本方法，再让同学们在黑板画出自己的想法，然后给予指导。包括两个：一、展示性版面的练习；二、功能性界面的练习。属于“课程：平面设计基础”。（属于余永海@情感设计）

一、展示性版面的练习

图形展示性版面适合宣传推广，展示精彩内容。一般图文混排，以图形内容为主。版面内容依照主次关系进行排版。

对称构图：初学者，请先学习对称构图，这是排版的基础，也是最广泛应用的构图形式，相当于书法中的楷书。大学期间，不妨把对称构图都研究透了再说。

对称构图有三个优点：天生好感符合万物规律；自动平衡使得画面不会难受；沿轴线自动整合使得画面整齐干净，容易抓住主次。

二、练习1、简单主次排版练习

排版内容：1、主要元素：图。2、次要或辅助元素：文字“平面设计”。

设计流程：这是典型的以图为主、文字为辅的简单版面，排版就是两个元素之间、以及元素和版面的关系处理。

（1）整体构图：在版面中放入1，即图，与版面进行整体构图。图在这里要发挥主体展示作用，发挥趣味中心的作用，发挥大小对比中的大的作用，发挥配色中的主色调作用。

（2）辅助设计：在画面中放入2，即文字“平面设计”，对版面进行辅助性设计。文字在这里只能发挥辅助版面的装饰作用，不能太抢眼只能发挥丰富版面细节的作用，发挥大小对比中的小的作用，发挥重复韵律中的重复的作用，在色调中发挥含蓄隐约的作用。

对称构图。当文字作为辅助元素时，可以把文字看作一个个的点，以点的构成来增添重复韵律、发挥装饰作用。

水平轴+重叠＋整合构图。画面是主要元素，标志和文字都是次要和辅助元素。标志与主题重叠仿佛融入画面，右侧的文字整合成短线条排列，组成画面边缘的辅助内容，发挥了重复韵律的装饰作用。

对称+并列＋整合构图。怎么样？有没有被玩坏的感觉？完全就是点与线的重复和对比构成，文字是中英文的“广州建城二二一〇年纪念金币”、图是印。这里谁是主要元素，谁是次要元素，谁又是辅助元素？或者，这里根本就没有主次，几乎所有元素被整合为一个整体，只有英文做辅助放在顶部做边线。

艺术展览，水平轴构图。一段一段的文字都作为辅助元素，以NATURE为核心，错落的放置在四周发挥装点作用，上方是参展艺术家名字，下方是具体信息。文字段采取了左对齐方式，参考线为其中某个字母。

杂志封面，对称并列构图。以图为主，刊名为次，进行了简单的左右对称、上下并列的整体构图。价格和日期作为辅助，与刊名进行简单的对齐整合。

对称+整合构图。将主要元素和次要元素整合在一起，版面就成了一个整合图与一个背景的主次关系了。这种版面简洁有效，主次关系十分清晰。通过整合图，既展现了趣味中心也交代了次要和辅助元素。

对称+交叠构图。电影海报中，主要元素是场景图，次要元素是电影名称“the Haunted Mansion”。电影名称交叠于画面上方，几乎完全融入了画面中，从字体和色彩上都与主题画面的风格色调保持一致，发挥了辅助渲染氛围的作用。 电影网址是多余的辅助元素。

对称+交叠构图。好简单的排版，不是么？以图为主，商品名为次。文字完全迎合了画面的风格和色调。

对称+重叠+整合构图。图和名被整合在一起，使得画面简洁高效。语种文字是辅助文字，也被放在图中发挥装饰作用。其他放不进去的辅助元素都被丢在角落，避免干扰画面。

对称+交叠构图。次要元素是一个整合式的图标，与主体的图做了简单的对称轴对齐，交叠于图边。并使用辅助的装饰框线和纹样，衬托主体画面。

三、练习2、较复杂的主次辅多元素排版练习

排版内容：以伴生花的排版设计为例。1、主要元素：伴生花图，文字“伴生花”、“蓝银草”。2、次要元素：人物图唐三，文字“唐三”。3、辅助元素：文字“斗罗大陆”等。

设计流程：展示性版面都有很多元素，需要先简化主次关系，就是将所有元素归纳为123三组，这样一来，就变成三个事物（元素组）之间的排版了。

（1）归类准备：先准备所有的版面元素，并按照主次归类为123三组，分别为1组主要元素组、2组次要元素组、3组辅助元素组。主要元素组是版面中的重点，是趣味中心，是展示的主要目的；次要元素组是必要的内容，不是核心也不是趣味中心，但必不可少。辅助元素组是无关紧要的，有了更好，没了也没大问题。

（2）整体构图：根据1组和2组的主次关系，设计版面的基本布局和构图。这是整体布局，处理好整体的主次关系即可。常见构图有：对称（同轴）构图的并列、交叠、前后重叠、整合一体，非对称的有对齐构图、网格构图等。

（3）局部设计：分别对1组和2组进行细节设计。无论1组还是2组，都有图和文字，都需要分别进行组内的整合设计，需要把握好局部中的主次关系。这是版面最容易出彩的一步，如何对主要元素组进行整合和细节设计，体现排版水平。

（4）辅助设计：添加3等辅助元素和必要的装饰等。基本上就是哪里需要去哪里，发挥辅助元素的装饰作用，对比中的辅助作用，出现于版面中最不重要的位置，为版面增添细节等。

（5）总体调整：色调、版面调整。细节设计过程中，会给整个版面带来变化，需要不断进行整体微调，比如色彩调子（此步板书无法完成，课堂练习不作要求，课后正式作业则为必须步骤）

要求：以伴生花为主要展示内容，设计一幅宣传墙纸。版面主要元素为：伴生花图，文字“伴生花”、伴生花的名称。版面次要元素为：人物图，人物的名字。版面的辅助元素为：游戏或故事的名称或图标，其他辅助图形和文字，等等。

评分标准：（1）抓住主次关系进行构图，构图平衡，主次关系清晰，可以借鉴典型的构图和排版样式。（2）注意多元素的局部整合设计，简化画面复杂性，能清晰看出局部的整合。（3）注意细节的处理，图形边框或边缘，文字字体大小间距，每个元素的内容细节和视觉效果都要仔细考虑、精雕细琢。

对称+并列+重叠构图。这是一组酒店菜单等用品，主要元素为酒店名称和图形标志，是文字与图形的整合，位于正中心，背景为辅助图形，重叠构图。下部为次要元素，由图和文字整合。

同一品牌的两种沐浴露，对称+并列+整合构图。主要元素分别为铺满版面的花边、蝴蝶或花草图案，画面缤纷。次要元素为中部的品牌内容，由外框图案、品牌名称和说明文字整合而成，优雅稳定。辅助文字见缝插针，低调存在。

情人节海报，对称+并列+重叠构图。主要元素就是占据全版面的画面，通过花和笔记传达电影主题。次要元素和辅助元素在下方局部进行了大规模整合设计，电影名、影评、副标题、出品版权信息、日期和玫瑰花，等等，中心对称排列，整整齐齐。上方关键演员做为辅助元素与下方产生了呼应。

对称+并列+重叠构图。主要元素和次要元素是名称ICE、水果名和水果图，全部按照中心对称方式整合，辅助文字也遵循对称。

茶花女宣传册。左右两页组成对称对比构图，整个画面都是点线面的构成 。右页为对称整合构图，所有元素整齐排列于中轴线上，这些点、线与左侧大图形成对比。

毁灭之路，对称+重叠+整合构图。所有信息都围绕剧照整合，按照中轴线依次整齐排列。剧照和电影名是主体，演员名和祈祷文字次之。

对称+并列+整合构图。电影名和主角剧照的重叠整合，构成版面主体部分。其他网址、上映日期和其他信息的整合，构成次要部分。最终就是一个简单的左右对称+上下并列的构图。

对称+整合构图。几乎所有次要元素都围绕剧照进行了对称整合，其中图为主，电影名和日期次之，最后是人名。其他辅助元素中，版权信息拿来辅助生成底边线，而分级图是不得已的。

四、学生作品

单程洁

江志文

江志文

汪佳文

张馨予

张馨予

陈佳丽

陈嘉威

郭晓慧

黄雪奇

邵羽

叶祎姿

尹依萍

赵海燕

赵灿作品，雏田

五、功能性界面的练习（链接）

功能性界面是互动性强的版面，除了界面图文展示，很重要的是有操作互动功能。一般根据功能板块来进行排版，注重板块与内容的父子关系、板块之间的上下文关系等。