前端设计最佳实践

《如何写出高质量的前端代码》学习笔记，真心建议大家去看看前端林叔的这本小册，受益良多。

概述

前端设计是前端开发过程中不可或缺的一环。通过前端设计，可以更好地理解需求、规划开发流程、发现潜在风险，并提高开发效率。本文将详细介绍前端设计的重要性、主要内容、常用工具和图表，以及如何编写前端设计文档。

前端设计的重要性

1. 对齐需求认知

   设计的过程是对齐需求认知的过程，通过设计可以加深对产品需求的理解，确保团队成员对需求有共同的认知。

2. 提前发现潜在风险

   在设计阶段，可以提前发现潜在的风险和问题，避免在开发过程中遇到意外情况，导致项目延期。

3. 提升编程能力

   写伪代码的过程类似于大脑编译代码的过程，可以有效提升编程能力。

4. 提升大型项目的组织、设计能力

   设计的过程是大脑模拟解决问题的过程，可以有效提升大型项目的组织和设计能力。

不进行设计直接开发可能会导致一系列问题

1. 需求与开发不一致性

   • 功能偏差：开发的功能与产品需求不符，导致返工，浪费资源。
   • 功能遗漏：测试阶段发现功能实现不完整，需加班补充代码。

2. 实现细节不明确

   • 细节偏差：实现细节与产品需求存在差异，影响项目质量。
   • 设计不合理：开发过程中发现产品设计存在缺陷，需重新讨论需求。

3. 排期不准确

   • 时间估算不准确：由于对需求理解不足，导致排期不准确，影响项目进度。
   • 任务量不明确：对所需开发功能认识不清，导致排期不准确。

4. 风险控制不足

   • 风险识别不及时：对项目风险缺乏清晰认识，未能及时暴露风险，影响项目上线。
   • 临时应对：临近上线时才报告重大风险，导致项目延期，影响团队士气。

5. 开发方案问题

   • 方案缺陷：开发方案存在缺陷，导致项目延期。
   • 方案复杂：方案过于复杂，增加实现难度，导致测试阶段bug频发。
   • 方案非主流：方案非主流，理解难度大，团队成员难以接受。
   • 沟通不畅：缺乏设计文档，团队沟通不畅，易产生误解和冲突。
   • 协作效率低：团队成员对项目理解不一致，协作效率低下。

6. 代码质量低

   • Bug修复时间长：Bug修复时间远超功能开发时间，影响项目进度。
   • 代码质量差：功能实现依赖于临时代码，缺乏系统性和可靠性。

7. 个人形象与职业发展

   • 专业形象受损：个人给人留下不够专业和成熟的印象，影响领导对其工作的信任。
   • 职业发展受限：长期缺乏系统设计，技术能力提升缓慢，影响职业发展。

前端设计的主要内容

1. 业务功能设计文档

• 相关文档：需求文档、产品文档等。把这些相关文档放到设计文档的最顶部，方便开发时使用。

• 需求梳理：

  • 需求的背景
  • 核心业务流程
  • 业务需求梳理：将设计文档按照**“业务模块--页面--功能点”**的层次来组织，以简洁、详尽的方式描述每个功能点的展示逻辑和交互细节。

• 前端设计：重点/复杂功能需要进行前端编码设计，包括：

  • 页面路由设计
  • 全局状态设计
  • 模块数据结构
  • 组件Dom构成
  • props/state/methods以及事件。

• 依赖资源（API） ：列出需要调用的API及其详细信息。

接口名称	接口地址	状态	备注
新闻列表	GET /api/news	- [x] 文档确定 - [ ] 开发完成
新闻详情	GET /api/new/:id	- [x] 文档确定 - [ ] 开发完成
添加评论	POST /api/comment	- [x] 文档确定 - [ ] 开发完成
...	缺失	- [ ] 文档确定 - [ ] 开发完成

• 排期：在设计完成后，制定开发计划和时间表。
• todo：在设计评审过程中，发现遗漏或未想到的工作可以在TODO中汇总。

2. 前端公共功能设计文档

• 当前存在的问题：开发组件或工具是因为存在需要解决的问题。问题越大，价值越高。要明确说明为什么要做这件事及其收益。

• 期望实现的功能：在说明问题后，要清晰地描述你期望实现的功能及其特性。以表格组件为例，主要功能包括：

  1. 简化数据请求：

     • 配置API地址自动请求数据
     • 用户点击分页后自动请求数据
     • 支持API地址、API请求函数、data数组三种数据源

  2. 快速生成表格：

     • 通过列配置生成表格

  3. 自定义表头和单元格：

     • 支持通过插槽自定义

  4. 分页：

     • 默认展示20条数据，支持切换页大小（10、20、50、100）
     • 支持不使用分页，直接展示所有数据

  5. 其他功能...

• 使用示例：在描述期望功能时，除了文字说明，最好通过不同场景下的示例代码来展示具体用法，就像ElementUI等组件库的文档那样。

• API：为了让人更深入地理解你要开发的组件或库，应详细介绍API设计：

  • 组件：属性（props）、事件（events）、插槽（slots）、对外方法（methods）
  • utils库：函数的参数结构及返回值结构
  • 对象：构造函数参数、属性及方法

• 实现方案：描述实现新功能的具体方案。

  1. 整体方案：介绍项目结构或流程，可使用图形展示。
  2. 模块实现：详细说明各模块的实现细节。

如何写好设计文档

1. 明确文档的目的和受众

• 目的：明确文档的目的是什么，是为了对齐需求、规划开发流程，还是为了记录设计细节。
• 受众：明确文档的受众是谁，是团队成员、项目经理，还是客户。

2. 结构化地表达

• 目录：编写清晰的目录，方便读者快速找到所需内容。
• 章节：将文档分为不同的章节，每个章节专注于一个主题。

3. 内容详尽、重点突出

• 详细描述：对每个部分进行详细描述，确保读者能够理解。
• 重点突出：使用加粗、下划线等方式突出重点内容。

4. 图形化表达

1. 架构图

   

   • 层次结构：按照层次结构组织，从上到下或从外到内逐渐细化，展示系统的整体结构和各个组成部分之间的关系。

2. 状态机图

   

   • 节点（状态） ：图中的每个节点代表一个特定的状态，可以用圆形、矩形等表示。
   • 连接线（转换） ：带箭头的线条表示状态之间的转换方向，线条上的文字或标记描述触发状态转换的操作、事件或条件。

3. 原型图

   

   • 绘制工具：可以使用专业的工具如Axure，也可以使用Word、PPT等简单工具。
   • 表达方式：可以是多图平铺，只要能表达出你的想法即可。

4. 流程图

   

   • 节点：表示不同的步骤或操作。
   • 连接线：表示步骤之间的顺序和条件。

5. 泳道图

   

   • 泳道：表示不同的角色或部门。
   • 节点和连接线：表示各个角色或部门的步骤和操作。

总结

良好的前端设计不仅不会耽误项目进度，反而能加快开发进程，缩短开发和维护周期，避免返工风险。作为项目管理者，应该推动设计工作，将其作为研发流程中必要的一环。通过本文的介绍，希望你能够更好地理解和应用前端设计，提升项目的整体质量和开发效率。

---

附录

附录A：常用设计工具

• Axure：专业的原型设计工具。
• Microsoft Word：简单的文档编辑工具。
• Microsoft PowerPoint：简单的原型设计工具。
• Lucidchart：在线图表设计工具。
• Draw.io：免费的在线图表设计工具。

希望本文对你有所帮助，祝你在前端设计的道路上越走越远！