我们使用Axure RP软件实际制作两个软件原型
软件原型分两种：线框图原型和高保真原型
线框图原型，就是使用线框图来代表网页上的图片、图标等内容，制作速度快，修改速度也快，线框图原型主要用作需求调研时，和客户确认需求，用作软件产品的初步构想
高保真原型，就是制作得和真实产品外观一样，交互也一样，能真实反映产品情况，但是制作速度慢，修改起来也更耗时间，高保真原型用作软件产品的开发沟通，指导软件开发工作
1 制作一个APP[x1] [t2] 的线框图原型如果我们已经收集了一部分需求，了解客户想做什么样的软件，这时产品经理就可以制作软件的线框图原型，用于和客户进一步沟通需求
第一步 新建文件打开Axuer RP软件后，选择文件菜单，单击新建，会打开一个空白的RP文件，如图5-74所示，这时我们可以先保存文件，这是设计原型的一个好习惯
因为我们是制作APP原型，所以要设定页面的尺寸，单击页面的空白处选中页面，在右侧样式栏的页面尺寸项，我们选择iPhone 12的尺寸，如图5-75所示
选定页面尺寸后，页面的宽度会变成手机屏幕宽度的大小，如图5-76所示，方便我们按手机屏幕尺寸设计原型，高度是无限的
在左侧的页面栏，选中页面后再单击页面名称，可对页面名称进行修改，如图5-77所示
第二步 制作页首APP的页首是一个频道导航，我们使用一个矩形做页首的底图，加上一个占位符做LOGO，加上几个文本标签做不同的频道，就可以做出一个页首的效果，如图5-78所示
第三步 制作动态面板因为页首是悬浮在手机屏幕的上方，所以我们要把这部分内容转为动态面板
选中页首的所有内容，单击右键，在弹出菜单中选择“转换为动态面板” ，如图5-79所示，并起名：页首面板
每生成一个动态面板我们都要起一个唯一的名称，方便后面的交互引用
页首要做成悬浮效果，我们把动态面板设置成固定到浏览器，选中页首面板，右击，弹出的功能菜单里有“固定到浏览器”菜单项，如图5-80所示
单击固定到浏览器菜单项后，弹出固定设置窗口，固定的位置是：水平居中，垂直方向在顶部，如图5-81所示
固定位置也就是悬浮在浏览器上的位置，设置好固定位置后，在生成的HTML页中我们就可以看到页首的悬浮效果，在当前的RP文件中是看不到悬浮效果的
第四步 制作母版页首制作就这样完成了
因为原型的多个页面的页首都是相同的内容，我们可以把页首转为母版，提高我们设计原型的效率
选中页首面板，右击鼠标，在弹出的菜单中选中“转换为母版”，如图5-82所示
在弹出的窗口中设置母版名称，就会在左侧母版栏中看到新建的母版，如图5-83所示
我们就可以像使用元件一样使用母版了
第五步 制作轮播图页首的下面，是一组轮播图，也叫焦点图，用于显示APP的重点内容
我们使用占位符和圆点来制作，如图5-84所示
第六步 景点列表轮播图下方就是景点列表了，多个景点说明组成了列表，每个景点说明包括缩略图、标题、发布日期，缩略图用占位符表示，如图5-85所示
第七步 制作下方的模块导航APP的下方是固定悬浮的模块导航，我们按页首的方法，制作一个模块导航面板，设置为固定在浏览器的下方居中，如图5-86所示
关注频道页的线框图原型设计就这样完成了，如图5-87所示
第八步 发布RP文件虽然只完成了一个页面的原型设计，我们也可以在浏览器看看效果
在Axure RP主菜单上单击“发布”菜单的“生成HTML文件”菜单项，在弹出的窗口中点击“发布”按钮，就可以发布项目了，Axure会把RP文件生成HTML文件，并自动在浏览器打开页面，如图5-88所示
在浏览器上查看原型，和查看正式网页是一样的
关注频道页的页首和页脚导航都是悬浮的，列表的内容可以上下滚动查看，和真实APP使用效果一样
第九步 添加新页单击页面栏的+号图标就可以添加一个新页，添加后把新页名称改为和内容相关的名称，如图5-89所示
新页的内容可以从其他页里拷贝过来，再进行修改
如果新页的内容和已设计好的某个页面内容很类似，我们可以通过复制这个页面来新建页面，如图5-90所示
第十步 添加交互我们为原型设计好多个频道页后，就可以为页首的导航添加链接了
双击页首母版进入编辑状态，再双击动态面板进行面板的编辑状态，选中一个关注文本，单击右侧交互栏的“新建交互”，如图5-91所示
在弹出的选择窗中，我们选择“单击时”这个交互，会弹出一个动作选择窗口，如图5-92所示
我们选择“打开链接”这个动作，这时会弹出一个页面选择窗口，因为是为热门景点频道添加链接，我们选择热门景点页，如图5-93所示
选择好页面后，为关注频道添加的单击交互就完成了，关注文本的右上角会出现一个闪电图标，表示这个文本是有交互动作的，如图5-94所示
重复上面的步骤，我们为其他频道的文本都添加单击交互
然后，再增加景点详情页，增加用户中心等页面内容，就完成了一个APP的线框图原型，如图5-95所示
把RP文件再次发布生成HTML文件后，我们就可以在浏览器上查看原型的整体效果
单击页首的导航，就会跳转到各个频道页，单击景点标题，就会打开景点详情页等，和真实的APP操作是一样的，如图5-96所示
从上面可以看到，线框图原型的制作速度是比较快的，它能让产品经理快速生成软件原型，和用户确认需求，提高需求沟通效率
2 制作网站的高保真原型接下来我们制作一个高保真原型，电脑版的公司网站原型
高保真原型的制作方法和线框图原型是一样的，只是图片、图标、交互等细节会做得更细致，和真实网站的显示是一样的效果
第一步 新建文件单击文件菜单的新建，生成一个新的RP文件，第一个页面中，我们在样式设置里，选择页面尺寸是Web，宽度改为1200，这表示网站的页面宽度是1200像素，这是一个常用的网页宽度，如图5-97所示，把页面名称改为首页
第二步 制作页首公司网站的页首是一个频道导航
使用一个矩形，底色改为浅蓝色； 添加公司的LOGO图片；添加各频道名称的文本
即可制作成一个公司网站页首部分，如图5-98所示
第三步 把页首转为母版公司网站的页首在每一页都是一样的，只是突显的频道不同，我们把页首做成母版后，只需在每一页的频道上增加突显标识即可
选中页首各部分内容，右击，在弹的菜单中选择“转换为母版”，如图5-99所示
页首转换为母版后，在母版栏会列出该母版
母版元件本身也会有浅浅的红色，母版可以像元件一样被重复使用，拖到页面中即可，如图5-100所示
第四步 制作轮播图轮播图也叫焦点图，用于链接一些网站中重要的内容，让用户能第一时间看到
图片加上圆点，就可以组成轮播图
把多张轮播图组合一个轮播图动态面板，每张轮播图的圆点突显是不一样的
这样，轮播图的效果就做好了，如图5-101所示
第五步 制作板块内容首页的板块内容是引导用户查看不同的频道，会包含网站的主要内容
现在公司网站主要有3个频道：产品、解决方案、公司新闻，那么首页的板块也会包含这3部分内容，来引导用户查看
通过图片、文本、水平线等组合成各版块内容，如图5-102所示
第六步 制作页脚页脚内容一般是友情链接、次要板块的入口链接、公司联系信息、公司名称等等
页脚内容是公司网站各个页面都有的，而且内容都是一样
通过底图、水平线、文本等元件内容组合成页脚，并把页脚转化为母版，如图5-103所示
第七步 制作注册和登录弹窗单击页面上的按钮后弹出提示窗口，是使用动态面板来制作
先在页首增加注册、登录的功能链接，一般是放在页首右侧，方便用户单击，如图5-104所示
使用矩形、文本、输入框、按钮等元件组合成注册窗口，并转化成动态面板，把面板设置成固定到浏览器，水平和垂直都是居中，如图5-105所示
在动态面板中增加多一个登录状态，会多一个面板层，一个面板可以有很多层状态，每一层状态的大小和内容都可以不一样，图5-106所示
我们把动态面板的名称定为“弹窗面板”，把动态面板的默认状态设置为隐藏，面板变成一个浅黄透明的矩形，如图5-107所示，在浏览器打开页面时，弹窗是隐藏的看不见的
为页首的登录和注册添加单击交互，动作选择设置面板状态，如图5-108所示
选择设置面板状态后，会展开设置窗口，选择弹窗面板，状态选注册，在下方的更多选项中，选择“如果隐藏则显示”，这样隐藏的动态面板也可显示到指定的面板状态，如图5-109所示登录文本也这样添加单击交互，注册和登录的功能交互就完成了
生成网页就可以在浏览器查看效果了，单击注册按钮，就会在页面中间弹出注册窗口，如图5-110所示
第八步 添加新页面，制作其他频道内容添加新页面，使用重复页面的功能会提高制作原型效率
选中首页页面，单击右键菜单的重复页面，如图5-111所示，会生成一个和首页有同样内容的新页面，再按需求进行修改，这样可以快速生成新频道的页面了
多次重复上面的操作，生成产品、解决方案、公司新闻等多个频道页，再添加各频道的详情页，如图5-112所示，一个网站的高保真原型就制作好了
单击发布菜单的生成HTML文件，就可以在浏览器上看到高保真网站原型的实际效果，如图5-113所示，外观上和真实的网站一模一样
小结使用RP工具软件来制作原型效率是很高的，但是要做一个好的原型，在需求分析时要把软件模块结构、功能操作、显示内容都构思好设计好，从用户的角度去思考各个细节：l 栏目分类，用户是否觉得清晰、易理解？l 交互设计，用户是否容易操作？l 提示内容，用户是否容易理解？l 功能按钮是否明显？文字和图标表达的意思是否能理解正确？每一个功能和内容细节都要经过这样的深思熟虑，设计出来的软件产品原型才能符合用户需求，成为用户喜爱的软件产品