交互产品设计开发流程那五步

设计，是一种有目标与计划，同时结合技术的创作与创新活动；不只为生活和商业服务，同时也伴有人文性。根据设计师Victor Papanek的定义——设计是为构建有意义的秩序而有意识付出的努力。设计活动不仅需要理解对象的期望与诉求，同时也需理解业务、技术和市场及环境限制；针对目标和赛道通过严密的规划，使得内容、形式、行为能在市场中带来更多价值。1. 设计流程，一般来说互联网产品的实现主要分为5个阶段，以职能划分为：产品、交互、UI、开发、测试。产品提出需求，交互搭建架构，UI定义风格系统，开发负责实现与落地，完成功能测试后投产上线，而设计（交互/UI）处在产品流程的中间环节。2. 交互与UI的关系，UI是交互的外现，交互是UI的内撑，就如皮肤和骨架的关系，交互的结构布局决定了UI思考方向；在常见的产品设计配合中一定是先有交互，后有UI。交互的价值在于: 从业务需求梳理信息结构，从产品场景搭建用户操作流程，为产品的可用性、易用性负责。而UI的价值在于：围绕产品定位塑造风格与形象，为产品、用户创建情感连接，从而更好的实现业务转化与增长

关于如何设计一款产品的思路 想在互联网捞金，要做的第一步是什么？当然得有一款好的产品。俗话说，打铁还需自身硬。如何设计一款好的产品成为了难事。因此必须有一套合理的设计思路。 按照需求到策略到实现。这是一套最基本的设计思路。我今天就谈谈只前两个步骤，因为第三个实现涉及到的是技术方面。 一、需求 所谓的需求。就是找好创新点和侧重点。 需求必须是明确的，客户群也是明确的。 要明确需求，你必须知道需求的分类。马斯洛说的，需求层次论。 1）生理需求，最基本的吃饱穿暖等。 2）安全需求，一个相对安全的生活环境。 3）社交需求，人是群居动物，沟通也是一种本能。 4）尊重需求，自尊心、人格尊严。 5）自我实现，自我价值的体现。 而面聊针对的是用户的社交需求。同时目前我觉得做的不足的是缺乏自我实现的需求。这个自我实现的需求涉及到如何跟前者的社交需求经行结合。过程中用到的思想是制造社交价值的概念。这个具体的设计方案我在后面再讲。 二、策略 策略分两个方面：产品的设计策略和运营策略。 我觉得策略的制定的核心思想：产品和运营必须具有引导性。 随着APP带来的方便便捷，培养了一大批的伸手党。他们才不管你的市场运营，只在乎用起来一定棒。所以只有让设计者做好99%的事情，来引导用户和商家完成最后的1%。 怎样去引导呢？这就是我们需要解决的问题了。当然也就是我今天为什么想来到这儿想和马总交流一下的原因。 对于一个产品设计时， 第一步，做好用户体验： 1.画面简单； 2.有视觉冲击效果； 3.设计美观； 第二步，从功能入手： 1.足够新颖，好玩； 2.操作性强； 3.直中G点；就是要让用户玩得有高潮； 所以如果要想引导用户来使用你的软件，体验和功能是硬件配置。

流程图：用图示的方式反映出特定主体为了满足特定需求而进行的有特定逻辑关系的一系列操作过程。 精简一下，就是流程图是用图示来表示某一系列的操作过程。

这个操作过程有特定的主体，是为了满足特定的需求且有特定逻辑关系的。例如：京东的购物流程，特定主体是用户、特定需求是购物、特定逻辑关系是用户购物过程中的逻辑。

在我的实际工作中，绝大部分产品的需求文档都没有“数据流程图”，有“任务流程图”的需求也是寥寥无几——产品都靠文字表述，这一点开发经常怼。

业务流程图就是描述那些个体在什么条件下做了什么事情，他们之间有何关联。

主要分三个方面：①涉及到哪些主体？②每个主体都有哪些任务？③各个主体之间怎么联系的？一般涉及到多个主体，每个主体之间有联系，比如p2p平台。这是p2p的业务流程图、涉及到借款人、平台、投资人、第三方支付四个主体，以及每个主题需要完成的任务、任务之间的联系和先后顺序。

任务流程图就是在你的产品操作上，用户通过什么样的操作来完成它的目标，比如你去银行ATM机器上取钱，你是如何一步步操作把钱取出来的，这里以p2p理财产品购买为例，来说明购买的任务流程图。

