中期设计与开发：搭建骨架，填充内容

中期设计与开发：搭建骨架，填充内容(占比 50%)

这一步是将需求转化为实际网站的核心环节，分为设计、开发、测试三个子阶段。

1、网站架构与原型设计

架构规划：设计页面层级，遵循 “≤3 级” 原则(首页→栏目页→内容页)，确保用户和搜索引擎能快速找到内容。

示例(企业展示站)：首页 → 产品中心 / 解决方案 / 案例展示 / 关于我们 / 联系我们 → 具体产品 / 案例详情页。

原型设计：用 Axure、墨刀、Figma 制作低保真原型，明确每个页面的内容区块(如首屏 banner、案例展示区、转化按钮区)和交互逻辑(如按钮点击后跳转表单弹窗)，无需考虑视觉美化，重点确认 “内容放哪里”“用户怎么操作”。

评审确认：与团队 / 客户沟通原型，修改不合理的布局，避免后期视觉设计返工。

2、视觉设计

风格确定：根据品牌调性和用户偏好选择设计风格(如企业站选扁平化 / 极简风，文创品牌选手绘风)，确保风格与 LOGO、VI 系统统一。

核心页面设计：优先设计首页、产品 / 服务页、表单页(高转化页面)，需注意：

配色：主色 1 种 + 辅助色 2-3 种，避免配色杂乱;

排版：PC 端字体≥16px，移动端≥14px，行间距 1.5-1.8 倍，确保可读性;

响应式设计：同步设计 PC 端、平板端、手机端视觉稿，确保移动端无横向滚动、按钮点击区域≥44×44px。

输出物：《高保真视觉稿》《设计规范手册》(配色、字体、元素规范)。

技术开发

技术选型：

小型展示站：WordPress、织梦等 CMS 系统(成本低、易维护);

中型电商站：Shopify、ECShop，或基于 PHP+MySQL 开发;

大型定制站：Java/PHP+Vue/React 框架，适配复杂功能(如会员系统、ERP 对接)。

前端开发：还原视觉稿，实现响应式布局，优化页面加载速度(压缩图片、合并 JS/CSS 文件)。

后端开发：搭建数据库，实现核心功能(如表单提交、商品管理、支付接口对接、多语言切换)。

SEO 基础配置：

配置 URL 规范(如https://xxx.com/product/website-design);

添加标题(Title)、描述(Meta Description)、H 标签、图片 alt 属性;

生成 sitemap.xml，配置 robots.txt，开启 HTTPS。

全面测试

测试是保障上线后稳定运行的关键，需覆盖技术、功能、体验、SEO四个维度：

技术测试：检测服务器响应速度(TTFB≤200ms)、跨浏览器 / 设备兼容性(Chrome/Safari/ 手机端)、无代码报错;

功能测试：验证导航跳转、表单提交、搜索、支付(电商)等功能是否正常，模拟用户操作全流程;

体验测试：检查视觉还原度、排版一致性、按钮点击便捷性，邀请目标用户实测并收集反馈;

SEO 测试：检查 robots.txt 配置、sitemap.xml 完整性、核心页面无 noindex 标签。

输出物：《网站测试报告》(含问题清单、修复方案、复测结果)。