中文排版与基础构图

开场问题

把 P04 旧版活动海报放到手机上缩小查看：标题和日期一样大，醒目的色块散落在四周，预约二维码贴着边缘，活动对象却没有出现。读者不是看不见文字，而是不知道先读哪一行，更不知道“这是否适合我”和“下一步怎么做”。当信息变多时，很多人会做出同一种反应：所有文字一起缩小，所有颜色一起变重。结果是画面更热闹，阅读更困难。

图解：手机缩小后，同权色块和贴边装饰方格让视线路径四处跳转

中文排版的任务不是把字排整齐，而是安排信息抵达读者的先后。以栖光花房的“春日窗台计划”为例，第一次接触的读者应依次获得以下三件事：

1. 这是怎样的活动
2. 什么时候、在哪里举行
3. 怎样判断自己是否适合并继续预约

其中，以下内容都是确认无误的教学事实，但并不需要全部都放在最显眼的位置，也不能因为版式拥挤而遗漏：

• 活动对象：10 岁以上亲子家庭与社区居民
• 限 18 组
• 每组 68 元
• 通过预约页登记

本章会把 P04 重做为一张信息清楚的活动图，并给同一版式换上更长标题和新增限制条件，检验它是否真的稳定。你要用主体区、标题区、行动区和留白建起路径；用字体层级、对齐和有限颜色完成分组；最后用小屏预览和他人复述检查，而不是在放大的画布里自我感觉良好。

即使没有图片文件，也可依下面两张材料卡完成本章的版面判断：

P04：问题海报

• 标题：“春日窗台计划”
• 日期：“2027 年 4 月 18 日（周日）14:00—16:00”
• 问题：
  1. 标题与日期同样醒目
  2. 地点、费用和名额散在不同角落
  3. 右下角的抽象方格框紧贴边缘
  4. 对象“10 岁以上亲子家庭与社区居民”缺失

P01：晨露香草盒白底照

• 画面：暖白背景，陶色花盆中只出现罗勒或薄荷之一
• 问题：主体偏小，右侧标题留白不足
• 边界：图中没有可采信的店名、价格、日期、规格或包装文字

图解：P01 主体偏小且留白不足；P04 信息同权、分散并留有内容缺口

任务书

案例〈栖光花房的春日窗台计划〉需要一张面向社区居民与十岁以上亲子家庭的活动图。它与第一章封面不同：这里要帮助读者准确参与，故须呈现主题、时间、地点、对象、费用与名额、行动入口和必要提示；但信息不是平铺清单，仍要有清楚的优先级。

本次使用 P04 作为问题材料，主体照片只使用 P01。当前资料包没有列出另一张可用于本章的照片，不能笼统地写成“桌花”或临时换入未确认照片；若后续补充照片，必须先进入资料包并标注可用范围。P04 的旧问题只用来诊断，不得延续其遗漏或贴边二维码。正式文字全部后期排入可编辑文字层；店名、活动时间、地点、费用、名额、商品规格、二维码都不交给图像生成。二维码位置仅使用【预约二维码示意：不可扫码】，链接若出现在练习记录中，统一使用资料包的教学占位，不把它伪装成真实入口。

请注意，信息层级不是事实重要性的排名，而是阅读顺序的安排。例如年龄限制必须正确而完整，却可以放在第三层；二维码是行动入口，却不需要用最大面积占住画面。每一层能被找到，才叫没有遗漏。

图解：主题、时间地点、条件、行动与补充信息依次抵达读者

信息分层

先把零散资料抄成信息卡，再进入画布。一个简单方法是把每条信息都问三次：读者是否必须在第一眼知道？是否必须在决定参加前知道？是否只在行动前核对即可？答案会让你停止把所有内容做成标题。

“分层”不是让字号只剩大中小三档就结束。它还包括字重、位置、背景明暗、留白和分组。若两条文字本该一起读，例如日期与时间，就让它们在同一行或同一信息块中靠近；若它们属于不同决策，例如活动对象与预约动作，就通过更大的间隔或不同区域分开。组内距离应小于组间距离，读者无需读懂设计术语也会感觉出关系。

图解：相同信息从散乱跳读变成组内紧密、组间分明的连续阅读

