先给一个直接回答
一页图文先确定主题、解释和行动三个层级，再给它们安排字号、留白与颜色。正文保持稳定，强调色用于少量关键提示，图注紧贴图片；不要仅靠换颜色表示标题层级。
先把内容排成一条阅读路线
示例页面名为“窗边植物观察”，包含主标题、一张叶片照片、三条观察记录和一个练习入口。先用黑白建立顺序：标题说明看什么，图片展示对象，记录解释看到什么，入口邀请读者自己尝试。若黑白版本仍分不出主次，增加颜色通常只会让混乱更显眼。
可以先画四个矩形表示内容区域，标注每块必须回答的问题。把同类信息放在一起，并让相关图注靠近对应图片。颜色随后承担导航提示，而不是替代基本排版。正文越长，越需要稳定的字色和背景来支撑连续阅读。
给每种颜色写一条使用规则
下面的色值是一组sRGB练习方案，不是所有页面都适用的固定系统。使用时先验证实际字色与背景，再决定是否用于小字。相同的绿色若一处表示栏目、一处表示错误、一处又只是装饰，就很难形成清楚的约定。
| 角色 | 示例色值 | 适合位置 | 避免的混用 |
|---|---|---|---|
| 阅读底 | #F4EBDD | 正文与图注背景 | 在纹理照片上假定同样可读 |
| 正文色 | #17191D | 段落、表格内容 | 用浅色来制造所有次级信息 |
| 结构色 | #2F5D50 | 章节标题、分类边框 | 每个标题又换一种色相 |
| 强调色 | #D8B46A | 重点底块、少量编号 | 浅底上的小号金色正文 |
一张照片占多少空间才合适
图片负责说明细节时，应给它足够面积让读者看到叶脉、边缘或光影；图片只营造气氛时，可以缩小它，把空间让给说明。不要机械规定每页都“图片占一半”。同一张照片在横幅、竖卡和手机中会呈现不同裁切，重要信息必须留在可见区域。
做两个草图：A版把图片横放在标题下，三条记录纵向排列；B版把图片与记录并排。桌面上B版便于对照，但手机上应恢复清楚的上下顺序。把图注放在图片后面，读者无需跨过无关内容才知道这张图说明什么。
用真正内容检查，不用空白框判断
练习时填入真实长度的中文标题、80字说明和一条较长图注。短占位词常常掩盖换行问题。检查数字、英文缩写和色值能否自然断行；表格需要横向滚动时，应保留清楚的表头与提示，不让它把整页撑宽。
- 遮住颜色，只看标题、正文与图片顺序是否清楚。
- 恢复色彩，确认强调色集中在真正重要的信息上。
- 缩到手机宽度，从头读到尾，核对图注与对应图片仍相邻。
- 用键盘依次访问链接，检查聚焦提示；检查放大文字后内容是否仍可读。
- 把页面截图发给自己，隔一段时间再看，记录第一眼能否说出主题。
常见问答
浅灰小字看起来精致，为什么还要谨慎使用？
说明、时间和图注也可能是重要内容。层级可以用位置、字号和留白区分，不必把次级信息变得难读；具体颜色仍要与背景一起检查。
一页里可以出现七种颜色吗？
可以，例如展示七日练习的分类。但应保留编号和文字名称，控制大面积背景数量，让七色服务内容分类而不是同时争夺注意。