产品经理原型图怎么交互

Ⅰ 互联网产品交互设计的相关流程是什么,最好详细一点

谈一谈互联网产品设计阶段的工作流程

关于互联网产品设计阶段的工作流程，近几年好像有了一个标准的模式，大家都按照这么一个大概的流程来工作，又好像没有标准，每个团队又不尽相同，有的简单粗暴，有的复杂细致 。之前工作过的几个东家工作流程都不是很合理，产生了很多经验教训。最近在馒头商学院回炉改造，又讲到这块，自己总结了一下感觉比较合理的工作流程，希望给一些小伙伴参考和启发。

还想跟大家说一个小的思路，就是让下游的人在做工作时候都提前一个阶段或者两个阶段参与上游工作，不要等着上游有了输出物后才开始工作，花几个小时时间，会让自己的工作思路更清晰，减少很多沟通成本和撕逼。比如在做核心流程时拉着开发负责人一起探讨，开发心中有数，等交付原型时，不用产生太大分歧。之前所在团队在需求分析阶段会多次拉着测试一起讨论，每次花一两个小时的时间，省去的是测试阶段几倍的沟通时间。

标准化工作流程主要是为了规避问题，提高效率，不是为了标准的工作流程去做工作，每个公司的流程都被人员配置，项目周期，甚至公司文化影响着，不论什么样的流程，能够达到工作目标的流程就是好流程。

Ⅱ 网页设计流程,用画原型图吗逻辑谁来设计_web端原型图怎么画

简单来说，产品经理进行页面原型设计时，就需要把业务逻辑和交互逻辑讲明白，所以不能舍本逐末，庆辩不需要做得特别精美，而是要把握重点，把重心放在分析用户需求、规划产品功能上。交互设计师可以根据产品经理的原型图进行设计。

从使用工拆羡具来看的话，产品经理在做原型时其实只需要Mockplus这样的快速原型设计工具。只要提前想清楚主要的功能点和交互逻辑，使用工具内置的现成组件，十分钟就能把原型做完。

交互设计师需要做的是根据产品经理绘制的原型版和相关产品文档，绘旅差拍制高保真原型，通常交互设计师会使用PS、sketch、XD之类的设计工具，在完成页面设计后上传到摹客等协作平台添加交互。完成后也可以直接发链接给其他成员审阅，这时候主要看的就是原型呈现的视觉效果了。

Ⅲ 产品经理必备技能 | 如何画原型

产品经理当然要会画原型啦~

聊聊怎么画原型吧！

在画原型之前，更重要的事情，就是画 页面流程图 和 信息架构图 ！假如你没有这些东西，就开始画原型，那么等着你的就是没完没了的改改改。

页面流程图是以用户视角，看流程合理性。通常适合于跳转比较复杂的产品功能，如电商、社交产品。

为什么要画页面流程：

（1）是交互设计/原型设计的基本依据，是逻辑基础。如果你都没想好页面流转的顺序，那么你画的原型一定不是可以确定下来的版本

（2）代表了用户的操作过程，先画页面流程图能迅速发现体验问题。有了页面流程图，你可以设身处地想象用户在使用产品时的操作流程，发现其中可能出现的问题

（3）突出页面重点元素与逻辑关系，提升原型的设计效率。很多页面不是全新页面，而是在原有页面做一些修改，如果你知道页面流转顺序，那么会给你画原型减轻很多工作量

页面流程图包含：

（1）四方形：业务流程中的四方形部分，异常流程或弹层通常用菱形表示

（2）流向：主干流向和辅助流向

（3）重点元素：每个流程中，重点要体现和表达的内容是什么

画页面流程图的工具：

（1）Axure：画了页面流程图可以紧接着画原型

（2）ppt：方便讲解

需要注意的地方：

（1）回归业务流程，明确主线：页面流程一定来自于业务流程，一般为业务流程中的方形部分。异常流程一般为弹层或弹窗提示。业务流程画的好，页面流程就简单。

（2）明确页面中的重点元素：功能在页面中，有哪些是需要表现元素。增加异常流程的处理逻辑。增加辅助的帮助页面。考虑下游触发点（按钮/链接/滑动...)。

（3）沟通与优化：首先要尽可能穷举涉及的页面，然后做减法，有些页面合并或删除。通过原型草图，优化调整页面关键元素。与UI、UE、前端研发多沟通会有更好的效果。

