系列设计

开场问题

系列设计不是给所有图片套同一块底色。真正让读者认出“这是同一套内容”的，是稳定的阅读结构：标题总能被找到，主图总有合适的位置，重点信息有一致的强调方式，内容再变也不会把版面挤散。规则太少，四张图像临时拼在一起；规则太死，标题一变长、照片一变暗，模板就只能靠手工抢救。

栖光花房已有 P07 的四张系列封面旧稿，分别用于活动预告、晨露香草盒、微光桌花和材料说明。它们都用了绿色和花朵照片，却放在一起很难看出关系：有的标题居中，有的贴近边缘；有的背景偏暖米白，有的用深色满版照片；有的标题只有四字，有的标题长到压住主体。店主每次做新图都从“上一张看起来不错”的文件复制，越改越不一致。

图解：四张都用了植物照片，却没有共同的阅读入口。 标题位置、照片处理、边框与留白彼此冲突时，同色也无法形成系列。

这类问题不能只靠再选一套配色解决。读者需要在连续浏览时迅速识别栏目，同时每张图又要能清楚地说不同的事。系列设计的目标不是复制，而是建立一套足以处理变化的轻量规则：哪些固定，哪些可替换，遇到异常时先改什么。

本章会为“春日窗台计划”建立四张系列卡的最小视觉系统，并把 P07 的混乱旧稿变成一页能交给未来自己或同事使用的规则表。规则应能被执行、被测试，也应允许被解释地打破。

---

任务书

案例：〈栖光花房的春日窗台计划〉。制作四张同系列封面或知识卡，至少包含三种不同内容条件：一张活动预告、一张晨露香草盒商品卡、一张微光桌花商品卡、一张活动材料说明卡。它们的事实边界不变：活动原始时间为 2027 年 4 月 18 日（周日）14:00—16:00，地点为晴川里社区共享花园 A 区，对象为 10 岁以上亲子家庭与社区居民，限 18 组、每组 68 元；商品资料分别以资料表为准。第 9 章不使用第 12 章的改稿日期、名额或手套提醒。

图解：统一的是版式规则和颜色角色；变化的是图片主体与信息任务。四张卡并排时既能形成系列，也能快速区分内容。

四张卡的使用场景是连续推送或资料页概览：读者需要一眼看出它们属于同一活动，同时能分辨“这是活动信息”“这是商品说明”还是“这是材料准备”。二维码若出现，只能写为 【预约二维码示意：不可扫码】 的文字或空白示意框；不应成为系列识别元素，更不能由生成画面产生。

本章交付物固定为：4 张完成卡、可编辑母版/源文件、一页可填写的规则表，以及第 5 张压力样张。规则不应写成“感觉自然”“颜色好看”这种无法复用的话，而要让别人据此替换标题、照片和内容后仍能得到合格版面。第 9 章只使用 P07 的已授权照片；任何新的测试照片必须先登记为“第 9 章测试素材”，未登记前只使用文字题面或空白照片框。

---

找到最小系统

图解：模块化封面背景——观察统一背景与可变信息模块的关系

最小视觉系统要少到能被记住，又足以处理变化：字体层级、色彩角色、标题区、图片区、间距、边框和图标即可。它固定阅读秩序，不强迫所有卡复制同一构图。

图解：固定的是寻找路径，可变的是内容。 稳定框架承接不同照片、标题长度与事实模块。

品牌色的角色是：深叶绿 #355C57 用于标题与框线，暖米白 #F5F2EA 用于背景，柔陶红 #D87861 只作小面积行动提示，雾蓝灰 #C9D6D3 用于信息区。正文用清晰无衬线字体，标题可用粗体或已授权衬线字体。暗图改用暖米白文字区；颜色是角色，不是每张图必须有相同色块比例。

系列名称和正式事实均以后期文字呈现。背景只提供留白与氛围，不能承担活动日期、商品规格、店名或标识。

---

写成可以执行的规则

图解：相对网格规则——把安全边距、顶部区和标题区写成可复现规则

