六种材质

六块样张对应页面里最常出现的六种材料。同一张素材在不同区块会换成不同的裁切比例与对位方式，所以看起来像六块不同的石头，而不是同一张图重复贴。

赛程材质

竖版样张承担目录的入口作用，裁切以中上部为准，保证标题始终压在稳定的明暗交界处，不会被画面的暗部吃掉。

画面材质

同一套比例的另一种对位，把视线往上抬，让说明文字落在画面较空的一侧，读起来不会被细节牵走。

对照材质

方形裁切用于把两张素材并排比较，切掉多余背景后，差异会更直接地显现出来，也不用额外的标注线去框它。

条目材质

条目类内容用宽幅比例，横向空间留给文字，图只负责起个停顿作用，不参与叙事，也不抢走摘要的第一眼；连续几条排下来，节奏会比满屏图片稳得多。

专题材质

专题主图允许更高的容器，但仍设了最大高度，避免在宽屏上被拉伸成一条细缝；容器一变矮，对位点就跟着上移，画面重心守在视觉中线上，图注也不会被挤到画面之外。

横幅材质

横幅比例最极端，裁切点定在画面偏上的位置，压上覆盖文字后仍然读得清标题，也不会把主体挤到画面之外。同一张素材在首页与专题页各用一次，靠的就是这层对位差异。

客户端与获取方式

材质问答

为什么同一张素材要换裁切？

同一张图在横幅、方形与竖版容器里的注意力落点并不一样。换裁切是为了让每个区块的重点对得上，而不是为了凑出更多画面。

深色底上的文字会不会难读？

正文亮度做过下调，长段落不会在屏幕上发亮；强调处改用铜色线条与下划线，不靠加粗与高亮色块堆叠。

客户端与网页版的说明为什么不同？

两者排布不同，说明也各写各的：网页版强调索引常驻，客户端强调单列读完，措辞不通用，以免照着另一端找位置。

专题页会一直更新吗？

会随着页面排布一起调整。每次改动都会在资讯栏目的目录更新里记一条，说明改了什么、影响哪些区块，不写含糊的优化字样，也不悄悄换掉你已经读过的段落。