原型设计是什么，该怎么使用它

首先，标注原型中需要添加注释的点，通常 输入框、按钮、跳转链接、及其他需要特殊说明的元素 需要添加注释说明。如下图所示，选择“提交”按钮作为注释点，用 红色水滴形状图标 进行标注。

注释内容要尽可能详细、条理清晰，使技术、UI人员等更高效使用原型。通常注释内容包括 元素规范 （如：某弹窗出现的位置） 、规则 （如：输入框输入内容的格式验证） 及可能的状态 （如：点击提交按钮，可能出现哪几种情况）等。如下图为找回密码页面“提交”按钮的注释。

（1）页面跳转说明

如果原型为静态原型页面，则在写注释时要注明如“点击某个按钮/链接，跳转至某页面”的说明。 如果原型带有页面间跳转动作，个人感觉可以不为页面跳转添加注释 ，除非有特殊情况。 说明： Axure查看原型时，点击工具栏右上角“圆形小箭头”标志， 可以看到页面中可点击元素会处于高亮状态 ，很方便，因此查看原型的人通过点击即可直观看到页面间是如何跳转的。

（2）页面交互说明

如果原型有特殊页面交互，也需要注释说明。如： 长按可以复制文字、左滑翻页 等等。

最后，若担心页面注释密密麻麻影响原型展示，可将所有注释分为一个组，并添加“隐藏注释”按钮，为按钮添加相关动作，实现点击按钮即隐藏注释组的效果。

小结： 原型注释的核心在于说明产品的功能与逻辑，使原型使用人员能够更快、更完整地理解产品信息，从而降低沟通成本，提高产品开发效率。

最后半天心不在焉拖拖拽拽把各个部分都搭建好了，可是做出来的页面惨不忍睹，自己都没勇气打开。晚上回家后和邻居又讨论了三个小时，最后熬夜把原型图完成。虽然最后原型图也没有被采纳，但是这次原型图居然受到了表扬，领导说我的原型图有了提升。今天就写下这篇文章，为这段时间的工作做一个总结。原型设计前：①�0�2�0�2 重点突出内容：要清楚明了页面需要突出的内容是什么，这个在前期的讨论中一般就已经确定；②�0�2�0�2 第一功能目的：除了内容以外，功能方面需要突出的是什么？如引导注册或像下一级页面引导流量。③�0�2�0�2 如果是改版要考虑改版要解决的问题是什么？对于前一版页面存在什么问题 画原型图要考虑：④�0�2�0�2 内容板块如何划分，页面的内容主要分成几个模块，每个模块内存放的都应该是一些相近的内容；⑤�0�2�0�2 模块与模块之间的关联性：每个模块与其相近的模块之间应该有一些逻辑上的关联性，而不能随意的进行拼接；⑥�0�2�0�2 页面的流程：模块与模块的上下承接关系，模块与模块应该上下存在某些逻辑上的连接性。 页面完成后：完成原型图后一定要进行检查，主要从以下三个方面进行检查：⑦�0�2�0�2 内容是否完整：对比框架中的每一部分内容检查是否完整；⑧�0�2�0�2 第一屏是否把最重要的内容展现出来：页面第一屏以外的内容基本都是辅助内容，如果不能在第一屏就把内容全部展现，基本上就等于内容不完整；⑨�0�2�0�2 功能是否实现：想要表达的功能是否在明显的地方表现出来；⑩�0�2�0�2 流程是否顺畅：把相应的流程走一遍，看是否流畅。 注意tips：①�0�2�0�2 未完成的作品拿出来讨论页面不完整不代表思想不完整，即使是不完整的页面，里面应该也要有一个清晰的逻辑图。通过这种方法可以强迫自己想明白再下手。②�0�2�0�2 理清自己的思路要有属于自己的清晰思路，对内容、功能和流程自己要先想明白，可以列举一些具体的问题来辅助理清自己的思路。③�0�2�0�2 坚持自己的想法每一个人都有自己的想法，只要你理清自己的思路，就一定要坚持下去。用自己的逻辑解答别人的疑惑和质疑，形成自己的思路。 关于工具和作图：之前花了很多时间去研究axure，是学会了一些作图的技巧，可是渐渐发现这些对页面的提高基本不大，我是觉得在掌握基本的工具使用时可以暂时忽略工具。页面最重要的是你的想法，等到想法成熟之后不妨慢慢的考虑工具的深入，太多的考虑技巧方面的问题反而会模糊视线。思考的过程和画图的时间可以在7:3都无所谓，前期的框架和流程思路想好后，后面的原型图也就水到渠成了。