在此处做一次事实核对。P04 中遗漏活动对象时，不能以“版面太满”为理由保留遗漏；它应回到第三层，与限 18 组、每组 68 元同组呈现。若任何资料来源不确定，就写待确认，不要用猜测补全。排版能改善可读性，却不能修复错误事实。

选择构图

基础构图不是寻找神秘比例，而是先给不同职责划出稳定区域。主体区让照片或关键视觉对象承担注意力；标题区让主题有足够安静的阅读背景；行动区放读者完成下一步所需的信息；留白负责分隔和呼吸。四个区可以重叠，但不能都抢同一小块位置。

图解：居中、左右分区与上下分区的职责区域和安全边距

本章可选择上下分区重做 P04：顶部用暖米白建立标题区；中部放 P01 这一来源明确的主体图；底部把时间地点放在一组，对象、名额、费用放在相邻次级组，行动入口最后出现。深叶绿承担标题、正文和行动文字，暖米白或白色承托行动文字，雾蓝灰可以承托次级信息块；柔陶红只能用于边框、图标或小面积底色，不能用作行动文字。这样读者能沿着“主题—时间地点—参加条件—行动”的路径读完，不需要在角落寻宝。

构图一开始只画空框更可靠。用无内容的矩形占住标题区、主体区、行动区，把每个框缩放、移动、对齐，直到路径合理后再放真实照片和文字。此时若发现长标题没有地方，说明结构问题发生在文字出现前，应该调整区域比例，而不是要求标题挤进一个小盒子。

安排文字

图解：构图层级与长标题的重排对比

要完成的能力：让中文标题和说明形成稳定的层级。 中文没有天然的单词间空格，断行、行距与段距的判断因此格外直接地影响理解。字体首先要可读、可替换，并在同一使用场景中保持一致；不依赖来源不明或读者设备未必具备的字体。

通用动作： 先为标题、正文/关键信息和辅助说明定义有限的层级，而不是每一句换一种字体。标题可使用清晰无衬线中文字体的粗体，或一款已确认授权的衬线中文字体；其余信息保持清晰无衬线文字。让标题与正文有明显区别，再用字重和间距区别第二、第三层。将“春日窗台计划”放入预留标题区，优先保持词组完整；日期时间作为一组，地点作为下一行或相邻组；对象、名额和费用不与标题争夺同样的字重。

中间状态： 你会先看到文字框和灰阶层级：标题最大，时间地点是明确但次一级的块，条件信息更轻，行动入口在阅读末端有可找的位置。即使暂时不用真实颜色，也能识别哪一句是标题，哪几句应连着读。

图解：不依赖颜色，大小、明暗和间距仍能让缩略图保留阅读层级

结果检查： 把图缩小，或把它打印成小预览再退后一步看。若标题只剩一团密字，先增加标题区、调整断行或删去重复修饰；若时间地点被看成一串难以分辨的数字，调整分组和行距；若对象限制只能靠红绿颜色才看得出，添加文字标签或位置分组。任何重要状态都不应只靠一种颜色传递。

中文长标题的处理有四个顺序。先在词义边界断行，例如“春日窗台／计划”；再检查每行长短是否有稳定重心；随后调整行距，让两行是一组而不是两条分离公告；最后才考虑改写。改写不是偷换主题，而是删掉重复修饰，把完整名称保留在正式信息区。例如标题变成“春日窗台计划：亲子香草盆栽活动”时，可以让“春日窗台计划”承担主标题，把“亲子香草盆栽活动”降为副标题，避免所有字都同样大。

图解：长标题先识别词义单元，再平衡两行重心和行距

长标题压力测试必须提交替换前图、替换后图和调整记录。记录要写明标题区是否增高、主体是否移动、行距/段距怎样改变、哪个次级信息组被重排；禁止在“春日窗台”“亲子香草盆栽”“活动”等词义单元内部断行，也禁止把全部文字等比例缩小来换空间。若版面仍放不下，先回到留白与分组，或把重复说明降为副标题。

图解：标题变长时应增高标题区并移动主体，而不是把全版一起缩小

建立色彩与分组

要完成的能力：用有限视觉变量组织复杂信息。 颜色的任务是支持层级和状态，不是填补没有判断的空白。对比指文字与背景在明暗和色彩上的差异；足够对比会让读者在实际尺寸下读得到，而不是只在编辑器放大时读得到。

