原型设计大师——Axure站点地图

合集下载

Axure基本功能介绍

Axure基本功能介绍
模块的面板和站点地图有点类似。可以添加、 组织、编辑。
分享: 刘冬源
2010.08.21
模块面板
资料仅供参考 Axure RP基本功能介绍
模块的行为有三种: 正常、作为背景、自定义组件
正常:这是默认状态,就是修 改模块时,引用到页面的模块会跟 着一起修改。
作为背景:当把模块调用到页 面时会放置底层并且锁定。
点击后打开 高级编辑器
分享: 刘冬源
2010.08.21
简单交互
资料仅供参考 Axure RP基本功能介绍
设置动作
Axure里提供的动作在执行 时是自上而下顺序执行的,在基 本编辑器里,勾选一些动作后, Axure会按照默认的方法生成动 作的执行顺序。当这些顺序不能 满足需求时,可以尝试使用高级 编辑器,可以自定义添加动作、 改变执行顺序。
显示
不显示
分享: 刘冬源
2010.08.21
简单交互
资料仅供参考 Axure RP基本功能介绍
动态面板
动态面板有6种动作: 1. 设置动态面板的转换状态 2. 显示动态面板 3. 隐藏动态面板 4. 切换动态面板可见属性 5. 移动动态面板 6. 将动态面板置为最前
其中前3个用到的最多。第5 个经常配合“等待时间”一起使用。 可以制作一些动态效果。
站点地图是一个页面导航面板, 在这里面可以对所设计的页面进 行添加、删除、重命名和组织
分享: 刘冬源
2010.08.21
常用组件
资料仅供参考 Axure RP基本功能介绍
组件面板中有线框图组件和流程图组件,用这些组件进行线框图和 流程图的设计。这里显示的是所有的组件,后面的一部分是流程图组件
分享: 刘冬源
动态面板

Axure的导航树与面包屑导航设计指南

Axure的导航树与面包屑导航设计指南

Axure的导航树与面包屑导航设计指南在用户体验设计中,导航是一个至关重要的组成部分。

良好的导航设计可以帮助用户快速准确地找到所需信息,提升用户满意度和使用效率。

而Axure作为一款强大的原型设计工具,其导航树和面包屑导航功能更是为我们提供了便利。

本文将介绍如何在Axure中设计出高效的导航树和面包屑导航,以提升用户体验。

一、导航树的设计导航树是一种常见的网站导航方式,通过展示网站的层级结构,帮助用户快速了解网站的组织架构和内容分类。

在Axure中,我们可以通过以下几个步骤来设计导航树:1. 确定网站的层级结构:首先,我们需要明确网站的主要页面和其对应的子页面。

可以通过绘制流程图或者思维导图来帮助我们理清网站的组织结构。

2. 创建主页面:在Axure中,我们可以使用页面组件来创建主页面,并按照网站的层级结构进行命名和分类。

3. 添加子页面:在每个主页面下,我们可以使用子页面组件来添加对应的子页面。

可以使用不同的颜色或者图标来区分不同的页面类型。

4. 设置链接:在每个页面中,我们可以使用链接组件来设置页面之间的跳转关系。

通过拖拽链接组件到相应的页面上,并设置目标页面,即可实现页面之间的跳转。

通过以上步骤,我们可以在Axure中设计出清晰明了的导航树,帮助用户快速了解网站的结构和内容分类。

同时,我们还可以在导航树中添加交互效果,如展开和折叠功能,以便用户更好地浏览和导航。

二、面包屑导航的设计面包屑导航是一种常见的辅助导航方式,通过显示用户当前所处页面的路径,帮助用户快速回溯到上一级页面或者其他相关页面。

在Axure中,我们可以通过以下几个步骤来设计面包屑导航:1. 确定页面层级关系:首先,我们需要明确页面之间的层级关系。

可以通过导航树或者流程图等方式来帮助我们理清页面之间的关系。

2. 添加面包屑导航:在每个页面的顶部或者底部,我们可以添加面包屑导航组件。

可以使用文本组件和链接组件来显示页面的路径,并设置跳转链接。

利用Axure进行用户旅程地图与体验设计

利用Axure进行用户旅程地图与体验设计

利用Axure进行用户旅程地图与体验设计用户旅程地图与体验设计是现代产品设计中不可或缺的环节。

