World Map Hero 的比例与布局
在认可的入口与灰度磨砂上，比较文字、空间、行动和留白的比例关系，让Hero有明确重心，并能自然转入后续阅读。
置信度：★★★☆☆（本项目布局判断）。原作者的系统规则提供参照；数字参数限定到当前字体、内容与图像，观看偏好继续检验。
当前判断与比较范围
用户肯定阈口与延伸稿，要求继续阅读并斟酌比例布局。这一轮优先“留白与引导”：保留铺满画幅的空间背景，收拢文字与导航，降低宽屏标题声量，缩短Hero中的长停顿。另做“空间先行”，保留“开口基准”供比较。
三种布局共用同一背景和相同文字内容，改变容器高度、文字区域、字号、位置、裁切和导航配置。比较针对整组布局；其中任何一项的贡献都需要后续更小的对照才能区分。基准按已认可稿重建，行动箭头统一使用同一图标；原始样稿继续保存。
从材料中提取布局操作
查阅日期为2026-10-13。新读IBM网格、字级与布局正文及Pentagram MoMA项目说明，回读既有RMIT、Dropbox、Spotify与方正组合研究。
| 材料中的规则或事实 | 本项目提炼的操作 | 适用条件 |
|---|---|---|
| IBM以网格组织视觉元素和文字；布局说明将重复与变化、空间停顿、信息层级和非对称构图联系起来 | 先定共同对齐和间距，再安排局部差异；给文字、空间和行动不同的重心 | 需要持续产生相关页面；共用基准应允许按内容重排 |
| IBM字级说明把字号与行高配套，并对不同字母系统作调整 | 用真实中文标题检查字面密度、行高和断行，再确定标题与说明的尺度差 | 换字族、语言和长标题时复查；IBM Plex的具体调整比例留在原系统中 |
| MoMA采用稳定网格、图像裁切及一致的标识位置；多数应用以一张大图为焦点，事件信息另成文字块 | 图像承担主焦点，信息获得连续可读的区域；共同对齐和裁切使不同作品保持归属 | 有强图像与清楚信息任务；裁切需要保留当前图像的关键关系 |
| 既有组合研究记录RMIT按幅面重分行列、Dropbox用显著尺度差建立层级、Spotify给对齐规则附条件 | 比例随幅面与内容选择，记录变动时谁扩展、谁移动、谁退出 | 从单张作品发展为持续使用的配套规则 |
来源：IBM 2x Grid、IBM布局方法、IBM字级、Pentagram MoMA、既有组合案例与历史范围。原作者的系统经验用于提出候选，当前观看顺序仍需观察。
先分清哪些比例需要协调
| 比例关系 | 本轮具体问题 | 调整动作 |
|---|---|---|
| Hero与后续页面 | 画面何时完成表达，何时转入内容 | 宽屏降低Hero高度，加入后续阅读开篇预览 |
| 文字与入口 | 两个重心是否互相挤压 | 控制文字容器、字级和裁切，保留阈口及内层关系 |
| 字级与字面 | 大标题是否压过空间；长句能否保住层级 | 短长标题分别配置，保留固定说明角色与行高 |
| 组内与组间留白 | 哪些应连续读，哪些需要停顿 | 标题、说明与行动成组，导航保持次级，签名单独留空间 |
| 背景与分隔 | 线条是否切断主要空间关系 | 新稿取消横贯入口的顶部横线，缩短或减弱导航分隔 |
| 宽屏与窄幅 | 空间与文字相遇时怎样让位 | 由阅读失效确定切换点，窄幅转为上下次序 |
40%的文字容器表示排字可用宽度；背景仍铺满整个Hero。容器、实际字形和入口区域各自测量，不能把容器宽度当作实际文字覆盖面积。
三种布局及其分工
留白与引导
签名、文字和导航共享6%的左侧基准；文字容器为画幅宽度的40%，说明用较小的固定上限。三条阅读路径集中在文字下方，主空间保持连续。宽屏减小标题；中等画幅略增强标题，并维持安静的文字区域。图像顶部取景在宽屏中保留阈口上缘。
当前优先这一版：阅读与进入有共同方向，图像和信息都有可用空间。较长内容仍需按真实阅读任务重排。
空间先行
文字位置降低，标题进一步收敛；底部导航保留较宽的横向关系。手机先展示入口，再安排标题、说明和行动。它适合希望空间印象先出现的开篇，代价是行动与图像在手机上距离更远。
开口基准
保留较高Hero、宽屏较大的标题和较宽导航，供判断原稿的力量与新布局的阅读节奏。三个方向在本轮比较中统一使用新的窄幅切换点，原始阈口样稿的设置另行保存。
当前参数与观看尺度
下表为浏览器实际测量的短标题状态，数值四舍五入。单位为CSS像素。
| 关系 | 开口基准 1440宽 | 留白与引导 1440宽 | 开口基准 736宽 | 留白与引导 736宽 |
|---|---|---|---|---|
| Hero高度 | 920 | 749 | 640 | 560 |
| 文字容器占宽 | 48% | 40% | 48% | 40% |
| 标题字号 | 74.9 | 60.5 | 40 | 44 |
| 说明字号 | 14 | 14 | 14 | 14 |
| 行动末端到导航上缘间距 | 253 | 126 | 97 | 29 |
| 导航占宽 | 92% | 40% | 92% | 40% |
这些参数构成当前候选的组合。标题与说明之间的尺度差在不同画幅中变化；短句和长句也分别适配。检验的是阅读和空间是否共同成立，后续字体选型可能要求再次调整。
从失效位置决定重排
初稿在581像素宽仍使用左右配置：文字没有越界，部分小字却进入阈口暗边，背景采样的粗略对比值降到约2.66–3.85。先将说明中的“把知识逐渐组织”作为可共同换行的词组，并收窄空间先行稿的说明；仍需调整整个阅读关系。
将容器宽度720像素及以下改为上下排列后，文字区与入口重新获得各自空间。720是这张图与当前字体的试作参数，新图、新名称或新内容应重新判断。窄幅下，留白与引导先读文字再看空间；空间先行采用相反次序。
联合检查与比较工具
比较中可切换短长标题，查看文字容器轮廓与入口参考框。入口框按原图中人工指定区域投影，帮助判断取景与相遇位置；它不测量实际轮廓、视线或语义效果。
屏幕检查覆盖1440、1024、736、721、720、581、390和320像素宽，三布局、短长标题及宿主浅深外观共96种状态。图像加载、文字边界、标题行数、行动与导航间距、页面脚本及轮播切换均按这些状态检查。产品保留已选择的灰度外观，宿主深色下检查外层控件与布局。对比初筛按文字范围下背景采样，读者观看与实际字形渲染仍需独立判断。
比较用背景由原图在浏览器中以WebP质量0.88序列化，保持原尺寸，三个布局使用同一份数据；原始PNG继续保存。初次比较中不同布局令轮播控件高度变化，随后统一比较舞台高度，Hero各自高度保持不同。
VitePress首页接入
用户随后要求将图接入实际首页。本轮采用留白与引导的比例，通过默认主题的home-hero-before插槽渲染独立Hero，文案和四个真实入口由首页worldMapHero字段维护。背景作为主题资源导入；标题、说明和链接由Vue排版，默认导航、文档布局、首页功能卡片与正文继续使用。
手机的Hero高度由820调整为768像素，补偿VitePress已经提供的顶部导航；背景继续保留灰度外观，正文与导航跟随站点的浅深主题。开发与生产预览分别检查七种宽度和两种外观，共14种状态；四条真实阅读路径、返回首页及手机菜单均通过。另完成独立代码复核、文档构建与死链检查。
主题入口为.vitepress/theme/index.ts，空间与排字规则位于WorldMapHero.vue，生产图片为assets/world-map-hero.webp。原始PNG及研究样稿继续保存，后续优化可以从实际首页的观看经验继续。
宽屏裁切修正
实际观看又暴露了宽屏问题：背景按整屏宽度使用cover放大，Hero高度却在760像素封顶。1920像素宽时，原图中的通路转弯被推到Hero下方；窗口继续加宽，裁切继续增加。先前检查最高只覆盖1440像素，图片加载成功和文字没有越界，不能证明关键空间关系仍然可见。
修正后，图像最大宽度保持1440像素并居中，延续已认可的取景。两侧新增宽度承接灰度留白，图像边缘随超出宽度逐渐融合；文字及三条阅读入口共用这一构图范围。720像素及以下保留原先的上下布局与背景配置。
本轮把阈口顶部及通路转弯标为原图中的观察锚点，在连续调整窗口时检查其投影是否落在Hero可见范围内。该检查在修复前于1600、1920和2560像素宽失败，修复后通过；另检查1440/1441像素边界的连续性。开发预览覆盖320至2560像素共十一种宽度、两种外观，22种状态及四条真实路径、返回首页、手机菜单均通过。独立代码复核未发现本轮新增问题。
这次补充的判断是：宽度、高度和缩放的上限应一起约束；适配检查应追踪承载表达的图像关系。宽屏可以增加观看空间，主体尺度应按实际构图另行决定。
武器库的补充操作
将本轮经验补入已有H5约束反推、H6职责分配、H8候选比较与E3可见域适配，方法计数保持。
- 列出主焦点、说明、行动、签名和后续内容，先决定各自任务。
- 分别标记容器、文字实际范围和图像关键区域，寻找安全间隔与共同对齐。
- 对Hero高度、字级、重心、裁切和分隔提出两种完整配置，使用同一内容比较。
- 检查组内阅读是否连续、组间停顿是否有作用，观察主视觉的进入与退出。
- 加入长标题，并在关系接近失效的画幅两侧检查；由相遇与误读位置决定重排。
- 接入章节或下一内容的开篇，确认强画面能够转入安静阅读，再提炼范围明确的参数。
这一操作适用于视觉方向已获认可、需要进一步调整节奏与使用条件的阶段。若主体联想仍含混，回到H4补信号；若同一裁切无法保留关键关系，可另外制作窄幅构图。