通用动作： 固定三种颜色角色：暖米白 #F5F2EA 作为大面积背景，深叶绿 #355C57 作为标题、稳定正文与行动文字，柔陶红 #D87861 只用于边框、图标或小面积底色；需要承托次级信息块时才加入雾蓝灰 #C9D6D3。行动文字必须置于暖米白或白色背景上，仍用深叶绿排字。先用深叶绿排出全部文本，再问“行动入口在哪里”；只有行动入口需要区分时，才给它小面积柔陶红的边框、图标或底色。用位置、边距、线条或图标形状辅助区分限制项，不把“仅限十岁以上”只做成某种颜色。

中间状态： 画面不会因为颜色变少而显得空。相反，主题更稳定，次级信息因对齐和留白自然成组，深叶绿的行动文字在暖米白或白色小区块中出现，柔陶红只帮助读者定位边框、图标或小面积底色。若关闭柔陶红，读者仍能通过位置和文字读到预约动作；颜色只是让它更容易被注意。

图解：暖米白承托页面，深叶绿建立稳定层级，柔陶红只作小面积提示

结果检查： 用灰度预览检查明暗层级，用小屏预览检查文字是否融入照片。若深叶绿压在暗照片上仍不清楚，移动到更干净的背景或增加有限的纯色文字底，而不是无限加描边。若画面出现四五种同等鲜艳的色块，回到颜色角色表，删掉没有任务的颜色。颜色越多，越需要更强的规则；入门任务优先把规则做少而清楚。

图解：同一版式在彩色、灰度和手机缩览中都能保持阅读顺序

对齐和留白则让颜色不必承担所有秩序。把时间和地点的左边缘对齐，把对象、名额、费用作为紧密的信息组，再在它们与预约入口之间留出更大间隔。不要为了“有设计感”把每一句旋转、跳位或塞进不同形状里。读者想要的是快速确认，不是解谜。

放入真实内容

要完成的能力：把已确认事实放入可编辑版面，并抵抗生成图中文字的诱惑。 AI 画面里偶然出现的中文、日期、包装字或方格只能算视觉参考。它们形似文字，不代表真实内容，更不应成为可交付信息。

通用动作： 将经过确认的活动文本逐项放入独立文字层：活动名称、时间、地点、对象、名额费用、参与方式、提示。主体照片置于独立图片层；背景、色块、线条和抽象二维码框也分别保留。若选用生成的氛围背景，只把它放在不承担事实的区域，正式文字覆盖在清楚的版面上。为二维码预留一个空白或抽象方格框，并在旁边以可编辑文本标出【预约二维码示意：不可扫码】。

图解：背景、照片、可编辑信息与装饰层分开，才能独立修改和核对

中间状态： 此时你应能隐藏任何一类内容并继续核对：隐藏照片后，信息完整；隐藏文字后，背景不编造商品或活动事实；关闭二维码框后，行动层仍以“栖光花房预约页”这一文字说明存在。层之间彼此支持，但没有一层偷偷承担另一层的真实性责任。

图解：隐藏照片后信息仍完整；隐藏文字后图像不冒充事实

结果检查： 逐字对照事实表，尤其检查日期是否为 2027 年 4 月 18 日、星期是否为周日、时间是否为 14:00—16:00、地点是否为晴川里社区共享花园 A 区、对象是否保留“10 岁以上”、名额是否为 18 组、费用是否为每组 68 元。发现一处未确认或互相冲突的信息，先标为待确认并停止导出，不要用“版面都做好了”掩盖。完成核对后，再做一次裁切模拟，确认二维码示意和行动提示没有贴到边缘。

图解：每项事实都应独立核对；出现空缺或冲突就停止导出

案例分析

案例分析：案例〈南窗课堂的长标题重排〉

原始情境： 南窗课堂制作一张面向家长的课程说明图，原标题为“亲子一起完成第一次自然观察记录”。设计者把整句压缩在一行，下面又用同样大的字放日期、地点和“请先登记”，三种高饱和颜色交替出现。读者能认出很多字，却读不出先后。

发现的问题： 标题过长并不必然导致版面失败；失败的是把所有内容塞进同一条横向空间，又用颜色替代分层。行动信息挤在右下角，限制条件被背景照片吞没。

判断依据： 标题需要先表达任务，时间地点帮助判断是否可参加，登记是阅读末端的动作。长标题可按语义拆开，副信息须组在一起，颜色不应成为唯一的状态标记。

