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

一、功能性界面的练习

功能性界面是互动性强的版面，除了界面的图文展示，还需要有互动功能。一般根据板块功能来进行排版，注重板块与内容的母子关系、板块之间的并列或上下文关系等。最重要的，要理解基于表格的版面特征。

表格是数媒领域的版面根源

无论网页还是手机应用，最基本的页面结构就是表格（Table）。一个版面就是一个表格，版面元素一行一行从上往下排列。这是页面背后的程序语言决定的，懂网页源代码或安卓代码的都清楚。明白了这点，学习页面的排版布局就简单多了。

简单说，把版面看做一行行的只有单列的表格，一行可以放一个项目，也可以放多个项目。

微信的发现版面，可见的有9行。第1行是标题栏，放“发现”标题。第2到第8行是项目栏，每行就放一个项目。第9行是属于微信全局的导航栏，这一行放了4个项目（图标）。其实，看不见的行还有几个，比如第2和第3项目栏之间的行距，就是一个没有可见内容的行。 很清晰的表格。背景游戏中A行是标题栏，B行是导航栏，中间两侧还有一些行放置活动图标。前景是任务面板，从第1到第6行放置不同的项目。第4和第5甚至组成了子面板。

标题栏：第一行就是表格的表头，或者叫做页面的标题栏，一般放标题。

导航栏：标题栏如果再多放几个标签，就可以做成标签导航栏，可以切换页面了。导航栏可以放顶部，也可以放底部，比如微信的主导航栏在底部。考虑到操作便利性，手机应用的导航栏都放在底部。

子项目：标题栏下面一行一行可以放子项目。一行一个子项目的，就叫列表方式（list），比如微信首页。一行多个子项目的，可以叫图标方式，比如支付宝首页。

子板块：标题栏下方还可以放子标题栏，子标题栏和其下的子项目组成一个子板块。这样一个标题栏可以有多个子版块。

微信支付。每行可以放1个项目，也可以放2个项目，比如第2行，也可以放3个项目，根据需要决定。利用标题栏做法，我们可以在版面中生成很多组合，其中的腾讯服务的第3到第6行，就组成了一个子板块。 右侧两个子版块，2个子标题栏和多个子项目。底部是导航栏。

二、练习3：简单的母子式界面的排版练习

最简单的母子式界面就像一个有标题栏和内容区的表格，标题栏放置标题等重要元素，内容区放置若干个子项目，内容区的每个子项目都是可互动的内容入口。

排版内容：1、母板块：标题“斗罗大陆”。2、子项目：多个关卡图、关卡名称如“圣魂村”、“诺丁城”、"猎魂森林"等。

设计流程1，注重母板块的设计：

（1）确定主次：以母板块为主，将整个母板块（标题栏和内容区）作为整体界面进行设计，子项目配合整体需要。

（2）整体构图：以母板块为主体和趣味中心，进行整体创意和构图。设定标题栏和内容区，设定子项目的大致布局。总体上看，子项目就像一件精美服装上的纽扣。

（3）细节设计：设计标题、装饰，设计每个子项目的图形、文字和装饰。注重整体效果，子项目锦上添花。

要求：完成一个关卡地图，地图中至少要呈现3个关卡，关卡状态随意，其他关卡可以隐藏或虚化或遮掩处理。整个地图有一个名称，每个关卡也有各自名称。地图与关卡为母子关系，风格统一。

评分标准：（1）为母子式构图，母面板和子项目的主次关系要清晰，母面板整体统一，各个子项目既要有个性也要有共性统一。可以借鉴典型的构图样式；（2）注意每个子项目的局部整合设计，局部的主次，细节精美。

保卫萝卜3的工厂关卡，顶部去除导航栏和信息栏后，剩下就是工厂关卡了。这是注重母板块的整体设计，标题栏在左下，子关卡点缀在板块上，就像精美衣服上的纽扣。 英雄无敌的章界面，注重母板块的整体设计，子关卡配合整体需要，锦上添花。 LXG电影，注重母板块的设计。LXG电影名和演员剧照组成母板块，是整个版面的趣味中心。子项目是各个链接按钮，低调辅助、统一协调，完全配合整体构图的需要。 电影《亚瑟王》网站，注重母板块的整体设计。演员剧照和电影名、宝剑整合为母板块的对称构图。子项目是网站的各个板块链接，放在刀刃上，色彩和形式都与整体画面统一。

设计流程2，注重子项目的设计：