要完成的能力：把“看起来像一套”翻译成未来可重复执行的尺寸、位置和替换约束。

通用动作：选一张 P07 旧稿的结构作为母版，不直接把它当万能成品。在画布上叠一层相对 100×100 网格：四边各留 6 格安全边距，顶部识别区固定 10 格，标题区最多 30 格，余下空间再分为主体框和事实标签区。把“系列标记、卡片类别、浅底文字区、二维码占位”标为固定标记；把标题、照片、短引言与辅助说明标为可变字段。相对网格比死记某个平台像素更容易迁移到后续画幅。

图解：相对网格让规则跨画幅迁移。 横向与竖向卡片改变比例时，安全边距、顶部区和信息区仍保持同一逻辑。

把文字样式命名为“系列名、主标题、补充说明、事实标签、行动提示”，而不是“绿色大字”“小字二”。为图片创建统一的圆角、边框或裁切规则；为图标创建固定线条和位置规则。每一项应写明替换者需要做什么，例如“主标题超过两行时，先缩短表述或改为说明卡，不得继续缩小字号”。

中间状态：规则页能让使用者知道标题位置、可变文字、不可删字段和暗图处理。四张卡不必相同，但入口、空间秩序和强调方式稳定。

结果检查：用空白模板只替换标题和照片。若仍要逐个拖动元素，规则太模糊；若主体被缩小或事实标签无处可放，说明容错不足。合格模板应使第二版无需从头设计。

下面是一页可直接放入项目文件的填写记录示例：

---

先固定阅读结构

要完成的能力：让读者在不同主题、不同照片中仍能迅速找到同类信息。

通用动作：先在四张空白画布上放入相同的识别区、标题区和事实标签区，不放照片也不加装饰。然后把四张卡各自最重要的信息填进正确层级：活动卡必须完整放入活动名、日期时间、地点、对象、名额、费用、参与方式占位；晨露香草盒卡需要商品识别和室内窗边限制；微光桌花卡需要约 18 厘米与不含礼盒；材料说明卡需要四类材料和“留白花材包仅活动参与者领取”。最后才从 P07 的已授权照片中选择可用画面并按主体区裁切；没有合格画面时留空框或先登记第 9 章测试素材。

图解：先搭骨架，再放层级，最后进入内容。 四张卡从相同结构出发，最终形成统一但不雷同的系列。

中间状态：关掉照片后，四张卡仍有相同骨架：先见类别和主题，再看主体，随后找到事实或行动信息。照片打开后，商品卡可偏实拍、材料卡可偏信息图，但不再各自发明阅读入口。

结果检查：把四张缩略图排在一起，不读文字先看三秒。若只能认出“都是绿色”，而找不到共同的标题位置或信息节奏，说明统一还停留在表层；若四张看得像同一张图的重复拷贝，说明可变元素不足。接着逐张放大，检查主题是否真的先于说明被读到，事实标签是否被照片的高光、花材和背景纹理干扰。统一的阅读结构应增加识别速度，而不是抹平内容差异。

活动预告可突出活动名与行动区，商品卡突出主体，材料卡突出对象分区；它们因任务不同而变化，却都让读者在熟悉位置找到标记、标题、事实与下一步。

图解：同一套作品允许任务不同。 活动、盆栽、桌花和材料卡共享入口与节奏，同时保留各自重点。

---

给变化留出位置

图解：系列规则与可变内容的协作关系

图解：压力测试异常——用长标题、暗图和字段增加触发条件分支

要完成的能力：面对长标题、深色照片、竖图或信息增加时，仍能保持系列识别和内容清楚。

通用动作：为模板事先写“压力条件”，而不是等崩坏后才临时调整。先做第 5 张压力样张：输入标题为“面向十岁以上亲子家庭与社区居民的春日窗台材料领取与到场核对”，它在当前标题区实际超过两行。再分别测试暗图、竖图和活动字段增加。每次只改变一个条件，记录固定规则、允许调整与失败分支。使用 P07 的已授权照片；若另需照片，先登记为第 9 章测试素材。深色照片下切入固定浅底文字区，不用半透明花纹遮住所有内容。

