前端设计文档模版（送给刚刚参加前端技术工作者们）

Posted 2021-11-05 枯木前头万木春

以下为公司通用的开发流程：

一、需求背景及资源

• 需求背景
• 相关文档 & 资源
• 需求文档:
• 设计视觉稿:
• 服务端IDL:
• 第三方服务/SDK文档
• 测试Case:
• 埋点文档:
• 运营资源列表(optional):
• 走查以及验收文档:

二、排期

• 需求Timeline

评审	设计	开发	联调	测试	上线
日期

• 排期拆分

	排期(人/天)	模块Owner
模块1
模块2
合计人天

三、设计方案

(1)整体方案

• 项目搭建
• 部署方案
• 监控方案

(2)页面设计

• 页面描述
• URL
• UI & 交互逻辑(UI拆分)
• 状态
• 请求逻辑
• 业务逻辑
• 埋点逻辑

(3)组件设计

• 模块描述
• UI & 交互逻辑
• 状态 / Props
• 业务逻辑
• 埋点逻辑

(4)公用模块

• 模块描述
• 业务逻辑

四、Todos

设计方案

(1)开发

前端进行汇总页面的数量，以及需要用到的公共组件等。

• 页面1
• 组件1
• 通用模块1

(2)联调

与后端小哥哥，小姐姐 联调接口，查看字段是否对应，操作各项功能时是否走通。

(3)测试

交付测试，让专业测试工作者安装需求进行测试，查找对应的问题后者遗留的功能。

(4)UI走查

进行页面的美观度查看

(5)发布上线

让用户进行体验产品