原型图的画图要求

Posted 2022-05-18 Ariel_欢

一、原型图作用

当我们开发项目的时候，画好原型图可以帮助我们提前看到产品的界面样式，以及提前模拟出功能按钮之间的转换关系。类似于建筑中的模型。

二、为什么要画原型图？

将需求可视化。能够让我们的需求落地、通过图形化的界面展现出来更具真实性

三、谁来画原型图？

产品

四、原型图的规范有哪些？

1、画原型图的时候不要截图：

原因：①从开发阶段来说：在开发过程中应该是先进行原型图的绘制，与需求方进行交流，是否符合需求再进行开发，而不是开发完再以开发之后的产品页面以截图的方式作为原型图，这本身就是不合理的。
②原型图是根据需求方的需求进行绘制，需求设计好之后采取开发，每个按钮都是代码的颗粒。如果是截图的话，若要修改一个按钮的位置或者要对页面增加或者删除控件按钮，则无法修改，只能替换整张图片，这样会导致但凡需求有所变化，就得重新截图，不可变化，不符合开闭原则。

2、考虑可复用性，封装组件：
如果是很多页面共用一个颗粒/按钮，应该是很多页面引进这同一个按钮，而不是每个页面一个新的。要有可封装复用的思想，多个页面的相同组件都应该共用一个，这也是前端MVC的M：数据的变化

3、以事件为驱动：

如果多个界面都涉及到了公共的界面，我们把公共的内容直接引用过来，原型图也是这样，也要保持界面的一致。原型图也是对代码的一种体现，以事件为驱动

4、动态原型图。界面元素之间的动态效果应该通过事件触发展现出来：

比如想在页面1点击按钮跳转到页面2，仅仅是静态原型图并不能看到我们要实现的功能最后的效果。我们要把按钮触发的事件以及其结果也动态的展示出来，可以在按钮→事件→选择事件类型（单击）→要跳转的页面等等操作.