400-9158-965

前端开发的流程是什么?

专业文章
2019-06-20
分享:

一般情况下,一个互联网产品经过以下的步骤:

  1. 产品。产品来自于两个渠道:第一种是从公司外部而来,通过和甲方签订合同,进行项目的外包。第二种是公司内部的产品经理,进行互联网产品的需求分析和设计。这个过程一般从用户研究开始,找出目标用户的需求,并进行需求的过滤,产品经理的产出物是BRD(商业需求文档)和PRD(产品需求文档)。
  2. 交互设计。对于一个产品,接下来是进行交互设计,所谓交互设计就是产品的行为设计,一般涉及产品布局的合理性问题。交互设计的产出物是产品的交互原型,如果有一定的实力,可以进行产品原型的可用性测试,邀请典型用户对设计流程的效率、可学习性等问题进行专项的测试。
  3. 视觉设计。一般视觉设计是前端的上游,前端是视觉设计的下游。设计的工作目的是把产品宏观的思维结果进行专业的处理,设计师对产品原型进行专业的处理,比如布局、配色等,视觉设计师的产出物是设计图。如果不进行视觉设计直接进行前端页面实现是否可以呢?这里就会涉及到成本的因素,在前期,尤其是设计,主观感受大于理性的思考,所以每天的结果都不一样,所以需要设计师去消化掉这部分主观感受带来的误区,而且从成本上来讲,有些场景设计师改图比改代码要容易控制一些。
  4. 前端开发。设计师的结果是PSD格式的设计图,保留原始的设计图层。前端的工作结果是html页面,是把很多图层上的效果,有机的用html组织起来的过程。
  5. 后台开发。前端是把html文件交给服务端开发工程师,或叫后台开发,这个html里边包括一些交互的JavaScript文件等。总的来说前端是一个承前启后的岗位。

更加紧凑的表述方式是,领导或甲方提出需求,然后产品分析需求,并且根据需求画出原型图,然后根据原型图出设计稿。出完设计稿经过团队评审,通过之后由前端来制作静态页面,静态页面交给设计审核,通过之后交给后台人员,进行动态数据的添加。添加完之后,发布测试环境,产品测试领导审核,成功后,直接发布产品环境。或进行版本迭代。这是整个的一个设计,开发,部署的流程。

在整个流程中,伴随着多个不同职位和多份文档。

  • 产品经理是整个流程中需求文档的编写者,因为产品最能接触最原始的需求,对需求的理解更深刻或专业,产品经理会编写BRD(英文全称Business Requirement Document,BRD)、MRD(英文全称Market Requirement Document,MRD)和PRD (Product Requirement Document,PRD)。
  • 交互设计师的产出是交互原型,有的交互不是非常复杂,就没有文档,只是邮件。有时候说,不要这个邮件行不行,那怕是最简单的原始东西,没有文件或邮件是不能做一个后期测试回溯的依据。交互文档描述页面复杂的交互或各个用户表单与用户发生的各种互动。
  • 架构师或项目经理的产出是需求文档。需求文档是对整个项目的历史背景,系统开发软硬件要求,或版本信息,等等。
  • 后台工程师提供的接口文档,这里边包括一些请求类型,传参的数目与键名,还有服务端返回的参数名约定等等的,这些文档是开发中的灵魂,也是以后测试回溯的标准或依据。

用一张图来表示产品从确定需求到开发出来的整个流程:

网站开发流程

前端开发的工具
查看下一篇
推荐阅读
近期签单
  • 成功中标阳光电源股份有限公司集团官网开发项目
  • 成功中标基恩士(中国)有限公司营销推广项目
  • 成功中标江苏亨通数字智能科技有限公司网站开发项目
返回列表
相关文章
专业文章
2025.04.18
网站迁移不求人,5步搞定数据平稳过渡
网站迁移确实可以以自主完成,但需谨慎操作以避免数据丢失或服务中断。如下是简化版5步操作指南及注意事项,适合技术基础较弱但细心的小白用户: 精简5步迁...
专业文章
2025.04.18
拒绝大改网站!巧用插件实现功能10倍拓展
针对网站功能扩展需求我为您梳理了一套低侵入式解决方案框架,包含6大类技术路径和实战案例: 一、智能插件化架构方案 模块联邦(Module Federation)...
专业文章
2025.04.17
低成本搭建高流量网站的10个实用技巧
下述是10个低成本搭建高流量网站的实用技巧,涵盖技术优化、内容策略和推广方法适合预算有限但追求高性价比的建站需求: 1. 使用静态网站生成器(SSG)...
专业文章
2025.04.17
让老年群体轻松上手,网站适老化改造攻略
为了让老年群体轻松使用网站,适老化改造需从视觉、交互、内容、功能等多维度优化。如下为详细攻略: 一、视觉设计优化 放大字体与间距 主文...
专业文章
2025.04.16
跳出审美陷阱!反常规网站设计引领新潮流
反叛与重构: 当网页设计撕碎规则手册 在这个被Dribbble风格统治的数字世界,网页设计正陷入一场集体无意识的审美困局。当所有企业官网都使用相同的首屏大图...
专业文章
2025.04.15
新拟态设计,打造如临其境的网站空间
新拟态设计(Neumorphism)以“柔软、沉浸、真实感”为核心,通过光影与层次的巧妙结合,能有效打造具有空间感的数字体验。下述是从设计到落地的关键...
素未谋面,却能心照不宣;
您在哪里我们的服务就在哪里,全国范围内支持上门洽谈。
即刻联系
扫一扫微信二维码
我们能给的
远比您想的更多
隐私条款信息保护中,请放心填写
400-9158-965
互橙各地办事处可统一调度,上门服务