童话说说技术创业美文职业
投稿投诉
职业母婴
职场个人
历史治疗
笔记技能
美文纠纷
幽默家庭
范文作文
乐趣解密
创业案例
社会工作
新闻家居
心理安全
技术八卦
仲裁思考
生活时事
运势奇闻
说说企业
魅力社交
安好健康
传统笑话
童话初中
男女饮食
周易阅读
爱好两性

Axure设计:制作iOS列表左滑菜单效果

1月17日 不回头投稿
  该效果是模仿iOS微信界面中,左滑列表时显示菜单项的效果,使用的都是Axure中常用的组件,原理是通过控制动态面板的坐标来移动面板并显示菜单。本文仅适用于具有一定Axure使用经验的用户阅读。
  Axure版本:8。0
  制作步骤为:
  添加中继器添加动态面板添加选项菜单绑定事件
  1。添加中继器
  1)在页面中添加中继器控件,并设置中继器绑定数据,添加后默认效果如下图,如果不熟悉中继器的使用方法,请参考我的其他文章《Repeater(中继器)控件的用法》;
  此时,预览效果如下:
  2。添加动态面板
  1)打开中继器编辑界面,全选所有的组件,点击右键将其转换为动态面板,并命名为panelList,这样转换的目的是动态面板可以响应左滑的动作,如下图所示:
  3。添加选项菜单
  下面添加选项菜单,以下仅以添加一个删除菜单为例进行说明。
  1)在中继器编辑窗口中,添加一个矩形组件并设置好样式,效果如下:
  2)右键点击该矩形组件并将其转换为一个动态面板,命名为panelOption,并将面板设置为隐藏,如下:
  4。添加事件
  该步骤是最核心的环节,整体左滑效果都是在这个环节中实现的。
  1)在中继器编辑窗口中,为panelList添加左滑事件,滑动时让panelList的x坐标相对于当前位置向左移动64px,效果如下:
  注意:x坐标向左移动的距离需要与panelOption的宽度相等。
  2)此时预览原型图,左滑列表已经可以看到动态面板左滑的效果,如下:
  3)继续为panelList面板的左滑事件添加动作,动画显示panelOption,如下:
  4)再次预览,已经出现期望的效果,如下图:
  5)至此,左滑显示菜单的功能以实现,但菜单无法隐藏,下面还需要添加右滑隐藏菜单的功能;
  6)为panelList添加右滑事件,当向右滑动结束时panelList的x坐标相对于当前位置向右移动64px,效果如下:
  注意:此时的当前位置是panelList已经左滑过去的位置,即位置(64,0)。
  7)再次预览,右滑就可以隐藏菜单了。
  5。进阶内容
  细心的读者可能会发现,按照上述方法制作的滑动效果是有瑕疵的,即如果连续左滑或者连续右滑,panelList会一直向左或向右移动,这显然跟实际的效果是有偏差的。以下内容将介绍如何避免这种情况发生,当然如果不追求完美的小伙伴可以不用考虑这个章节的内容哦。
  1)只要在面板滑动时添加一个条件限制左滑或右滑就可以了,方法如下:
  即:
  在panelList的“向左滑动结束时”添加条件,设置只有当面板的x坐标等于0时才可以向左滑动;
  同理,在panelList的“向右滑动结束时”添加条件,设置只有当面板的x坐标不等于0时才可以向右滑动。
  2)上述条件设置完成后,再次预览,发现就只能向左或向右滑动一次啦。
投诉 评论 转载

Axure原型设计:京东官网滚动界面作者分享了自己制作京东官网滚动界面原型的具体操作过程,希望大家可以从中受到些启发。先上京东官网原图(也可以自己搜素京东官网查看)先分析一下这个界面,几张图片的滚动,……Axure新技能:自适应手机屏幕大小对于如何把原型放至手机上进行演示相信大家都已经很熟悉了,但是如果几位同事屏幕大小不一,或者需要安装到客户手机上进行演示,这时候我们就很难保证我们的原型会显示完整,要不然就是屏幕……Axure原型设计:动态面板之轮播图显示(附带源文件)动态面板的功能很强大,了解了动态面板的原理,便可以运用自如。在目前的工作中,我把经常使用动态面板制作的交互总结了一下,希望与大家讨论并分享。动态面板在交互中常常用在……Axure原型设计:微信看一看下拉刷新操作看一看是微信最新开放不久的功能,以前是隐藏在搜索框下方“朋友圈热文”。进入后可以查看推送给自己感兴趣的文章。在文章列表里,下拉后释放,会自动更新些新的文章。在等……使用Axure打造最佳的移动端交互原型教程一直以来Axure在对移动端原型设计方面的支持都不是十分理想,它没有像目前其它几类原型设计工具(Justinmind、墨刀等)一样提供移动端设备的模板和相关交互组件,但是Axu……中小团队PM,如何高效输出APP版本需求文档?中小团队往往讲究快速迭代,所以产品需求文档最好也满足快速高效易沟通的特性。越来越多的PM已经在使用Axure“原型注释”的方法,输出原型HTML作为产品需求文档。但……在画原型之前,请先拟好“流程图”和“信息结构”上一篇《做交互,别急着画原型》中说到画原型前先要理解功能,并且从用户角度思考如何绘制适合用户的流程图。而今天将和大家讲讲,画原型图前比较重要的两个因素:“流程图”与“信息结构”……Axure用一个功能搞定手风琴式菜单设计最近做原型想做一个手风琴的效果,但是忘了怎么做的,于是百度了一些方法,发现大部分方法都会用到中继器,觉得有点麻烦。后来翻看以前的书找到了原来学会的方法,现在分享给大家。其……Axure设计:制作iOS列表左滑菜单效果该效果是模仿iOS微信界面中,左滑列表时显示菜单项的效果,使用的都是Axure中常用的组件,原理是通过控制动态面板的坐标来移动面板并显示菜单。本文仅适用于具有一定Axure使用……Axure教程:微信聊天列表原型制作(三)本章完成微信聊天原型的第三个主要部分,聊天信息的跳转。如果你希望跟着操作,需要根据前两章的内容,首先完成之前的原型。微信是一个负责庞大的系统,制作微信原型需要分模块,逐渐……GoogleMaterialDesign:900个实用图标的本文作者将分享一套来自于GoogleMaterialDesign的实用Axure图标组件库,其中一共有900款的常用的经典图标。enjoy平时各位交互设计师和产品经理们在……真实案例分享:做交互,别急着画原型原型是初期用来表现产品的“蓝图”,原型的作用在于承上启下,不管是验证产品可行性还是用于开发等都至关重要。在熟悉用户和流程等基础下绘制出的原型才能更加符合用户使用习惯曾经作……
适配落地,让开发小哥哥看懂最重要【ToG设计赋能】重塑政务服务体验设计初探:粤省事小程序设计Axure写PRD:倒推淘票票APP产品需求文档产品设计总是慢人一步?这里有5个提高效率的建议甲方竟敢说你的配色丑!我来教你怼回去(一)大家都看得懂的设计规范输入框篇商业产品的纵向设计与横向设计如何从01设计产品分销体系?APP中十大筛选模块类型知多少如何系统地规划出具备上乘用户体验的网站?规范篇:Android设计规范桌面图标你的LOGO图形设计符合命题密度法则吗?

友情链接:中准网聚热点快百科快传网快生活快软网快好知文好找作文动态热点娱乐育儿情感教程科技体育养生教案探索美文旅游财经日志励志范文论文时尚保健游戏护肤业界