设计Idea项目Nice

项目流程些许经验总结

2017-02-15  本文已影响68人  rectinajh

第一步:需求梳理、分析

第二步:产品原型图绘制

第三步:UI设计

第四步:项目经理&技术负责人对接需求

第五步:技术方案 & 架构设计

第六步:项目排期 & 任务分解

第七步:产品研发阶段

第八步:交付测试阶段

第九步: 产品发布上线

第十步: 迭代

第一步:需求梳理、分析
在此假设用户需求分析已经确定 , 接下来根据提炼的真实用户需求来确定产品需求。
  产品经理将会根据沟通中的相关资料的word、ppt、jpg等等东西翻译成逻辑语言,最简单的就是产出一张产品功能脑图或者一份功能列表。

产品功能脑图:


2.png

一份功能列表图:

3.jpg

初步产品功能需求梳理清楚之后,产品经理持续跟进,反复沟通确定产品原型图。

4.jpg

同时根据具体的项目需求,会搭配一套产品业务流程图 。
产品业务流程的图:

5.jpg

简单点,用墨刀做一份带交互的原型。这个很重要,只有交互原型图上的逻辑跑通了,代码的逻辑差不多也通了,这样能节省很多时间,需求上说的跟实际上做的还是有很大区别的,有时间,需求听起来是很有道理,但是用技术几乎实现不了.

交互的原型图:

6.png

第三步:UI设计

UI设计,包含风格稿和内页设计。
  风格稿会根据产品需求提供的目标用户类型、客户倾向、LOGO等信息,以及确定做风格稿的2-3个页面的原型图,来进行风格稿设计。
  待风格稿确认后进行内页设计,包括设计效果、页面元素、弹出页面等等。
风格稿:


7.jpg

风格稿
  所有页面设计完后会统一发给客户做进一步沟通,然后统一修改优化。

▲Zeplin
  Zeplin能够帮助前端更好地理解设计师意图,而设计师又能快速得到前端反馈的协作,从而减少设计师与前端的沟通错位,使得两者在“界面元素”和“交互动作”上形成一致。

8.jpg

invision用于设计先行能减少后端技术工程问题,设计的迭代越快,软件开发就越能在时间点的把控上做到极简。

9.png

设计定稿后并不是设计师的工作结束了,之后还有一段周期的切图、标注工作 。
标注:


10.png

切图:


11.jpg

第四步:项目经理&技术负责人对接需求

项目经理对接上这些需求,第一个工作是细化需求,将这些翻译成技术能更好理解地语言,搭配着原型图或设计稿来召开技术会议,统一讲解新项目的需求。

12.jpg

第五步:技术方案 & 架构设计

技术负责人在清楚了解整个项目的需求之后会开始构思整个项目的技术方案,根据产品需求,提供易扩展、可持续迭代的技术框架方案。

整个项目的技术方案(需求文档) :

00.png

API接口文档:


13.png

可持续迭代的技术框架方案:

14.jpg

第六步:项目排期 & 任务分解

同时,项目经理在和研发团队沟通确认后对项目进行分解以及排期,以此来保证项目进度和质量。
项目管理 :

15.jpg

第七步:产品研发阶段

这个阶段就是各端技术按照排期规划开始编码,期间各种对接、调试以及撕逼。我不是程序猿,这块就不多写了,贴几张他们技术wiki的截图吧。
Wiki对接:


16.jpg

Paw 工具(Paw可以在Mac上模拟各种HTTP请求,可视化的管理HTTP Header、Parameters、Cookies等,还有一点非常出乎意料的功能是通过下载插件可以自动生成Swfit、OC、JS等多种语言的代码),测试API是否可行,让测试 API 变得轻松愉悦,可以构建内部和外部的资源。它可以在不同的环境下进行测试,也可以引用来自其他请求响应的数据。
PAW :


17.jpg

测试用例:


18.jpg

测试过程:


19.jpg

第九步:上线

以上均是理想情况下,一个App必经的几个阶段的简洁步骤说明,具体执行依然会根据需求穿插进行。
  不同的项目管理模式或许会有完全不同的流程步骤。但是专业性几乎是保证产品质量的唯一准则。

第十步:产品迭代

每次要根据用户反应的问题和增加的功能需求进行产品迭代 。

20.jpg
上一篇下一篇

猜你喜欢

热点阅读