而在实际操作中,Axure是一款功能强大的工具,可以帮助设计师更好地进行用户旅程地图与体验设计。

本文将从介绍Axure的基本功能开始,逐步深入探讨如何利用Axure进行用户旅程地图与体验设计。

首先,我们来了解一下Axure的基本功能。

Axure是一款专业的原型设计工具,其功能强大且易于上手。

它可以帮助设计师创建交互式原型,模拟用户在产品中的实际操作过程,并通过这些原型进行用户测试和验证。

同时,Axure还提供了丰富的交互组件和模板,使设计师能够快速构建出逼真的用户界面。

在进行用户旅程地图设计时,Axure的主要功能之一是创建用户流程图。

通过用户流程图,设计师可以清晰地展示用户在产品中的各个环节的操作流程。

在Axure中,可以使用线条和箭头来表示用户的操作路径,同时还可以添加文字和图标来说明每个环节的具体功能和目的。

通过这种方式,设计师可以更好地理解用户在产品中的行为和需求,从而有针对性地进行体验设计。

除了用户流程图,Axure还可以帮助设计师创建用户故事板。

用户故事板是一种以场景为基础的设计工具,通过场景描述和视觉元素的组合,展示用户在产品中的使用场景和体验过程。

在Axure中,可以使用画布和图形工具来创建用户故事板,并通过添加文字和图标来详细描述用户的行为和感受。

通过用户故事板,设计师可以更加直观地了解用户的需求和期望,从而更好地进行体验设计。

此外,Axure还提供了交互模拟的功能,可以帮助设计师模拟用户在产品中的实际操作过程。

通过添加交互组件和动画效果,设计师可以模拟用户的点击、滑动、拖拽等操作,从而更好地展示产品的交互效果和用户体验。

在Axure中,可以使用交互组件库来添加常见的交互元素,如按钮、输入框、下拉菜单等,同时还可以自定义交互效果,使原型更加逼真和可交互。

除了上述功能,Axure还提供了团队协作和版本管理的功能,使设计师能够更好地与团队成员进行协作和沟通。

Axure RP8原型设计图解第11章

Axure RP8原型设计图解第11章

图11.4 携程旅游网站首页界面
11.1 需求描述
11.2 设计思路
11.3 准备工作 11.4 设计流程 11.5 小结
11.4 设计流程
11.4.1 网站注册表单布局设计
携程旅游网站的注册表单是一个向导型表单。注册分为三个步骤:填写、验证、注册成功。
注册表单内容包含手机号、Email、密码、确认密码等表单项,如图11.5、图11.6所示。
图11.5 填写表单
图11.6 邮箱验证
1. 进入注册页面,拖曳一个图片元件,用“1-状态栏”图片替换图片元件,x、y坐标值
为(0,0);拖曳一个图片元件,用“27-填写向导”图片替换图片元件,x、y坐标值
为(0,0),如图11.7所示。
图11.7 状态栏和表单向导
2. 拖曳一个文本标签元件,文本内容命名为“会员注册 注册成功可获1000积分+返现特权”,
Axure原型设计工具不仅可以设计出低保真的软件原型,同时也可以设计出高保
真原型。 高保真原型的效果,不管在软件界面还是在软件交互上,几乎和真实软件的体验
效果一样。图11.1所示为携程旅游网站首页的原型设计。
图11.1 携程旅游网站首页
11.1 需求描述
11.2 设计思路
11.3 准备工作 11.4 设计流程 11.5 小结
05
PRAT
动切换显示。
图片放大缩小效果制作,需要动态地改变图片的尺寸,以实现图 片放大缩小的效果。
06
11.1 需求描述
11.2 设计思路
11.3 准备工作 11.4 设计流程 11.5 小结
11.3 准备工作
进行高保真原型设计,需要使用大量的图片。在真实项目中,交互设计师会绘制一版低

axure原型图案例模板(原型图axure教程)

axure原型图案例模板(原型图axure教程)

axure原型图案例模板(原型图axure教程)我们讲解了一些关于交互的基本理论知识,比如交互定义、交互事件、交互用例、交互动作。

下面是一些实际应用案例,帮助你加深对交互的理解。

一、导航菜单样式我们以简书导航为例,来说明所涉及的交互风格和交互事件的设置。

01观察交互效果。