图解：一次只改变一个条件。 长标题、暗照片、竖向主体和信息增加分别暴露模板的容错边界。

中间状态：模板开始显示弹性。标题变长时仍保持可读，可能由一行变两行，但不会压住主体；P07 中较暗的画面会切入固定浅底文字区，使微光桌花的“不含礼盒”仍清楚；材料卡多出“仅活动参与者领取”时，会扩展说明区或拆出第二张知识卡，而不是缩小全部字体。读者仍认得系列，但能察觉这一张比上一张承载了不同信息。

图解：异常不是靠手工硬挤，而是进入预先定义的分支。 每种压力条件都有对应的结构调整。

结果检查：用以下问题逐项审视：长标题是否仍有足够字级？暗图上的文字是否有充分对比？竖图是否因为迎合横向框而拉伸或切掉主体？新增信息是否保留了原有主标题的优先级？如果只能通过手工微调每一个元素才能过关，规则需要增加明确的应对分支；如果为了通过测试删掉限制或事实标签，则不是模板成功，而是内容被牺牲了。

压力测试也能防止“规则迷信”。有时确实应改版：活动预告信息远多于商品卡时，可以把参与方式拆成下一张说明卡；一张没有合格照片的卡可以暂用模块化图标和文字，而不是强行塞入不相关的花朵。系列规则是帮助判断的工具，不是让所有问题长成同一形状的模具。

---

复盘旧稿的差异

图解：系列输出预览——比较四张完成卡与第五张压力样张的稳定性

要完成的能力：区分真正妨碍识别的不一致，与为内容服务的合理变化。

通用动作：将 P07 的四张旧稿并排，给每一项差异标记“阅读结构”“事实表达”“照片风格”或“纯装饰”。例如标题位置在四张间反复变化，属于阅读结构问题；有的图把限制条件放进角落，属于事实表达问题；照片由白底商品变为花园环境，可能是合理的内容变化；每张都换一种边框纹理，通常只是装饰噪声。按影响读者判断的程度排序，不要只按自己是否喜欢来排序。

图解：先判断差异影响什么，再决定是否统一。 结构偏移和事实遮挡优先修，合理的照片变化可以保留。

中间状态：你会发现并非所有不一致都要修掉。微光桌花可以采用更近的局部照片，材料说明可以用分区图标；它们的主体不同不等于系列失败。真正需要修的是让读者迷路的差异：找不到标题、找不到重要条件、无法判断哪张是活动信息、同一种强调方式在不同卡上代表不同意思。

结果检查：

修订后将四张卡片并排，请测试者完成以下问题：

• 先回答：“这是一套什么内容？”
• 再分别说明每张卡片各自讲什么。

判断标准：

• 如果第一问无法正确回答，说明系统缺少共同线索。
• 如果第二问全部答成同一种内容，则模板设计过于同化，缺乏区分度。 按清单逐项勾选检查：
• 活动卡需包含七项必显字段：
  1. 活动名
  2. 日期时间
  3. 地点
  4. 对象
  5. 名额
  6. 费用
  7. 参与方式（占位即可）
• 商品卡不得出现以下错误：
  1. 二选一属性不能写错
  2. 不能将礼盒加到微光桌花上
• 材料卡检查要点：
  1. 明确写清留白花材包仅活动参与者领取
  2. 不能将基础工具描述为额外专业设备
• 二维码只验收：
  1. 是否有扫码占位
  2. 是否符合安全边距要求
  3. 不进行实际链接或扫码测试

---

案例分析

案例分析：案例〈松岚内容社的栏目封面压力测试〉

原始情境：松岚内容社有四个生活栏目，原先只规定“都用浅蓝底和白色标题”。第一期标题很短时效果不错；第二期换成长标题，第三期照片很暗，第四期是竖向人物图。编辑为了保持蓝底，把长标题缩到很小，暗图上的文字看不清，竖图被压扁后人物比例失真。

