产品展示设计作业-产品设计流程系列：如何进行原型设计（第 1 部分）

经过漫长的产品设计过程，我们终于来到了最后一个环节，就是根据之前整理的产品流程来设计产品界面。

产品经理其实都知道，在这样一个看重颜值的时代，拥有一个让人赏心悦目的网站（或者手机APP）是多么重要。 每一位产品经理也都希望自己打造的产品是独一无二的，能够在互联网产品的汪洋大海中大放异彩，就像每个人都想成为人群中独一无二的那样。 嗯，可以这么说，其实在每一个产品经理的内心深处，都有一颗文艺青年的心，也正是拥有如此丰富细腻的产品的心，才使得我们能够对产品设计有很好的理解。 细节有了更透彻、更深入的了解。

在大公司中，一般来说，产品经理不需要进行具体的界面交互设计。 大多数产品团队和UED团队一起设计产品原型。 可交付成果是产品原型和页面交互图。 产品经理接下来就需要制作一份产品需求文档（PRD文档）。 但在绝大多数初创公司团队中，并没有如此豪华的产品设计和交互设计团队。 常见的组合往往是产品经理加UI设计师，因此产品经理通常就是交互设计师本人。 岗位职责，输出交互设计稿，即产品原型。

什么是产品原型

简单来说，产品原型是设计方案的表达，是产品经理和交互设计师的重要产出之一，也是项目组其他成员（尤其是设计师和开发人员）的重要参考和依据。

结合我们前面所学的知识，产品界面原型其实就是页面级的信息架构、文案设计以及页面之间的交互过程。 该图为产品功能及内容示意图。

直接上传几个原型可能会更清楚，如下图：

原型设计稿

产品设计原型按照细化程度可分为低保真产品原型、高保真产品原型和成品设计。

低保真度原型

所谓低保真原型实际上是对产品的比较简单的模拟。 它简单地表达了产品的外部特征和基本功能结构。 在许多情况下，可以使用简单的设计工具快速生成以代表初始设计。 概念和想法。

例如，用纸笔手绘、用绘图软件制作的简单线框图等，都属于低保真产品原型。

这样的原型图有几个优点：

当然，低保真原型也存在交互细节不清晰、容易引起误解等问题。 一般来说，我们只有在时间紧张、要求比较简单的情况下才会制作低保真产品原型。

高保真产品原型

高保真产品原型是一种高功能性、高交互性的原型设计产品展示设计作业，是忠实展示产品功能、界面元素、功能流程的手段。 无论是功能模块的大小、文案设计甚至原型图中使用的图标、图例、交互动作，都使用真实的材质，或者非常接近最终UI设计师的输出，即使是高保真产品原型。

高保真度的好处：

相对而言，缺点是生产周期比较长，当涉及到产品工艺的修改时，基础原型还得重新构建。

对于刚入门的产品经理来说，我总是建议，如果有时间的话，尽量多画高保真原型。 因为一开始，在我没有太多产品设计经验的时候，设计一些高保真原型对于梳理我的产品思维、理解产品设计很有帮助。 对于入门时间较长的同学来说，则要看要求的复杂程度和时间安排。 例如，产品的关键页面必须用高保真原型进行设计和整理。

设计成品

这里你可以把设计成品理解为视觉设计师制作的UI设计稿，即设计师对你的产品原型进行美化后得到的作品。 设计师会利用一定的设计规范，将你的原型变成可以通过开发实现的作品。

当设计完成的那一刻，产品经理需要做的就是和设计师竞争，这里不再过多描述。

放一张图来对比一下下面三个原型的区别：

三个原型的比较

原型设计工具

以下是产品经理常用的一些原型工具：

Axure RP，推荐指数✦✦✦✦✦

axure官方网站

Axure RP是一款专业的快速原型制作工具。 Axure（发音：Ack-sure），代表美国Axure公司； RP是Rapid Prototyping（快速原型制作）的缩写。

Axure是产品经理必备的工具。 其他我就不多说了。 去招聘网站看看PM的招聘信息。 基本上所有的职位描述都包含“熟练使用Axure”这句话，你懂的。

墨刀，推荐指数✦✦✦✦

墨刀

Ink Knife 也是一款原型制作软件。 虽然功能可能不是那么齐全，但是对于一般用途来说已经足够了。 目前分为网页版和客户端。 网页版可以直接使用。 客户端其实就是网页版的一个功能。 一般来说，会下载客户端，使用时需要连接互联网。

Ink Knife 为您带来多项优势：

当然，缺点也很明显：

Visio 2013，推荐索引✦✦✦

维西奥官方网站