通过观察,我们可以看到简书的导航有以下两种交互效果:鼠标悬停在导航上方时,填充色变为灰色鼠标点击导航时,文字变为红色,打开新页面02画线图首先,从目录中拖动三个文本标签到设计区域,设置文本中心,编辑三个文本标签的内容:发现、注意和消息。

三个文本标签在水平方向上等距离分布。

03设置互动事件谁什么时候做了什么?这是上一篇文章中流行的交互定义。

我们总结了主体、事件和动作是交互的三个基本结构。

那么这个案例的交互中这三个基本结构是什么呢?我们来拆解分析一下。

通过观察,我们很容易看出有三种交互:鼠标悬停、选择和鼠标点击。

鼠标悬停样式交互分析谁:发现、关注、新闻当:鼠标点击时。

你做了什么?打开链接并在当前页面加载新页面。

设置:选择文本导航,点击新建交互,在事件列表中选择样式交互“鼠标经过”,将弹出窗口的填充颜色设置为灰色。

鼠标悬停样式选定的样式交互分析谁:发现、关注、新闻何时:选中时。

你做了什么?导航文本颜色变为红色。

交互设置:选择文本导航,点击新建交互,在事件列表中选择样式交互“检查”,在弹出窗口中设置文本颜色为红色。

为了保证同一时间只选择一个导航,我们需要提前将三个导航菜单设置为一组。

选择三个导航菜单,右键选择设置选项组,命名为navigation。

选定的样式鼠标点击事件交互分析谁:发现、关注、新闻当:鼠标点击时。

你做了什么:打开链接,在当前页面加载新页面交互设置:选择文本标签,点击新建交互,在事件列表中选择组件事件“鼠标点击时”,选择目标组件,添加打开链接的动作,选择打开的页面,选择“在页面中打开”作为打开方式。

鼠标点击二、显示/隐藏对话框点击一个组件,切换另一个组件或一组组件的可加性,这在Axure中也很容易实现。

Axure教程(四)示意图和批注

Axure教程(四)示意图和批注

Axure教程(四)示意图和批注axure发表于240天8小时57分钟前来源:标签:Axure教程axure批注axure今天来谈谈Axure的示意图及相关批注的功能,主要从五个方面进行阐述:1.定义Sitemap企划一个网站或Web AP,在动手开始绘制网站页面的示意图(Wireframe)或流程图之前,您应该事先思考网站架构,并决定信息内容与层级。

当您心中已经有了明确的网站架构,接下来就可以利用Sitemap窗格来定义您所设计的网站页面。

Sitemap窗格是用来管理设计中网页的工具,您可以在Sitemap 窗格中可以新增、删除和调整网页层级。

新增/删除网页:想要新增网页的话,请点选Sitemap 工具列上的【Add Child Page】钮。

在网页上按鼠标右键,然后选择「Rename Page」或慢慢的在网页上连续按鼠标左键两下可编辑网页名称。

想要删除网页的话,请点选想要删除的网页,然后按下Sitemap 工具列上的【Delete Page】钮,或是在网页上按下鼠标右键,然后选择「Delete Page」。

调整网页层级:您可以将网页从Sitemap 中拖曳到目标母网页中来移动网页位置,您也可以使用Sitemap 工具列上的箭头按钮来上下移动网页,或改变网页的阶层。

开启网页:在Sitemap中的任一网页上连续按鼠标左键两下,网页会在Wireframe 窗格中开启。

--------------------------------------------------------------------------------2. 以介面物件(Widgets)绘制示意图(Wireframe)介面物件(Widget)是用来设计Wireframe的使用者介面元素,您可以在Widgets 窗格中找到一些常用的Wireframe Widget,例如:Button、Image和Text Panel。

Axure RP 各种Widgets呈现效果,请参考Widgets效果总览在Wireframe中新增介面物件(Widget):想在Wireframe中新增物件的话,只要从Widgets 窗格中将想要新增的物件拖曳(drag&drop)到Wireframe窗格上就可以了。

如何利用Axure进行用户旅程地图设计

如何利用Axure进行用户旅程地图设计在当今数字化时代,用户体验设计已成为产品开发的重要环节。

而用户旅程地图设计作为用户体验设计的一部分,旨在帮助产品团队更好地了解用户在使用产品过程中的心理和行为变化,从而提升产品的用户体验。

Axure作为一款强大的原型设计工具,为用户旅程地图设计提供了便捷的支持和工具。

本文将介绍如何利用Axure进行用户旅程地图设计。