页面流程图一般规则：

页面流程图例：

一个具体案例：

业务流程：

页面流程：

主要是分离出了普通用户的操作流程，加异常处理。

对于普通用户的关键页面和关键流向：

页面流程图：

（1）分离出5个页面，确定流程流向

（2）固定元素，例如在“1购物车”中，“提交订单”就是下游触发点，点击后流向下一个页面；在“2输入优惠码”中有关键元素“填写优惠码”，另外还有下游触发点“确认订单”...

（3）针对每个页面去画对应的原型图

信息架构图，以产品视角，看包含多少功能点。适合于层级分明的，如音乐产品、新闻客户端、阅读类产品等。

信息架构图例1：

有了页面流程图或信息架构图，现在终于可以开始画原型啦。首先，什么是产品原型设计？

产品原型 ，俗称 线框图 ，大概就是草图的意思吧。它是产品落地的关键点，是从虚拟概念到用户接触的节点。同时也是产品经理产出的关键内容，上传下达，上给老板，下给UI、UE同事。

产品从原型到上线的流程：

大公司的产品经理只需要做手绘和低保真的部分，小公司可能还要兼职交互设计...

案例：

好的原型有什么特点：

（1）整体：页面结构清晰、跳转关系明确、与业务流程一致、完整表达用户需求

（2）独立页面：功能元素明确有序、位置关系清晰、不同状态变化清晰

（3）交互设计：清晰的交互逻辑、一致交互方式、界面统一

常用工具：

（1）纸笔：自己画画，快速学习和定位

（2）白板：多人讨论

（3）软件Axure/Sketch/墨刀：产出正式文档

案例：

（1）研究流程：业务流程->页面流程

（2）确定页面框架：大概确定页面布局和大的框架

（3）画原型：画模块，确定交互细节

注意事项：

（1）尽可能用真实比例、真实文案，使元素更真实，也避免在需求评审时被之一。尽可能真实模拟极端情况，并示例清楚。
（2）紧扣需求主体，不横生枝节。如果原型需要增加新功能，一定要是来源于需求，并且要考虑后端数据来源。

（3）不要上颜色！原型就用黑白灰，不要给UI、UE挖坑

（4）目录树清晰，阅读流畅

（5）保存修改记录，关键修改重新保存文件

画/改原型的时间尽量控制在20%工作时间之内，否则就要问问自己是不是哪里出问题了哦。

产品需求想明白了没？？？

产品流程理清楚了没？？？

手绘草图画了没？？？

手绘草图和Boss确认了没？？？

Ⅳ 产品经理画原型图哪些工具好用，求推荐～

对于产品经理来说，一个好用的设计（画）原型图工具是一个桥梁。它既能把自己的构思体现，又是与开发小哥哥的“交流”。

下面我来分享一些大众款的原型图设计工具，可以根据自己的需求来选择。
1.Axure：发展较早的一款原型设计软件，因而名声较大。无限画布，适合做低保真到中保真度的原型。功能很多，也让学习起来有点难度，网上有很多axure教程就不多说了。本地型软件，可以下载html文档预览，手机预览不方便。
2.墨刀：国产的一款原型设计协作工具，比起axure来非常容易学会，内置组件很多，创建页面跳转也比axure简单太多。因为是一款在线工具，可以云端保存工作，这点确实很便捷。另外，通过分享链接就可以分享原型给别人看了，如果涉及到跟同事对接什么的，选择在线的工具更方便。支持sketch文稿导入和自动标注。个人认为性价比最高。