发现的问题：规则只固定了颜色，没有固定阅读结构，也没有给变化留出容错。编辑每次都靠手工搬动元素，最终四张封面虽然有蓝色，却没有稳定的标题区、主体区与说明区。栏目名有时被当标题，有时又消失，读者无法快速识别来源。

判断依据：统一应优先稳定读者的寻找路径，而不是稳定某个表面颜色。可变内容必须有明确边界：标题最多几行，暗图怎样建立高对比文字区，竖图何时换裁切，信息变多时何时拆卡。照片真实比例和内容可读性优先于模板的表面一致。

修改方案：内容社建立顶部栏目区、两行标题区、主体裁切区和底部说明区四个模块。蓝色改为可选背景角色，而非满版硬性要求；暗图使用浅色文字底，竖图使用竖向主体框，长标题超过两行时改写或拆出说明页。每期提交前均用四个压力条件预览。

图解：案例改造的重点是稳定阅读结构。 右侧保留不同图片比例，却让标题、主体和说明重新回到可预测的位置。

验收结果：新封面有不同照片和节奏，但缩略图上仍能看见同一栏目入口；读者可快速区分主题和栏目。最重要的是，新编辑不用逐个像素猜位置，也不会因保留蓝色而牺牲标题可读性。

---

错误与修复

错误变体：案例〈栖光花房的绿底万能模板〉。四张旧稿都套深叶绿或暖米白，却有的标题在底部、有的在中央，有的重点信息藏在照片后；长标题被缩小，微光桌花的“不含礼盒”被删，材料卡也没有写“留白花材包仅活动参与者领取”。

这不是颜色不够统一，而是没有固定阅读结构和事实标签。修复顺序是先按 100×100 网格固定 6 格安全边距、10 格顶部区、最多 30 格标题区与事实标签区；真超过两行的标题必须改写或拆卡，暗图切入固定浅底文字区，竖图切竖裁切框或换图。复测时让读者找出活动七项字段、商品限制和材料领取边界；任一字段找不到，就回到规则表而不是再加装饰。

图解：同色不等于同一套。 标题乱跑、信息缺位和装饰堆叠会破坏识别，即使四张都使用深叶绿。

---

练习与验收

用 P07 旧稿为起点，完成栖光花房的活动预告、晨露香草盒、微光桌花、活动材料说明四张卡，并制作第 5 张压力样张。第 9 章只用 P07 已授权照片；新测试照片必须先登记为“第 9 章测试素材”。

图解：完整交付不止四张成品。 母版、规则页和压力样张共同保证系列下一次仍能被正确复用。

验收可按以下标准进行：

• 单张卡能准确说清自己的内容任务，四张并排又能被认成同一系列；
• 标题、主体和事实标签的阅读顺序稳定，深色照片和长标题仍可读；
• 活动卡完整显示七项必显字段；晨露香草盒、微光桌花、活动材料没有混写或漏写已确认限制，材料卡含“仅活动参与者领取”；
• 第五张样张不依赖逐个元素的手工挪动，且可编辑母版/源文件保留可编辑层与清楚版本名；
• 二维码仅作为不可扫码占位，通过安全边距检查即可，不以扫码或链接可用性作为本章验收。

如出现“不像同一套”或“太像而分不清内容”两种反馈，分别回到固定元素和可变元素表定位。不要马上增加装饰，先确认读者到底在哪一步失去识别。

---

换条件任务

把四张系列卡的读者改为活动现场的志愿协助者，而不是线上浏览者。仍只用 P07，新增照片先登记为第 9 章测试素材。

图解：读者改变时，内容模块重排，系列规则继续保留。 在线浏览卡转化为现场概览、材料核对、商品选择和提醒卡。

独立交付物仍为四张完成工作卡、可编辑母版/源文件、一页规则表和一张压力样张。

---

交互练习