如何制作软件原型、互联网产品原型

软件原型，是指使用原型制作软件，为将要开发的软件系统制作一个外观、内容显示和功能操作一模一样的产品原型，用于和用户、技术人员、公司领导等人员沟通需求、确认需求和演示软件的运行效果等。从技术上看，软件原型除了没有数据交换，页面内容和功能操作，都和真实的软件产品是一样的。

1 软件原型的作用

需求分析完成后，业务流程也清楚了，我们就可以进行软件原型设计和制作。一个好的软件产品，一定离不开原型制作，软件产品原型和建筑师的设计图一样，指导参与开发的各类人员的工作。用户也需要通过软件原型来确认需求是否被正确理解，通过原型能看到未来上线产品的真实样子。软件开发人员通过原型来理解软件需求，知道所要开发的产品有哪些内容、功能和业务逻辑。软件测试人员也要通过原型来理解需求说明，编写测试用例。可见，软件产品原型在软件开发中，是很重要的一环。

软件产品原型分两种：线框图原型和高保真原型。

1.线框图原型

线框图原型就是通过占位符、示意图等快速制作原型。它的优点是制作快速，修改方便。线框图原型使用示意的方式，表达出产品的内容和功能，如图5-1所示。

在需求收集阶段，产品经理为了确认是否正确理解用户的需求，可以快速地制作出线框图原型和用户确认。项目前期，一起开会讨论产品时，为了让大家都能直观地理解自己的产品想法，产品经理也可通过线框图原型来向大家展示自己所要表达的内容。

2. 高保真原型

高保真软件原型，是产品经理按照真实软件的样子来制作的原型，体现各个页面的内容细节、各个功能细节和交互细节。高保真原型和真实软件产品的主要区别就是没有数据交换。高保真原型的制作需要更多的时间，修改也会更耗时间。高保真原型如图5-2所示。

高保真原型的作用如下。

l 可让用户、开发人员和项目相关人员，在软件开发前就能看到软件产品的样子，并能进行各个功能操作。

l 让软件开发人员提前发现产品开发问题，降低开发风险，减少开发成本。

高保真原型让大家对产品的沟通更加真观、易于理解，而不是大家凭空想象的交流，大大提高沟通效率。

2 原型制作工具Axure RP

Axure RP是制作软件原型最常用的工具软件。Axure RP官网：https://www.axure.com/，Axure RP中文网：https://www.axure.com.cn/，可以下载免费试用版，现在常用的版本是Axure RP 9。网上有很多Axure RP教程，如果你是有编程基础的，逻辑思维较强，可以很快学会使用Axure RP，我就是花了一天时间看视频和说明文档学会Axure RP软件的使用。Axure RP软件制作原型的原理是：通过各页面、面板的链接跳转，来实现APP、软件或网站的各种交互效果。明白这个道理后，再来学习Axure RP软件很容易上手。

2.1 Axuer RP的软件窗口

打开Axure RP 9后，软件的界面如图5-3所示，页面布局和我们常用办公软件类似。

窗口上方是菜单项和快捷功能键。常用的功能有新建、保存、撤销、重做、字体、字号等这些标准功能。窗口左侧是最常用的3部分设计元素：页面、元件库、母版，如图5-4所示

左侧的页面窗口列出了原型的所有页面，这里的页面也是生成我们使用的软件原型的页面。Axure RP 是可视化操作，所见即所得。页面可通过单击链接、按钮等相互跳转，和真实的软件页面操作是一样的。

左侧元件库是制作原型页面内容的各种元件（也叫组件），如图5-5所示。常用的元件有矩形、占位符、图片、按钮、文本标签、水平线、热区、动态面板、文本框、下拉列表框、复选框、单选框、表格等。这些元件是用来设计软件页面上的不同内容。

母版窗口是存放你在制作原型过程，自己制作的母版组件。母版和元件一样，是可以让你重复使用的组件，如果你的原型中有多个页面都要用到相同的内容，例页首、页脚、导航条、左侧栏等，就可以把这些内容做成母版，让你可以快速重复使用，如果要修改，也是统一修改，大大提高制作原型的效率，如图5-6所示。

