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

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

注意事项：

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

交互说明，简单来说就是：原型图边上的注释，对原型图的解释说明。

一、蓝色区域——操作说明

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

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

• 数据怎么来的?是后台上传，用户行为还是前台写死的数据? 比如积分商城里物品的价格就属于后台上传。
• 数据的显示有什么限制?比如字符长度、显示尺寸、行数等限制。
• 数据是否存在为空的情况?如果是，为空怎么显示?比如头像，如果用户没有上传头像，该怎么显示?

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

• 异常操作：连续多次相同的操作给予的反馈，比如相同时间段内多次点击发送短信验证码，应用会提示隔几分钟之后再来尝试发送。
• 数据相关：服务器无法获取数据，数据加载时间较长等。
• 页面提示：尤其是对To c端的产品，经常会有运营活动，有关某活动即将上线、活动失效、服务下线、系统繁忙等提示就必不可少了。

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

• 进入时就能看见的状态（以原型的方式进行表述，不用附带文字说明）
• 操作后状态（此部分需要进行描述）

模块分类

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

• 避免模块小而杂：比如用户昵称、用户头像、个人签名等都可以叫做用户信息模块，当标记模块时，可以作为一个整体，不用单独分开成很多模块，这样可以增强易读性。
• 标记模块时，要注意和原模块大小相似，不能放大或者缩小，可以直接复制粘贴。
• 进行模块分解要按照顺序，比如从大至小，先个人信息，再头像信息；或者从左至右，先王国，再首页，再消息。

使用场景：

使用场景是为了更好的说明用户进入这个页面干什么，是指用户在此页面能够进行哪些操作，比如积分商城页面，用户可以添加商品到购物车，查看商品信息、查看商品分类等。

全局说明：

全局说明是对整个页面的信息状态或对于整个页面的概括

举例：

• 数字规则，全部用阿拉伯数字显示
• 页面说明：是XX页面，比如是领养页面
• 用户说明：针对XX用户，比如领养页面就是针对想要免费领养宠物的用户

建议：

• 若交互原型有了调整（包括交互说明），一定要与团队成员告知！！并提示修改位置（在哪个页面）。就算改了一处小东西，也尽量和同步一下，不然后续对接出现很多问题。
• 交互说明不是一次能写完的，实在对该产品不断的使用和团队的讨论中一点点增加、修改、迭代更新。考虑的不周全、写的不全面是很正常的，所以我们必须多听听多方视角的声音，并尊重、虚心接受他人的意见，不断修改完善。

本文由 @仙女骑驴 原创发布于人人都是产品经理，未经许可，禁止转载。

题图来自 Unsplash，基于CC0协议