Axure
- 格式:pdf
- 大小:1.08 MB
- 文档页数:8
axure 使用方法
Axure RP是一个专业的原型设计工具,可以帮助用户创建出高品质的原型,以演示产品功能和交互。
以下是一些使用Axure的基本步骤:
1. 创建页面:在开始设计之前,需要先创建页面。
在Axure中,可以通过点击顶部菜单栏的“文件”->“新建”来创建一个新的页面。
2. 设计布局:在页面中,可以添加各种元素,如文本框、按钮、图片等。
这些元素可以通过拖拽的方式添加到页面中,并可以通过调整它们的大小和位置来设计布局。
3. 设置交互:Axure支持为元素添加各种交互效果,如点击、鼠标悬停等。
可以通过选择元素,然后在右侧的“属性”面板中添加交互事件,并设置相应的动作来实现。
4. 添加样式:可以通过样式面板来设置元素的样式,如字体、颜色、背景等。
5. 预览原型:在完成设计后,可以通过点击顶部菜单栏的“预览”按钮来查看原型的效果。
预览模式下,可以查看页面的所有交互效果,以便发现和修改问题。
6. 发布原型:当原型设计完成后,可以将其发布到Axure的云服务器上,以便其他人查看和测试。
发布后,可以通过生成的链接分享原型给其他人。
以上是使用Axure的基本步骤,当然还有很多高级功能和技巧可以学习。
建议查阅Axure 的官方文档或参加相关的培训课程来深入学习。
Axure的常用界面和工具介绍Axure是一款广泛应用于界面设计和原型制作的工具,它提供了丰富的功能和工具,帮助设计师快速创建出高质量的交互原型。
本文将介绍Axure常用的界面和工具,帮助读者更好地了解和使用这款软件。
一、界面介绍Axure的界面简洁明了,主要由菜单栏、工具栏、画布和交互控制面板组成。
菜单栏提供了各种功能选项,如文件操作、编辑、视图、预览等。
工具栏则包含了常用的绘图工具,如选择工具、画笔工具、文本工具等。
画布是设计师进行绘图和布局的区域,可以自由拖拽和调整大小。
交互控制面板是设计师设置交互行为和动画效果的地方,可以通过简单的拖拽和设置实现各种交互效果。
二、工具介绍1. 组件库Axure提供了丰富的组件库,包含了各种常用的界面元素,如按钮、输入框、下拉菜单等。
设计师可以直接拖拽这些组件到画布上,快速构建界面布局。
组件库还支持自定义组件的创建和导入,方便设计师根据项目需求进行定制。
2. 交互控制Axure的交互控制功能非常强大,设计师可以通过简单的设置实现各种交互效果。
例如,可以设置按钮的点击事件,实现页面跳转或弹出提示框;还可以设置元素的拖拽事件,实现拖拽排序或拖拽放大缩小等功能。
交互控制面板提供了丰富的选项和设置,设计师可以根据需要进行灵活调整。
3. 动态面板动态面板是Axure中一个非常实用的功能,它可以帮助设计师创建复杂的交互效果和动画。
通过动态面板,设计师可以模拟页面的滑动、展开、折叠等效果,使原型更加生动和具有真实感。
动态面板还支持多种状态的切换,设计师可以根据用户的操作和反馈,动态改变面板的状态,实现更加智能的交互。
4. 注释和标注在设计过程中,设计师通常需要与团队成员或客户进行沟通和交流。
Axure提供了注释和标注的功能,设计师可以在界面上添加文字、箭头等标注,解释设计意图或指导开发人员的实现。
这样可以避免因为沟通不畅而导致的误解和错误,提高工作效率和准确性。
5. 团队协作Axure还支持团队协作的功能,设计师可以将项目保存到云端,与团队成员共享和协作。
axure高级用法
Axure的高级用法如下:
1.使用变量:Axure中可以使用全局变量和局部变量。
全局变量是一个数据容器,用来存放数据,作用范围为整个页面。
局部变量只能依附于已有组件的使用,不能直接赋值,作用范围为一个case里面的一个事务。
2.使用动态面板:动态面板是一个多层容器,包含多个状态,通过各种各样的交互事件达到切换面板状态,产生用户视觉感受切换的效果。
任何情况下只有一种状态是可见的,或者整个面板处于隐藏状态。
3.使用中继器:中继器也能被其他元件交互,对中继器进行增删改查的操作。
axure 常用功能的使用手册【实用版】目录1.Axure 常用功能的使用手册概述2.Axure 的页面布局功能3.Axure 的交互功能4.Axure 的动态面板功能5.Axure 的自定义功能6.Axure 的实用技巧与注意事项正文Axure 常用功能的使用手册概述Axure RP 是一款专业的原型设计工具,广泛应用于网站、APP 等各种产品的原型设计。
本文将为您介绍 Axure 的常用功能,帮助您更高效地完成原型设计工作。
一、Axure 的页面布局功能1.页面划分:通过“页面划分”工具,可以轻松地将页面划分为不同的区域,以便放置不同的控件。
2.控件对齐:Axure 支持多种对齐方式,如左对齐、右对齐、顶部对齐等,让您的页面布局更加规范。
3.页面跳转:通过设置“页面跳转”,可以实现页面间的无缝切换,提高用户体验。
二、Axure 的交互功能1.事件触发:Axure 支持多种事件触发方式,如单击、悬停、滚动等,可以根据需求设置相应的事件。
2.动态效果:Axure 提供丰富的动态效果,如淡入淡出、滑动等,可以让您的原型更具生动性。
3.交互组件:Axure 内置了丰富的交互组件,如按钮、菜单、表单等,方便您快速搭建交互场景。
三、Axure 的动态面板功能1.创建动态面板:通过“创建动态面板”功能,可以轻松创建可重复使用的控件组。
2.设置面板状态:Axure 支持多种面板状态,如默认状态、悬停状态、选中状态等,可以满足不同场景的需求。
3.面板交互:Axure 允许您为动态面板设置交互,如显示、隐藏等,提高原型的交互性。
四、Axure 的自定义功能1.自定义样式:Axure 支持自定义样式,您可以根据需求调整控件的颜色、字体等样式。
2.自定义组件:Axure 允许您创建自定义组件,从而满足您的特殊需求。
3.自定义函数:Axure 支持自定义函数,您可以通过编写 JavaScript 代码实现更复杂的功能。
axure 常用功能的使用手册摘要:一、引言1.Axure简介2.Axure常用功能概述二、Axure基本操作1.界面布局2.元素创建与编辑3.页面管理与切换三、交互与动画1.交互事件2.动画设置3.动态面板四、元件库与样式管理1.元件库的导入与创建2.样式设置与应用3.团队协作与共享五、原型测试与优化1.测试工具与功能2.测试结果分析与优化3.跨平台适配六、案例实战1.移动端界面设计2.Web端界面设计3.复杂交互场景实现七、总结与拓展1.Axure进阶技巧2.行业应用案例分享3.Axure相关资源推荐正文:一、引言1.Axure简介Axure是一款强大的原型设计工具,广泛应用于互联网、软件开发、设计等领域。
它可以帮助设计师快速制作高质量的原型,提高设计效率,减少开发成本。
Axure具备丰富的功能,可以满足各种设计需求。
2.Axure常用功能概述在本手册中,我们将详细介绍Axure的常用功能,帮助你更快地熟悉和掌握这款工具。
以下为Axure 常用功能概述:- 基本操作:包括界面布局、元素创建与编辑、页面管理与切换等。
- 交互与动画:涵盖交互事件、动画设置、动态面板等。
- 元件库与样式管理:涉及元件库的导入与创建、样式设置与应用、团队协作与共享等。
- 原型测试与优化:包括测试工具与功能、测试结果分析与优化、跨平台适配等。
- 案例实战:通过移动端界面设计、Web端界面设计、复杂交互场景实现等实例,让你学以致用。
- 总结与拓展:为你提供Axure进阶技巧、行业应用案例分享、Axure相关资源推荐等。
二、Axure基本操作1.界面布局在Axure中,你可以通过拖拽、复制、粘贴等操作进行界面布局。
界面布局主要包括区域划分、元素摆放等,以便于后续的原型设计。
2.元素创建与编辑Axure提供了丰富的元件库,包括基本图形、文本框、图片等。
你可以通过拖拽的方式将这些元件添加到界面上,并使用编辑工具进行调整。
3.页面管理与切换在Axure中,页面管理是必不可少的环节。
axure基本用法===========一、Axure简介-------Axure是一款非常受欢迎的快速原型设计工具,它可以帮助用户快速创建高保真度的产品原型,同时也可以用于产品设计和开发。
通过Axure,你可以创建动态、交互式的原型,并模拟各种用户行为和场景。
--------### 1. 创建项目首先,打开Axure软件,创建一个新的项目。
在创建项目时,你需要选择一个合适的名称和保存位置。
### 2. 添加页面在Axure中,你需要通过添加页面来构建原型的基础结构。
你可以通过菜单栏中的“页面”选项来添加新的页面。
在页面编辑器中,你可以设置页面的标题、背景色、导航栏等。
### 3. 添加元素在每个页面中,你可以添加各种元素,如按钮、文本框、图像、列表等。
你可以通过工具栏中的相应工具来选择和放置元素。
同时,你也可以通过属性面板来编辑元素的属性,如大小、位置、颜色、字体等。
### 4. 交互设计Axure的强大之处在于它的交互设计功能。
你可以通过设置元素的交互事件,如点击、悬停、按下、松开等,来模拟各种用户行为。
同时,你还可以设置元素的动态效果,如淡入淡出、滑动、缩放等。
### 5. 预览原型完成原型的设计后,你可以通过菜单栏中的“预览”选项来查看原型。
在预览模式下,你可以测试各种用户行为和交互效果,并随时调整原型的设计。
### 6. 导出原型最后,你可以将原型导出为多种格式,如HTML、PNG、PDF等,以便在各种设备和平台上进行测试和展示。
--------### 1. 动态面板和交互效果Axure提供了许多高级的交互效果和动态面板,如滑动门、时间轴、条件逻辑等。
这些功能可以帮助你创建更加复杂和精细的交互设计。
### 2. 页面串联和跳转在Axure中,你可以将多个页面串联起来,形成一个完整的使用流程。
同时,你也可以设置页面的跳转和返回机制,以实现更加灵活的用户体验。
### 3. 变量和函数Axure支持使用变量和函数来增强你的设计逻辑和可复用性。
axure的用法Axure是一种快速原型设计工具,用于创建用户界面和交互设计的模型。
Axure具有以下用法:1. 设计原型:使用Axure可以快速创建具有交互功能的原型设计。
用户可以添加页面、部件、交互元素、状态和动画效果,以实现更贴近最终产品的界面设计。
2. 界面设计:Axure提供了多种预设的界面部件和模板,使用户可以轻松设计出符合用户体验和品牌要求的用户界面。
3. 交互设计:Axure允许用户定义不同页面元素之间的交互。
用户可以为按钮、链接、表单等添加交互动作,如点击、滚动、弹出菜单等,以模拟用户在实际使用中的交互体验。
4. 团队协作:Axure支持多人协作,团队成员可以同时编辑同一个原型设计,进行实时协作,并通过评论和批注功能进行沟通和反馈。
5. 导出产物:在设计完成后,Axure可以导出多种格式的产物,如HTML、PDF、PNG、Word等,以便与团队成员、客户或开发人员共享和交流。
总之,Axure是一款强大的原型设计工具,它提供了丰富的功能和工具,帮助用户快速创建高质量的用户界面和交互设计。
当进一步使用Axure时,你可以尝试以下用法:6. 模拟互动流程:Axure允许设计师创建用户可以点击和浏览的互动流程。
你可以创建不同页面之间的过渡效果、链接和导航,模拟用户在应用程序或网站中的导航和流程。
7. 数据驱动设计:Axure允许你使用变量和条件逻辑来创建数据驱动的原型。
你可以为表单字段定义规则,验证输入数据并显示不同的结果,模拟实际应用程序中的数据处理和反馈。
8. 设计系统组件:Axure允许你创建可重复使用的设计组件,以便在整个项目中保持一致性。
你可以创建自定义部件库,包含按钮、表单、导航和其他常用元素,以便团队成员可以重复使用和快速创建界面。
9. 用户测试原型:Axure提供了一些功能,如注释、用户反馈和用户浏览记录,帮助你进行用户测试和获取用户反馈。
你可以将原型分享给用户,让他们完成指定任务并记录他们的反馈,以便进一步改进设计。
axure基本用法摘要:一、Axure 简介1.Axure 是什么2.Axure 的优势二、Axure 基本用法1.创建页面2.添加元件3.设置交互4.组织页面三、Axure 高级功能1.动态面板2.条件逻辑3.数据绑定4.页面跳转四、Axure 实战案例1.表单提交2.轮播图3.弹窗提示4.下拉菜单五、Axure 与团队协作1.项目管理2.版本控制3.团队协作正文:Axure 是一款强大的原型设计工具,广泛应用于网页、App 等产品的设计和开发。
它可以帮助设计师快速制作高保真原型,减少沟通成本,提高工作效率。
一、Axure 简介Axure 是一款原型设计工具,它可以帮助设计师快速制作高保真原型,减少沟通成本,提高工作效率。
Axure 具有丰富的功能,强大的交互设计能力,支持多种文件格式,是产品设计和开发团队的理想选择。
1.Axure 是什么Axure 是一款专业的原型设计工具,可以用于制作网页、App、软件等产品的原型。
它支持多种设备和分辨率,可以快速创建高保真的原型,帮助设计师更好地表达设计思路,提高沟通效率。
2.Axure 的优势Axure 具有以下优势:丰富的组件库,强大的交互设计功能,支持多种文件格式,高度可定制,易于学习和使用。
二、Axure 基本用法Axure 的基本用法包括创建页面、添加元件、设置交互和组织页面。
1.创建页面在Axure 中,可以通过“页面”工具创建新的页面。
可以设置页面的背景颜色、图片等属性。
2.添加元件在Axure 中,可以通过“元件”工具添加各种类型的元件,如文本、图片、按钮等。
可以拖拽元件到页面上,并设置元件的属性。
3.设置交互在Axure 中,可以通过“交互”工具为元件添加交互效果,如点击、滑动、弹出等。
可以设置交互的触发条件、操作和条件。
4.组织页面在Axure 中,可以通过“页面”工具组织和管理页面。
可以添加页面到“页面”面板,设置页面之间的跳转关系。
axure基本用法Axure是一款强大的原型设计工具,广泛应用于产品设计、UI设计等领域。
以下将介绍Axure的基本用法,帮助大家更好地掌握这款工具。
1.Axure简介与特点Axure是一款功能丰富、易于上手的原型设计工具。
它具有以下特点:- 界面简洁,操作直观- 丰富的元件库和组件库- 强大的动态效果和交互设置- 支持团队协作和版本控制- 生成高保真原型2.Axure基本操作与界面布局Axure的界面主要包括工具栏、菜单栏、工作区域和状态栏。
熟悉这些区域和基本操作,是掌握Axure的基础。
3.Axure元件与组件的使用Axure提供了丰富的元件库和组件库,可以帮助设计师快速搭建原型。
元件分为页面元素和交互元素,组件则可用于构建复杂的交互效果。
4.Axure动态效果与交互设置Axure支持多种动态效果,如渐变、滑动、缩放等。
通过设置交互,可以实现元件间的联动和用户操作反馈。
5.Axure团队协作与版本控制Axure支持多人实时协作,团队成员可以在同一项目中进行修改和讨论。
此外,Axure还提供了版本控制功能,便于管理项目迭代。
6.Axure原型测试与评估在设计过程中,可通过Axure的测试功能邀请用户进行测试,收集反馈意见。
这有助于评估原型的可用性和改进设计。
7.实战案例与应用场景Axure广泛应用于互联网、移动应用、软件等领域。
以下将介绍一些实战案例,帮助大家更好地了解Axure的应用场景。
8.Axure进阶技巧与学习资源熟练掌握Axure进阶技巧,可以提升原型的质量和效率。
同时,学习资源如教程、案例和插件等,可以帮助设计师更深入地了解Axure。
Axure使用中的10个常见问题及解决方案Axure是一款功能强大的原型设计工具,被广泛应用于产品设计和用户体验研究领域。
然而,即使是经验丰富的用户也可能在使用Axure过程中遇到一些问题。
本文将介绍Axure使用中的10个常见问题,并提供相应的解决方案。
问题一:如何导出Axure原型文件?解决方案:在Axure中,可以通过点击“发布”按钮来导出原型文件。
用户可以选择导出为HTML、PDF或者Word文档等格式。
导出后,可以将原型分享给团队成员或者客户进行评审和交流。
问题二:如何创建动态交互效果?解决方案:Axure提供了丰富的交互组件和动作事件,可以帮助用户创建各种动态交互效果。
用户可以通过拖拽组件、设置触发条件和定义动作来实现页面元素之间的交互效果。
问题三:如何实现页面跳转和链接?解决方案:在Axure中,用户可以使用链接组件来实现页面之间的跳转。
只需将链接组件拖拽到页面上,并设置跳转目标即可。
同时,用户还可以通过设置超链接来实现页面元素之间的链接。
问题四:如何创建表单和输入验证?解决方案:Axure提供了表单组件和输入验证功能,可以帮助用户创建交互式的表单。
用户可以通过拖拽表单组件,设置输入字段和验证规则来实现表单功能,并通过添加交互事件来验证用户输入。
问题五:如何进行团队协作和版本控制?解决方案:Axure支持多人协作和版本控制功能。
用户可以通过Axure Cloud或者共享文件夹的方式与团队成员共享原型文件,并进行实时协作和版本管理。
问题六:如何进行用户测试和反馈收集?解决方案:Axure提供了用户测试和反馈收集功能,可以帮助用户收集用户反馈和行为数据。
用户可以通过Axure Cloud发布原型,并使用内置的用户测试工具来收集用户反馈和行为数据。
问题七:如何创建自定义交互组件?解决方案:Axure允许用户创建自定义交互组件,以满足特定的设计需求。
用户可以使用Axure的交互组件库来创建自定义组件,并通过设置交互动作和属性来定义组件的行为。
主流原型设计⼯具“Axure”的简要介绍及简单使⽤⽰例⽬录:前⾔Axure简介 Axure软件界⾯简介 Axure简单使⽤——登录界⾯Axure优缺点总结前⾔Axure简介 Axure是美国Axure Software Solution公司旗舰产品,是⼀个专业的快速原型设计⼯具,让负责定义需求和规格、设计功能和界⾯的专家能够快速创建应⽤软件或Web⽹站的线框图、流程图、原型和规格说明⽂档。
作为专业的原型设计⼯具,它能快速、⾼效的创建原型,同时⽀持多⼈协作设计和版本控制管理。
Axure的使⽤者主要包括商业分析师、信息架构师、产品经理、IT咨询师、⽤户体验设计师、交互设计师、UI设计师等。
⽬前全球有财富1000⼤的公司和重要机构在使⽤Axure,国内的淘宝、雅虎、腾讯、当当等公司的产品经理也都在使⽤。
⼀、Axure软件界⾯简介 Axure的软件界⾯总的来说,可以分为6⼤模块,如下图所⽰:(1)菜单栏 主要包含⽂件、编辑、视图、项⽬、布局、发布、团队、账户、帮助这8个常见选项,他们包含了该软件⼏乎所有的常⽤操作,下⾯对其他模块的介绍中会主要说明。
(2)⼯具栏 ⼯具栏可分为⼀般的基础⼯具栏与样式⼯具栏。
其中基础⼯具栏包含剪切板、选择模式、连线⼯具等操作;样式⼯具栏主要是对元件样式的管理,以下详细说明: 基础⼯具栏 剪贴板:对元件的剪切、复制、粘贴; 选择模式:包含选择、相交选择; 连线⼯具:⽤于连接元件; 插⼊:绘画、矩形、圆形、线段、⽂本、图⽚、形状; 点:编辑形状的顶点; 顶层:将元件⾄于顶层; 底层:将元件⾄于底层; 组合:将多个元件组合成⼀个整体; 取消组合:将组合拆散; 缩放:缩放⽐例⽀持10%、25%、50%、80%、100%、150%、200%、300%、400%、800%、⾃定义缩放⽐列; 分布:⽔平左侧、居中、右侧,垂直顶部、中部、底部,⽔平平均分布、垂直平均分布; 预览:⽤浏览器预览HTML原型效果; 共享:将原型⽂件上传⾄Axure云端; 账号:登录、退出Axure云端。
Axure培训教程引言Axure是一款专业的产品原型设计工具,广泛应用于互联网、移动应用、软件等领域的产品设计和交互设计。
本教程旨在帮助读者了解Axure的基本功能,掌握Axure的使用技巧,从而能够独立完成产品原型的设计。
第一章:Axure简介1.1Axure概述Axure是一款由美国AxureSoftwareSolutions公司开发的产品原型设计工具,支持Windows和Mac操作系统。
Axure提供了丰富的设计元素和交互功能,可以帮助设计师快速构建产品原型,实现产品设计和交互设计的可视化。
1.2Axure的优势(1)强大的交互功能:Axure支持多种交互效果,如、弹出层、动态面板等,能够模拟真实的产品交互效果。
(2)丰富的设计元素:Axure提供了丰富的图标、按钮、图片等设计元素,方便设计师快速构建原型。
(3)团队协作:Axure支持团队协作,多个设计师可以同时编辑同一个项目,提高工作效率。
(4)兼容性:Axure的原型可以在浏览器中查看,兼容多种设备,方便设计师进行跨平台设计。
第二章:Axure基本操作2.1Axure界面介绍(1)菜单栏:包含文件、编辑、视图、项目、发布等菜单选项。
(2)工具栏:提供常用的绘图工具和操作按钮。
(3)页面面板:显示项目中的所有页面,可以在此添加、删除和重排页面。
(4)部件库:提供丰富的设计元素,如按钮、图片、文本框等。
(5)设计区域:用于绘制和编辑原型。
2.2创建项目(1)启动Axure,“新建项目”。
(2)设置项目名称、保存路径等信息,“创建”。
(3)在页面面板中添加页面,设置页面名称和大小。
2.3添加设计元素(1)从部件库中拖拽设计元素到设计区域。
(2)选中设计元素,在属性面板中设置样式、字体、大小等属性。
(3)调整设计元素的位置和大小,使其符合设计要求。
2.4设置交互效果(1)选中设计元素,在交互面板中添加交互事件。
(2)设置交互条件,如鼠标、键盘按键等。
axure 原理摘要:一、Axure简介1.Axure是什么2.Axure的作用二、Axure原理概述1.Axure的工作原理2.Axure的核心技术三、Axure的具体功能1.原型设计2.互动功能3.团队协作四、Axure的优势与局限1.优势a.用户体验b.高度定制化c.高效原型制作2.局限a.学习曲线b.兼容性问题c.价格因素五、Axure在我国的应用与发展1.我国市场对Axure的需求2.Axure在我国的发展趋势3.Axure在我国的竞争格局正文:Axure是一款原型设计和交互工具,广泛应用于网站、移动应用等产品的设计和开发过程中。
它可以帮助设计师快速制作高质量的原型,模拟真实的用户体验,并实现与开发团队的紧密协作。
Axure的工作原理是通过一系列的拖拽和放置操作,让设计师在短时间内构建出复杂的交互效果。
Axure的核心技术是它的“动态面板”功能,通过这一功能,设计师可以在一个页面上展示多个状态,模拟出实际应用中的各种交互场景。
Axure提供了一系列的功能,包括原型设计、互动功能和团队协作。
原型设计功能可以帮助设计师快速制作出产品的框架和布局,包括页面之间的跳转、页面的布局、元素的样式等。
互动功能则可以让设计师在原型中添加各种交互效果,如点击、滑动、弹出等,模拟真实的用户体验。
团队协作功能则可以让设计师和开发团队在一个平台上进行协作,提高工作效率。
Axure的优势在于其强大的用户体验设计能力、高度定制化的功能和高效的原型制作过程。
然而,Axure的学习曲线较陡峭,对于初学者来说可能需要一定的时间来适应。
此外,Axure的兼容性问题也是一些用户所关注的,特别是在移动设备上的表现可能会有一些问题。
最后,Axure的价格因素也是一些用户考虑的因素,因为其价格相对较高。
在我国,Axure的市场需求非常大,广泛应用于各种互联网和移动应用产品的开发过程中。
随着我国互联网行业的快速发展,Axure在我国的发展趋势也非常乐观。
步骤/方法
第一步:设置按钮的选中效果和组
同时选中xiaoxi和tongxunlu—元件属性与样式“属性”—在“输入选项组名称”中输入“组”(输入其他也可以)
同时选中xiaoxi和tongxunlu—元件属性与样式“属性”—选中—勾选“字体颜色”选择白色—在“填充颜色”选择灰色—点击确定
仅选中xiaoxi—元件属性与样式“属性”—勾选“选中”,使其在一开始页面载入后默认状态为选中。
第二步:设置两层动态面板
通过移动将消息页面和通讯录页面合并在一起,同时选中消息页面和通讯录页面—右键单击—转换为动态面板—设置动态面板名称为“d1”。
在微#界面的展示区域内画一个动态面板,使其大小与展示区域相同并重合,设置动态面板名
称为“d2”.
将动态面板d1复制到动态面板d2的一个子层级里面,并将d2的位置设置为“x:0;y:0”。
第三步:设置横纵向滑动的交互动作
选中动态面板d2—元件交互与说明“交互”—点击“拖动时”—移动—勾选“d1(动态面板)”—移动“垂直拖动”;动画“无”。
完成后结果如下图
选中动态面板d2—元件交互与说明“交互”—点击“向左拖动结束时”—编辑条件—选择“选中
状态”“xiaoxi”“=”“值”“true”。
(如下图)
继续,选择“移动”—勾选“d1(动态面板)”—移动“绝对位置”“x:-320”—点击fx—在“添加局部变量中”设置“d1”=“元件”“d1”—插入变量或函数—在元件中选择“y”—将[[this.y]]改成[[d1.y]]—点击“确定”返回上级页面—动画“线性”,时间“300”毫秒—点击确定。
继续,在添加动作中选择“设置选中”—选中—勾选“tongxunlu”—设置选中状态为“值”“true”。
同理,按照移动相反方向设置“向右拖动结束时”的交互动作,完成后如下图。
第四步:设置上下移动限制条件
通过上面的三步已经可以实现页面横纵向同时滑动,但是会发现一个问题,就是上下滑动的时候可以将消息页面或通讯录页面滑出展示区域外。
为了,更好的体验,下面我们来对上下滑动范围加一个限制条件。
选中动态面板d2—元件交互与说明“交互”—点击“拖动时”—添加条件—选择“值”—点击fx—添加局部变量“d1”=“元件”“d1”—插入变量或函数输入“[[d1.top]]”—点击“确定”返回上级页面—选择“>=”“值”“0”—点击“确定”完成条件编辑
继续,添加动作选择“移动”—勾选“d1(动态面板)”—移动“到绝对位置”“y:0”—点击x后面的“fx”—添
加局部变量“d1”=“元件”“d1”—插入变量或函数输入“d1.x”—点击“确定”完成设置
同理,设置下方的移动限制。
选中动态面板d2—元件交互与说明“交互”—点击“拖动时”—添加条件—选择“值”—点击fx—添加局部变量“d1”=“元件”“d1”—插入变量或函数输入“[[d1.bottom]]”—点击“确定”返回上级页面—
选择“<=”“值”“462”—点击“确定”完成条件编辑
462的由来:462为动态面板d1的高度,需根据你的实际需求来定。
继续,添加动作选择“移动”—勾选“d1(动态面板)”—移动“到绝对位置”“y:-199”—点击x后面的“fx”—添加局部变量“d1”=“元件”“d1”—插入变量或函数输入“d1.x”—点击“确定”完成设置.
-199的由来:动态面板d1与动态面板d2的高度差为-199.
至此,已经完成了移动端原型页面横纵向滑动同时实现的设置了。
本文旨在向大家分享一下我个人对这个问题的解决方案,有什么不对或不好的地方请大家多多谅解。
原型下载地址:
链接:/s/1hsCuA0k 密码:0oha
人人都是产品经理()中国最大最活跃的产品经理学习、交流、分享平台。