版式设计 - 日本平面设计师参考手册笔记

PART 3 版面构图的要点

了解构图的基本原则　
适合网格系统的版面比例（1：根号2）很适合等分版面
- 16等分构图
- 中间留白稳定版面
- 包含正方形的排版
摆放图片时的注意事项　
倒三角形与对角线构图（阅读顺序与稳定感）
- 对角线构图创造稳定感
- 留白活跃
- 多图
如何让杂乱的图文变得井然有序　
网格系统（平均分割）
- 分别集中配置不同元素强调页面的统一性
- 拉大网格间距避免压迫感
- 玩个分割跨页版面
如何避免规划出单调的网格系统
连接网格的方式变化
- 不同比重的区域创造不同的版面比重
- 运用网格系统与分割线
- 网格的连接方式　
如何设计出华丽而热闹的版面
去背图自由式设计
- 3个散开图创造动感
- 交错放置大小不一的图片
- 对齐页面低端以强调稳定感　
让矩形图片变得更柔和　
自由式设计宽松编排
- 随意贴在墙上
- 高低欺负的线段
- 大小不一的图片显随意
整齐的内文与有节奏感的版面
利用横长的对象作为主轴
- 图片与内文区域作为轴线
- 配置色块强调轴线
- 图片创造对角线方向的版面轴线　
如何整合散乱的页面　
图片或内文制造版面轴线
- 设置垂直、水平双轴线
- 内文产生垂直方向的轴线
- 轴线设置在页面下方以稳定版面
让琐碎的元素变得有条理　
背景或配置方式为元素分类
- 填色网格增加动感
- 区域方式编排图片位置
- 背景色块的形状增添重点
将多篇报道分别独立突显　
背景色分类
- 白底+彩框轻盈
- 卡片风食谱
- 色块统一矩形图片组
分割出简单易懂的版面结构
每段内容分别做成一个区域
- 留白+小标题分割版面
- 分割线垂直分割
- 3行文字小标题做设计重点　
如何做出清爽整齐的版面　
对齐版面图片（稍微错开）
- 4个正方形作为一个版面区域
- 同类图片重叠放置增加整体感
- 包围跨页版面的图片放置方式
让版面读起来更加有趣　
直线与曲线创造动感
- X型图片配置抓住视线
- 对角线创造阅读顺序
- S型有趣
用装饰性元素分割页面
应用分割线
- 段落间的分割线当装饰
- 色块稳定切割版面
- 不同背景色切割版面　
如何让各篇文章的界限更清楚明快
分割线与背景色进行风格（明显分界易读）　
- 没切齐的框线与间隔轻巧
- 圆点分割线
- 4种背景色整理信息
在分块的版面中突显设计重点
标号和色块
- 黑色色块统一版面
- 编号、分割线、小标题组合　
做出冷静而稳重的页面　
1：1.618稳定
- 黄金比例将版面均分3等分
- 交互放置垂直、水平方向的黄金比例长方形
- 左右对称的方式组合对象
均衡地放置版面元素　
色调浓淡与留白程度
- 均匀摆放由文字产生版面重心
- 大而轻、小而重的图片
- 大而重、小而轻
营造出有条不紊的氛围　
网格基础
- 突显单张图片
- 页面下部以带状形式排图
- 三角形图片编排设计
用直观感受传达内容　
三角形构图制作大小变化
- 利用不同大小的图片增添变化
- 对角线视线版面平衡
- 留白活跃版面
让图片呈现出轻盈感
有节奏的排图
- 对角线排图创造对比感
- 不同尺寸图片展现轻盈感
- 巧用不同比例　
呈现出层次分明的内容
设置轴心分割不同区域
- 色块分割
- 留白均匀分割版面
- 垂直分割整齐排列　
编排出更具整体感的页面
群组化方式对内容进行分类
- 统一大小
- 沿网格编排
- 网格+颜色　
将各元素配置得简单易懂
设计出对比感
- 两侧页面边缘设立重心
- 垂直错开对比构造创造动感
- 单页为单位构成对比　
用更适合的方法引导视线　
轴线
- 上到下引导视线
- 左到右
- 左右非对称方向引导视线
让插图更令人印象深刻　
插图配图片
- 图片融入插图
- 插图尺寸夸张化
- 图片融入地图
为单调的版面增添一些变化　
- 设置部分文字颜色
- 背景色创造变化
- 突显数字序号作为设计重点
将内容编排得更有逻辑性　
流程表形式（分区处理或对应至轴线的内容，用流程表表现）
- 将内容融入年代表
- 轴线整理内容
- 版面排成流程图
将内容编排得既好懂又美观
视觉化设计
- 折线图折点替图案
- 数量与种类视觉化
- 尺寸大小反映销售数量

PART 4 编排文字

文字编排专业术语　
了解文字与编排之间的关系　
齐行时，文字的上下高度无法对齐　
使用文字网格　
选用合适的字体　
根据字体来调整字距　
了解英文字体的基础知识
组合英文与中文　
设置复合字体　
强化内文的可读性　
高雅而有质感的内文　
同时强调图片与标题　
编排出标题醒目的扉页　
设计出对比效果明确的版面　
让文字内容更容易阅读　
让内文页面更加图像化　
为文字创造强而有力的印象　
打造温暖悠闲的氛围　
巧妙地强调文字　
补充说明的设计　
编排出易读的Q&A

PART 5 置图片