右侧栏是当前所选元件或页面的样式、交互、说明的设置区域，如图5-7所示。

在Axure RP上设置各种交互，是不用编写任何代码就可以完成。实现的交互操作和软件开发的效果是一样的。

窗口中间部分就是页面的设计区域，可以同时打开多个页面。页面的所有内容和组件，都在这里进行编辑，如图5-9所示。

2.2 Axuer RP的菜单和快捷功能

1.“文件”菜单

“文件”菜单中最常用的功能是新建、保存、另存为、从RP文件导入等4个功能，这些功能也和其他软件的常用功能用法一样，如图5-10所示。

“新建”菜单项用于新建一个RP原型文件，单击后会打开一个全新的原型设计窗口，可以进行新原型的设计工作，如图5-11所示。

“保存”和“另存为”这两个菜单项功能和其他常用软件一样，就是保存文件或把当前文件另存为一个新RP文件。“从RP文件导入”菜单项的功能是从另一个RP文件导入指定的页面，单击该导入菜单项后，打开RP文件选择窗口，如图5-12所示。

选择好文件后，将打开页面选择窗口，在窗口内选择要导入的页面，如图5-13所示。

单击“下一项”按钮，进入母版选择窗口，选择要导入的母版，如图5-14所示。

再单击“下一项”按钮进入交互动作选择窗口，这一步和后面的几步的内容使用默认选择，都直接单击“下一项”按钮，如图5-15所示。

在最后一步，单击“完成”按钮，即可完成RP文件的导入，如图5-16所示。

完成导入后，设计窗口将增加导入的页面和母版内容，如图5-17所示。

2.“编辑”菜单

“编辑”菜单和我们常用软件的编辑菜单很类似，常用的功能是：撤销、重做、复制、粘贴等。尤其是复制和粘贴，使用快捷键Ctrl + C和Ctrl + V，这是通用的快捷键，如图5-18所示。

3.“视图”菜单

主要是对软件的工作窗口中显示的内容进行设置，和常用软件的视图菜单功能很类似，如图5-19所示。

“工具栏”菜单选择是否显示的功能快捷键，勾选就是显示，不勾选就是不显示，如图5-20所示，一般情况下都是选择显示，方便使用。

“功能区”菜单，选择是否显示左侧、右侧和功能区内容，如图5-21所示，一般情况下都选择显示左右侧和功能区的内容。

重置视图，单击后把视图显示的内容恢复默认设置。其他的视图菜单功能也类似，选择是否显示相关的功能。

4.“项目”菜单

“项目”菜单的功能是对整个软件原型的一些公共内容进行设置，例如：元件样式、页面样式、说明字段等等，这里的设置，会影响到同一RP文件中所有页面，如图5-22所示。

“元件样式管理器”菜单项，就是对当前文件所用的所有元件的样式，做一个统一的设置，单击后弹出设置窗口，如图5-23所示。

在窗口中，可以对各种元件进行样式设置，单击“确定”按钮后，设置生效，这个设置生效是针对当前RP文件中所有页面的元件样式。

“页面样式管理”菜单项，是对当前文件的所有页面样式做一个统一的设置，单击后弹出设置窗口，如图5-24所示。

页面排列，是设置页面在浏览器中的显示是否居中；

颜色，是设置页面的底色，一般是白色；

图片，是设置页面的底图，一般是空白；

Image Alignment，设置底图显示在什么位置；

重复，设置底图是否重复显示多张图片；

低保真度，设置页面上图片的保真度，保真度低，图片的文件大小会小，网页浏览起来会顺畅；反之，图片清晰，但浏览不那么顺畅。

5.“布局”菜单

这个菜单比较少用，一般是使用快捷功能菜单，或鼠标右键菜单来完成。菜单的功能是对元件进行组合、设置元件的层级高低、对齐元件、把元件转为面板和母版等，如图5-25所示。

6.”发布”菜单

“发布”菜单的功能是把RP文件生成浏览器可查看的HTML文件，就是我们常用的软件原型了，如图5-26所示。

“发布”菜单项中常用的功能是：生成HTML文件、重新生成当前页面的HTML文件、发布到Axure云、生成Word说明书。