画流程图的时候注意主要流程和异常流程，在这个例子中，主要流程就是购买流程、异常流程就是没有设置交易密码、用户忘记交易密码、以及超过重试次数这些流程，画流程图的时候先画主要的流程，然后再把异常额流程考虑上，查漏补缺，保证不遗漏，产品的逻辑漏洞多半是由于异常情况没有考虑清楚，画流程图可以有效的帮助你梳理逻辑。

数据流程图，顾名思义，描述某一功能/需求的数据走向。画这张流程图的前提是，你需要意识到该功能涉及到哪些后台，并且它们分别从事哪些工作。最好能把相应的接口字段变动写在图上。

举例：（这是工作中画的数据流程图，关键数据隐藏掉）

如果说业务流程图帮助你梳理战略，任务流程图帮助你梳理用户操作行为（主要给程序员看）、页面跳转流程在帮助你梳理各个页面之间的跳转关系（主要给UI和前端程序员看）这是一个逐步从整体到局部，从后端到前端的过程。

页面流程图的对象是页面，页面是互联网产品设计最基本的单元，不管APP也好、H5也好、PC端也好，这些产品由一个个页面组成。页面流描述了用户完成一个任务需要经过哪些页面。也就是我在哪，经过什么操作，能去哪。页面流有三个要素：页面、行动点、连接线。下面拿购物的页面流举例说明：

画页面流时一般只考虑用户的正常路径就行，如果需要指出异常流程，在正常流程附近画出异常流程就行。产品设计从需求分析到信息架构、再到业务流程——任务流程——页面流、再到最后的原型图（线框图）是一个从抽象到具象的过程，也是从概况到细分的过程。经过一步步的分析，逐步将想法变成实实在在的产品，这就是产品设计的魅力所在。而这其中流程设计起到举足轻重的作用，不可忽视。

上面说了需要绘制流程图，这里说说绘制流程图的思路。

1、调查研究

对于业务流程图，如果你不懂业务，可以让业务人员给你讲解，嘴甜一点；对于操作流程图你可以实地观察用户的操作，或者自己走一下业务流程以及使用竞品；至于页面流程图，只要你元素出来了，怎么跳转，这个难度应该不大。

2、梳理提炼

业务人员给我们讲解的流程，我们要梳理提炼出来，可以把主要的流程画出来，然后再向里面补进异常流程，我们可以先在纸上画画，这样速度比较快，根据业务员的讲解，然后再用专业的工具展现出来。一般流程图有三种结构：顺序结构、选择结构、循环结构

3、评估确认

我们可以让精通业务和涉及到流程图的角色都参与到评估流程图里来，众人拾柴火焰高，其他人员说不定能把我们没有想到的流程提出来，产品经理要多和别人交流。

4、维护更新

我们的流程图需要不断的维护和更新，因为我们的流程有可能变更或者优化，流程图也需要定期维护和更新。比如以前你是绑卡和充值两个流程，你现在为了用户体验把他们整合到一起，直接绑卡充值，这个时候你的流程图就需要变更。

小密圈被封了一段时间后终于重见天日了，这篇文章就来回答小密圈里的一个提问：如何设计一个APP页面。

看到这种提问，内心一般是抗拒的，因为产品设计是一个系统工程，单独拧出来其中一个流程来讲，都是割裂的，但在实际中又必须割裂出来，因为只有割裂出每个流程，把每个流程都想通想透，才能组成完整的产品设计的知识体系。那怎么来权衡整体和局部，系统和部件，也是一门大学问。

1.明确页面设计在整个产品设计中的位置

互联网产品设计的流程大致是：产品定位——需求分析——信息架构设计——流程设计——页面框架设计——设计说明——输出设计文档。可以看到页面设计是处于整个流程的后期，所以前期必须去和产品经理或者用研人员反复沟通，明确产品定位、明确需求、了解业务流程，然后再梳理信息架构、产品的导航形式、任务流程和页面流。不管产品经理还是交互或UI，都要去了解这些，并反复沟通，这是基础，所有的设计脱离了用户和需求都是耍流氓。

其实这也是我在以前文章中反复强调的，只要你从事的是产品设计的工作（目前涉及到的分工主要有产品经理、交互设计师、视觉设计师），都要从产品设计整体去思考问题，产品经理不要只想着需求，交互也不能只想着体验，视觉也不能仅仅思考美不美观，这种眼界的提升，会直接影响到设计方案。

如果你已经建立了整个产品设计的知识体系，这只是第一步，下一步你还有考虑产品运营，考虑商务、考虑资本，这些都是需要设计师去了解的。周末和朋友聊天的时候，他打了个很好的比喻，把公司比作一个人，那么不同的职位就相当于每个人的感官和外在，产品相当于一个人的大脑，视觉相当于一个人的衣品，商务相当于一个人的沟通能力...。你如果只了解人的一个部分，就永远没办法理解这个人。