界面原型就是在需求分析阶段,完成用 例过程中,或者完成用例后进行设计, 协助需求分析。

界面原型设计工具

GUI Design Studio

* 最新版本：4.5

界面模型设计中很实用的一个工具GUI Design Studio，可以让界面示意图实现基本的交互，便于演示、交流。推荐需求、软件界面设计开发等界面原型相关人员使用。

GUI Design Studio提供的了大部分C/S、B/S组件的示意图，可组合使用，在一般软件界面模型设计阶段基本可以满足需要。

Axure RP

* 最新版本：6.5

无疑是目前最受欢迎的快速原型设计软件，它是一套专门为了网站或者应用程序策划所设计的辅助工具，可以让应用网站策划人员或网站界面设计师，更快速且更简易的建立Web AP和Website的示意图、流程图、原型和规格。

Axure借鉴了office的界面，能够让用户快速上手，并且提供了丰富的组件样式修改，使得通过其能够创建低保真、高保真甚至接近于实际效果的界面。

然而最让人称道的是，Axure的丰富的脚本模式，可以通过点击和选择能够快速完成界面元素的交互，如链接、state切换、动态变化等效果，使得

Axure能够生成十分接近于真实产品的原型。另一方面，Axure能够导入其他人创建的元件库，使得Axure能够满足绝大多数类型产品的设计。

学习ui设计，原型架构图的设计最主要的还是要理清楚客户的需求，如果客户需求分析不到位，是无法动工画原型架构图的

画原型图不是什么困难的事情，理解客户需求，分析客户的需求才是要点呢

产品经理当然要会画原型啦~

聊聊怎么画原型吧！

在画原型之前，更重要的事情，就是画 页面流程图 和 信息架构图 ！假如你没有这些东西，就开始画原型，那么等着你的就是没完没了的改改改。

页面流程图是以用户视角，看流程合理性。通常适合于跳转比较复杂的产品功能，如电商、社交产品。

为什么要画页面流程：

（1）是交互设计/原型设计的基本依据，是逻辑基础。如果你都没想好页面流转的顺序，那么你画的原型一定不是可以确定下来的版本

（2）代表了用户的操作过程，先画页面流程图能迅速发现体验问题。有了页面流程图，你可以设身处地想象用户在使用产品时的操作流程，发现其中可能出现的问题

（3）突出页面重点元素与逻辑关系，提升原型的设计效率。很多页面不是全新页面，而是在原有页面做一些修改，如果你知道页面流转顺序，那么会给你画原型减轻很多工作量

页面流程图包含：

（1）四方形：业务流程中的四方形部分，异常流程或弹层通常用菱形表示

（2）流向：主干流向和辅助流向

（3）重点元素：每个流程中，重点要体现和表达的内容是什么

画页面流程图的工具：

（1）Axure：画了页面流程图可以紧接着画原型

（2）ppt：方便讲解

需要注意的地方：

（1）回归业务流程，明确主线：页面流程一定来自于业务流程，一般为业务流程中的方形部分。异常流程一般为弹层或弹窗提示。业务流程画的好，页面流程就简单。

（2）明确页面中的重点元素：功能在页面中，有哪些是需要表现元素。增加异常流程的处理逻辑。增加辅助的帮助页面。考虑下游触发点（按钮/链接/滑动...)。

（3）沟通与优化：首先要尽可能穷举涉及的页面，然后做减法，有些页面合并或删除。通过原型草图，优化调整页面关键元素。与UI、UE、前端研发多沟通会有更好的效果。

