唐僧每次介绍自己：贫僧唐三藏，从东土大唐而来，去往西天拜佛取经。这几句话包涵了每个人都要问自己的三个问题：我是谁？我从哪里来？我要到哪里去？

清楚自己是谁，从哪里来，到哪里去，清晰规划自己的人生道路，不管路上有多少艰难和诱惑，都动摇不了决心，于是他成功实现了目标！一个产品是一样的，大的产品整体规划设计，小到一个功能点的设计，都要清晰的知道，产品或功能的入口在哪里，进来做什么，怎么出去。所以产品原型设计的本质其实是要弄清楚，我是谁，从哪里来，到哪里去，完成一个闭环的操作。

原型设计的步骤

了解需求，确认表达方式。了解你做的产品是给谁做的，谁来开发，然后选择合适的表达方式与工具。如果仅仅是一段文字或一个按钮或图片位置的调整，可以用文本阐述即可，如果是为了验证想法，可用手绘原型，如果是给用户或对外提供服务的产品，至少需要灰度模型、高保真交互模型，至于工具AXURE、Mockplus，墨刀，根据需要选择即可。

梳理页面、页面元素及页面流程。通过思维导图梳理该产品或者功能，页面及页面内的元素，大致归纳出有几个页面，页面内有几个区域，区域内有什么元素，采用什么布局方式等；

绘制原型初稿，按照页面结构、信息结构、业务流程开始绘制原型，确定每个页面的布局和元素的位置，快速的绘制原型初稿。这个阶段主要是把产品的流程走通。

深度校验原型实现并添加标注，在原型初稿的基础上，开始深度的思考功能的必要性和优先级，尽可能把冗余的元素删除或精简，尽可能突出每个页面的重要元素，使用不同的大小的字体，区域的灰度来标识。一边修改，一边添加交互细节，可以把细节用文字的形式标注在原型周围。使用统一的原型标注表格，重点标识出异常边界和文案提示，区分全局说明和局部说明，尽可能将标注写的精简、明确、全面。

原型设计作用

原型设计能让我们更加深入理解和思考产品实现，并减少问题的出现。如每个页面上元素和这些元素的属性。举个例子如手机验证，当用户输入手机号是要不要验证手机号是否正确，是否全部为纯数字，是否为11位等，如果全部验证OK，应该如何调用验证码服务，如何给用户下发验证，是语音还是短信等，下发完成后，如何验证，验证成功如何通知前端，验证失败应该给用户什么提示，验证信息如何存储等；

将抽象的结构、流程、逻辑，具象化，原型设计是将抽象的产品结构，产品流程和逻辑等内容转化为具体形象、交互页面、输出说明的过程，如果可以在产品原型上增加具体的页面、逻辑、元素等的说明，可以省去PRD的撰写；

辅助产品经理与领导、交互、UI、运营和技术的沟通产品需求与功能设计；

便于修正与维护，便于后续查看；

原型设计是对产品结构图和产品流程图的一个更形象表达，同时又能为后面PRD的撰写与沟通提供基础支持，所以在整个产品流程中处于最重要的位置，有着承上启下的作用；

原型设计时要尽量围绕以下3条原则进行：

原型结构简单清晰，自然易懂，如微信的设计，虽然微信功能很强大，但功能设计上很简单，今日头条的自然而然的阅读新闻的方式；

用户常用的功能或喜欢的内容优先展示，如微信的对话页，陌陌附近的人/动态；

重要信息突出展示，如文章标题、商品价格等都要重点突出展示；

原型图基本可以分为三类：手绘原型、灰模原型、交互原型

 手绘绘制原型：最简单直接的方法，最快速的表现产品轮廓的方法。通过纸和笔，快速手绘原型，在初期验证想法时非常高效，也方便讨论和重构，同时也适合敏捷开发时快速出原型，但还是建议用工具出图留底。同样在自己的办公桌上准备纸笔，随时沟通与画图，如产品流程、产品原型、逻辑沟通等，推荐一个手机的白板工具，特别实用；

灰模原型也叫平面模型或线框图，或者中保真原型图，是对产品的一个一个页面的具体表达，不带颜色，不带交互，只有灰色的线条、形状与文字，相对手绘原型，灰模更加清晰和整洁；相比交互原型，灰模原型只是缺少交互效果，仅仅是将产品需求以线框结构的方式展示出来，让产品的需求更加直观。