我目前就在深耕产品设计的基础上，在学习产品运营的知识。

2.确定页面目的和目标

明确了页面设计的上游的流程，接下来要做的，是确定页面的目的和目标。

目的和目标是两个概念，目的是你为什么要设计这个页面，目标是设计这个页面想要达成什么。例如，电商的商品详情页目的是介绍商品、帮助用户进行购买决策，目标就是提高用户下单的转化率。

作为同样的商品详情页面，不同的目的和目标，直接影响到设计形式。例如京东是自营商品，用户一次性购买的越多，其客单价会更高、运营成本也会更低，所以它的商品详情页的主要目标是提高加入购物车的转化率。而淘宝作为一个平台，单独购买一件商品和一次性购买多件商品都很重要，所以它的加入购物车和立即购买的优先级是同等重要的。

记住：明确页面目的和目标，这是你设计一个页面的指导思想。

3.确定页面的来源和去处

任何单独的页面都只是用户完成某个任务的其中一环，这个页面从哪来？能去哪？影响着页面的导航设计、以及工具栏上按钮的摆放。

为了延续性，继续拿淘宝详情页来举例。

返回页面按照设计规范，基本会放在标题栏的左侧，也有一些小众APP考虑到单手操作放在页面底部，其它如分享和更多一般会放在标题栏的右侧。另外针对当前页面的一些操作会放在工具栏上，例如淘宝的客服、店铺、收藏、加入购物车、立即购买；例如资讯类APP的留言、点赞、收藏等。

在考虑页面的去处的时候，一般有二级页面的形式和临时框的形式，临时框又有模态和非模态的区别。例如淘宝的立即购买就用了模态临时框，而没有采用二级页面，这能减少用户在完成一个任务时的跳转步骤，提高转化率。

4.确定页面内容和优先级

经过前面三个步骤，页面框架基本成型，现在就要往这个框架填充内容。根据信息架构设计，基本会确定这个页面需要包含哪些内容（关于信息架构设计，可以参考 《90%的设计师都不知道的信息架构知识》 ）。

其次就要确定页面信息的优先级，确定优先级的判定依据就是第一步所说的当前页面的目的和目标，以及在做需求分析的时候，公司价值和用户价值两个价值维度的考量。而优先级对设计的影响有一下几点：

①用对比的手法，明确信息层级，优先级越高信息表现越突出。例如上图格和销量字段的对比；

②优先级最高的放在用户第一眼能看到的位置（页面的第一屏）。例如将商品图片、标题、价格放在第一屏的位置，评论则放在第二屏的位置；

③优先级低的要弱化、甚至是隐藏或删除。客服、店铺和收藏的按钮相对于加入购物车和立即购买，很弱，消息、帮助、我要反馈则更弱，所以被收起在右上角更多的icon中。

5.考虑技术的局限性

上次在做阅读APP的时候（pad平台），需要在E-Ink屏上的阅读页面增加竖屏模式，这种模式会更利于用户进行阅读的，类似于kindle的阅读体验。但是因为下屏没有做G-senser，所以是不支持竖屏的，只好放弃。如果我实现不去了解这点，做出来的方案只是浪费时间。

现实做设计的过程中还有很多类似的例子，不管是交互还是视觉，总是会想到一些创新好玩的设计形式，每当这个时候一定要去和相关技术人员沟通，确保设计方案的可行性。此外还要考虑项目周期，如果上线时间紧迫，其实是不允许设计师把设计形式做得很重的，只需要出一个简单的保底方案即可。

我自己就有在做设计之前和相关技术沟通想法的习惯，真的帮助很大。

还是文章前面的那句话，页面框架设计只是整个产品设计中的一环。不要把眼界局限在这一环，也不要只站需求、只站在交互、只站在视觉上思考问题，这样你永远是个美工，而不是一个设计师。设计师是一个能用设计语言提供系统性解决方案的人，而不是简单画图的人。

前面我发过产品从发现需求到上线整个开发流程的文章，由于激烈额竞争和市场迅速的变化，几乎所有的团队在开发这块都采用了敏捷开发模式，今天就来跟大家详细聊聊这种开发模式到底是什么样的。

在这之前，简单说说另一种常见模式：瀑布流模式。它是以文档为驱动，在整个开发过程中，开发人员根据需求文档进行开发，一切以文档为依据。

而敏捷开发则是一种以人为核心、迭代、循序渐进的开发方法。它不是一门技术，它是一种开发方法，也就是一种软件开发的流程，它会指导我们用规定的环节去一步一步完成项目的开发；而这种开发方式的主要驱动核心是人，注重的是人与人之间，面对面的交流，它只写有必要的文档，或尽量少写文档，采用的是迭代式开发，适用于以下情况：