修改方案： 将标题改为两层：“第一次自然观察记录”作为主标题，“亲子一起完成”作副标题；上方标题区保留安静留白，照片退到下方；日期地点做成紧凑信息组，限制条件置于相邻块；登记动作采用单一强调色，并保留足够边缘。删除多余渐变和每行不同的描边。

验收结果： 缩小后，测试者先复述课程主题，再找到时间地点与登记位置；关闭颜色后，仍能辨认信息层级；替换更长的标题时，只需调整标题区和行距，其他信息组不整体崩塌。这个结果说明模板稳定来自区域和规则，而不是标题恰好很短。

图解：长标题课程说明图从拥挤同权改为两级标题、成组信息和安全行动区

错误与修复

错误定位：颜色承担了全部限制信息

一个实验小组把“需预约”“名额有限”“适合十岁以上”分别做成红、橙、绿三种小字，并把所有说明压在照片底部。色觉差异、屏幕亮度或黑白打印都会让这些状态难以区分，照片纹理还进一步降低了可读性。错误位置明确：限制条件只依赖颜色，没有文字分组、图标或位置支持；行动信息被压在边缘。

修复时，先将三条限制放入同一信息块，使用清楚的文字标签与一致的左对齐；只让一种强调色服务于真正的预约动作；必要时用形状或简短图标辅助，不把颜色当唯一信号。把文字移到对比更高的背景，并留出裁切安全空间。修复后让测试者在关闭颜色或灰度预览下复述条件，能复述才算解决。

图解：只靠红橙绿区分会在灰度中失效；形状、分组与对齐能保留关系

另一个常见错误是用描边、阴影和渐变代替层级。定位方式是逐项关掉效果：若所有文字立刻同样轻重，说明没有建立字号、字重、位置和留白的基础层级。修复顺序应从重排信息组开始，而不是再叠一层阴影。

练习与验收

使用 P04 的问题描述、栖光花房事实表和一张已确认可用的主体照片，重做一张竖向活动图。

1. 先写出五层信息清单：主题、时间地点、对象与费用名额、行动入口、补充提示；标明每层的阅读顺序。
2. 用居中、左右分区或上下分区任选一种结构，先画空框，再放入照片和可编辑文字。
3. 使用主体位置与深叶绿、暖米白、柔陶红三种颜色角色做出第一个版本；不新增装饰元素。
4. 将标题替换为“春日窗台计划：亲子香草盆栽活动”，并新增“请提前完成预约登记”这一限制提示，检查哪些区域需要调整。
5. 让一位不了解项目的人在小屏预览中复述主题、时间地点、对象和下一步。记录其遗漏的项目，再修改一次。

图解：从信息卡、空框、放入主体到标题压力测试和小屏复测的完整练习路径

按下面标准验收：

• 测试者能按“主题—时间/地点—行动方式”的顺序说出信息；
• “10 岁以上亲子家庭与社区居民”、限 18 组、每组 68 元等事实没有遗漏、变形或被生成图替代；
• 长标题替换后，断行自然，日期、地点和行动区没有整体错位；
• 颜色有明确分工，关闭颜色仍可识别主要层级，关键限制不只靠颜色表达；
• 【预约二维码示意：不可扫码】不贴边，且不被当作真实可扫入口；
• 主体、标题和行动入口不抢同一个视觉位置，小尺寸仍能读。

换条件任务

独立任务：重排一张“周末手作材料领取说明图”。条件变化为：没有人物或商品主体，只有一张纹理较丰富的工具平铺照；标题更长；读者在横向屏幕上查看；必须同时说明领取对象、领取时段、材料数量限制和确认动作。

请按以下顺序完成：

验收时确认：横屏中仍能依次找到标题、领取条件和确认动作；照片没有抢占文字空间；灰度和裁切预览没有破坏阅读顺序。通过这些检查，才说明迁移的是构图和分层能力，而非复刻栖光花房的版面。

图解：横屏中让工具照片退为边缘氛围，才能给长标题、限制组和确认动作留出路径

交互练习

完成压力测试

• 领取限制同时使用文字与位置或形状表达，不只依赖颜色。
• 将成图转为灰度、缩小并做裁切模拟，记录最先丢失的信息并调整。