一、用户旅程地图的定义和作用用户旅程地图是一种以用户为中心的设计工具,用于描述用户在与产品或服务进行交互时的整个过程。

它通过展示用户在不同阶段的情感、需求和行为,帮助产品团队更好地了解用户的体验和痛点,从而优化产品设计和用户体验。

用户旅程地图的作用主要有三个方面:1. 了解用户需求:通过用户旅程地图,产品团队可以深入了解用户在每个阶段的需求和期望,从而有针对性地进行产品设计和功能迭代。

2. 优化用户体验:通过用户旅程地图,产品团队可以发现用户在使用产品过程中的痛点和不满,进而改进产品的交互设计和用户界面,提升用户体验。

3. 提升产品价值:通过用户旅程地图,产品团队可以发现用户在使用产品过程中的价值点和关键时刻,从而优化产品的核心功能和特色,提高产品的市场竞争力。

二、Axure在用户旅程地图设计中的应用Axure是一款功能强大的原型设计工具,提供了丰富的交互设计和原型制作功能,非常适合用于用户旅程地图的设计。

1. 创建用户旅程地图页面在Axure中,可以创建一个新的页面作为用户旅程地图的绘制区域。

可以根据产品的实际情况,选择横向或纵向的布局方式,并设置适当的页面大小和比例,以便于绘制用户旅程地图的各个阶段和细节。

2. 绘制用户旅程地图的各个阶段在Axure中,可以使用丰富的绘图工具和图形库,绘制用户旅程地图的各个阶段。

可以使用矩形、圆形、箭头等形状,表示不同的用户行为和状态。

可以使用颜色、线条粗细等属性,表示用户情感和需求的变化。

可以使用文本框和标签,描述用户在每个阶段的具体行为和体验。

Axure原型设计中的模拟用户地理定位与导航功能设计与模拟实现

Axure原型设计中的模拟用户地理定位与导航功能设计与模拟实现随着移动互联网的快速发展,用户对于地理定位与导航功能的需求越来越高。

在Axure原型设计中,模拟用户地理定位与导航功能的设计与实现是非常重要的一部分。

本文将探讨Axure原型设计中如何模拟用户地理定位与导航功能,并提供一些实用的技巧和方法。

一、背景介绍地理定位与导航功能是现代移动应用的核心功能之一。

通过准确获取用户的地理位置信息,并提供精确的导航服务,可以帮助用户更方便地找到目的地,提高使用体验。

在Axure原型设计中,模拟这一功能可以帮助设计师更好地展示产品的交互效果,为用户提供更真实的体验。

二、地理定位的模拟实现在Axure原型设计中,模拟地理定位功能可以通过以下几种方式实现:1. 使用Axure自带的地理定位插件:Axure提供了一些常用的插件,其中包括地理定位插件。

通过在原型中添加地理定位插件,设计师可以模拟用户的地理位置信息。

在实际使用中,可以根据需求设置不同的地理位置,以展示不同的场景。

2. 利用Axure的变量和条件判断:Axure支持使用变量和条件判断来模拟地理定位功能。

设计师可以在原型中设置一个变量,用于存储用户的地理位置信息。

然后,通过条件判断来展示不同的页面内容或交互效果,以模拟用户在不同位置的体验。

3. 结合Axure和第三方地图API:如果需要更精确地模拟地理定位功能,可以结合Axure和第三方地图API来实现。

设计师可以使用第三方地图API获取用户的地理位置信息,并将其传递给Axure原型,以展示相应的交互效果。

三、导航功能的模拟实现在Axure原型设计中,模拟导航功能可以通过以下几种方式实现:1. 使用Axure自带的导航组件:Axure提供了一些常用的导航组件,如菜单、标签等。

设计师可以通过在原型中添加这些组件,来模拟用户的导航操作。

在实际使用中,可以设置不同的导航路径,以展示不同的页面跳转效果。

2. 利用Axure的链接和交互动作:Axure支持使用链接和交互动作来模拟导航功能。

Axure教程:手机版地区选择器原型

今天教大家怎么做一个app版的地区选择器原型,看怎么在Axure中实现~ 该原型内已包含全国一二级省市数据,可以直接使用。

如果需要修改成其他(例如时间选择器),修改页非常方便,因为该原型用中继器做的,所以修改的时候只需要简单填写表格内容即可,也可以当做学习中继器交互的案例。

