网页设计规范把布局、字体、颜色、交互与适配要求写成团队可以反复使用的规则。新手最值得先做的不是记住一组万能像素，而是选一个真实页面，在宽屏、窄屏、长文案和错误状态下检查是否仍然清晰。
下面按布局、视觉、交互、技术性能四个维度梳理规范，并提供三类页面模板供练习。需要把规范整理成可复用的界面时，可在统一页面样式与组件的设计工具中建立文字和颜色层级，再交给研发核对浏览器中的实际表现。
基础布局规范
网页布局是设计的基础，规范的布局能让信息传递更高效，同时适配不同设备。新手常犯的错误是忽视布局逻辑，导致内容堆砌、用户找不到重点。
（一）结构层级明确
“顶部导航—主体内容—页脚”适用于许多内容网站，但后台工作台也可能采用侧边导航。先突出页面目的、主要信息和下一步操作，再安排辅助信息。主按钮不必固定在视觉中心，应出现在用户完成判断后容易找到的位置。
（二）响应式设计
面向手机浏览的页面可从窄屏优先设计，再扩展到桌面；复杂后台则要先梳理手机需要支持哪些任务。布局允许内容随容器伸缩，断点由内容开始拥挤、换行或遮挡的位置决定。避免用整页固定宽度造成手机横向溢出；大型数据表格可在独立容器内滚动。
网页触控尺寸要区分“建议”与“标准最低要求”。WCAG 2.2的目标尺寸最低要求为24×24 CSS像素，并有间距等例外；实际移动端主操作宜留出更宽裕的点击区域。正文可从16px开始试排，但最终还要检查字形、行高、缩放与对比度，不能只看一个字号。
（三）留白与网格
先建立少量统一的间距层级，例如控件内部、同组元素和不同板块分别采用小、中、大间距。12列网格是桌面布局的一种常用起点，并非所有网页的硬性要求；手机上的列数与边距要跟随内容调整。检验结果是相关内容成组、主要边界对齐，而不是处处相隔16px。
墨刀社区中的网页模板可以帮助观察导航、卡片和内容分区。使用时替换为真实标题、图片和数据，并逐个检查响应式行为；模板提供起点，是否满足项目规范仍取决于内容和交互设置。
| 页面条件 | 设计稿需说明 | 浏览器需检查 |
|---|---|---|
| 宽度变窄 | 哪些列重排、哪些入口折叠 | 有无全页横向滚动和遮挡 |
| 标题和名称变长 | 换行、截断及完整查看方式 | 按钮与图片是否被挤压 |
| 表单报错 | 错误文案位置和焦点去向 | 键盘能否定位并修正错误 |
| 数据缺失或加载中 | 空态、加载态和重试入口 | 布局是否跳动、已填内容是否保留 |
视觉设计规范
视觉设计直接影响用户第一印象，规范的视觉设计能传递品牌调性，同时保证信息清晰可读。新手常犯的错误是色彩过多、字体混乱，导致页面 “花里胡哨” 却毫无重点。
（一）色彩规范
颜色可以先分为品牌色、文字/背景中性色和成功、警告、错误等状态色，再按用途取值。新项目可从少量颜色开始，逐步建立语义命名，避免同一种红色既表示品牌按钮又表示错误，却没有其他区分。
按照WCAG文字对比度说明，普通文本通常至少4.5:1，大文本至少3:1。这里“大文本”按尺寸与字重判定，约为24 CSS像素的常规字或18.7 CSS像素的粗体，并不是所有标题都可用3:1；Logo、非活动控件等有特定例外。
（二）字体规范
字体先保证可读和一致。多数页面用一套正文体系，再为品牌标题增加少量变化即可；字体不超过3种可以作为团队约束，但不是通用网页标准。中文、数字和英文混排时，尤其要检查高度、粗细和行距。
建立标题、正文和辅助文字的层级，记录字号、字重、行高和适用位置。微软雅黑或思源黑体并不保证安装在每一台设备上，因此还要约定字体回退顺序；使用网络字体时检查授权与加载表现。不要为了塞下内容不断缩小文字。
（三）图标与图片规范
同组图标尽量保持线条、填充方式和视觉尺寸一致。可操作图标需要可识别名称，并覆盖鼠标悬停、键盘焦点和触屏点击状态；不常见的图标应配文字，不能依赖悬停才出现的提示。
图片按显示尺寸、画面细节和网络条件设置体积预算。照片、透明图和动图选择格式时兼顾清晰度与兼容性，不必统一压到同一KB数。信息图片的alt描述图中对阅读有用的内容；纯装饰图使用空alt。图片预留宽高或比例，避免加载后挤动正文。
交互设计规范
交互设计决定用户 “用得顺不顺”，规范的交互能让用户无需思考就能操作，反之则会让用户困惑离场。新手常忽视交互细节，导致点击无反馈、操作步骤繁琐等问题。
（一）交互一致性
同一种操作在不同页面应保持一致的命名和结果。链接要能与正文区分，焦点状态要可见，错误提示同时说明问题和修正办法。可以使用颜色、图标和文字组合，不必把所有按钮统一成“点击后变暗”。
（二）反馈明确
操作反馈应与任务阶段对应：正在提交时避免重复触发；成功后显示结果或下一步；失败时保留输入并给出重试方式。短暂操作不一定都要加转圈动画，重要的是用户能判断当前状态。
（三）操作便捷性
减少操作成本要结合任务和安全要求。登录方式取决于账户体系，不应统一规定只能手机号加验证码。常用功能应容易发现，表单支持合理的Tab顺序与键盘操作，多步骤任务要允许返回检查并保留已填内容。
在墨刀中，可把页面的默认、加载、错误和成功状态分别整理，再用交互连线验证任务路径。组件能节省搭建时间，但业务校验、权限和提交结果仍需要团队明确；评审时请参与者完成一次真实任务，找出说明缺口。
技术与性能规范
设计最终要落地为可访问的网页，技术与性能规范直接影响网页的稳定性和加载速度，新手常因忽视这些规范，导致网页加载慢、兼容性差。
（一）代码基础规范
与研发对齐时，说明标题层级、按钮与链接的语义、表单标签和键盘焦点要求。代码命名、组件组织和样式方案由项目规范决定；设计交付应让研发知道内容的含义与行为，而不是仅给一张静态图片。
（二）性能优化
性能应结合真实用户设备和网络测量，可参考Core Web Vitals中的LCP、INP与CLS，分别观察主要内容出现、交互响应和布局稳定性。优化图片与字体、减少无用资源，并为首屏主图合理设置加载优先级；不要把首屏关键图片一律懒加载。
（三）兼容性规范
根据实际用户设备和技术支持范围制定浏览器矩阵，再覆盖手机、平板和桌面。除了桌面浏览器缩小窗口，还要用真实手机检查键盘弹起、页面缩放、系统字号、横向溢出及页面内返回。版本范围应由项目确定，而不是固定写“最新3个版本”。
例如，部分老旧浏览器不支持某些CSS属性，若未做兼容处理，可能出现布局错位、文字重叠等问题。
几款轻松易上手的模板
下面三类模板分别适合练习官网内容层级、工作台信息组织和数据概览。替换内容后，按前述四个维度复查；制作完整网页时，还可以结合网页设计流程继续梳理需求与页面结构。
（一）企业服务官网模板
（二）B端工作台界面设计
（三）后台管理界面设计模板
选择模板后，先挑一个核心页面换成自己的业务数据，检查标题、列表、空状态和主要按钮，再扩展其他页面。在墨刀中开始整理网页设计规范，让每次调整都能沉淀成团队可复用的规则。
