如何利用axure实现移动端页面拖动展示效果_马特要杀不_新浪博客
如何利用axure实现移动端页面拖动展示效果
当一位有PC端原型设计经验的产品人员，设计移动端产品原型时，遇到的第一个问题可能就是页面拖动的效果了。我们在设计PC端产品时，利用鼠标滚轮进行整个页面的展示，然后到了移动端，利用手指进行拖动，滑动展示整个页面。两种交互方式截然不同。
axure制作移动端产品原型时，会遇到很多难题，建议产品同事尝试一些诸如mockplus等更适合移动端的原型设计工具。当然，axure是完全可以实现移动端交互的，只是我们需要利用动态模板、坐标定位等等方式灵活的实现目标。
接下来进入主题，跟大家分享一下​【如何利用axure实现移动端页面拖动展示效果】
打开axure前，大家不妨先设想一下任务的实现方法：
​1、移动端显示的页面是固定尺寸的，里面的整体页面可能会超出固定尺寸范围，所以我们需要建立一个动态模板，使其成为固定尺寸的页面，而将超长的整体页面放入其中。
2、整体页面必须可以被拖拽，所以整体页面又是一个动态面板
3、在我们使用移动端产品，进入页面后，向下拖拽，一般页面会被下拉，而且上方会出现【放开刷新】的提示​；同理，我们手指上滑，页面被拖至底部，再不停上滑，页面会被上拉，手指放开后，页面下滑至原位。所以我们axure中对整体页面的动态模板需要设置离开顶部或者离开底部时，自动返回原位的交互
这三个实现方法，是我们实现拖动交互的主要思路。接着我们就具体看一下如何在axure中实现目标。​
1、准备工作：打开axure，新建文档，添加一张iphone的背景素材，顶部添加的wifi和电量的信息，以及顶部导航栏（这些素材百度都可以找到，ios8
UIkit），准备工作完毕
​2、🔽添加一个动态面板，这个面板相当于我们的屏幕，所以名字可以称为“固定页面”
​3、🔽动态面板内再添加一个动态面板，这第二个面板相当于我们要展示的内容，需要拖动才能展示整个内容，长度自然也比“固定页面”要长，可以称之为“长内容”
4、​🔽长内容的面板内添加正文内容，这里我添加了一张图片
5、​🔽​接下来先实现长面板的拖动功能，在固定页面内对长内容面板添加onDrag交互，交互的内容是move，而且move
with y,也就是长面只能沿着Y轴拖动
​6、​🔽拖动功能已经实现，我们可以先预览一下已经完成的效果（点击axure操作栏的Preview按钮），尝试着上下拖动图片，结果符合预期，只是拖动后，图片不能复位，那么接下去就要实现复位的功能
​7、🔽为了实现复位，我们需要在固定页面的顶部和底部添加两个判断用的矩形。顶部的矩形我们暂且称之为“上离开判断区域”，顾名思义，当长内容面板向下拖动，离开“上离开判断区域”，长内容需要move到原始的"0,0"坐标，这个交互我们称之为“下拉复位”。判断区域可以设置为透明，与长内容同宽，高度为象征性的2px
​​8、🔽选择长内容面板，在onDrag动作中添加新的交互“下拉复位”，增加触发条件：当area
of widget 长内容 & &is not over
& &area of widget
上离开判断区域。那么首先wait 400ms，接着move 长内容，编辑结果 move to X：0
& & Y：0。
注意：编辑完下拉复位后，这里有一个很重要的改动，在交互栏中，右击将“下拉复位”的else
if条件更改为if。必须这样做，不然下拉复位的动作无法实现。至于这样做的原因，就留给大家思考吧。
​9、🔽上拉复位的动作完成后，我们还要实现下拉复位。首先我们添加一个判断框，边框与填充均为透明，尺寸为长内容的宽度与象征性的2px，定位于固定页的底部
​10、🔽在实现下拉复位的时候，我们给长内容的复原位定为X：0和Y：0，这个很容易理解，长面板向上复位时肯定移动到（0,0）的位置。但现在实现上拉复位，我们需要计算长面板的高度，这是因为长面板拖到底部后，固定页面显示的是长面板的下部分内容。这里可能有些费解，看我的截图也许能帮助理解
11、​🔽经过上一步的操作，我们得知当整个长内容显示到最底部时，整个长内容的定位为（0，-295），接下去就和实现下拉复位一样了，在交互栏onDrag动作中添加交互“上拉复位”，添加触发条件
&&当area of widget
长内容 & &is not over
& &area of widget
下离开判断区域。那么首先wait 400ms，接着move 长内容，编辑结果 move to X：0
& & Y：-295。
编辑完上拉复位后​​，在交互栏中，右击将“上拉复位”的else
if条件更改为if。
​12、​🔽所有条件编辑完毕，查看一下交互栏onDrag动作中的所有交互
13、​🔽大功告成，赶紧运行一下观察效果
​总结：
利用axure实现移动端最基本的上拉与下拉动作是如此复杂，所以我还是建议利用其它原型工具制作移动端原型。然而即便如此，axure还是有其优势，实现静态的页面要比其它原型工具都要便利。
这次的功能实现，还有很多能提升的提升的地方，比如​复位的时候，我们可以添加动效，使得复位时页面的移动更加平滑。诸如此类的改进，还是留给热爱axure的大家去探索吧。
马特要杀不
博客等级：
博客积分：0
博客访问：7,824
关注人气：0
荣誉徽章：使用Axure打造最佳的移动端交互原型教程
使用Axure打造最佳的移动端交互原型教程
一直以来Axure在对移动端原型设计方面的支持都不是十分理想，它没有像目前其它几类原型设计工具(Justinmind、墨刀等)一样提供移动端设备的模板和相关交互组件，但是Axure自由灵活的特性却同样的其它原型设计工具所无法取代的。通过掌握一些设计规范和方法，我们同样可以通过Axure制作出非常完美的移动端演示原型。首先你可以通过以下地址在电脑浏览访问我设计完成的移动端原型模板。1. 选择适合的设计分辨率在开始设计原型之前我们需要做的第一步是选择合适的设计分辨率，目前使用Axure设计移动端原型时普遍采用的是(宽)375px*(高)667px和(宽)414px*(高)736px两种分辨率尺寸，这两种尺寸分别是由目前主流的移动设备Iphone7和Iphone7 PLUS的屏幕分辨率尺寸等比缩放而定义出来的，同时也是Iphone7和Iphone7 PLUS的逻辑分辨率。有朋友可能会疑惑在设计原型的时候为什么不直接采用移动设备实际的分辨率呢？因为这主要考虑到设计时的便携性，毕竟我们输出的原型主要是用于演示而不是视觉稿，所以不需要达到那么高的精度，另外如果按移动设备实际的分辨率进行设计，在对元件进行编辑和排版的时候会是一件很耗费时间的事情，同时也不方便在电脑浏览器上进行查看。本人在进行原型设计的时候一般用的是375px*667px这个分辨率尺寸，因为Axure常用的元件默认的字号一般是14px或18px，这两种字号也刚好匹配Iphone7上常用字号的比例，而且这个分辨率尺寸在电脑浏览器上刚好一屏就可以显示完整。但是如果你采用375px*667px这种分辨率输出的原型在Iphone7 PLUS上进行浏览时，两边会出现部分的空白区域，不过它也已经基本适配各种主流移动端设备了，所以采用这个分辨率尺寸是综合衡量之后的选择。2. 定义内容区域上面已经介绍了为什么选择375px*667px作为移动端原型设计分辨率尺寸，在开始设计之前我们需要先按照这个尺寸在编辑区域中定义好内容区域。我一般是使用辅助线来定义内容区域的，例如下图是用辅助线定义好内容区域的效果。事实上我们在设计时其实不用去限制原型的高度，因为在通过移动端设备进行浏览时可以通过滚动页面查看超出高度部分的内容，这跟实际的移动端产品的操作方式是一致的。而在原型设计的时候，我们还是需要拖一条用于标识原型设计高度的辅助线，它的主要作且是为了标识出首屏的区域范围，这对于布局选择是有一定的参考价值的。3. 神奇的辅助线辅助线的作用除了用来定义内容区域之外，同时它也能帮助我们快捷的进行布局。辅助线有一个特性就是当你拖动元件靠近它时，元件会自动吸附到辅助线的边缘达到快速对齐的效果，对于有对齐强迫症的朋友来说这个特性会感觉无比贴心。辅助线的基本使用方法：鼠标移动到编辑区域的左侧和顶部的标尺区域长按并往编辑区域拖动时就可以生成横向或纵向的辅助线，将辅助线拖动到对应的位置即可。一般除了用辅助线来定义内容区域的之外，我还会新建两条纵向的辅助线用于标识界面左右两侧的留白区域。建议两侧留白区域用10px或者20px，例如本人常用的是20px，因此这两条辅助线的位置分别在X轴的20px和355px的位置。除此之外，我们的元件一般还需要设置左右各20px的填充，用来将文字的显示限定在界面留白区域内。补充几点辅助线的使用小技巧：右击辅助线可以将其锁定，以防止拖动元件时会将辅助线会跟着一起移动；可以通过按住Ctrl拖动创建全局辅助线，全局辅助线就是在所有页面中产生一条相同的辅助线；在“布局—栅格和辅助线—锁定辅助线”中选中可以将所有的辅助线保持锁定状态且无法删除；在“布局—栅格和辅助线—删除辅助线”中可以清除所有页面中的辅助线；在“布局—栅格和辅助线—辅助线设置”中可以修改辅助线的颜色或进行更多设置；4. 更多基础设计规范通过以上几点介绍了我们如何使用辅助线来建立了一个基本的布局规范，而以下是我总结的其它关于移动端原型的基础设计规范。通过掌握这些规范或技巧，可以使最终输出的原型效果更美观和标准，而且能让你的设计效率大大的提升。另外，这些规范或技巧同样基本适用于WEB端的原型设计，不同的主要是设计分辨率和内容区域的定义，以后有机会我会进行整理和分享。列表菜单的高度为45px、导航栏的高度为45px、标签栏和工具栏常用高度为60px；字号一般用偶数，常用的正文字号为12和14px，常用的标题字号为16px和18px；元件的宽度和高度一般为5的倍数，例如45px、100px等；元件的距间和行距一般为10的倍数，常用10px、20px，按住ctrl键通过方向键移动元件，每次移动的距离刚好是10px。5. 页面属性的设置为了方便进行设计我习惯将内容布局向左对齐，而在演示时内容居中显示更符合浏览习惯，所以需要在页面属性设置中将页面排列设置为水平居中,另外，页面的背景色推荐设置为#F9F9F9。6. 导航栏的设置导航栏是移动端APP中最常见的元件之一，它的位置一般是固定在界面最顶部的，所以建议将导航栏转换为动态面板，然后在面板的属性设置中设置为“固定到浏览器”，水平固定选项为“居中”，垂直固定选项为“上”，具体设置如下图：7. 标签栏或工具栏的设置标签栏或工具栏的位置一般是固定在界面最底部的，同样我们也需要将标签栏或工具栏转换为动态面板，然后在面板的属性设置中设置为“固定到浏览器”，水平固定选项为“居中”，垂直固定选项为“下”。通过这样的设置以后在有标签栏或工具栏的页面中，如果你的页面内容已经超出了一屏的高度，我们通常需要在内容正文区域的底部放置一个与标签栏或工具栏高度一致的热区元件当作占位符，它的作用是用来解决原型演示时标签栏或工具栏会挡住页面内容的情况。8. 模态窗口交互设置模态窗口交互是移动端产品中最常见的交互方式之一，它主要用作显示系统的重要信息，并请求用户进行操作反馈，例如：删除某个重要内容时，弹出对话框进行二次确认。在原型中我们可以通过简单的设置，实现跟移动端APP一致的模态窗口效果。移动端模态窗口演示效果：首先同样需要新建一个模态窗口的动态面板，在面板的属性设置中设置为“固定到浏览器”，水平固定选项为“居中”，垂直固定选项为“下”。然后再在触发模态窗口的交互事件中按以下方式进行设置，重点是勾选“置于顶层”选项和设置“灯箱效果”，灯箱效果的背景颜色和透明度可以根据需要进行自定义。关于具体的设置和演示效果，可以参照我将在后面推荐的移动端元件库。9. 输出选项的设置到此为止已经介绍了关于移动端原型设计的一些规范和常用元件及交互效果的设置，那么当我们的原型设计完成以后在生成HTML之前我们还需要进行几项简单的设置。设置位置：发布—生成HTML-移动设备，在界面中勾选“包含视口标签”，设置宽度为：device-width，设置缩放为：no，其它选项为空就可以了。另外，你还可以设置主屏图标，然后在IOS设备中通过safari浏览器打开原型，就可以直接将它添加到主屏幕中了。通过主屏访问原型时将不会显示浏览器的相关工具界面，最终的演示效果几乎是跟操作实际的APP是一致的，你甚至可以根据需要定义状态栏的颜色。设置方式：启动safari浏览器打开原型地址—点击浏览器底部的设置图标(正中间)—添加到主屏幕——完成添加即可。大家可以尝试使用下方演示地址进行添加看看效果。添加到主屏和最终运行时的效果：按照上述的设置之后，你将原型生成为HTML文件之后上传到你的服务器或原型托管平台，通过手机访问原型链接演示即可。10. 其它的补充说明如果我们设计的移动端原型不需要考虑在手机上演示的场景，仍然可以参照本文中相关的规范。我一般会在编辑区域放置一个设备模板，新建一个内容框架的动态面板用来放置页面的主要内容，而这个内容框架的尺寸同样是我们之前定义的内容区域尺寸(宽)375px*(高)667px。另外，内容框架的动态面板的属性中需要将滚动条设置为“自动显示垂直滚动条”，这样当框架的内容超出时可以拖动滚动条进行查看。通过添加设备模板的设计区域效果通过使用设备模板可以让输出的原型效果更标准和规范，如果我们在编辑界面中放置了设备模板，则不再需要对导航栏、标签栏或工具栏、模态窗口等动态面板进行固定到浏览器设置，你只需要拖动到设备模板对应的位置并置于内容框架上方即可。如果你需要获取相关设备模板的图片，请通过下面的下载地址获取到。这套素材中包含了iphone、Android、IPAD等各种机型常用模板，而且都已经按标准尺寸定义好，只需要直接下载使用即可。使用方法：在创建Axure原型文件时建立一个模板母版，然后将设备图片导入到母版中，再将母版拖至设计界面区域。常用移动端设备模板素材11. 移动端元件库分享最后分享的是AxureUX交互原型移动端元件库精简版，这套元件库基本是按照本文所介绍的相关规范和标准进行制作的，共由常用组件、信息输入、信息输出、信息反馈、综合系列等五大元件类型组成，其中还包含各类移动端基本元素、动态交互组件，以及各类常用界面模板，能助您快速的输出友好美观的移动端交互原型。相关截图：本文由 @windir 原创发布于人人都是产品经理。未经许可，禁止转载。
本文仅代表作者观点，不代表百度立场。系作者授权百家号发表，未经许可不得转载。
百家号 最近更新：
简介: 热衷于搞笑短片、段子
作者最新文章axure制作手机APP滑动屏幕，实现上下滚动屏幕效果__人人笑我笑人人__新浪博客
axure制作手机APP滑动屏幕，实现上下滚动屏幕效果
脑图概览
1.控件：顶部导航和底部导航（矩形：300*30），前面板（动态面板：300*360），后面板（动态面板：300*720）
2.填充：在后面板的状态里添加控件，方便查看滑动的效果。
3.事件：添加拖动事件
①选中【前面板】，选择事件【拖动时】双击添加事件。在用例编辑器中选择【移动】
②编辑用例，选择【后面板】【垂直拖动】，确定。
③选中【前面板】，选择事件【拖动结束时】，添加条件【后面板】【未接触】【顶部导航】，确定。
④编辑动作，将【后面板】移动至【（0，0）】位置，选择【摇摆】
【200ms】，确定。
⑤添加第二个【拖动结束时】事件，设置条件，【后面板】接触【顶部导航】，未接触【底部导航】，确定。
⑥设置动作，移动【后面板】至【（0，-360）】【摇摆】【200ms】（-360=360-720），确定。
⑦最后比较重要的一步，在用例上右键把条件切换一下，改【else if】为【if】。
⑧效果预览（动态图，点击大图可预览效果）
本文的原型，链接: /s/1kVlRWGJ 密码: 3sx4
_人人笑我笑人人_
博客等级：
博客积分：0
博客访问：11,542
关注人气：0
荣誉徽章：