3.Invision: 可以说目前是国外发展最大的在线原型设计工具，主打“交互原型”和“协作”，支持sketch和ps设计稿导入做交互。近来出的 Invision studio 对标sketch，想满足更惊喜的设计需要。国外一些大牛公司像airbnb和amazon都在用。不过对于国内用户来说会有服务器速度的问题，而且，贵。（土豪公司无视）
4.Marvel: Marvel 也是海外知名度较高的一款原型设计协作工具，支持PS和sketch设计稿导入做交互原型，本身也支持中度保真程度的设计。也有自动标注功能。图片库对接unsplash，这样来自unsplash的很多精美的免费图片可以直接用。价格比Invision稍便宜。
5.POP（Prototyping on Paper）：这款比较另类，是给拍照的手画草图直接做交互。操作轻巧简单：先用手机拍下草图原型(存到POP app内)；然后开始编辑图片的哪个区域（按钮）链接到什么页面，添加跳转链接热区，就可以在手机上给小伙伴们演示了。内嵌的交互动作 如侧滑、展开、消失等，即可满足一般的动态演示需要。但功能较为简单，对更深的需求无法满足。
6.Proto.io：也是国外的一款手机原型开发平台。支持在大多数的浏览器运行，共享和协作操作方便，可以直接在真实的移动设备上对原型进行测试。拥有较为丰富的UI组件，支持自定义。另外它有不错的用户测试功能，支持视频录制。并且在移动组件时，能够实时在画布看到组件之间的距离。另外由于服务器的原因，有国内用户反应速度有点慢；收费较高，性价比一般吧。

Ⅳ 产品经理应该如何与 UI 设计师沟通

产品原型完成后下一个环节就要交给设计师了，一个产品最终的模样决定权也在设计师手上。美观性是给用户的第一印象，如果产品的美观性不够好的话，那么产品 给用户的印象也会打折扣。其实在做产品原型的时候，很多公司都会要求高保真原型，高保真原型要从两个角度去评判，第一是原型的界面做的很逼真，在原型上就 已经添加了色彩元素，这样的做法会使得需求方更易理解产品。第二是原型的交互，原型中加入更好的交互，会使原型更加真实，一来利于更好的表达产品人员的想 法，第二也便于后续利用原型做用户测试。但是在工作中我会发现，如果在原型中加入色彩元素太多的话对设计师来说会是一种干扰。于设计师而言，产品就是需求 方，所以设计师可能想当然的以为原型中的色彩元素就是产品喜欢的，自己设计的过程中也会采用这种颜色。况且互联网公司中常常会有这样的场景，因为产品急着 上线而把时间卡的很紧，这时候设计师往往会因为时间紧，而难以产生好的想法，设计出来的页面也难免不会太理想。所以我在制定产品排期的时候也总是希望尽量 给设计师多留一些时间。不过话又说回来，像我刚才所说的这种情况，也要因设计师而言，能力优秀或者经验丰富的设计师还是会完全发挥自己的才能。

说到设计评审，我个人的原则一直是尊重设计师的想法。设计前一定要跟设计师详细的做产品介绍，讲解产品中的功能点和文字，以及产品背后所隐藏或希望表达的含义。虽然说UI设计师负责的是美化界面，但是美化的背后也要有其思想，而且这样的沟通后，也便于避免设计师设计出来的页面与期望的有较大出入。产品人员对于UI的 设计也会有一些自己的想法，设计前可以与设计师沟通，但是就我个人而言一直都不希望产品人员过多的把自己的想法强加给设计师，甚至精确到页面中某个地方画 个什么图案，虽然说这样可能设计出来的东西比较符合期望，但是长期以来这样的做法会束缚设计师，而且也可能会引起设计师的反感。所以可以先让设计师自由发 挥，毕竟设计师是专业的，他们的想法或许会超过产品人员。而产品人员可以在设计师设计了几版之后仍不满意的情况下才与设计师详细的沟通自己的想法。

Ⅵ 交互设计中原型图和线框图

首先，我们需答滚搏要搞清楚的一点就是线框图不是真正意义上的原型。许多设计师和产品经理，甚至是经验丰富的设计大牛往往也很容易混肴这些专业术语。什么是线框图什么是原型什么时候使用线框图什么时候使用原型

提供信息和功能——线框图，我该如何互动或如何使用——原型。

什么是线框图

线框图是一种低保真且静态的呈现方式，设计师通常使用纸笔来表达自己的想法。只要能明确表达内容大纲，信息结构，布局，用户界面的视觉以及交互行为描述即可。就像建筑蓝图一样，蓝图也就是施工方案，详细描述改如何建造建筑。绘制线框图重点就是要快，明确表达自己的设计想法清祥，它不是美术作品，无需过多的视觉效果。黑白灰则是它的经典用色。

什么时候使用线框图

线框图(Wireframe)是软件或者网站设计过程中非常重要的一个环节。线框图常常适用于非正式场合，用于团队内部的讨论。

