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

Axure组件重写系列(二):用中继器搞定下拉框重写

7月11日 六壬会投稿
  回答上一篇文章中网友的评论。真实案例,用中继器搞定下拉框
  上一篇文章已经介绍了基础组件“文本框”“下拉框”的重写实现,我们已经可以实现以下自定义效果:
  文本框:
  下拉框:
  那么问题来了,在一个系统中我们需要多次复用下拉框,每个下拉框的下拉预设值在不同页面里面肯定是不一样的,如果下拉数量及内容有所改变,那么我们对每个下拉“子菜单”就要进行繁琐的编辑,虽然ctrlc、ctrlv能帮我们提升效率,但毕竟这样的组件复用性显然太低,再加上如果我们对下拉菜单的底色、边框等做调整,意味着所有子项需要删掉重置
  在认识中继器之前,这一切是多么让人抓狂,而中继器却能轻松解决我们的烦恼,我们马上来见识一下axure这件大杀器!
  那么什么是中继器?
  如果说“动态面板”是PPT,那么“中继器”更像是EXCEL。中继器,英文名“Repeater”,我觉得重复器的定义更方便我们对它的理解,如果稍微学过编程的童鞋,把中继器的编辑原理当成是面向对象中对“类”的编辑,中继器的展示当成对“实例”的展示会相当好理解。那么没学过编程的童鞋呢?其实,我们可以把中继器看成一个“模版”,我们在这个模版中的任何编辑,都会影响到用了这个模版的所有组件。
  下面,我们通过对上一篇文章中“下拉框”的改写来理解中继器。
  一、下拉框重写(中继器方式)
  这部分上一篇已经讲过了,完事之后我们能看到以下效果:
  接下来,开始我们的重头戏,中继器创建:
  看完这个对比,大家能否理解我前面说的“模版”比喻了呢?
  那么,决定中继器内容的是中继器里面的文字编辑吗?当然是!
  中继器强大的地方,在于它能将类似于excel的行列数据,通过axure提供的交互事件与模版下的每个实例进行绑定。
  那么这个类似于excel的数据编辑器长什么样呢?
  很多小伙伴(包括我)一开始不知道这个编辑器藏在哪,下面我提供两种方式:
  【方式一】点击单击中继器,在右侧“属性”下方找到
  【方式二】双击中继器,进入后单机页面空白处,在“属性”下方找到
  这个表里的数据可以任意更改,如EXCEL那般。我们注意到,默认的中继器只有3个实例,对应表里只有3行,我们往表里增加1行,那么会对应会增加1个实例,以此类推。
  那么,怎么把表里的数据跟我们的“模版”关联呢,我们继续“下拉框”的教程。
  在这一节中,我们对中继器“每项加载”交互实例添加了文本的绑定,在这里,如果有童鞋疑问:
  为什么不用“加载时”,而用“每项加载”?
  这里先卖个关子,可以剧透一点的是,加载时也可以实现文本的绑定,但是需要在浏览器中才能浏览到实时数据,而“每项加载”在axure视图就能看到,至于在其他中继器元素的表现上,二者的渲染也不尽相同,这个我们以后在展开细说。
  到这里,我们已经完成了对“子菜单”模版的基本编辑,只差最后一部就能实现下拉框了。
  至此,我们已经完成了下拉框的中继器式改写,可以优雅的实现以下效果了:
  如果想改变子菜单内容,只须改变表格内容即可:
  这样的复用性,比起原生组件来说也不逞多让了吧?
  当然,有的小伙伴会纠结于这种实现方式下,border堆叠的bug,如下图:
  这是由于中继器垂直排列的方式引起的,虽然中继器也有针对垂直排列的间隔调整,但效果不尽如人意,作为强迫症,我还是找到了解决的方案,就是边框调整,把原来的四边框,调整为三边框,虽然第一个子菜单没有了上边框,但由于受到父菜单的遮挡,整个子菜单展示也没有什么瑕疵了0
  二、日期控件基础版
  接下来我们趁热打铁,通过“日期控件”的实现来加加深对中继器的理解
  (PS。日期控件axure并未提供原生版本,所以也谈不上重写,请忽略0。0)
  本期我们做的是日期控件的基础版本
  功能点:点击父菜单(文本框)展示日期子菜单,点击日期后将日期自动填充到父菜单,并关闭子菜单。
  之所以说是基础版本呢,是因为本期只实现到一个月(31天)的功能点选,这对于大部分产品展示来说其实已经很够用了,当然后续我们也会介绍一年12个月的实现方式,请大家不要着急哈。
  来,下面开始制作过程。
  第一步完成后我们能看到如下效果:
  完成了父菜单框架的搭建,接下来我们需要去创建日期控件子菜单。
  接下来,我们只需要将数据和中继器绑定起来,就能完成日期控件了。
  到这里,我们已经实现了日期控件的基本版制作了,请看效果图:
  至于一些制作过程中的细节(如hover日期改变底色等)就不铺开阐述了,不懂的小伙伴可以百度一下
  至此,我们已经完成了三个组件的重写(新写),当然,同一个组件有多种实现方式,例如我们的下拉框就有“纯动态面板”制作以及“动态面板中继器”制作,虽然方法有多种,但基于复用性和简便性的综合考量,由中继器编写的组件还是更讨好用户喜欢的,但是,中继器在使用过程中还是有很多大坑小坑,以后会慢慢带领大家一起揭晓
  在下一篇文章中,我们会对axure的常用组件“表格”进行重写,尽情期待
