# 稚学设计系统 0.1 本文为可编辑文字版；三场景的已批原图见配套PDF第4–6页。 从已通过的品牌基础和三个应用样板中，提取下次可以直接复用的规则。先固定识别，再按载体组织信息。 2026年10月2日 · 视觉复用手册 · 供后续设计与验收使用 ## 先区分三种状态 - **品牌规则已确认：**字标、吉祥物外观、基础颜色角色、日常字体与基础组合，沿用品牌基础规范 v0.3。 - **场景视觉已通过：**团购海报、手机商城首页、手提袋。本手册归纳可复用原则，不扩大原审批范围。 - **工作建议待验证：**小尺寸可读性、印刷工艺、真实内容替换、交互与平台适配。这里不是已上线的产品组件系统。 ## 颜色按角色使用 | 颜色 | 固定角色 | 应用边界 | | --- | --- | --- | | #7AAA3A | 字标识别绿 | 原字标叶片与三个圆点 | | #0E0E0E | 主字黑 | 字标主字；标题、正文优先用黑 | | #1E7052 | 校园深绿 | 重点标题、价格与行动入口的强调 | | #B1D985 | 活力辅助 | 少量点缀，不替换字标识别绿 | | #E8F0E7 | 浅绿分区 | 轻量背景和内容组分隔 | | #FAF8F2 | 暖白主底 | 大面积底色；可使用纯白纸底 | | #657069 | 信息灰 | 辅助说明，保留清楚的阅读对比 | **使用顺序：**白或暖白铺底，黑色承载阅读，深绿突出少数重点，浅绿分区，辅助绿点到为止。无需把每一种颜色都放进每张设计。 以上是屏幕 RGB/HEX 参考。实体应用须按纸张、油墨、色彩配置转换并打样，不建立统一 CMYK 或固定面积配比。 --- # 品牌资产与文字规则 ## 原资产直接使用 **规则：**字标使用已确认 SVG 路径，等比缩放；不重打字、不重绘、不拉伸，不独立移动叶片、圆点或笔画。吉祥物沿用已批准的透明 PNG，保留白色帽字、淡奶绿帽叶和原始外观。 **应用：**对外识别以字标为主。需要亲和感时搭配吉祥物；不要求每一版都出现吉祥物。复杂图片上优先设置干净底区。 **例外：**吉祥物仍为1273 × 1236像素视觉稿，尚未制作严格矢量母版。刺绣、丝印、小尺寸等新工艺不能由原图自动推定可用。 ## 留白与组合 - x = 字标上方圆点的名义直径；H = 字标可见图形高度。字标四周至少留1x空白，从可见图形最外缘计算，文件透明留白不重复累计。 - 横向组合：吉祥物左、字标右；建议吉祥物可见高度约1.25H，间距至少1.5x，按可见图形垂直中心对齐。 - 竖向组合：吉祥物上、字标下；建议吉祥物可见高度约1.5H，间距至少1.5x，按视觉中心对齐。组合外围建议至少1x。 可见宽度屏幕160px、印刷25mm是基础稿的暂行建议，未打样，不是经验证的统一下限。首页源码字标元素宽68px属于紧凑场景特例，且包含透明留白；不能与可见宽度直接等同。新场景应在实际显示尺寸单独检查。 ## 日常字体 **已确认：**思源黑体 SC / Source Han Sans SC，400正文、500小标题和标签、700主标题和关键数字；数字与英文沿用同一字体。字标不由该字体替代。 **工作起点：**日常阅读主标题约正文2–2.5倍，小标题1.25–1.5倍，辅助说明约0.875倍，正文行距1.5–1.7倍。营销大标题和高密度手机界面按视距、宽度与内容另设层级，不机械套用。 字体依据既有基础规范：Adobe Source Han Sans 2.005，SIL OFL 1.1。商业设计与PDF嵌入可用；分发字体软件时保留版权及许可，不单独售卖字体。 --- # 通用排版与参数边界 ## 规则先于数值 | 可复用规则 | 如何应用 | 何时调整 | | --- | --- | --- | | 一个主要阅读任务 | 先让人找到主题，再读商品或服务信息，最后看到入口 | 手提袋以识别为主，不强塞交易流程 | | 同组同一对齐线 | 长文字默认左对齐；标题与所属内容共用边线 | 短字标、短句与包装正面可居中 | | 近关联，远分组 | 标签靠近对应内容；组间距大于组内距 | 密集界面先保可读性，不能只等比缩小 | | 容器层级一致 | 同级卡片使用相近圆角、描边和内边距 | 胶囊标签可更圆；包装不需要卡片外框 | | 装饰让位于信息 | 吉祥物、弧线、色块不挡商品和价格 | 角色主题活动可另提主视觉，但须单独确认 | ## 从源码提取的场景参数 以下保留原画布的单位，只用于复刻该模板，不发布为跨媒介全局变量。 | 场景 | 原样板数值 | 值得复用的关系 | | --- | --- | --- | | 团购海报 1080 × 1440px | 左右主边距64px；标题93px；副标题36px；商品图框29px、价格区27px圆角 | 标题显著大于补充信息；主内容共线；两主容器圆角相近 | | 手机首页 390px基准源码 | 主要左右边距20px；网格间距12px；主标题23px；区块标题18px；卡片圆角12px、团购条13px | 界面更紧凑；同级卡片统一；价格可成为卡片焦点 | | 手提袋 640 × 505设计面 | 字标元素宽370；背面吉祥物元素143 × 143；均为概念排版坐标 | 正面以字标识别为主；背面小角色配短句，保留大面积留白 | 首页静态导出时主标题使用22px渲染调整，故源码值不等同截图像素值。390/430px两种静态版式已检查，不能外推为全断点响应式验证。 ## 建立节奏的工作方法 基础规范建议从一个版面单位u建立间距阶梯：小关联1u、组内2u、组间3–4u，外边距从4u起步。屏幕可从8px、印刷可从2mm试排，再按场景调整。u是排版节奏，x是字标留白，不混用；像素不直接换算毫米。 **不做统一硬套：**不要求全品牌固定12px圆角、20px边距、同一标题字号，或所有载体都使用绿色卡片。 --- # 场景模板一 团购海报 已批准演示海报，原图等比呈现 ## 优先卖点与行动 **固定骨架：**品牌区 → 活动标题 → 商品主图 → 价格与活动信息 → 购买入口。 **可替换：**活动名称、商品图、款式、规格、价格、起止日期与入口。先确认信息，再调整排版，不能照搬示例作为真实承诺。 **保留关系：**一张主商品图；价格突出；吉祥物小面积辅助；入口紧邻交易信息。复杂背景不能盖过衣服细节。 ## 例外与检查 多商品活动可另建列表式模板；无需把所有商品硬塞入这个单主图版式。 发布前必须替换并核对所有模拟字段；只有真实入口通过测试后，才移除对应演示标识。 图中商品由AI生成；129元、尺码120–180、10月10–20日均为模拟。原购买入口不可扫码，也不是已生效活动。 ## 下次复用的最短路径 复制可编辑海报HTML → 替换确认过的商品与活动资料 → 检查最长商品名与价格位数 → 在1080原图和360宽缩略图查看 → 验证入口与业务信息 → 再申请发布确认。 模板可以继承视觉，不能继承未经确认的价格、日期、尺码、服务承诺或校方合作关系。 --- # 场景模板二 手机商城首页 已批准首页静态长图 原图等比呈现 ## 优先找到学校和商品 **固定骨架：**品牌区 → 学校搜索 → 品类 → 团购入口 → 商品卡片 → 尺码与咨询 → 底部导航。 **可替换：**学校、商品、价格、分类、服务内容与入口。保持学校选择在前，避免用户先买错学校款式。 **保留关系：**主操作使用深绿；商品与正文有清楚对比；同级卡片保持相近留白与圆角；吉祥物留在欢迎区，不挤占商品信息。 ## 不能直接外推 当前通过的是390/430px静态视觉。演示HTML含模拟交互代码，但未完成真实浏览器交互验证、有赞组件适配、后台或支付接入。 ERP表格、错误/禁用/加载状态、触控区域、键盘操作、屏幕阅读器、完整响应式和真实数据极值，均须另行设计与测试。 ## 下次如何复用 先建立真实内容字段表，再用最短与最长学校名、不同价格位数、缺图及无商品情况试排。优先保持任务顺序；平台限制发生时，允许改变栅格和容器。 图中学校、商品、129/89元等价格均为示例。页面中的宣传短句只用于当前样板，不自动成为全品牌长期口号。 --- # 场景模板三 手提袋 已批准正反面视觉示意，原图等比呈现；不是实体实拍 ## 优先识别与留白 **固定关系：**正面字标为主，背面以小面积吉祥物和短句建立亲和感。深绿底带或侧围用于收住版面；暖白底保留呼吸空间。 **可调整：**实际袋型、尺寸、纸材、提手、侧围与印刷工艺由用途和供应商约束确定。构图可延续，不要求所有包装都套用这一袋型或材质。 **例外：**380 × 300 × 120mm、暖白纸袋、深绿织带仅为当前设计假设，未形成生产规格。丝印、刺绣、烫印等工艺需要单独确认图形可行性。 ## 生产前另设一道验收 使用供应商刀模检查正反方向、折线、出血和安全区；按实际材质打样核对色差、最细笔画、吉祥物小细节、提手固定与承重。获得实物确认后再形成生产版本。 “穿好每一天”“校园日常 · 一起成长”通过本轮包装视觉，不等于获批为全品牌长期口号。当前文件是可编辑排版源，不是刀模或印刷生产稿。 --- # 复用流程与验收清单 ## 按这五步开始下一张设计 - **明确任务：**载体、尺寸、阅读距离、主要内容、最终输出；选最接近的已批模板。 - **锁定母版：**只使用已批Logo和吉祥物原件，继承颜色角色与字体。 - **替换内容：**建立真实资料清单；先核实学校、商品、价格、日期和服务承诺。 - **调整场景：**重排标题与留白；记录为什么偏离起步字号、圆角或建议尺寸。 - **分开验收：**视觉确认、业务信息确认、交互或工艺验证各自留记录，全部满足才进入发布或生产。 ## 资产索引 | 文件或文件组 | 用途 | | --- | --- | | 稚学_标准Logo_彩色.svg / .png | SVG为原路径排版；PNG用于位图场景 | | 稚学吉祥物_挥手_帽叶淡奶绿_配色确认图.png | 当前已批吉祥物视觉原件 | | 稚学校服_品牌基础规范_v0.3.pdf 稚学校服_品牌基础视觉板_v0.3.png | 基础规则与快速视觉参考 | | 稚学校服团购_海报样板_1080x1440.png 稚学校服团购_模拟样板_可编辑.html | 已批模拟海报与复用源稿 | | 稚学校服_手机商城首页_1080px长图.png 稚学校服_手机商城首页_可编辑样板.html | 静态首页与模拟原型源稿 | | 稚学校服_手提袋_正反展示_v0.1.png 稚学校服_手提袋_正反平面_v0.1.png 稚学校服_手提袋_可编辑排版源_v0.1.zip | 外观展示、平面参考、编辑源包 | ## 交付前逐项确认 □ 原资产未变形、重绘或误换色　□ 留白与文字清楚 □ 主任务突出、同级样式一致　□ 真实内容与权利已核对 □ 模拟标识处理有依据　□ 实际屏幕或印样已检查 □ 未验证项明确列出　□ 文件名、版本、变更说明齐全 ## 版本更新的工作约定 本版0.1首次汇总，未修改现有资产。建议文案纠错记0.1.x；新增已验证场景记0.2等次版本；改动字标、核心配色或主字体须单独确认并评估主版本。每次记录日期、变更项、原因、确认范围与仍待验证事项，旧稿保留，不静默覆盖。 依据：已确认品牌基础规范v0.3（本次读取最新修订）、已批准三场景原图及对应可编辑源码。新归纳与版本方法属于本手册工作建议；与基础规范冲突时，以已确认基础规则及后续明确决定为准。