很多老式的产品规划师和产品经理都用它来设计产品原型。 可以算是线框专业，比较灵活，对Office使用习惯接受度较高。 另一个好处是支持各种平台尺寸设计。 一些产品设计团队已经从原来的Axure调整为Visio，因为Visio可以更轻松地输出标准尺寸的PDF文档，以供同事之间交流。

在学习之初，很多刚入门的产品经理都热衷于寻找在线课程来学习Axure等工具教程。 。 然而，这不是重点。 工具只是用来承载我们思想和内容的载体，所以没必要花太多时间去掌握工具技能。 产品设计的内容才是真正需要考虑和深思熟虑的。

设计原型时要记住的事情

通过上面的介绍，我们实际上了解到，一个好的产品原型可以让别人快速理解我们要做的事情，减少团队沟通成本，保证接下来要推广的东西不会产生误解。

产品经理画出原型后，往往会非常高兴，恨不得立即让所有团队成员看到他的设计成果。 但此时的原型图通常是不完整的，很多场景和因素都缺乏考虑，从按钮的位置、字段显示表情包设计，到功能流程设计和逻辑设计。 如果你轻易把这么不完整的原型交给技术，不仅技术会批评你，用户也可能会批评你，甚至老板也会批评你。 所以，打磨产品原型非常重要，设计原型时尽可能考虑各种场景和因素，详细分析，让大家从原型上看到你的态度。

一般来说，原型设计需要明确表达以下几个地方：

1. 界面元素

什么是界面元素，比如文字、下拉框、按钮、图标、图片等，都属于界面元素。 当我们使用原型工具（如axure、墨刀、visio等）设计产品原型时，我们需要明确界面上的元素是什么，如何展示，鼠标移动或点击的效果是什么。

2.数据逻辑

这一点往往被很多创业团队和新手产品经理所忽视。 例如，一个直播列表界面，上面有三个标签，分别是关注直播、热门直播、最新直播。 那么你需要在你的原型设计中解释一下，最新的直播是根据什么数据逻辑来获取的。 当然，最新直播的数据获取逻辑比较简单。 也许你不给研发人员解释清楚，他们也能知道是按照时间倒序排列的； 但如果遇到稍微复杂的数据逻辑，比如刚才提到的关注，就需要明确直播的数据获取是有关机构的直播还是个人的直播。

3. 操作逻辑

原型界面上可以操作哪些元素，哪些可以点击，哪些可以选择，操作后会出现什么样的反馈，比如弹出浮层？ 转到新页面？ 或者跳出新页面？ 或者给个提示？ 这些也需要在原型设计中明确说明。

这三点是一个完整的原型设计基本上需要包含的内容。 结合之前画的产品结构脑图和流程图吉祥物设计，基本可以轻松愉快的跟开发沟通了。 只有这样，开发人员才能明确这个原型设计的开发需求，而不是让开发工程师猜测数据逻辑和算法应该是什么样子。

如下图所示，可以对原型设计进行相关注释：

原型设计说明

谈谈产品需求文档（PRD文档）

很多公司要求产品经理写产品需求文档。 我们来看看完整的产品需求文档包含哪些部分：

产品需求文档内容

一般来说，产品经理往往不会写得这么详细，能涵盖前四部分就算是一份基本合格的产品需求文档了。

我们来看看文档中包含了哪些内容：

一、概述

概述部分是简要说明产品背景、产品目标等。

2.产品说明

产品描述介绍了产品的整体逻辑流程产品展示设计作业，简要描述了产品需求、产品版本规划、产品整体框架结构以及功能列表。无论是产品的整体流程还是产品框架都需要显示在相应的图表中

三、功能说明

这部分功能需求需要详细描述产品所涉及的各个功能点。 将整体框架拆分为若干个独立的功能点，并分别描述每个功能点的逻辑流程图、界面、领域描述和业务描述。 使用Use Case方法统一描述。

4.非功能性需求

非功能性需求，即关于产品其他方面的需求。

好吧，我们已经了解了常规产品需求文档的样子。 曾经和一个朋友聊天，谈到他们公司的产品需求文档，是一份200页的word形式的产品需求文档。 事实上，这样的文档看起来相当费力，而且更新和同步也不容易；

开发人员和产品经理之间的很多冲突，其实就是因为这份又臭又长的产品需求文档。 因为无论是谁，都不喜欢读这么长的文字。 事实上，开发者根本不需要这种文本式的需求说明。 他们喜欢“看图”。 这份文本式的需求文档，应该是产品经理心里有数的。 想法，而不是直接将想法描述成文字并交给他们。 其实我个人不太喜欢这种风格。 沟通成本太高，所以对于初创公司来说，最好尽可能简单、直接、有效。 做好以上几点对于大多数产品沟通场景来说应该足够了。

因此，可以通过输出产品结构脑图、产品流程图、界面原型来替代产品需求文档。