网页设计规范应写清布局怎样适应内容和屏幕、文字怎样阅读、颜色与控件表达什么，以及哪些变化允许出现。1920px画布、固定首屏高度或统一五张banner都不是所有网页必须遵守的规则。先明确页面任务和内容，再给团队一套能重复执行的约定。
下面用“培训课程列表页”做一份小规范：用户查看课程、比较时间和价格，再进入详情。可以在墨刀设计中把规则、组件和桌面/手机样张放在一起；本例的数值是练习起点，需要用真实内容和目标设备验证。
一、尺寸规范：区分画布、视口和内容宽度
画布是设计时的参考范围；浏览器视口是页面实际可用区域；内容宽度由布局规则控制。三者不应混写成“网页宽度1920、高度不限”。网页会出现在不同窗口、手机和缩放条件下，图片的72dpi元数据也不能代替CSS像素、响应式布局和资源倍率的约定。
课程页先采用最大1200px的居中内容区。1440px视口下左右各有120px空余；390px视口下两侧各留16px，内容宽358px。桌面可以三列卡片，手机单列，中间宽度根据卡片可读性换成两列。这是本项目的决定，不是行业统一尺寸。
| 规范项 | 课程页练习值 | 遇到变化时的规则 |
|---|---|---|
| 内容区 | 最大1200px，居中 | 窄于最大宽度时随视口收缩，保留左右留白 |
| 外侧留白 | 宽屏32px起，手机16px | 留白计入可用宽度，不让卡片撑出页面 |
| 卡片间距 | 24px | 换列时仍保持一致，必要时按移动规则调整 |
| 卡片宽度 | 以约280px作为内容测试起点 | 放不下课程标题与动作就换列，手机单列允许充满358px |
| 页面高度 | 随内容增长 | 不为保持首屏整齐裁掉课程时间、价格或错误信息 |
在本例1440px样张中，三列卡片宽度为（1200－2×24）÷3＝384px。到768px样张时，若两侧各24px，内容为720px，两列各348px。具体断点可以在这两个样张之间连续缩放寻找：先看内容何时难读，再设置切换条件，而不是先背一组设备尺寸。
普通页面应避免让人同时横向和纵向找内容。W3C的重排说明也区分普通内容和确需二维布局的例外。大型数据表可以在自己的区域内横向滚动，不能因此让整个课程列表页横向溢出。
二、文字规范：写用途、层级和长内容处理
文字规范先保证辨识性和易读性，不能把英文正文10px、所有段落两端对齐或首行缩进当作通则。列表卡片、长文章、导航和表单的阅读方式不同，必须分别约定。页面实现应使用语义标题组织层级，视觉字号与HTML标题级别也不是同一回事。
| 用途 | 本例建议起点 | 内容与溢出规则 |
|---|---|---|
| 页面标题 | 宽屏32px，手机26px | 允许换行，不能遮挡筛选入口 |
| 课程名称 | 20px，中等字重 | 列表最多两行时，详情页必须能读取全名 |
| 正文与主要字段 | 16px，行高约1.7 | 日期、价格和重要限制不随意省略 |
| 辅助说明 | 14px，行高约1.6 | 仍需有足够对比，不能只靠极小或极浅弱化 |
| 按钮标签 | 16px | 长文案可增宽或换行，点击区域跟随内容 |
中文与数字混排时，检查日期、货币符号、价格和英文课程名的基线、字重及行距。把品牌字体、系统回退字体和资源加载失败后的表现写进交付说明；仅写“默认字体”无法保证不同系统一致。正文左对齐可以作为本例起点，是否采用两端对齐应由文本类型与阅读测试决定。
准备三条测试内容：“摄影入门”“周末城市摄影：从构图到夜景的完整实践课程”“Data Visualization Workshop”。三条放入同一张卡片后，观察课程时间与按钮是否仍能被找到。缩放文字时还要检查固定高度容器；能在设计画布里放下，不等于浏览器放大后也能放下。
三、页面层级规范：导航关系与首屏展示分开
首页是站点的一个入口页面，首屏是当前视口初次显示的区域，两者不能画等号。一个站点可以有课程、讲师、帮助等入口，用户也可能从搜索直接进入课程详情。因此每个页面都要说明自己是谁、当前位置和可继续的动作，而不只让首页承担解释工作。
课程页可采用“课程列表→课程详情→报名”关系，列表中的筛选和返回规则保持稳定。导航不需要为了层级数字机械增加三级页面；banner也没有必须五张的数量。如果横幅不能帮助选课，可以缩小或移除，把近期课程与筛选放到更容易发现的位置。
把导航名称、选中状态、当前位置、返回方式和无结果状态写进规范。本例筛选为“周末”后无课程，页面应解释没有符合条件的结果，并提供清除筛选，而不是留一块空白或跳回首页。
四、颜色规范：语义、背景和状态一起记录
品牌色可以用于重点操作与识别，但不必把所有正文都涂成Logo颜色。先定义主要文字、辅助文字、页面背景、边界、操作色、错误与成功等职责，再确定实际颜色。一个色值放在白底可读，放在图片或浅色卡片上未必仍可读。
按照WCAG文字对比说明，普通文字通常以至少4.5∶1为参考，大字通常至少3∶1，且存在标志、非活动控件等例外。大字的界定不能凭视觉感觉。辅助信息也应检查，不能因为用了#999999就认定它合适。
| 角色 | 本例定义 | 使用限制 |
|---|---|---|
| 主要文字 | 用于课程名、时间和价格 | 对实际卡片背景测对比，避免覆盖复杂照片 |
| 操作强调 | 用于“查看课程”或报名主动作 | 不能把所有链接和标签都做成同样强调 |
| 已满状态 | 显示“本期已满”，同时调整操作 | 不能只将名额变红却继续承诺可报名 |
| 筛选选中 | 文字、勾选或边界共同表达 | 去掉颜色后仍能分辨选中项 |
按图片取色可以帮助探索配色，但取出的四种颜色还要经过语义分配和对比检查，不能直接套到所有文字。若后续做深色主题，应另测背景组合，不要只将明暗反转。
把四类规范落到一张可检查的样张
- 建立最小规则页：记录内容宽度、留白、卡片间距、文字层级和语义颜色，并标出这些值适用于课程列表。
- 制作卡片状态：有名额、已满、长标题和缺封面至少各做一个；不要只留下最整齐的默认样例。
- 放到三个视口：在1440、768和390宽度检查列数、换行、按钮位置与阅读顺序，再连续缩放找中间问题。
- 补上页面行为：打开详情再返回，检查筛选保留；无结果时能清除条件；键盘能到达筛选和课程入口。
- 记录规则与例外：说明长标题何时截断、哪里能看全、哪些内容不允许截断，附上问题位置与修改结果。
实现后还要在真实浏览器检查字体、键盘焦点、缩放和资源加载。设计稿可表达这些要求，但不能代替实现验证。需要先从空白页面动手，可参考网页设计的基础步骤；需要比较排版结构时，再看网页布局类型与选择。
先用这张课程列表做出规则、组件和三种视口样张，再把可复用部分扩展到详情页。规范的价值是让后续页面遇到同类变化时有依据，而不是每个项目都套相同的宽度、字号和banner数量。
