原型|产品经理必修课——如何做好原型设计

编辑导读：原型设计是产品经理的一门必修课，是需要稳打稳扎的基础工作。那么，如何才能做好原型设计？本文将从三个方面展开分析，与你分享。

文章插图
原型界面：原型界面是APP不同界面展示出来的图文效果，重点是功能和逻辑结构的梳理与呈现。
注意事项：

尺寸：考虑到小组的组员分别绘制原型图，以及由于疫情在家办公，沟通交流受到限制。应该事先考虑原型图的尺寸，达成统一。包括常用组件尺寸、机模的位置。
字体：页面中重点凸显的内容，如字体元素颜色加重，按钮或某个模块采用深色块填充。这样做的目的是视觉设计师可以很快明确页面元素的重要性层级，而不必一定要仔细阅读页面交互说明。
颜色：原型图模块背景或元素一般采用黑白灰色值，目的是避免给视觉设计师造成用色干扰。
字体：原型图中使用相同的字体，保持所有页面字体呈现一致性。字号要依据具体页面中元素重要性的不同而定，一般来说为便于清楚查看，字号最小12px。
迭代：迭代页面如果少且在现有基础上进行优化，可以放在原页面的下方，并且说明是迭代页面；如果迭代是增加功能或者迭代页面较多，可以新开页面，将所有的迭代页面放在文件夹内，标注是迭代二期或者三期

交互说明，简单来说就是：原型图边上的注释，对原型图的解释说明。
一、蓝色区域——操作说明

用户能做什么操作?比如输入、点击、滑动等。比如点击输入框提示文字消失、点击某按钮该按钮出现颜色变化。
操作后有什么反馈?比如跳转新页面、出现弹框、面板切换、动画效果等。比如点击“登录”出现弹窗：账号错误，请重新输入。
不同状态下的操作有什么限制?比如登陆和非登陆的状态、会员和非会员的状态、可用和不可用的状态、互斥状态、不同网络条件等。比如淘宝未登录时仅可浏览商品界面，但当用户进行某些个人行为操作时，如购买，收藏和关注等，此时会引导用户去注册登录账号。
不同状态下的操作反馈有区别吗?具体有什么区别? 比如对同一个按钮，单点与长按的操作反馈会有区别吗？要将区别写的清楚、具体。

二、蓝色区域——数据说明

三、红色区域——错误说明

一个基本点，所有的页面都可以分为两种状态

模块分类
模块是将原型界面进行分解，说明操作后的变化，可以用数字标记，也可以将模块单独拿出来进行说明。