画原型图时需要注意什么？

undefined_腾讯视频

大家好，我是IT修真院郑州分院第8期学员，一枚正直、纯洁、善良，严谨理性与艺术智慧并存的PM。

今天给大家分享一下，PM工作内容一个比较重要的问题：画原型图时需要主意什么？

目录

一.画原型图前

二.画原型图时

三.画原型图后

一.画原型图前

在画原型之前，请先拟好流程和信息结构

     首先，拿到功能先要理解功能，理解用户在用这个功能时会是怎么操作的，用户之间的关系又是怎么样的，也许脑子里有大概的流程，但是更好的办法是把流程画出来，画出流程后，对每个流程中可能涉及到的操作和内容进行整理，将这些内容合理的整理到直观的信息结构中，然后在带入到具体的页面，并且不断思考流程和改进细节。

先有方向才有框架，有了框架才能填入内容，有了内容才能不断进行更细致的调整和修改。

总的来说，框架和内容就相当于流程图和信息结构，具体的流程图和信息结构可以用脑图和Story完成。

story就是我们平时写的用户故事，作为????（角色），我想要???（功能），以便???（解决什么样的问题）。

脑图就是帮助梳理的工具，目前我用的是百度脑图。

百度脑图的主要功能就是帮我们梳理思路和流程。因为画原型图是的流程还有相互之间的关系还是挺多的，即便大脑一些轮廓难免会有些遗漏。而信息结构图能很好的解决这一点：页面结构，页面内容，页面关系和页面状态等。

剩下的就看把流程和内容应用到原型上的功力了。做原型时更多的从用户角度思考，同时平时可以多观察观察其他app，不断积累。不过也别想一次性就把所有细节都考虑到，大体方向确定了，后面的细节可以慢慢补充，慢慢完善。

二.画原型图时

由于画图之前我们已经做了很多工作了，所以画图时相对会顺利些，基本不需要大的涂涂改改，反反复复了。这样就减少了我们画图时所耗费的时间。

接下我们来了解下下画图时具体需要注意哪些问题：

1页面框架要清楚

多初手画原型图，一般是画多少页面就重建多少page，并且每个page都是平行关系。在这种情况下，想通过看原型图的目录来了解产品的页面关系，完全是懵掉的，和你对接的设计和开发也可能分分钟狗带。

2页面不影响设计师的视觉

这点和大家天天嘴里说的“高保真原型图”恰恰相反。

为什么呢？

产品经理需求分析完成后，需要拿着原型图和设计师进行直观沟通，沟通清楚之后，设计师就会开始设计。

那么，原型图对于设计师而言，是一个便于理解需求的工具亦或是忘记需求时的查看工具，从这个角度说，就不该给工具赋予一些其他角色，比如影响设计师的设计感觉。

3页面元素要统一

画原型图的时候，势必会用到很多软件中自带的控件。一开始没有形成自己习惯的时候，可能会有以下情况：

同一个页面内同一种控件代表好多种行为；

同一个页面内同一种控件表示同一个行为，不同页面之间同一种控件表示好多种行为；

4页面排版要整齐

排版这个就不多说了，主要就是整体界面看起来要整齐

5善用软件辅助功能

�主要就是要善于使用软件自带的功能比如：辅助线、母版、组合等，这样可以提高个人的画图效率

6注释

画原型图时要学会写注释，注释是我们跟程序员沟通的很重要的一个环节，很多功能点都要靠注释来完成

三.画原型图后

当然了，并不是我们的原型图设计完之后就大功告成了，也不是原型确定了之后系统的页面就一定原封不动的按照原型去做。所以，在原型图设计完之后，需要对其进行修改和检查。首先要检查你的页面设计是否重点突出，也就是我们在第一点提到的要让人一眼看出你的原型页面突出的内容是什么，如果重点不明确，内容不突出，那么很遗憾的告诉你，你的原型可能有些不成功，这个，需要改！与内容相对应的就是检查你要实现的功能是否在页面中突出显示出来，而且注意要把想要表达的功能放在明显的地方表现出来，如果这点仍然也不符合，只能遗憾的告诉你，这个，需要改！最后呢，最好试着把你设计的原型按照你的思路走一遍，看看是否有哪些不顺畅、别扭的地方。而且要注意的是，这个时候你要学会换位思考，把自己当成一个用户而不是一个设计者，看看在整个流程的过程中是否有用户体验度不好的地方，试着提出一些疑问，并小心求证一下，积极改正。

ptt地址：

https://ptteng.github.io/PM/ppt/PM-03-%E7%94%BB%E5%8E%9F%E5%9E%8B%E5%9B%BE%E9%9C%80%E8%A6%81%E6%B3%A8%E6%84%8F%E4%BB%80%E4%B9%88.html#/