花费成本

线框图的花费成本可以说是零，只要有纸笔，或白板就能完成你的想法的构建。不过有的产品经理用Word，有的用Photoshop等。但一般不作为用户测试。

什么是原型

原型通常是中高保真的呈现形式。以接近最终产品的形式来考量产品的可用性。它能够实现和验证你的设计理念。原型是程序开发过程中的重要步骤，并且允许我们进行一些初步的测试。

什么时候使用原型

原型常用备迅于做早期测试，以确保你的想法符合目标市场。在产品发布之前，没有原型和对用户的测试，这个产品注定是失败的。在原型设计阶段花费的时间，可以避免额外的工作和成本。相对于纸上的产品设计文档，产品原型更加有效，这样可以让所有的测试人员以及用户知道你产品的创意所在。

Ⅶ 初级产品经理-如何高效绘制AXURE原型

      原型是产品经理或者交互设计师所设计的某一需求或者某一问题的具体的解决方案。绘制原型的工具有很多，我们公司大多的产品用的都是Axure。用这个软件，高保真或者低保真原型都能做的很好。那么，怎样的原型才适合团队交流？

      毕竟绘制出来的原型并不是只给自己看的，还要讲解给团队里的成员，UI/前端/开发。特别是进行小组内评审的时候，通过演示原型，需要向他们讲解产品内部的逻辑、具体的页面、动效等，还要向他们询问设计是否合理，能否实现等，静心倾听他们的意见。这时候，原型就是一个思维传达的工具，将你的想法，翻译并灌输给你的团队成员。同样，原型是也团队的交流工具，针对绘制出来的原型，每个人都可以谈谈自己的看法，交流思想，完善原型不足的地方。

      所以原型绘制出来，必须要有基本的交付标准。

一、原型设计的基本交付标准

1.清楚------让他人能明白产品是干什么的，包括什么功能，有哪些页面。

需要清楚地表达页面有哪些内容模块

需要清楚地表达模块内部的构成元素

2.清晰------让队友知道具体有哪些要求，指导他们如何做

【1】功能操作

  某一个功能可以进行哪些操作，点击/鼠标悬浮/拖动等操作，以及页面会有什么反应。（方便开发的工作）。

【2】操作路径

       有一些操作是要跳转页面，跳转的路径需要标清楚，跳到哪去了，涉及哪些页面，页面之间是如何联系的。防止用户迷失。

【3】点击状态

一些链接，按钮，需要标明它初始的时候是什么样，鼠标悬浮有什么效果（颜色/下划线/提示语等），点击的样式变化，以及点击后的样式。（这些可以为前端的工作提供方便）

【4】信息组合

相关的信息需要组合在一起，比如一些基本信息，姓名/性别/年龄等最好放一块，不要分开。不相关的保持距离。

【5】位置排序

页面的布局应该适应用户的习惯，浏览方式、工作任务。突出强调重点，方便用户的工作。一些数据可以思考一下它们的排列方式，按什么排序，能方便用户查找，仍旧是“以用户为中心”。

3.周全-----产品的各种细节，不能疏忽

【1】交互状态

     某些重要的操作，交互样式是怎样的，效果如何，最好单独抽出来做成高保真，演示给他人看，让他们对产品有深入的体验和感受。

【2】数据显示

原型上涉及的相关数据做好有真实的案例，将需要获取的关键数据全部展示出来，比如一篇文章，需要的数据：作者、发布时间、浏览量、喜欢数、收藏数等，方便开发准备必要的数据接口。

【3】异常考虑

需要考虑一些突发情况的应对，比如断网、加载太慢、数据已经被删除了、数据找不到了、没有访问权限等等情况。

【4】配套页面

产品里的一些功能可能和其他产品有关联，需要将可能涉及的其他页面包括到项目内。比如页面在wap上手机的浏览样式、一些发送给用户的消息/短信的内容和样式等等。

4.基本审美

【1】对齐

【2】间距

【3】颜色

【4】字体

推荐大家看看《写给大家看的设计书》这类易上手的书籍。

5.基本规范

【1】页面尺寸

       web的宽度有960px、1000px、1200px，App有安卓、iphone5、iphone6等，需要与已有的产品保持统一的尺寸。