（1）确定主次：以子项目为主，将每个子项目作为趣味中心，整个母板块作为次要甚至辅助。这类关卡更像系列书签的设计，可以参考：花瓣－书签，或百度“插画书签”。

（2）整体构图：以子项目为主体和趣味中心，进行整体创意和构图。先设定好内容区和子项目的布局，再确定标题栏。总体上看，母板块就像餐桌上的桌布，上面摆着丰盛菜肴（子项目）。

（3）细节设计：首先设计每个子项目的图形、文字和装饰，然后设计整体板块、标题和装饰。

保卫萝卜3的总关卡界面，注重子关卡的设计，甚至总关卡都没有任何文字提示。 崩坏3的主线剧情总页面，去除顶部无关的导航栏和信息栏后，剩下的就是主线章节板块，注重子项目（章）的视觉效果和趣味中心的作用，每个子项目都有整合、设计精美。母板块就只有一行标题字。 英雄无敌的图鉴汇总页。注重每个子项目的设计表现，子项目做了整合设计。母板块除了标题栏，还有背景图案，其实就是一张桌布的作用。 纪念碑谷2的关卡。注重关卡的设计。 插画可以直接做关卡的，为什么不呢？ 和插图关卡很像的就是书签，插画书签不就是一个关卡么？ 哈哈，虽然不符合关卡要求，但画风简洁有效，画起来快啊。这个可做人物。 这样的风格做故事章节也是可行的 小插图很适合表达某个概念。 做插图关卡，挺好挺有效的。 这个画风很适合绘制插画式的关卡图。线条简单概括，装饰风格。 不错的数字和文字标志整合，非对称构图。 这两个图的配色思考下。 真水果＋插画，我是看中了色彩。在对比甚至互补色的配色组合中，如何压制其中大面积的主色调，衬托趣味中心的色调。

三、练习4：复杂的组合式界面的排版练习

复杂的界面都可以分解为简单的界面，如果一层层去除界面中的导航栏和辅助的信息栏，界面就会简化为展示性版面或母子式界面。

排版内容：1、核心板块：人物图、名称“唐三”、文字“武魂：蓝银皇、昊天锤”、“史莱克七怪：小三”。2、导航栏：史莱克七个头像图。

设计流程：

（1）整体构图：以核心板块为主要，以导航栏为次要，在页面中先确定导航栏的构图位置和形式。

（2）核心板块设计：以核心板块为主体和趣味中心，进行整体创意和构图，利用展示性或母子式版面的设计方法。

（3）细节设计：注意局部的整合设计，把握好整体的主次关系，也要把握好局部的主次关系。

要求：（1）先选择一种典型的展示性排版样式，完成一个人物角色的信息介绍界面，可以包括人物原画、头像、文字、图标、装饰等内容；（2）对次要信息进行整合设计，根据各元素的特点设计整合的方式，充分利用线面构成、重复韵律等方式。（3）将完成的版面进行配色练习，需要完成三种不同的配色效果，比如清新、妖艳和华丽，或者暗影、光明和自然，等等。注意：可以用一个人物来完成3种配色，也可以用三个不同人物各完成一个配色。

评分标准：（1）画面色调优美，统一中有对比，对比适宜。（2）主次关系清楚，趣味中心色泽丰富，明暗调子清晰。（3）细节色彩处理仔细，抓住重点，有主有次区别对待。

英雄无敌的英雄界面，版面结构是展示性版面+导航栏。除去顶部的信息栏和左侧的导航栏，剩下的就是英雄介绍板块，这就是一个简单的展示性版面。展示性版面为齐右构图，以人物图为主，边上齐右排列各个次要元素，包括名称、等级、技能等，有局部整合。 崩坏的英雄界面，版面结构是展示性版面+导航栏。除去顶部的信息栏和导航，除去底部的导航栏，剩下的就是英雄人物介绍板块，它采用的是简单的展示性版面。展示性版面是对称构图，以人物图为主，两侧对称放置各个次要元素，包括人名、类型、武器等，有局部的整合。 少女前线的战斗界面，版面结构是母子式版面+导航栏。不过她使用了两个层级的导航栏，最左侧的一级导航栏，中间的二级导航栏。右侧才是本界面的核心板块，这个核心板块采用的是简单的母子式版面。母子式版面以突出子项目为主，子项目包括图标、图形、文字、完成度等信息，进行了局部整合，母板块属于辅助。 人物界面，群雄 人物界面，角色

四、学生作品

单程洁 江志文 汪佳文 张馨予 张馨予 张馨予 张馨予 陈嘉威 黄雪奇 邵羽 叶祎姿 尹依萍 赵海燕