开发网页的工作流程

---

1.工作流程

1. 原型图
2. 视觉稿
3. 设计规范
4. 切图与标注
5. 前端代码
6. 项目走查

[!TIP]
因为我并不是专业的UI设计和美工，所以只讲原型图，因为它是由项目经理所构建的。

1.1 原型图

原型图阶段中设计师需要和产品经理沟通需求，这时要注意，并不是产品经理向设计师下发需求，而是需要相互就自己擅长的方面进行沟通。
因为在视觉设计时，设计师也许会有更好的视觉展现方法，所以网页的开发是双方一起进行的。

网页原型图也称之为网页线框图。

1.1.1 线框图

线框图(Wireframe)是整个交互式设计过程中的一个必要步骤，它通常在项目生命周期的早期阶段进行。

线框图可以简单的理解为是网站的一个图形框架，这就好比建筑的蓝图。

线框图可以帮助我们准确拆分页面、以及确定每个页面的功能模块及展示信息，并确定每个页面元素的界面布局。

线框图就是一个网站或者APP的一个图形化的骨架，能够引导一个页面的内容及概念，并且能够帮助设计师和客户讨论具体的网站层次和导向。

[!warning] 尽量完全
线框图中的元素布局以及功能模块需要无限接近产品上线后的样子。

正如Vue组件式搭建网页，线框图也可分为各个组件化开发，只需把通用的组件设置为母版。

线框图需要实现三个核心目标:

1. 在进行视觉设计和交互设计之前，呈现页面的内容和功能。
2. 在项目早期帮助设计师与客户交流设计理念。
3. 建立网站设计的信息层次结构。

线框图可以分解成以下三个主要元素:

1. 信息设计元素-包含网站的结构和布局轮廓的主要信息。
2. 导航设计元素-创建导航以确保网站结构符合用户期望。
3. 界面设计元素-用户界面的视觉设计和描述，主要用灰阶色块。

意义

作为设计过程的一个关键部分，线框图在以下几个方面具有重要意义:

1. 比抽象的设计概念更容易理解，你可以将抽象想法变为可视的网站界面。
2. 使团队成员和客户在早期阶段查看你的设计，并提供反馈意见以提升用户体验。
3. 有助于快速简便定义实现功能，它可以根据用户和业务需求来正确定位页面内容和功能。
4. 建立快速不必想到具体样式，并且绘制成本低。

[!tip] 个人看法
作为个人网页开发者，线框图是必须绘制的，之后的步骤可跳过，再根据线框图进行功能分析，最后进行前端项目构建，样式之类可用组件库提供的默认样式，之后再根据安排自行设计。毕竟先实现样式再实现功能就完全是舍本逐末，会严重的拖慢网站开发速度。