企业官网UI设计稿应该交付哪些页面、断点和交互状态

网页设计验收时，客户看到几十张漂亮画板，开发却不知道列表翻页、表单错误、菜单展开、移动端表格和长标题如何处理。页面数量多，不代表交付完整。

官网设计稿应同时服务品牌表达、内容运营和前端实现。尤其多页面、多语言项目，规则比单张效果图更重要。

01 页面矩阵明确独立页与模板

列出首页、服务、产品、案例、文章、关于、联系和系统页面，并标记哪些共享模板。设计文件与矩阵一一对应。

404、搜索结果、隐私政策和提交成功等页面也应纳入。

02 关键断点和适配规则

明确桌面、移动和必要平板宽度，说明栅格、间距、图片裁切、内容顺序和导航变化。

并非每个页面都要画全部断点，但关键模板和特殊模块必须有代表稿。

03 导航与全局组件

桌面和移动导航、下拉、面包屑、页脚、语言切换、Cookie提示和全局CTA应完整。

全局组件改动会影响全站，需单独确认。

04 表单、筛选和交互状态

默认、悬停、焦点、禁用、加载、错误、成功和空状态需要定义。复杂筛选还要说明选中、清除、结果更新和移动端方式。

开发不能从静态截图推断全部逻辑。

05 内容长度与多语言适配

使用真实标题、长产品名、空数据、图片比例和不同语言测试。文本截断、换行、展开和缺图要有规则。

英文短并不代表所有语言都短，德语、中文和阿拉伯语结构差异更明显。

06 设计系统和开发说明

颜色、字体、栅格、间距、按钮、表单、卡片和图标应使用统一组件。复杂动效、滚动和媒体行为通过原型或说明交付。

最终设计应与可用素材、字体授权和技术能力一致。

官网UI交付范围

常见问题

官网设计一定要交移动端吗？

关键页面和特殊模块需要，重复模板可用代表稿与规则说明。

设计稿需要包含所有文章内容吗？

不需要，但要有文章模板、真实内容示例和不同长度测试。

Hover状态必须设计吗？

桌面端重要交互应定义，移动端还需处理无Hover场景。

是否需要交HTML标注？

现代设计工具可提供基础属性，但复杂规则和交互仍需要文字说明或走查。

开发后发现漏页怎么办？

对照需求和页面矩阵判断是遗漏还是新增，按合同处理。