交互原型是通过原型设计软件完成的原型，带有页面的跳转、弹层等交互效果，在功能需求和交互需求的表现上，几乎和正式产品是一致的，所以有时交互原型也被称为产品Demo版。产品经理通过交互原型来推演真实的用户使用场景，从而更好的把握产品与用户；

PC端原型交互多，后台产品原型更多一些、APP端原型交互少，更多的是页面之前的跳转，直接用用箭头连接各个页面进行说明即可；

PC端原型示例

后台产品原型示例

APP端原型示例

绘制原型设计主要工具是用Axure，同时目前也有比较好用移动端原型设计软件如：Mockplus、墨刀等，当然手绘草图就用纸笔就够了，快捷方便；

原型设计是为了帮助我们更细致的考虑方案的实现，并论证方案的可行性，同时也是为了产品宣讲时让听众能够清晰直观的了解产品，避免抽象的语言描述导致听众理解困难和理解偏差。同时也是为了确保产品在执行过程中，是按产品经理最初设想的需求和期望完成的，因此产品经理在制作原型时，可根据具体场景，具体使用哪一种原型设计，只要对方能够听懂看懂接受就可以了，效率最高即可。

原型标注说明

原型标注是为了更好的理解产品原型，从而指导UI设计、开发与测试。将传统Word形式的功能需求说明标注在原型图上，将需求逻辑标注说明，是非常高效的产品需求说明方式，这样更便于去理解需求与表达需求。

原型的呈现形式主要为两种：

原型+PRD：更适合大团队或者一个从0到1的项目，能将整个产品记录并呈现出来；

原型+标注：更适合中小型团队或者项目；

标注的目的主要是为了说明功能点的前置条件与后置条件，清晰的描述功能是从哪里来，怎么用，做什么，到哪里去；

标注示例：

技术是参考原型去开发的，标注是为了让技术更好的理解产品，所以标注清晰能大大减少团队间的沟通成本，提高工作的效率

互联网产品常见页面与功能分析

互联网产品常见页面与功能分析包含了首页、菜单、列表页、详情页、个人资料页、功能页、辅助与提示。

首页

用户进入首页时需要告诉用户我是谁；

首页展示你产品重要的功能与内容；

首页操作应尽量减少，用户越喜欢使用；

合理布局，引导用户向下（右）浏览；

C端用户多为推荐信息，B端用户多为数据可视化；

导航，即入口，帮助用户快速进入某个页面的功能，包含导航、目录、列表等能引导用户进入详情页的功能；（详细说明见第11章导航类产品设计）

列表页

图文列表还是文字列表，注意列表间的分割，利用“紧密、对比、重复、对齐”的原则设计，让列表看起来简单清晰，自然易懂。

加载方式，分页加载还是瀑布流加载；

排序方式，排序的规则一般会按照时间排序，还有热度、推荐、字母等；

详情页：主要是帮助用户浏览详细信息，查询关注的信息。内容主要为图文、视频、声音、商品等；

个人资料页：个性化的信息展示页面，展现每个用户的独特性与重要性；

功能页

为了让用户快速完成任务的页面或操作功能，大多数属于过渡页面，如注册/登录、发布功能、搜索、支付等

搜索，用于搜索内容，帮助用户精准的找到自己所需的信息或功能。一般位于顶部；

提示功能

为帮助用户减少认知负荷而设计的页面或提示语，如引导页/启动页、过渡页、加载提示、浮层提示、弹窗提示，toast提示等

其他：

状态栏：用来呈现信号、时间、电量等信息，Android系统还会显示未读信息的提示。位于整个APP界面的顶部。

控件是用户可与之交互以输入或操作数据的对象，例如：时间控件  分页控件；

界面元素（interface element）是指可满足交互需求的软件或系统界面所包含的满足用户交互要求的一系列元素。

在数据库中，大多数时，表的“列”称为“字段”

页面视图用于显示文档所有内容在整个页面的分布状况和整个文档在每一页上的位置，并可对其进行编辑操作，具有真正的“所见即所得”的显示效果。

产品的世界变化万千，还有很多未知需要我们深度探索。只有不断去体验不同的产品，才能培养和积累自己的设计感知，从而设计出优秀的产品；