1、AxureRP9互联网产品原型设计(慕课版)了解互联网产品原型设计什么是原型设计产品原型是用线条、图形描绘出的产品框架;原型设计是综合考虑产品目标、功能需求场景、用户体验等因素,对产品的各板块、界面和元素进行合理排序和布局的过程。对互联网行业来说,原型设计就是将页面模块、各种元素进行排版和布局,获得一个页面的草图效果。为了使效果更加具体、形象和生动,还可以加入一些交互性的元素,模拟页面的交互效果。原型设计的参与者一个项目的设计开发通常需要多个人员的共同努力。很多人认为产品原型设计是整个项目的早期过程,只需要产品经理参与即可。但实际上产品经理只是了解产品特性、用户和市场需求,对于
2、页面设计和用户体验设计则通常只是停留在初级水平。而设计师独立进行创作,会使得产品经理和设计师反复商讨、反复修改。原型设计的参与者为了避免产品设计开发过程中反复修改的情况发生,在开始进行原型设计时,产品经理应邀请用户界面(UI)设计师和用户体验(UE)设计师一起参与产品原型的设计制作。这样才可以设计出既符合产品经理预期又具有良好用户体验且页面精美的产品原型。产品原型UI设计师产品经理UE设计师如何体现原型设计纸质设计师可以使用笔直接在纸上描绘产品原型,设计大致的产品效果。这种方式通常是在产品经理进行原型构思的阶段使用。通过这种方式可以将原型产品的框架基本确定,然后通过专业的软件将原型更
3、形象、更直观地转移到电子文档中,以便后续的研讨、设计、开发和备案。如何体现原型设计Word和Visio用户也可以使用Word进行原型设计。在Word文档中建立一块画布,使用文本框、图片、控件等制作一个原型设计方案,Word软件启动界面如下图所示。使用Visio设计原型比使用Word更方便。可以快速进行原型设计,Visio软件启动界面如下图所示。如何体现原型设计Word和Visio由于软件的局限性,通常只使用Word或Visio绘制原型的线框图。相比手绘原型,线框图更加清晰和整洁,适用正式场合的PPT形式的宣讲的场景。线框图还可以是功能页面结构的视觉呈现形式,能传达页面的布局结构及定
4、义功能元素,并能将产品需求以线框结构的方式展示出来,让产品需求以更加规整的方式直观展现,一般以黑白灰的形式来表示。原型设计软件原型设计软件目前原型设计软件有很多,比较常见的有AxureRP、AdobeXD和MockupScreens等。这些工具软件不仅具有丰富的Web控件,而且交互性很好。AxureRP是其中的佼佼者,下图所示为AxureRP9的启动图标和工作界面。原型设计软件原型设计软件使用这些专业的原型设计软件除了能够完成产品原型线框图绘制以外,还能完成高保真产品原型的绘制。高保真产品原型是真实地模拟产品最终的视觉效果、交互效果和用户体验感受,在视觉、交互和用户
5、体验上非常接近真实的产品,甚至包含产品的细节、真实的交互和UI等。下图所示为使用AxureRP9完成的高保真App产品界面。原型设计的必要性和作用原型设计的必要性原型设计是帮助网站设计完成最终标准化和系统化的较好手段。它最大的好处在于,可以有效地避免重要元素被忽略,也能够阻止做出不准确、不合理的假设。在项目开始之初,对每个元素进行调试并确保它们能够如同预期一样运作是相当重要的步骤。当设计完成可交互的高保真产品原型之后,设计师可以将它作为一个成型的界面来使用。通过测试模型中所有的功能,确认其能否解决规划阶段所计划解决的问题。如果没有使用产品原型,而是在完成项目整体的设计和开发之
7、,假如某个行业只有一个网站,那么就算选择的关键词非常冷门或用户较少,但对于这个行业来说也是品牌。假如某网站相对其他同类网站来说内容丰富、信息更新速度快,那么就是成功的。这两点对于树立网站品牌是非常重要的,归根结底就是网站是不是可以给用户带来吸引力。此外好的视觉体验对于品牌的提升也是很有影响的,例如,某公司有一款平民化的数码单反相机“300”,这款相机虽然价格相对低廉,但是该公司却将这款相机的官方网站设计得高贵典雅,让人一眼就觉得这样的一款相机一定是价格昂贵的好相机,但实际这款相机售价并不高,这就是好的视觉体验对于品牌提升的影响。原型设计中的用户体验用户体验包含的内容品牌网页设计的优劣对
10、容如果说网站的技术构成是一个网站的“骨架”,那么内容就是网站的“血肉”了。内容不单包含网站中的可读性内容,还包括连接组织和导航组织等方面。这也是一个网站用户体验的关键部分。也就是说网站中除了要有丰富的内容外,还要有方便、快捷和合理的链接和导航。综上所述,只要按照用户体验的角度优化网站,就可以让网站受到大众的欢迎。原型设计中的用户体验用户体验的生命周期吸引熟悉交互保持拥护原型设计中的用户体验用户体验的生命周期原型设计中的用户体验用户体验的需求层次感觉需求交互需求情感需求社会需求自我需求思维导图与原型设计思维导图的作用优化大脑,提高沟通效率防止记忆或沟通方面的遗漏让思路变得有条理思维导
11、图与原型设计思维导图的基本类型圆圈图圆圈图是由不同大小的圆圈组合而成的,位于中间部分的自然是中心主题一般会偏大一点,四周的圆圈是分支主题,大小稍微小点,使用圆圈图可以培养想象力以及联想力。思维导图与原型设计思维导图的基本类型气泡图气泡图包括单气泡图和双气泡图。单气泡图由很多圆圈围绕中心主题所建立;双气泡图由两个气泡思维导图组建而成,中间的部分是两个思维导图所重合的部位,也就是总结内容时两个关键词都具备的特性。思维导图与原型设计思维导图的基本类型树状图树状图就如同一棵大树,该类型的思维导图主要适用于对知识点进行归纳,这样在后期使用的时候可以一目了然地清晰展现。思维导图与原型设计思维
14、MindZEN两个版本中选择,两者没有本质的区别,XMindZEN是在XMind基础上重新设计的版本,不但具备XMind全面的思维导图功能,还有重新设计的界面和交互方式。下图所示为XMindZEN的工作界面。课堂操作安装并使用XmindZEN打开浏览器,在浏览器地址栏中输入XMind官方网址,单击页面中的“免费下载”按钮,如图1-22所示。下载完成后,双击XMind-ZEN.exe文件,弹出“XMindZEN安装”窗口。课堂操作安装并使用XmindZEN稍等片刻即可完成软件的安装,弹出下图所示的新建文件界面。选择一种样式后单击“创建”按钮,即可进入XMindZ
15、EN工作界面。课堂操作安装并使用XmindZEN选中主题并修改文本。选中子主题并修改文本。课堂操作安装并使用XmindZEN选中“会员系统”子主题,向左侧拖曳,效果如下图所示。单击选中主题,单击软件顶部的“子主题”按钮,添加子主题,效果如下图所示。思维导图软件设计MindManagerMindManager是一款国际化的商业思维导图软件,是创造、管理和交流思想的工具,可添加图像、视频、超链接和附件,是专业的思维导图软件。思维导图软件设计MindManagerMindManager提供了友好、直观的用户界面,可协助用户快速记录灵感和想法,能有序地把用户的思维、资源、管理项
18、择题3可以把用户体验的需求层次分为()个层面,用来帮助设计师更好地解决问题。A5B4C3D6课后测试选择题4对于一个刚刚打开网站的用户,为了确保能够找到自己感兴趣的内容,通常不需要了解的内容是()。A身在何处B要寻找的内容在哪里C怎样才能得到这些内容D怎样进入网站课后测试填空题在设计原型的时候,为了更好地表现网站内容并留住更多的浏览者,设计师需要注意规避设计时自己个人的喜好、考虑不同层次的浏览者和充分分析竞争对手。用户体验一般包含品牌、使用性、功能性和内容四个方面。用户体验的生命期分为吸引、熟悉、交互、保持和拥护5个步骤。用户体验可以分为五个需求层次:感觉需求交互需求情感需求社会
19、需求自我需求,这五个需求层次是逐层增高的。思维导图是一种图像式思考的辅助工具,它简单却又很有效,是一种将思维形象化的方法,通过放射状的发散形式,将思路变得更为条理和深入。课后测试操作题使用XMindZEN绘制一款体育社交App的思维导图。谢谢观赏AxureRP9互联网产品原型设计(慕课版)了解AxureRP9AxureRP9简介AxureRP是美国AxureSoftwareSolution公司的旗舰产品,是一个专业的可快速进行产品原型设计的工具。它能帮助负责定义需求和规格、设计功能和界面的专家快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。Ax
20、ureRP9简介作为专门的产品原型设计工具,它比一般的创建静态产品原型的工具,如Visio、OmniGraffle、Illustrator、Photoshop、Dreamweaver、VisualStudio、Fireworks要便捷、高效。AxureRP9的工作界面如下图所示。AxureRP9为用户提供了明亮和黑暗两种工作界面外观模式,用户可以根据个人的喜好选择不同的界面外观模式。AxureRP9简介默认情况下,AxureRP9使用明亮模式作为工作界面外观,执行“文件偏好设置”命令,弹出“偏好设置”对话框。在“常规”选项卡中的“外观”选项下选择“黑暗模式”选项
21、。AxureRP9简介此时“偏好设置”对话框效果如下图所示。单击“完成”按钮,完成更改工作界面外观为黑暗模式的操作,工作界面外观效果。软件的下载、安装、汉化与启动下载并安装AxureRP9在开始使用AxureRP9之前,需要先将AxureRP9软件安装到本地计算机中,用户可以通过官方网站下载需要版本的软件。课堂操作安装AxureRP9在下载文件夹中双击AxureRP-Setup.exe文件,弹出“AxureRP9Setup”对话框。单击“Next”(下一步)按钮,进入下图所示对话框,认真阅读协议后,勾选“Iacceptthetermsin
22、theLicenseAgreement”(我接受许可协议的条款)复选框。课堂操作安装AxureRP9单击“Next”(下一步)按钮,进入下图所示对话框,设置安装地址。单击“Change”(改变)按钮可以更改软件的安装地址。单击“Next”(下一步)按钮,进入下图所示对话框,准备开始安装软件。课堂操作安装AxureRP9单击“Install”(安装)按钮,开始安装软件。稍等片刻,单击“Finish”(完成)按钮,即可完成软件的安装。如果勾选“LaunchAxureRP9”(打开AxureRP9)复选框,在完成软件安装后将立即启动软件。课堂操作安装Axure
23、RP9软件安装完成后,用户可在桌面上找到AxureRP9的启动图标。用户也可以在“开始”菜单中找到启动选项。软件的下载、安装、汉化与启动汉化与启动AxureRP9用户可以通过互联网获得AxureRP9的汉化包,下载的汉化包解压后通常包含1个lang的文件夹和3个dll文件。将该文件夹及dll文件直接复制到AxureRP9的安装目录下,重新启动软件,即可完成软件的汉化。汉化完成后,用户可以通过双击桌面上的启动图标或单击“开始”菜单中的启动选项启动软件,启动后的工作界面如下图所示。软件的下载、安装、汉化与启动汉化与启动AxureRP9通常在第1
25、AxureRP9中提供了丰富的流程图元件,使用AxureRP9用户可以很容易地绘制出流程图,并可以轻松地在流程图元件之间加入连接线并设定连接的格式。AxureRP9的主要功能实现交互设计AxureRP9可以模拟实际操作中的交互效果。通过使用“交互编辑器”对话框中的各项动作,快速地为元件添加一个或多个事件并产生动作,包括单击时、滚动到元件等。AxureRP9的主要功能输出网站原型AxureRP9可以将线框图直接输出成符合IE或火狐等不同浏览器的HTML项目。AxureRP9的主要功能输出Word格式的规格文件AxureRP9
26、可以输出Word格式的文件,文件包含了目录,网页清单,网页,附有注解的原版、注释、交互和元件特定的信息,以及结尾文件(例如附录),规格文件的内容与格式也可以依据不同的阅读对象进行变更。熟悉AxureRP9的工作界面相对于AxureRP8来说,AxureRP9的工作界面发生了较大的变化,精简了很多区域,操作起来更简单、更直接,方便用户使用。AxureRP9工作界面中各区域如下图所示。工具栏面板熟悉AxureRP9的工作界面菜单栏文件菜单编辑菜单视图菜单项目菜单布局菜单发布菜单熟悉AxureRP9的工作界面菜单栏团队菜单账号菜单帮助菜单熟悉Axure
27、RP9的工作界面工具栏Cut(剪切):单击将剪切当前所选对象Copy(拷贝):单击将复制当前所选对象到剪贴板中Paste(粘贴):单击将剪贴板中的复制对象粘贴到页面中熟悉AxureRP9的工作界面工具栏选择模式:有两种选择模式,分别是相交选中和包含选中。相交选中情况下,只要选取框与对象交叉即可被选中。包含选中情况下,只有选取框将对象全部包含时,才能被选中。熟悉AxureRP9的工作界面工具栏连接:使用该工具可以将流程图元件连接起来,形成完整的流程图。插入:单击该图标右侧的向下三角形,可以打开如下图所示的下拉菜单。用户可以选择在原型中插入绘画、矩形、圆形、线段、文本、图片和形
28、状。熟悉AxureRP9的工作界面工具栏点:使用绘画工具绘制图形,或将元件转为自定义形状后,使用该工具可以调整图形锚点,获得更多的图形效果。顶层:当页面中同时有两个以上的元件时,可以通过单击该按钮,将选中的元件移动到其他元件顶部。底层:当页面中同时有两个以上的元件时,可以通过单击该按钮,将选中的元件移动到其他元件底部。组合:同时选中多个元件,单击该按钮,可以将多个元件组合成一个元件。取消组合:单击该按钮可以取消组合操作,组合对象中的每一个元件将变回单个对象。缩放:在此下拉列表中,用户可以选择视图的缩放比例,缩放比例范围为10%400%,以查看不同尺寸的文件效果。熟悉AxureRP
30、材和技术支持。在AxureRP9的工作界面左上角,除了AxureRP9的图标外,还有保存、撤销和重做3个常用操作按钮。熟悉AxureRP9的工作界面工具栏保存:单击该按钮即可保存当前文档撤销:单击该按钮将撤销一步操作重做:单击该按钮将再次执行前面的操作熟悉AxureRP9的工作界面面板AxureRP9一共为用户提供了7个功能面板,分别是页面、概要、元件、母版、检视、样式、交互和说明。默认情况下,这7个面板分为2组,分别排列于工作区的两侧。熟悉AxureRP9的工作界面面板页面:在该面板中可以完成有关页面的所有操作。例如新建页面、删除页面和查找
31、页面等。概要:该面板中主要显示当前面板中的所有元件。用户可以很方便地在该面板中找到元件并对其进行各种操作。熟悉AxureRP9的工作界面面板元件:在该面板中包含AxureRP9的所有元件。用户还可以在该面板中完成元件库的创建、下载和载入。母版:该面板用来显示页面中所有的母版文件。用户可以在该面板中完成各种有关母版的操作。熟悉AxureRP9的工作界面面板样式:该面板的内容会根据当前所选内容发生改变。大部分元件的效果样式设置都在该面板中完成。交互:用户可以在该面板中为元件添加各种交互效果。说明:在该面板中可以为元件添加说明,能帮助用户理解原型的功能。熟悉AxureRP
32、9的工作界面面板说明在面板名称上双击,即可实现面板的展开和收缩。这样便于在不同情况下最大化地显示某个面板,便于用户操作。拖动面板组的边界,用户可以任意调整面板的宽度,获得个人满意的视图效果。熟悉AxureRP9的工作界面面板说明将鼠标指针移动到面板名称处,按住鼠标左键拖曳,即可将面板转换为浮动状态。拖动一个浮动面板到另一个浮动面板上,即可将两个面板合并为一个面板组。用户可以根据个人的操作习惯自由组合面板,以获得更易于操作的工作界面。熟悉AxureRP9的工作界面面板说明单击浮动面板或面板组右上角的图标,可关闭当前面板或面板组。拖动面板或面板组顶部的灰色位置到工作界面的两
33、侧,可将该面板或面板组转换为固定状态。关闭后的面板如果想要再次显示,用户通过执行“视图功能区”命令,在菜单中选择想要显示的面板即可。熟悉AxureRP9的工作界面面板说明用户有时会需要更大的空间显示产品原型,可以通过执行“视图功能区开关左侧功能栏”或“视图功能区开关右侧功能栏”命令,隐藏左右两侧的面板,效果如下图所示。再次执行相同的命令,则会将隐藏面板显示出来。熟悉AxureRP9的工作界面工作区工作区是AxureRP9创建产品原型的地方。当用户新建一个页面后,在工作区的左上角将显示页面的名称。如果用户同时打开多个页面,则工作区将以卡片的形式将所有页面排列在一起。
34、熟悉AxureRP9的工作界面工作区当页面过多时,用户可以单击工作区右上角的“选择与管理标签”按钮。在弹出的下拉列表中选择命令,执行关闭当前标签、关闭全部标签、关闭其他标签或跳转到其他页面的操作。自定义工作界面自定义工具栏工具栏由基本工具和样式工具两部分组成。执行“视图工具栏”命令,取消对应选项的选择,即可将该工具隐藏。课堂操作自定义基本工具列表执行“视图工具栏自定义基本工具列表”命令。弹出下图所示对话框。课堂操作自定义基本工具列表对话框中显示在工具栏上的工具前面都有一个图标。用户可以根据个人的操作习惯,单击取消或者添加工具选项,从而自定义工具栏。课堂操作自定义
35、基本工具列表取消勾选对话框底部的“显示图标下方的文本”复选框。将隐藏工具栏上图标对应的文本,单击“完成”按钮,自定义工具栏效果如下图所示。自定义工作界面自定义工作面板用户可以通过执行“视图功能区”命令,选择需要显示的面板。用户可以选择执行“视图重置视图”命令。将操作造成的混乱视图重置为最初的界面布局视图。重置后的视图将恢复到默认视图状态。自定义工作界面使用单键快捷键在AxureRP9中,用户可以使用新增的单键快捷键更快地完成产品原型的设计与制作。首先按键盘上的一个字母键,然后在工作区单击并拖动即可生成相应类型的小部件。AxureRP9中支持的单键快捷键如下图所示。按
36、【T】键,在工作区中单击,直接输入文本,效果如下图所示。自定义工作界面使用单键快捷键执行“文件偏好设置”命令,弹出“偏好设置”对话框。切换到“画布”选项卡,可以选择取消勾选“启用单键快捷键”复选框。关闭该功能后,选中元件时输入文本,即可在该元件上快速添加文本。使用AxureRP9的帮助资源用户在使用AxureRP9软件的过程中,如果遇到问题,可以通过“帮助”菜单寻求解答。使用AxureRP9的帮助资源初学者可以执行“帮助在线培训”命令,进入AxureRP9的教学频道,跟着网站视频学习软件的使用方法,在线培训页面如下图所示。执行“帮助在线帮助”命令可解决一
38、对AxureRP9的工作界面进行了深度的剖析。在帮助读者了解和熟悉工作界面的同时,也针对优化和自定义工作界面进行了详细的介绍,为后面内容的学习打下基础。课后练习自定义草图工作区启动AxureRP9软件。执行“视图功能区”命令。课后练习自定义草图工作区根据设计制作草图的需求,取消“母版”“交互”“说明”选项的选择。完成自定义工作区的操作。将没有使用的面板隐藏,更有利于草图的设计制作。课后测试选择题1下列选项中不属于AxureRP9内建元件的是()。A按钮B图片C导航D下拉列表课后测试选择题2AxureRP9的菜单栏按照功能划分为()个菜单。A5B9C3
39、D6课后测试选择题3下列选项中能够进入AxureRP9的教学频道,跟着网站视频学习软件的使用方法的是()。A官方论坛B检查更新C在线帮助D在线培训课后测试填空题AxureRP9中的工具栏由上半部的基本工具和下半部的样式工具两部分组成。AxureRP9有两种选择模式,分别是相交选中和包含选中。在AxureRP9中一共为用户提供了8个功能面板,分别是页面、概要、元件、母版、样式、交互和说明。用户同时打开多个页面文件,则工作区将以卡片的形式将所有页面排列在一起。用户可以选择执行“视图重置视图”命令,将操作造成的混乱视图重置为最初的界面布局。课后测试操作题下载安装并启动
40、AxureRP9软件,完成工作界面工具栏和面板的自定义操作。谢谢观赏AxureRP9互联网产品原型设计(慕课版)页面管理与自适应视图使用欢迎界面在启动AxureRP9时,会自动弹出“欢迎使用AxureRP9”对话框。用户可以通过单击该对话框右下角的“新建文件”按钮,新建一个Axure文件;单击“打开文件”按钮,打开.rp格式的文件,在AxureRP9中编辑修改。使用欢迎界面用户单击“WhatsNewinAxureRP9”链接可以进入官网关于AxureRP9新增功能的页面;单击“Forum”链接可以访问Axure的论坛,与全世界的Axure用户交
41、流、学习制作心得;单击“LearnandSupport”链接可以进入Axure官网获得学习资料和资源。使用欢迎界面汉化后的AxureRP9欢迎界面将左下角的3个链接更改为“新的功能”“汉化下载”“中文教材”。用户可以根据个人的需求单击链接访问对应的内容。使用欢迎界面单击界面右侧顶部“打开导览文件”选项。即可打开Axure官方提供的使用说明文件。界面右侧中部显示了最近编辑的10个文件,用户单击即可快速打开最近编辑的文件。新建和设置Axure文件在开始设计制作产品原型之前,要新建一个Axure文件,确定原型的内容和应用领域,以保证最终完成内容的准确性。不了解清楚产品
43、认尺寸,下次新建文件时自动显示。新建和设置Axure文件文件存储执行“文件保存”命令,弹出“另存为”对话框,输入文件名、选择保存类型后,单击“保存”按钮,即可保存文件。新建和设置Axure文件文件存储当前文件保存后,再次执行“文件另存为”命令,也会弹出“另存为”对话框。执行此命令通常是为了获得文件的副本,或者打开一个新的文件。新建和设置Axure文件文件存储RP文件格式RPPRJ文件格式RPLIB文件格式UBX文件格式课堂操作设置自动备份执行“文件自动备份设置”命令,弹出“偏好设置”对话框。勾选“启用备份”复选框,即可启动自动备份功能。在“备份间隔”的文本框中输入希望间
45、页面”面板右上角的“添加页面”按钮,完成页面的添加。添加页面的效果如下图所示。添加和删除页面页面管理为了方便进行页面管理,通常将同类型的页面放在一个文件夹下。单击“页面”面板右上角的“添加文件夹”按钮,即可完成文件夹的添加。添加文件夹的效果如下图所示。添加和删除页面页面管理用户如果希望在特定的位置添加页面或文件夹,首先在“页面”面板中选择一个页面,然后单击鼠标右键,在弹出的快捷菜单中选择“添加”命令,即可完成添加。添加和删除页面页面管理“添加”下包含“文件夹”“上方添加页面”“下方添加页面”“子页面”4个命令。添加和删除页面文件夹:将在当前文件下创建一个文件夹。上方添加页面:将在
46、当前页面之前创建一个页面。下方添加页面:将在当前页面之后创建一个页面。子页面:将为当前页面创建一个子页面。页面管理添加和删除页面用户如果想要删除某个页面,可以首先选择想要删除的页面,然后按【Delete】键完成删除操作;也可以在页面上单击鼠标右键,在弹出的快捷菜单中选择“删除”命令,完成删除操作。页面管理添加和删除页面如果当前删除页面中包含子页面,则在删除该页面时,系统会自动弹出“警告”对话框,以确定是否删除当前页面及其子页面。单击“是”按钮则删除当前页面及其所有子页面,单击“否”则取消删除操作。页面管理移动页面用户如果想移动页面的顺序或更改页面的级别,可以首先在“页面”面
47、板上选择需要更改的页面,然后单击鼠标右键,在弹出的快捷菜单中选择“移动”命令下的移动命令。页面管理移动页面上移:将当前页面向上移动一层下移:将当前页面向下移动一层降级:将当前页面转换为子页面升级:将当前子页面转换为独立页面页面管理搜索页面一个产品原型项目的页面少则几个,多则几十个,为了方便用户在众多页面中查找某一个页面,AxureRP9为用户提供了搜索功能。单击“页面”面板左上角的“搜索”按钮,在页面顶部出现搜索文本框。输入要搜索的页面名称后,即可显示搜索到的页面。页面管理剪切、复制和粘贴页面用户可以在页面上单击鼠标右键,在弹出的快捷菜单中选择“剪切”命令,即可将页面
48、剪切至内存中。选择“复制”命令,即可将页面复制至内存中。页面管理剪切、复制和粘贴页面选择想要将页面放置的位置,单击鼠标右键,在弹出的快捷菜单中选择“粘贴”命令,即可将剪切或复制的内容粘贴到此位置。粘贴页面效果如下图所示。页面管理重复页面原型项目中有一些页面结构基本一致,只是图片或文字内容不同,用户可以通过复制页面并修改内容完成制作。在需要复制的页面上单击鼠标右键,在弹出的快捷菜单中选择“重复页面”命令,即可为当前页面创建一个副本。如果想要将页面及其子页面一起复制,则需要选择“重复分支”命令,效果如下图所示。页面设置新建页面后,用户在“页面”面板中双击想要编辑的页面,即可进入
49、页面编辑状态。默认状态下,页面显示为背景色为白色的空白页面。用户可以通过“样式”面板完成页面的设置工作。用户可以在“样式”面板中对页面尺寸、页面排列、填充和低保真度等属性进行设置。页面设置默认情况下,“页面尺寸”设置为“Auto”(自动),单击右侧的图标,用户可以在弹出的下拉列表中选择预设的移动设备页面尺寸。选择“Web”(网页)选项,用户可以在文本框中手动设置页面的宽度,如图3-38所示。选择“自定义设备”选项,用户可以在文本框中手动设置页面的宽度和高度。页面尺寸页面设置在选择“Auto”(自动)和“Web”(网页)选项时,用户可以在“样式”面板中设置“页面排列”的方式,有左
50、侧对齐和居中对齐两种方式。页面制作完成后,单击工作界面右上角的“预览”按钮,对比两种对齐方式的效果。页面排列页面设置为了实现更丰富的页面效果,用户可以为页面设置“颜色”填充和“图片”填充。单击“颜色”图标,弹出拾色器面板。用户可以选择任意一种颜色作为页面的背景色。页面填充页面设置单击“图片”图标,弹出下图所示的面板。单击“选择”按钮,选择一张图片作为页面的背景。单击图片缩略图右上角的图标,即可清除页面中的图片背景。页面填充页面设置默认情况下,图片填充的范围为AxureRP9的整个工作区。填充方式为“不重复”,单击右侧的重复背景图片图标,可以在弹出的下拉列表中选择其他的填
51、充方式。页面填充页面设置不重复:图片将作为背景显示在工作区内。重复图片:图片在水平和垂直两个方向上重复,覆盖整个工作区。水平重复:图片在水平方向上重复。页面填充页面设置垂直重复:图片在垂直方向上重复。填充:图片等比例缩放填充整个页面。页面填充页面设置适应:图片等比例缩放置于工作区。拉伸:图片自动缩放填充整个工作区。页面填充页面设置用户通过单击“对齐”选项的9个方框,可以将背景图片显示在页面的左上、顶部、右上、左侧、居中、右侧、左下、底部和右下等位置,下图所示为将背景图片放置在右下位置。页面填充页面设置一个完整的项目原型,通常包含很多的图片和文本素材。为了获得好的预览效果,很
52、多图片采用了较高分辨率的图片素材,而过多的素材会影响整个项目原型的制作流畅度。AxureRP9为用户提供了低保真度模式,以解决由于制作内容过多造成的制作过程中出现卡顿的问题。单击“样式”面板中“低保真度”选项后面的图标,即可进入低保真度模式。页面中的图片素材将以灰度模式显示,英文文本将替换为手写字体形式。低保真度课堂操作启动AxureRP9,单击选择“样式”面板“页面尺寸”下拉列表中的“iPhone8(375667)”选项。新建页面效果如下图所示。新建iOS系统页面课堂操作单击“样式”面板“填充”选项右侧的“颜色”图标,在弹出的拾色器面板中选择下图所示的颜色。填充背景颜色效
53、果。新建iOS系统页面课堂操作单击“图片”图标,在弹出的面板中单击“选择”按钮,选择“素材第3章301.png”文件,选择填充方式为“适应”。填充背景图片效果如下图所示。新建iOS系统页面课堂操作用户可以在“样式”面板中创建并应用样式。单击“默认”选项后面的“管理页面样式”按钮,弹出“页面样式管理”对话框。创建并应用页面样式课堂操作用户可以根据项目中页面的类型创建不同的样式。单击“页面样式管理”对话框顶部的“添加”选项,即可创建一个页面样式。用户可以在“页面样式管理”对话框右侧选择设置页面的不同样式。创建并应用页面样式课堂操作单击“确定”按钮,即可完成页面样式的创建。在“页
54、面”面板中新建一个页面,单击“样式”面板上的“默认”选项,在弹出的下拉列表中选择刚刚创建的样式。样式应用页面效果如下图所示。创建并应用页面样式页面设置用户可以在“页面样式管理”对话框中对页面样式进行复制、上移、下移和删除操作。页面样式页面设置用户可以在“说明”面板中为页面或页面中的元件添加说明,方便其他用户理解和修改。用户可以直接在“页面概述”下方的文本框中输入说明内容。单击右侧的图标,弹出格式化文本参数,用户可以设置说明文字的字体、加粗、斜体、下画线、文本颜色和项目符号等参数。页面说明页面设置如果需要有多个说明,可以单击页面名称右侧的图标,弹出“说明字段设置”对话框。单击“
55、添加”选项即可添加一个页面说明。页面说明页面设置单击“完成”按钮,即可在“说明”面板上添加页面说明。当页面同时有多个说明时,用户可以在“说明字段设置”对话框中完成对说明的上移、下移和删除操作。页面说明页面设置单击“说明”面板中的“指定元件”选项,在弹出的下拉列表中选择要添加说明的元件,即可在下面的文本框中为元件添加说明。添加说明后的元件的右上角将显示序列数字,该数字与“说明”面板中显示的数字一致。页面说明页面设置单击图标,弹出下图所示的下拉列表。用户可以根据元件的使用情况,选择是否显示元件文字和交互内容。为元件添加说明后,单击该元件,将自动在“说明”面板中显示说明内容。页面说明
56、设置自适应视图早期的输出终端只有显示器,而且显示器屏幕的分辨率基本是一种或者两种,用户只需基于某个特定的尺寸进行设计就可以了。随着移动技术的快速发展,越来越多的移动终端设备出现了,例如智能手机、平板电脑等。这些设备的屏幕尺寸多种多样,而且由于品牌不同,其显示屏幕的尺寸也不相同,这给移动设计师的设计工作带来了更多的难题。为了使一个为特定屏幕尺寸设计的页面能够适合所有屏幕尺寸的终端,则需要对之前所有的页面进行重新设计,还要顾及兼容性的问题和投入大量的人力、物力,而且后续要对所有不同屏幕的多个页面进行同步维护,这是极大的挑战。设置自适应视图下图所示为苹果手机和华为手机的屏幕尺寸对比。为了
57、满足页面原型在不同尺寸终端屏幕上都能正常显示的需要,AxureRP9为用户提供了自适应视图功能。用户可以在自适应视图中定义多个屏幕尺寸,当在不同屏幕尺寸上浏览时,页面的样式或布局会自动发生变化。设置自适应视图自适应视图中的元件会从父视图中集成样式(如位置、大小)。如果修改了父视图中的按钮颜色,所有的子视图中的按钮颜色会随之改变。但如果改变了子视图中的按钮颜色,父视图中的按钮颜色不会改变。单击“样式”面板中的“添加自适应视图”选项。弹出“自适应视图”对话框。设置自适应视图“自适应视图”对话框中默认包含一个基本的适配选项,通过它可以设置最基础的适配尺寸。单击“预设”选项后面的图标
59、ax(414896)”。设置自适应视图课堂操作再次单击“添加”,在“预设”下拉列表中选择“iPad4(7681024)”。单击“确定”按钮,页面效果如下图所示。设置自适应视图课堂操作单击工作区顶部的“iPhone11Pro/XR/XSMax(414896)”,页面效果如下图所示。取消勾选“影响所有视图”复选框,调整元件的大小和分布,页面效果如下图所示。设置自适应视图课堂操作单击工作区顶部的“iPad4(7681024)”,调整元件的大小和分布,页面效果如下图所示。单击工具栏上的“预览”按钮,在浏览器中浏览页面。单击浏览器左上角的“iPad4(7681024)”选项
60、,在下拉列表中选择不同的页面设置选项,预览页面效果。设置自适应视图使用辅助线和网格为了方便用户设计制作产品原型,AxureRP9为用户提供了标尺、辅助线和网格等辅助工具。合理使用这些工具,用户可以及时、准确地完成产品原型设计工作。执行“视图标尺网格辅助线辅助线设置”命令或在页面中单击鼠标右键,在弹出的快捷菜单中选择“标尺网格辅助线辅助线设置”命令,弹出“偏好设置”对话框。默认情况下,辅助线显示在页面的顶层,勾选“底层显示辅助线”复选框,辅助线将显示在页面的底层。使用辅助线和网格勾选“始终在标尺中显示位置”复选框,工作界面的标尺上将自动显示辅助线的坐标。用户可以根据需