投诉 评论 转载

如何使用Axure规范的画出页面的线框图每个APP原型都是由一个个页面组成,那么每个页面的线框图该如何通过Axure的画出来呢?我希望通过这篇文章,让刚入门的PM可以不走弯路,规范高效的画出每个页面的线框图。画……Axure实例:即刻app产品需求文档第一次用AxureRP8写产品需求文档,笔者为产品小白,希望通过这篇文章和大家分享以及学习交流。以下我的Axure原型截图:目录:1。概述1。1产品介绍……Axure组件重写系列(二):用中继器搞定下拉框重写回答上一篇文章中网友的评论。真实案例,用中继器搞定下拉框上一篇文章已经介绍了基础组件“文本框”“下拉框”的重写实现,我们已经可以实现以下自定义效果:文本框:下……Axure组件重写系列(一)现有的系统组件不够好用,加之我们能利用axure基本功能来实现更好用的组件,因此,就有了重写系列教程。写在前面1。什么是重写?为了更好发挥产品原型在系统设计阶……Axure组件重写系列(三):拿什么来拯救你的表格组件?在学习了本文的中继器表格之后,你将会十分完美地解决原生表格组件覆盖不到的功能区。一起来看。表格应该是我们非常熟悉的一种数据格式了,在实际开发中,它也是作为系统的一个组件之……Axure原型设计:从一个简单的H5活动页面,窥探Axure本文作者将与我们分享:如何用Axure将H5活动页面制作出来,在此并不谈论这个页面交互上的合理性。enjoy近日,开发了一个H5的活动页面,当时只简单的画了个线框图,活动……如何制作统一可复用iOSMaterialDesign元件库?文章对制作统一可复用的Axure元件库方法进行了相关的分享,希望对你有所受用。阅读这篇文章你可以得到哪些?iOS和MaterialDesign(简称MD)元件库下载……Axure教程使用母版快速搭建APP界面框架Axure的母版想必大家都不陌生了吧,在项目中使用母版能大幅提高重复劳动的工作效率,特别是在需求产生变更调整原型的时候。一个合理的母版结构能大幅的缩减繁琐的工作,下面我们……以手机淘宝为例,看原型图易缺失的交互场景以iOS版手机淘宝历史搜索为例,本文作者希望通过展示的原型图来讨论易遗漏的交互场景,让读者得到收获,并总结出以后如何避免遗漏交互细节与定义。手机淘宝搜索栏出现历史搜索旨在……如何用Sketch制作精致的交互原型?虽然Sketch更适合设计师使用,但是在最近几年,越来越多的产品经理使用Sketch代替Axure设计原型。出图快、易操作、易上手是Axure的巨大优势,但是交互一直是Sket……Axure之旅:关于Axure的冷知识Axure是头大象,其实有很多不容易被大家注意到的功能。Axure以高度的自由度著称,用好了绝对是大杀器。本篇是系列文章的第三篇,讲讲关于Axure的一些冷门小知识。nb……Axure应用技巧:可复用控件库制作实操本文作者将与我们分享:如何用Axure来制作自己的元件库。在现阶段的互联网产品的设计过程中,我们经常会提到一个词“敏捷迭代(开发)”,简而言之就是小步快跑策略。产品的敏捷……
网站seo站内优化如何操作更利于关键词排名总结中小企业的整站优化策略seo优化与网络推广哪一种更适合企业营销?【关键词优化排名软件】行业关键词如何做优化排名?SEO优化对网络营销的重要性,企业网站如何衡量?关键词排名为什么会有浮动的正解答案深入分析长尾关键词,让你的网站排名垄断首页揭示百度搜索引擎优化权重的未知秘密分享初创企业选择长尾关键词的优化技巧百度优化效果倍增的方法,你掌握多少?网站设计融入seo优化元素更利于后期网站维护管理总结提高关键字排名的实用方法。

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