从需求分析到设计实现
上一周完成了项目的需求分析和架构设计，这一周将进入实操阶段。知识付费首页项目将作为贯穿全程的实践案例，从原型图绘制开始，到设计实现，再到前端代码开发，把整个开发流程完整走一遍。
前端工程师为什么要了解产品设计和原型图绘制？因为要往更高的技术岗位发展，必须对开发全流程了熟于心。这样才能在跨团队沟通（和产品经理、设计师、后端工程师开会讨论）时，准确理解对方的意图，消除沟通障碍。理解需求最直接的方式就是亲自绘制原型图——通过这个过程把业务模块、交互逻辑彻底搞清楚。
原型图绘制的基本流程
原型图绘制的标准流程分三步：
- 明确业务需求：回顾需求分析的结论，梳理功能模块清单
- 寻找竞品参考：参考同类产品的设计方案，借鉴成熟的布局和交互模式
- 动手绘制：选择合适的工具，将功能模块转化为可视化原型
原型图绘制工具
客户端工具
| 工具 | 特点 | 适用场景 |
|---|---|---|
| Axure RP | 功能最全面，支持交互原型 | 复杂产品原型设计 |
| MockPlus | 简单易用，组件丰富 | 快速原型 |
| Figma | 跨平台协作，AI插件支持 | 团队协作设计 |
在线协作工具
| 工具 | 特点 | 适用场景 |
|---|---|---|
| ProcessOn | 国内产品，支持流程图、UML等 | 流程图 + 原型图 |
| 蓝湖 | 设计交付一体化 | 设计师与开发协作 |
| MasterGo | 国产Figma替代品 | UI设计 + 原型 |
通用工具
墨刀、MockPlus、Figma等工具同时支持客户端和网页端，使用便捷。
绘制原型图时只需要表达清楚线框关系和页面结构，不需要追求高保真效果。工具只是手段，关键是把业务逻辑梳理清楚。
竞品参考网站
设计灵感类
| 网站 | 特点 | 使用方式 |
|---|---|---|
| 站酷 (zcool.com.cn) | 国内最大的设计师社区，含网页设计、企业官网等分类 | 搜索"响应式网站"获取参考方案 |
| 花瓣网 (huaban.com) | 图片采集和分类平台，有大量用户整理好的画板 | 关注优质画板，获取分类整理好的参考 |
| 大作网 (bigbigwork.com) | 设计资源搜索 | 搜索"企业官网"、"知识付费" |
素材资源类
千图网、昵图网等平台提供图片素材，但需要注意商用版权——很多素材需要购买会员或单独授权。在商业项目中使用未授权素材存在法律风险。
竞品分析
以慕课网首页为例，典型的知识付费首页布局：
- 顶部：导航栏 + 轮播广告图
- 中部：课程分类推荐、热门课程展示
- 底部：网站介绍、友情链接、版权信息
这种从上至下的布局是首页设计的通用模式，核心是在第一屏（轮播图区域）抓住用户的注意力。
设计参考的方法
- 图片采集：使用Eagle等工具将网页设计截图采集到本地，分类打标签
- 建立参考库：按项目类型、行业、风格分类整理设计参考
- 关注设计规范：了解响应式网页的标准内容宽度（通常1200px/1440px）、栅格系统、移动端适配规则等
- 参考大厂规范：如Apple HIG、Material Design、Ant Design等成熟的设计体系
↑