接下来作者也会尝试做视频教程,如有喜欢该原型或者有什么疑问,希望您能收藏和评论回个6,作者完成视频教程之后,会马上更新。

演示地址:这个中继器非常简单每项加载时,设置中继器内文本框文字=item.column0,鼠标单击文本框时,设置位置文本框文字=column1+column2。

这里其实是两个中继器,先说左边的中继器。

每项加载时,每项加载时,设置中继器内文本框文字=item.column0,如果xuanzhong=1,选中该行,默认第一行选中。

然后将中继器转为动态面板(内面板),之后再转一次动态面板(外面板)。

外面板取消自动调整内容尺寸,自己调节大小;外面板拖动时,垂直拖动内面板;外面板拖动结束时,移动内面板到绝对位置=内面板的y值/中继器每行高度,然后用fixed函数取整数,再乘中继器每行高度。

这样做的目的就可以保证拖动选择不会卡在两个选项中间。

拖动结束时,更新行,先把所有行的选中设为0,即未选中,然后通过计算移动了多少格,选中item.index==移动的格数:(内面板的y值-初始y值)/每行的高度,然后fixed四舍五入后用abs函数去绝对值,再+1。

这样左边中继器就完成了。

然后制作右边中继器,将左边中继器复制过去,插入多一列,把导入后:每项加载时,设置文本框文字=column1,其他不变。

然后左边中继器行被选中时,筛选右边中继器,条件为column0=column1,筛选完成后更新第一行的选中=1。

最后是确定和取消按钮的事件。

鼠标单击确定按钮时,设置城市文本=左边中继器选中的column0+右边中继器选中的column1,然后隐藏该弹窗,鼠标单击取消按钮时,隐藏该弹窗。

使用Axure进行用户故事地图设计

使用Axure进行用户故事地图设计Axure是一款功能强大的原型设计工具,被广泛应用于用户界面设计和用户体验研究。

在设计过程中,用户故事地图是一种非常有用的工具,可以帮助设计师更好地理解用户需求并设计出更符合用户期望的产品。

一、什么是用户故事地图用户故事地图是一种将用户故事与用户旅程结合起来的可视化工具。

它通过将用户故事按照时间顺序进行排列,以地图的形式展示用户在使用产品过程中的各个阶段和重要任务。

用户故事地图可以帮助设计师更好地理解用户的需求和目标,并将这些信息转化为可操作的设计方案。

二、使用Axure进行用户故事地图设计的步骤1. 收集用户故事:在开始设计用户故事地图之前,首先需要收集用户故事。

用户故事是描述用户需求和期望的简短叙述,通常以用户的角度来描述。

可以通过与用户交流、观察用户行为和分析用户反馈等方式来收集用户故事。

2. 创建用户故事地图页面:在Axure中,可以创建一个新的页面作为用户故事地图的画布。

选择一个合适的页面大小和布局,以确保用户故事地图的可视性和易读性。

3. 绘制用户故事地图:在Axure的画布上,可以使用线条、文本框、图标等元素来绘制用户故事地图。

按照时间顺序,将用户故事逐个添加到地图上,并使用箭头线条连接各个故事,以表示用户在不同故事之间的转换和关联。

4. 添加用户旅程:用户旅程是用户在使用产品过程中的各个阶段和重要任务。

在Axure中,可以使用文本框或图标等元素来表示用户旅程,并将其与用户故事进行关联。

通过将用户故事和用户旅程结合起来,设计师可以更好地理解用户在不同阶段的需求和期望。

5. 添加交互元素:除了用户故事和用户旅程,用户故事地图还可以包含其他交互元素,如按钮、表单、弹窗等。

在Axure中,可以使用相应的工具和组件来添加这些交互元素,并与用户故事和用户旅程进行关联。

这样可以更好地模拟用户在使用产品过程中的交互体验。

6. 完善用户故事地图:在绘制用户故事地图的过程中,设计师可以不断完善和调整地图中的元素和关联。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

第2章 Axure站点地图
站点地图呈现树状结构,以主页为树的跟节点,站点地图采用树状结构的优点是可以让我们对我们的产品整体模块和不同栏目、功能单元有一个清晰的认识,采用这种结构也方便对页面进行增加、移动、删除等操作。