“生成HTML文件”菜单项的功能，就是把当前RP文件的所有页面都生成HTML文件，可让大家在浏览器上查看原型。单击后会弹出发布窗口，常使用快捷键F8，在左侧选择好保存的文件夹，这个文件夹就是我们日常使用的软件原型，单击下方的“发布”按钮即可生成原型，图5-27所示。

发布成功后，会自动在浏览打开项目的首页，图5-28所示。

“重新生成当前页面的HTML文件”菜单项的功能，就是把当前设计窗口的一个页面重新生成HTML页，一般是当前页面的内容做了修改，想在浏览器上查看效果，就会使用这个功能，常使用快捷键Ctrl+F8。

“发布到Axure云”菜单项的功能，是把当前RP文件生成HTML文件并发布到Axure的云主机上，可让大家通过网址查看原型。单击后会弹出发布窗口,如图5-29所示，可以设置原型链接密码，让其他人查看原型，需要输入密码才能查看。

输入项目名称、共享链接密码，单击发布，即可把原型发布到网上。可以通过自动生成的链接访问原型，如图5-30所示。这个链接是Axure公司免费提供的，方便团队人员线上沟通原型。

“生成Word说明书”菜单项的功能，就是把当前RP文件的各页内容、母版、弹窗和相关的文字生成Word文档，方便产品经理编写需求说明书。单击菜单项后，弹出生成说明书窗口，如图5-31所示。在弹窗中填好生成的文件名，单击下方的生成按钮即可生成一份简洁的需求说明文档。也可以单击后面的页面、母版等选项卡，选择哪些内容用于生成文档。

后面的团队、账户、帮助菜单功能比较少用，需要使用时，可在网上搜索一下使用方法。

2.3 制作原型的页面

页面栏列出的页面，是指当前RP文件所包含的页面，如图5-32所示，RP文件发布后，每一页面会对应生成一个HTML网页（也是原型的页面）。

当前原型RP文件有6个页面，那么生成HTML文件后，将会有6个HTML网页，可在浏览器中，分别打开这些页面，如图5-33所示。

双击页面栏里的页面名称，会在设计窗口显示这个页面，可以对这个页面的内容进行设计和编辑，如图5-34所示。

页面本身也有样式和交互，单击页面的空白地方，就是选中了当前页面，在右侧的样式中，可对页面的样式进行设置，如图5-35所示。常用的设置有：

页面排列：设置页面的内容在浏览器是靠左显示，还是居中显示。

填充：设置页面的底色，或设置一张图片为底图。

页面的交互，切换到交互选项卡，如图5-36所示。

页面常用的交互有：单击页面、页面载入时等操作，单击”新建交互”按钮，列出可新建的页面交互，如图5-37所示。

如果要添加页面的单击操作，在上图的下拉菜单选中“页面单击时”，会显示单击页面可以进行哪些动作，如图5-38所示，可以进行打开链接、关闭窗口、滚动到某个无件、显示或隐藏某个元件等等。

常用的动作是打开链接，我们选中“打开链接”，会显示各页面选项，也可以输入URL（网址）或打开某个文件的路径，我们选择打开教练管理这个页面，如图5-39所示。

这样，单击页面的操作就完成了，不用编写任何代码，就添加了一个交互，如图5-40所示，在生成HTML文件后，我们在浏览器查看原型时，单击这个页面，就会跳转到教练管理页。

2.4 制作原型的元件

元件，就是组成网页各部分内容的一些组件。每一个网页都会有多个不同的元件组合而成。常用的元件有：矩形、图片、占位符、按钮、文本标签、文本段落、文本框、下拉列表等等，如图5-41所示。

元件的使用方式：都是拖动到页面设计区即可使用。每一元件都可以设置它的样式、交互、说明。元件样式，就是元件在页面上显示的样子；元件交互，就是操作元件时会产生什么功能动作；元件说明，就是元件的名称和注释，通过元件名称可以在设置交互中引用该元件。

1. 矩形

矩形元件有3种，通过改变它们的样式，它们之间是可以相互转换的。把矩形拖到设计区即可使用，如图5-42所示。