【2】字体大小

     标题可以是18px或者16px，内容可以是14px。既要考虑用户是否看到清，又要考虑美观。

【3】颜色

     原型不要有太多的颜色，坚持黑白灰，除非要突出，可以用其他的颜色。

【4】弹窗

     弹唱的样式最好做统一，弹窗名+内容+操作按钮+关闭

【5】元件

   不在原型正文添加过多的截图、图标样式，会对UI的设计造成干扰。

二.Axure的快捷使用技巧

       工欲善其事必先利其器，工具使用的越娴熟，才能节省大量时间用于方案的思考。下面将简要分享Axure绘制原型时的一些快捷操作：

      首先在顶部菜单栏中找到<视图>，把需要的部件显示，就可以设置了。

1.组件库的建立（能提高效率，保证产品层面的统一一致）

2.母版的使用（适用于多页面通用的部分，修改后，集体自动更新）

3.设置页面样式（页面的字体、背景能一次性设置好）

4.元件的交互样式

5.元件组合

       把要组合的原件用鼠标框在一起，按住ctrl+G，成为组合后就可方便复制拖动了。许下按住ctrl+shift+G，也可以点击选中后，点击下图的两个图标来组合和取消组合。

6.对齐、居中、平均分布

选中要对其的内容，选择一种分布样式，就能快速得到整齐的原型样式，而不用一个个手动调整。

7.输入框类型的设置（预设好类型）

一些输入框，可能需要设置默认文字，可以直接选中了输入框后，在原件属性里设置提示文字和一些限制。

8.元件的提示语

        有些文字需要有鼠标悬浮显示提示语的动作，可以直接在原件的属性里设置“原件提示”，输入要显示的内容，即可。

三、制作原型的过程

1.梳理功能点-------------------将需求转化为功能清单，标出重要等级（前提是需求已经梳理清楚）

2.规划产品结构----------------用Xmind或者笔和纸等工具画出产品有几个页面，每个页面包含哪些元素

3.整理原型目录----------------用Axure添加原型的几个页面，考虑页面之间的跳转关系

4.设计页面的布局（打格子）-----用不同的色块，方框来表示这部分将要表示什么板块，设计好页面的布局

5.填充各模块的细节----------在方框里把具体的信息和数据填充完整

6.增加少量的交互动作--------------体现在一些涉及到任务的操作

7.页面注释-------------完善交互说明

8.审查自检------------------功能是否覆盖完全；页面有没有缺失；流程是否明确；状态是否完备

四、原型应用中的经验

      因为我多是负责后台系统的优化，所以是直接和开发打交道，如果涉及前台页面，就需要UI先将原型做成图片，再由前端制作含有动效的demo，开发再按照demo开发。但是不论哪种，绘制出来的原型一定需要让队友都明白你的逻辑和要表达的重点。

      第一次负责项目的时候，我用的是高保真，画完整的原型就花了一星期多，各种动作和交互，恨不得做个虚拟的产品。但是和开发讲了原型后，等来验收项目的时候，才发现，开发大部分都没有按照原型上的动作来，甚至连细节都有遗漏。一个个催着补上后，我开始思考这种方式是不是不太划算，太费事费力，结果又不太好。

       后来我看了我上级绘制的原型，都是以静态页面为主，可以说是低保真，但是每一种情况都详细地用图文描述清楚，点击之后是什么样子，将要获取什么数据，失败了会怎么样都有。而且这种方式，完成的特别快。于是我就选取低保真模式的开始画原型，结果发现，开发有时候并不能将一些动作做好。

       于是我开始“T式原型 ”。“T式原型 ”就是大部分是以低保真铺展开，将整个产品的逻辑都直接呈现出来，再在某些需要重点描述的地方用高保真描述深入。所以，我的原型大部分是以 低保真+注释说明和高保真+动作演示 的组合。 不过对于交互简单的产品来说，低保真模型足够了 。

       每个产品绘制原型的习惯和风格都有所不同，但关键还是需要进行小组会议来向队友们讲解原型和逻辑，在开发的过程中，需要多沟通。

       另外，分享大家关于AXURE学习的网站，可以在里面找到免费的软件安装包和教学课程。

https://www.axure.com.cn/

如果对文章感兴趣，欢迎评论留言，坚持喜欢的事情，加油~