提高长文档的可读性　
按自然顺序排版 - 竖排版面（右上-左下）、横排版面（左上-右下）
- 分割线和留白切割内文空间
- 上下相对三角形规划图片和内容
- 沿对角线摆放图片分割内容区
利用图片创造自然的阅读顺序　
沿阅读顺序放置图片
- 利用阅读顺序和位置区分内容
- 标题与图片的位置引导视线
制造版面里的“抑扬顿挫”　
三角形构图及阅读习惯决定图片位置
- 三角形构图呈现稳定感
- 点对称表现轻盈感
赋予版面节奏感　
对角线构图和反复的编排模式（图片位置体现规则）
- 留白创造视觉顺序
- 重复体现节奏感
- 上下错开创造节奏感
用距离传达图片的心情与感受
特写和远景代表不同心里距离
- 特写与远景图片的对比性说明问题
- 满版的远景照描写空间
- 同样尺寸的矩形图创造对比感　
突显版面的视觉设计感　
留白的重要性（多产生高质感）
- 若即若离的图片位置，创造视觉顺序
- 留白突显元素的存在感
- 网格系统防止留白变得凌乱
如何表现宁静的气氛　
边框和留白固定视觉型对象
- 左右对称固定版面
- 部分出血的图片赋予版面开放性
- 三角形让版面显得完整
充分利用图片本身的动感　
重复相同尺寸的照片，强调出对比感
- 同样的放置方式体现对比
- 倾斜创造动感
- 拉开图片间的距离体现左右对比
强调内容的对比关系　
运用图片的象征性与对比的构图
- 矩形图片表现对比性
- 强烈上下对比
- 页面的左右两端摆放图片形成对比
如何体现出图片里的世界观　
矩形图片强调图片的独立性
带出血的图片强调图片的空间延伸效果
- 细长的边界独立呈现图片中的世界
- 满版图片与矩形图片
- 为部分矩形图片设置出血
突显图片中的拍摄主体　
使用自由度极高的去背图片
- 将去背图片当插画使用
- 利用人物的去背图片制造假想空间
- 以大于实物的尺寸强化图片的诉求力
使去背图片表现出强弱不同的比重　
使去背图片拥有不同的尺寸和位置变化
- 沿着图形放置图片
- 不同颜色分类图片
- 从左到右视觉顺序引导读者翻阅
明确表达出图片的编排意图　
适当裁切图片
抓住表现图片含义的关键点，注意图片之间的相对位置
- 裁切图片时抓住体现图片含义的关键点
- 注意拍摄主体与图片外框的间距并裁切
- 大胆的切~ 让目光聚焦于图片的真实性
展现大量图片的视觉张力　
利用尺寸决定图片的主次关系
- 无缝排图时注意配色
- 模仿马赛克效果随机排列图片
- skip
井然有序地呈现大量图片　
打破网格系统的边界
- 极端的尺寸
- 图片间的留白
- 黑色背景随机放置图片创造类似相薄的效果
平衡版面中的图片和文字　
满版的图片内摆放位置
- 标题文字的位置展示图片的位置感
- 沿着图片本身构图放置文字
- 半透明的背景色块保持文字可读性
让图片里的文字多点变化　
根据图片的色调设计文字颜色和背景色
- 将图片的部分内容调整成单色调
- 半透明背景色兼顾可读性和氛围
- 图片中抽取文字颜色
用图片表现连续的动感　
拍摄对象的运动轨迹及时间的连续性
- 排列方式强调出向跨页外侧延展的力量
- 连续图片体现动作的连贯性
- 模糊图片表示速度感
彻底传达运动图片的动感　
多张矩形图片体现画面的动感
- 满屏图片+等分割图片的基本编排手法
- 横跨版面的图片放置方式动态引导视线
- 分格画面的形式放置图片突显连续性
表现出时间分秒流逝的感觉　
长时间曝光图片
- 光的轨迹
- 第一人称
- 第一场景连续摄影
赋予页面特殊的气氛　
仔细修饰后满版表现
- 黑白+单色的配色方式用颜色对比强化印象
- 黑白背景增添透视感与气氛
- 亮色调的清淡图片作为主图
自然地引导读者的视线　
强调拍摄主体的视线（创造方向性）
- 让人物变成倾斜的箭头
- 标题进一步强调方向性
- 利用视觉让读者将注意力集中在标题上
呈现出活泼的节奏感　
方向性创造动感
- 倾斜水平线增加临场感
- 白色外框稳定极端的图像角度
- 视线的方向性表现表情
用图片表现出内心感受　
图片角度
- 水平对等亲密
- 俯视不安定感
- 超多角度震撼
让料理图片看起来更美味
背景黑/白并配置大型图片
- 黑色器皿突显食材
- 白色背景创造，，，
- 表现温暖氛围

PART 6 配色

颜色的基础知识
让图片上的文字更显眼　
图片中有多种颜色时，选择一个恰当的颜色用在文字上
- 黑/白
- 与图片色调一致
- 相反
让黑白图片表现出更好的质感　
黑白照片保留沉稳感
- 变底色创造不同效果
- 与彩图对比
- 彩图部分黑白化
制作出极具效果的双色印刷　
利用明度差距极大的补色配色来重现彩色图片（双色印刷）
- 黑色和其他色
- 两种颜色填入黑白图
- 图片转换成负片
以群组的方式放置素材　
用色相进行分类
- 文字颜色整理信息
- 色块划分区域
- 相反色划分版面
明确地区分页面信息　
色块划分版面
- 小型色块
- 贯穿版面的色块
- 有色的编号粗分
使用能保持可读性的底色　
黑/白 - 可读性最高的颜色
- 高明度暖色系提高可读性
- 鲜艳底色创造活泼感
- 暗淡底色创造品味感
让页面展现不同的表情　
在部分版面使用底色
- 图片当背景
- 不同背景色分割版面
- 不规则底色形状
为页面增加趣味性　
利用配色表现性别　
利用配色表现年龄　
利用配色呈现季节感　
通过配色传达高级感　
利用配色表现浪漫　
利用配色表现热闹的氛围