站点地图是进行产品原型设计的第一步,通过站点地图可以规划产品的功能模块或者栏目信息,让开发者或者接受者能清晰的了解到产品的基本架构和有哪些功能模块。

比如我们打开百度网站,可以看到有新闻、hao123、地图、视频、贴吧等功能模块,在进行百度网站原型设计时,可以把这些功能模块在站点地图里设计,让我们能快速的知道百度网站有哪些功能模块。

本章主要涉及到的知识点有:
❑站点地图功能条:学会站点地图功能条的使用
❑页面管理:学会对站点地图页面的相关操作,包括增加页面、删除页面、移动页面以及对页面的重新命名
❑生成流程图:通过站点地图生成流程图
2.1 关于站点地图
本节首先介绍站点地图的基本概念,理解站点地图的基本功能以及重要性。

站点地图是进行原型设计的基础,对站点地图的页面规划,这样才能对产品设计有一个清晰的思路。

2.1.1 什么是站点地图
首先打开安装好的Axure RP 7.0原型设计工具,在左侧有一块站点地图区域,图2.1红色线圈内的区域就是站点地图,那么究竟什么是站点地图?站点地图又能干什么呢?在使用站点地图又应该注意哪些问题呢?带着这三个问题,走进站点地图区域。

站点地图区域是由两部分组成,一部分是功能条,是对页面操作的按钮,另一部分是树状结构的页面,采用的和Windows(用官方标准大小写)目录结构一致,通过父与子的页面关系,兄弟和兄弟的页面关系,就这样把要设计的产品页面关系整合起来,形成产品的文档关系。

通过建立站点地图,形成产品文档关系,对产品的功能模块、不同栏目有一个清晰的认识,清楚文件关系与位置,这样让开发者和接受者能清晰的理解设计者的思路。

刚开始工作的时候,发现很多刚毕业的朋友在使用Axure进行原型设计时,对文档的命名与位置摆放都是随心所欲,想到哪就做到哪。

我也不例外,没有好的文档结构规划,没有好的整理习惯。

这样做的后果是每次寻找以前的文档都需要花费很长时间,甚至误删了文档也不知道,也导致开发者不能理解设计者的思路。

图2.1 Axure RP 7.0操作界面
2.1.2 站点地图的功能条
上文提到站点地图由两部分组成,其中一部分就是功能条,如图2.2红色线圈区域所示。

图2.2 站点地图功能条
:为所选择的节点页面创建一个新的同级页面。

:可以为所选择的节点页面创建一个新的同级文件夹,文件夹可以把页面管理起来,如同Windows文件夹一样,把相关文件放置在一起。

:可以实现同等级的页面中,将所选页面的上移一个位置,调整页面的排序。

:可以实现同等级的页面中,将所选页面的下移一个位置,调整页面的排序。

面上方之页面的子页面。

:可以实现页面层级升级,将所选页面的层级升级,升级为父页面的同等级页面。

:将所选页面删除,同时删除其子页面,如果当前页面下含有子页面,Axure会自动提示当前页面有子页面,单击提示中的“确认”后会同时删除所有子页面,同时也可以在所选页面进行单击右键,删除当前街道页面。

:可以检索出站点地图的页面。

2.1.3 站点地图的页面管理
页面管理主要是对页面进行添加页面、删除页面、重命名页面、调整层级页面、调整顺序页面进行管理,添加页面、删除页面、调整层级页面、调整顺序页面操作可以通过功能条或者单击右键进行完成。

重命名页面有三种方式:
❑一是双击当前节点页面进行页面重命名;
❑二是在当前页面上单击右键进行页面重命名;
❑三是通过F2进行页面重命名。

除了这些基本操作外,还有几个比较好用的功能菜单。

在当前节点页面单击右键,可以看到有复制功能,这个复制功能可以复制页面,还可以复制分支,当有一些页面或者分支页面有很多类似之处,我们又不想重新做一遍,那这个复制页面或者复制分支就起很大作用。

除了复制功能还有一个生成流程图功能,通过当前的文档结构,可以生成横向或者纵向的流程图结构。

2.2 实战:一起动手来做一个“百度”的原型UI
我们都比较熟悉百度搜索网站,下面我们一起动手做一个“百度”的站点地图的原型,这个实战是对百度搜索网站进行站点地图的设计、页面的规划,以及对页面的基本操作,通过这个实战演示,我们应该掌握,在进行站点地图使用时,先进行功能模块或者栏目的规划,规划完成后进行功能模块页面的添加、移动或者删除等相关操作。