矩形的主要作用：用作底纹。改变矩形的边框颜色，改变填充颜色，变成圆角，就是一个很常用的底纹，如图5-43所示。

矩形可用作按钮，把矩形改变样式，增加单击交互，就变成一个按钮，如图5-44所示。

矩形元件的作用比较多，网页上直角矩形或圆角矩形的组件，都可以用矩形元件来实现。

2. 图片

图片元件，就是在网页中增加图片，把元件拖到设计区，双击元件会弹出文件选择窗口，选择要用的图片文件，即可在页面上显图片，如图5-45所示。

图片可任意地放大和缩小，也可以设置图片样式、交互和说明等，如图5-46所示。

3. 按钮

矩形元件可以设计成按钮，也有现成的按钮元件，把按钮元件拖到设计区即可，如图5-47所示，然后就可以添加按钮交互操作来完成按钮的功能设计。

4. 文本

文本是网页中最常用的组件了，有文本标签、文本段落两个元件，单行文本使用文本标签，多行文本使用文本段落，如图5-48所示。

可以设置样式改变文本显示的样子，双击文件元件可对里面的文本内容进行编辑。

5. 文本框

文本框元件是网页中常用的单行文本输入框，例如：搜索输入框、注册登录的输入框等等，把元件拖到页面设计区，就是一个单行文本输入框，如图5-49所示。

6. 文本域

文本域元件就是多行文本输入框，当输入的文本内容多于框的高度时，右侧会出现上下滚动条，如图5-50所示。

7. 下拉列表

下拉列表就是网页上常见的下拉选择框，双击元件可以对选择框的选项进行编辑，如图5-51所示。

其他的元件使用方法和上面列出来的元件一样，拖到设计区就可以使用，通过改变元件的样式，让元件符合我们的UI要求，对元件添加交互可实现操作功能。

2.5 制作原型的动态面板

动态面板也是一种元件，但它是一个特殊元件，它本身没有内容，它的内容是通过其他多个元件组合而成。它还有一个很重要的特性，一个动态面板可以有多层面板，各层面板可切换显示。动态面板主要用作：制作提示弹窗、选项卡窗口等等，是一个很常用的元件。

把面板元件拖到设计区，双击元件就可以对动态面板进行编辑，如图5-52所示。

双击面板元件，对面板内容进行编辑，面板内可以放入任意其他元件，组合成一个整体，如图5-53所示。

同一动态面板，可以增加多层内容，各层内容可通过单击交互进行切换显示，每次只能显示面板的一层内容，如图5-54所示。

面板的交互，可通过单击页面上的按钮来显示面板，如图5-55所示，也可以通过单击面板自己的按钮来显示面板不同的层、或隐藏面板。

在实际使用中，可以先把面板设置为隐藏，在面板的右键弹出菜单上把面板设为隐藏，隐藏的作用是打开页面时，面板是不显示的，当用户点击某个按钮时才显示面板，可用来制作我们常见的提示弹窗。单击按钮后再显示面板，要先给面板定个名称才能在交互中引用面板。选中面板，可在交互栏为面板设置名称，如图5-56所示。

面板还有一个常用功能，就是固定到浏览器页面上。网页上页首悬浮导航、悬浮按钮等等，都是用这个功能实现，如图5-57所示。

单击固定到浏览器，弹出设置窗口，可以面板设置成悬浮在浏览器窗口的任何位置，如图5-58所示。生成HTML网页后，面板的悬浮效果就可以在浏览器上查看了。

2.6 制作原型的母板

我们在设计原型时，多个网页可能会使用相同的板块内容，我们就可以把这些相同的内容做成母版。例如页面的页首和页脚，在每个页面上都是相同的，可以把页首和页脚的内容做成母版，要使用时，就像使用元件一样，拖到相应的位置即可，如图5-59所示。

要修改页首的内容时，只要修改页首母版，每个页面的页首都会跟着改变，非常方便原型的更新维护。母版的制作和面板类似，例如制作页首母版，我们可以先按正常的方式来设计页首。页首设计完成后，再选中页首的所有内容，右击鼠标，在弹出的菜单中选择“转换为母版”即可，如图5-60所示。转换好的母版就可以被其他页面使用了。