页面流程图一般规则：

页面流程图例：

一个具体案例：

业务流程：

页面流程：

主要是分离出了普通用户的操作流程，加异常处理。

对于普通用户的关键页面和关键流向：

页面流程图：

（1）分离出5个页面，确定流程流向

（2）固定元素，例如在“1购物车”中，“提交订单”就是下游触发点，点击后流向下一个页面；在“2输入优惠码”中有关键元素“填写优惠码”，另外还有下游触发点“确认订单”...

（3）针对每个页面去画对应的原型图

信息架构图，以产品视角，看包含多少功能点。适合于层级分明的，如音乐产品、新闻客户端、阅读类产品等。

信息架构图例1：

有了页面流程图或信息架构图，现在终于可以开始画原型啦。首先，什么是产品原型设计？

产品原型 ，俗称 线框图 ，大概就是草图的意思吧。它是产品落地的关键点，是从虚拟概念到用户接触的节点。同时也是产品经理产出的关键内容，上传下达，上给老板，下给UI、UE同事。

产品从原型到上线的流程：

大公司的产品经理只需要做手绘和低保真的部分，小公司可能还要兼职交互设计...

案例：

好的原型有什么特点：

（1）整体：页面结构清晰、跳转关系明确、与业务流程一致、完整表达用户需求

（2）独立页面：功能元素明确有序、位置关系清晰、不同状态变化清晰

（3）交互设计：清晰的交互逻辑、一致交互方式、界面统一

常用工具：

（1）纸笔：自己画画，快速学习和定位

（2）白板：多人讨论

（3）软件Axure/Sketch/墨刀：产出正式文档

案例：

（1）研究流程：业务流程->页面流程

（2）确定页面框架：大概确定页面布局和大的框架

（3）画原型：画模块，确定交互细节

注意事项：

（1）尽可能用真实比例、真实文案，使元素更真实，也避免在需求评审时被之一。尽可能真实模拟极端情况，并示例清楚。

（2）紧扣需求主体，不横生枝节。如果原型需要增加新功能，一定要是来源于需求，并且要考虑后端数据来源。

（3）不要上颜色！原型就用黑白灰，不要给UI、UE挖坑

（4）目录树清晰，阅读流畅

（5）保存修改记录，关键修改重新保存文件

画/改原型的时间尽量控制在20%工作时间之内，否则就要问问自己是不是哪里出问题了哦。

产品需求想明白了没？？？

产品流程理清楚了没？？？

手绘草图画了没？？？

手绘草图和Boss确认了没？？？

1.原型设计工具

根据设计者的专业程度，可以将原型设计工具分为两大类，一是专业原型设计工具，二是非专业原型设计工具。专业的原型设计工具常用的就是墨刀和Axure，墨刀是一款在线原型设计工具，其优点是云办公模式，支持协同设计，即时保存，不用担心因电脑断电或故障而导致设计内容丢失，其缺点是组件丰富程度不高。

Axure是电脑端的原型设计工具，其优点是组件丰富，功能比较强大，使用用户群体较大，其缺点是设计内容要及时保存，否则会因电脑断电或故障而导致设计内容丢失，给用户带来一定的困扰。非专业的原型设计工具有PPT和纸，PPT也是一个简单的制图软件，能让用户实现简单的原型设计，其优点是简单易学，缺点是页面交互功能不强；纸是大部分用户都可以用的原型设计工具，其优点是简单方便，专业和非专业的人士都可以通过纸将原型想法表示出来，缺点是保存和后期使用不方便。

2.原型设计的内容

原型设计主要包括三个方面的内容：一是页面设计，二是交互设计，三是备注设计。页面设计是原型设计的主要内容，包括对产品所有页面的原型设计；交互设计是指页面与页面之间的链接和跳转；备注设计是指对页面设计，交互设计，程序功能，跳转结果，出错提示等的设计。

原型设计是产品需求设计与UI设计之间的桥梁，是产品开发的一项重要基础工作，直接决定了产品界面的布局，影响产品的使用效果。