2.2.1 “百度”产品的页面规划
在浏览器里,打开百度搜索网站,可以看到如图2.3页面:
图2.3 百度搜索网站
在百度搜索网站页面右上角,图2.4红色圈在里面的就是百度搜索网站的功能模块,可以分为新闻、hao123、地图、视频、贴吧、登录、设置、更多产品八个栏目,并且它们是同级栏目,需要建立这八个同级栏目页面。

单击设置栏目,它下面又出现搜索设置、高级搜索、关闭预测、搜索历史、意见反馈五个子栏目,需要在设置这个页面下面建立五个子栏目页面。

图2.4 百度搜索网站-单击设置栏目
2.2.2 增加页面
通过页面规划,已经知道建立哪些栏目页面以及子页面,下面打开AxureRP 7.0原型设计软件进行实际操作。

(1)打开原型设计软件后,首先单击左上角文件,右键把文件另存为“百度一下”,之后对主根进行重命名,单击右键进行重命名,命名为百度一下,如图2.5所示。

图2.5 主根重命名为百度一下
(2)通过页面规划,需要建立八个栏目页面,以及设置栏目下面的五个栏目页面。

通过功能条进行页面添加,首先在主根百度一下页面下面添加八个栏目页面,在页面Page1上单击功能条上新增页面按钮,新增页面如图2.6所示。

图2.6 添加八个栏目页面
(3)在主根下面添加完八个页面后,将这八个页面进行重新命名,重新命名的方式有三种,一是双击某个节点页面重新命名,二是在某个节点页面上单击右键重新命名,三是在某个节点页面F2重新命名,栏目页面分别命名为:新闻、hao123、地图、视频、贴吧、登
录、设置、更多产品,这三种方式我们都可以尝试一下,如图2.7所示。

图2.7 重新命名八个栏目页面
(4)通过同样的方式在设置栏目下面添加五个栏目页面,并重新命名为:搜索设置、
高级搜索、关闭预测、搜索历史、意见反馈,如图2.8所示。

图2.8 新增设置栏目下面的页面
2.2.3 移动页面
移动页面可以将页面进行升序和降序排列以及页面层级的升级和降级操作,下面对设置
栏目页面进行升序排列,排列到同层级页面的第一位置,如图2.9所示。

图2.9 设置栏目升序排列
设置栏目下面有高级搜索栏目,把高级搜索栏目的层级升高一位,让它与搜索栏目同层
级,如图2.10所示。

图2.10 高级搜索栏目升级
2.2.4 删除页面
在进行站点地图页面添加时,有的时候添加页面多或者没有用处的页面,进行页面删除,页面删除的方式有两种,一种是通过功能条进行删除,另一种方式是通过在要删除的节点页面单击右键选择删除进行删除页面,下面对高级搜索栏目页面进行删除以及对设置栏目进行
删除操作,如图2.11所示。

图2.11 高级搜索页面删除
在删除页面过程中,如果当前页面下面有子栏目,在删除的过程中,Axure RP 7.0会给
予删除提示。

2.2.5 生成流程图
站点地图除了新增页面、移动页面、删除页面等页面管理外,站点地图同时提供了生成
流程图功能,流程图对产品的结构有一个清晰的层级关系。

(1)在主根百度一下页面进行单击右键可以看到生成流程图功能,如图2.12所示。

图2.12 生成流程图操作
(2)选择生成流程图功能,可以生成如下栏目结构关系,如图2.13所示。

图2.13 百度搜索网站流程图
通过生成的流程图,可以清晰的看到百度一下网站有哪些栏目以及它们的层级关系。

2.3 小结
本章主要讲述了Axure站点地图的功能按钮的使用,包括新增页面、新增文件夹、升序排列页面、降序排列页面、页面层级升级、页面层级降级以及删除页面等功能按钮的使用,通过在节点页面单击右键也可以完成上述基本功能外,同时可以完成页面、分支的复制以及生成流程图等基本操作。

除了掌握站点地图基本功能使用外,要理解页面规划的重要性,页面规划清晰,产品设计才能有一个清晰思路,让开发者和接受者更能理解设计人员的产品每一个环节设计的目的,通过生成流程图,可以清晰看到产品的功能模块或者栏目之间的关系。

相关文档
最新文档