敏捷开发的过程主要通过产品范围内迭代内容和周期的确认，规划合理的迭代范围，安排各岗位人员分步骤协同工作，通过开发过程中的任务项的快速跟进和渐进明细原则，保证资源的平衡和工作效率的最大化。

由产品经理驱动，订制公司产品战略，从而进行需求的采集与确定，根据竞品分析以及用户调研，进行产品原型的制作以及产品需求文档的撰写，在这个过程中，需要与项目经理进行评审，了解产品的开发难度以及可行性，从而对产品需求以及原型图进行合适地调整。

由 UE 完善产品原型的交互细节，有关页面的跳转等用户体验做到极致，然后由 UI 设计师进行界面的设计美化，及时与产品经理进行沟通，设计出与产品经理所想要的效果出来，结合自身的设计理念和技术，将界面设计得人性化、扁平化。

由开发人员进行产品具体的功能设计开发，根据项目进度安排时间，做好工作安排，认真查看设计图以及原型图、产品需求不懂，不清楚的地方及时与产品经理进行沟通，以免辛苦做出的功能与产品的意思不符，造成浪费时间精力的后果，产品进行开发完成后，由测试人员根据测试用例进行测试，将出现的问题进行反馈，及时修复产品的 bug，确保产品在规定的时间进行上线。

了解了这个流程，就容易解释为什么一旦产品出现问题，产品就成为当之无愧的背锅侠，事实上，这怨不得其他人，好比造房子，产品的工作类似打地基，地基不好，房子会塌，房子塌了怪谁，地基打得不好，当然是产品。

所以在工作中产品经理特别需要注意以下三个要点：

丨全程参与

前期的产品战略以及需求，产品经理都是参与其中的。特别是大的产品方向突出的功能点，你都必须全局进行了解。对公司的战略方向是否匹配，之后在产品的开发以及以后产品的迭代是否难度太大；这些问题一定要想清楚，不懂的就问，不断地进行评审深入下去。因为一旦进入开发阶段，突然变更需求，那么这段时间的精力以及时间就浪费了，这对于公司的损伤是巨大的。

丨勤写文档

一个人的记忆不可能会记住所有的东西，所以你必须记录下来，这样能更好地开展工作，在写需求文档的时候，我们需要要对每个用词定义紧抠，少用差不多、不确定等用词来模糊定义，千万不要以为需求文档开发不看，只看设计图，起码测试是需要根据你的需求文档写测试用例的，所以需要慎重对待。

丨做好评审记录

在评审的过程中，与项目经理进行评审后，记得做记录。哪些功能要做，哪些功能不错；什么时间开始，什么时间结束，这些都做好记录。

在互联网时代，使用敏捷开发模式可以让产品在市场上快速试错，根据数据的反馈进行及时的战略调整，让产品在市场立于不败之地，而在这个模式中，产品经理无疑是最重要的一个角色。最后用敏捷开发的 slogan 来总结它的几个特点吧：

「个体与交互」胜过「过程与工具」

「可以工作的软件」胜过「面面俱到的文挡」

「客户协作」胜过「合同谈判」

「响应变化」胜过「遵循计划」

互联网产品开发流程一般分为这几步：（当然不是绝对的，各公司根据业务模式不同会有微调）

第1步 需求分析

作用：分析确认用户的需求，把最初的概念变成真正可设计、可开发的文档。向项目组的成员传达清楚需求的意义、功能的定义和详细的规则等，这是一个烧脑的过程，产品能满足最主要的用户需求是什么，一切产品都建立在需求之上。

参与角色：产品经理

第2步 交互设计

作用：通过合理的界面语言将产品能力、功能呈现给用户。

角色：交互设计师

第3步 视觉设计

作用：向开发输出真实用户看到的产品的呈现。

角色：UI设计师

第4步 程序开发

作用：用代码语言实现需求。

角色：开发工程师

第5步 程序测试

作用：保证需求的完整性、安全性、开发质量。

角色：测试工程师

第6步 产品验收

作用：验收产品功能、产品交互、产品视觉与用户需求的满足度。

角色：产品经理、运营人员

第7步 产品运营

作用：以产品为基础，以用户主体，维系产品长久稳定的发展。

角色：运营人员

我们可以很清楚的看出来UI设计师的上游岗位和下游岗位，希望能给你带来参考！

如果不清楚自己适合哪个方向？我知乎也回答了不少有关转行学习的问题，可以去逛逛：陕西中公优就业IT培训