凯发娱乐 隆重上线 我要分享我的精彩
Axure交互|QQ三大界面的交互效果演示(动态面板多层嵌套
发表评论 来源:本站 编辑:baihua 日期:2018-09-29

  作为一个尚未出道的新人,在看各位大咖的产品之路,更为兴奋和谨慎,提笔在于记录产品路的点点滴滴,也欢迎一起沟通和学习。

  这里我就用一个主界面和多层的动态面板内嵌(只是钻研和加深交互练习,平常还是跳转链接更方便)。演示一下关于QQ界面的一些交互效果,也希望和大家一起学习和进步。

  从部件库拖入图形部件,通过托拉拽的方式使之与iPhone外壳部件的屏幕大小差不多,并放置于上,导入启动界面图片(手机QQ启动截屏获取该素材);

  将图形部件转换为动态面板,状态1命名为screen(启动界面),增加状态2命名为interface(放置消息、联系人、动态三大界面);

  点击进入状态2(interface),进行三界面共有部件制作,手机通知栏和手机QQ底部选项卡,如“21:00”、“中国联通”等皆为标签部件,框框、圆形等皆为矩形部件(拖入矩形部件,右上角有个灰色小圆,单击即可出现可转换图形列表),图片在此省略,用占位符代替;

  消息列表用中继器部件制作,向其中添加矩形、标签等,与底下的数据集命名相同,分别为“name”、“neirong”、“time”、“num”,并在项目交互里的每项加载时写用例,在用例编辑对话框左侧点击设置文本,在右侧的配置动作中选择部件(以name部件为例),点击右下侧的设置文本框后的“fx”字样,然后点击插入变量或函数,选择“。其余几个部件类似。然后中继器数据就能够正常显示;

  将中间部分(除却上面的通知栏和底下的选项卡)的所有部件选中,鼠标右击,转换为动态面板(命名为jiemian),给此面板增加state2,state3,state1,2,3分别命名为iMessage、friends、playing(对应消息、联系人、动态三界面);

  分别进入jiemian动态面板的状态“friends”和“playing”,制作部件,多为矩形部件和标签的制作。然后将需要被拖动到部件选中,转换为动态面板,分别命名为“friends-tuodong”和“playing-tuodong”;

  另外,在消息界面,我们可以看到,点击上面的”消息“和”电话“又可切换界面,所以我们进入入jiemian动态面板的状态”iMessage“,将中继器和搜索框等选中,转换为动态面板(命名为”iMessage-tuodong“),增加状态2,state1和state2分别命名为”xiaoxi“和”dianhua“;

  进入状态“dianhua”,制作相应部件,多为矩形部件变换所得(因为部件并不多,所以这里没有用中继器);

  至此,我们的部件制作和大体框架就已经全部完成了,接下来就是用例事件的编写啦~~

  打开手机QQ后,会从启动界面过渡到消息界面,因此我们在主界面的下方页面交互里,为“页面载入时”添加用例,双击打开用例编辑器。单击用例编辑器左侧的“添加动作”-“其他”-“等待”,设置等待时间为2000毫秒,然后再单击用例编辑器左侧的“动态面板”-“设置面板状态”,设置面板状态为“interface”;

  进入动态面板状态“interface”,为底部选项卡上的部件,添加选中变色效果。单击占位符,点击右侧部件属性与样式-”选中“,为其添加选中时填充颜色为蓝的效果(标签部件中则是字体颜色变蓝效果),其余五个类似。我们再将三个分别带有”消息“、”联系人“、”动态“的标签选中,然后在右侧的部件属性与样式,输入该选项组名称为”1“,类似的是,将三个占位符也选中,设置选项组名称为”2“;

  我们移入三个图片热区,分别命名为“iMessage”、“friends”、”playing“。覆盖在所属位置的占位符和标签上。以“iMessage”为例,单击后,在右侧的”部件交互与说明“面板中,为”鼠标单击时“添加用例,打开用例编辑器。设置占位符”iMessagejuxing“和标签”iMessage“为选中状态,设置动态面板”jiemian“状态为”iMessage“,移动动态面板” iMessage-tuodong“到绝对位置(5,50)(这个事件的作用是保证切换选项卡的时候,,消息界面的位置是固定的,不会发生偏移,如下图所示)。剩余两个图片热区“friends”、”playing“用例类似,如下图所示;

  进入“jiemian”动态面板中的状态“iMessage”,对上面的“xiaoxi”、“dianhua”部件,我们将其选中,设置为选项组“3”,再编写用例,以“xiaoxi”为例。在“部件属性与样式”面板中,单击“选中”,设置选中时,字体颜色为蓝色,部件填充颜色为白色,在“部件交互与说明”面板中,为“鼠标单击时”添加用例事件,设置动态面板“iMessage-tuodong”的状态为“xiaoxi”,同时设置“xiaoxi”部件为选中状态(下图所示)。另一个部件“dianhua”类似,下图所示;

  我们再从部件库里移入一个部件“经典菜单-垂直”,填写相关文字,命名为“biao”,设置隐藏。对上面的加号部件,添加“鼠标单击时”用例事件,设置为切换“biao”部件的隐藏性;

  一些简单的小用例已经写完了,剩下的就是大部头,也就是拖动事件了,为了深入练习动态面板的嵌套,所以我把三个面板状态的拖动事件全部写在一个部件上,导致在编写时有点卡顿,不建议如此写哦,除非是为了学习而已(用跳转其实就可以轻松完成拖动事件了!)

  选中“jiemian”面板,在右侧的“部件交互与说明”面板中,为“拖动时”添加用例事件,打开用例编辑器,添加动作“移动”,在“配置动作”选择“iMessage-tuodong”面板,选择“垂直拖动”;

  在使用QQ时,拖动一定距离则无法拖动。我们选中“jiemian”面板,在右侧的“部件交互与说明”面板中,为“拖动时”添加用例事件,打开用例编辑器,点击“添加条件”,条件为“假如被拖动的iMessage-tuodong的top值大于150,并且jiemian面板的状态为iMessage“。如果符合上述条件,我们就移动”iMessage-tuodong“面板到最大拖动距离位置(5,150)(显示shuaxin指的是显示转圈的刷新图标,这里略过)。同样,当我们向上拖动时,我们也有最大距离值。类似的,添加的条件为”假如被拖动的iMessage-tuodong的bottom值大于404,并且jiemian面板的状态为iMessage“。那么我们就移动”iMessage-tuodong“面板到最大拖动距离位置(5,-100)。如下图所示;

  在使用QQ时,刷新动作拖动页面,发现总有一种延迟的效果。我们选中“jiemian”面板,在右侧的“部件交互与说明”面板中,为“拖动时”添加用例事件,打开用例编辑器,点击“添加条件”,条件为”假如被拖动的iMessage-tuodong的top值大于50,并且jiemian面板的状态为iMessage“。那么使得被拖动的iMessage-tuodong面板移动一定的相对距离,为鼠标在Y轴移动的距离(DragY)的一半,方向为反方向。同样,向上拖动时,也是这样。只不过条件稍变。如图所示;

  我们选中“jiemian”面板,在右侧的“部件交互与说明”面板中,为“拖动结束时“添加用例事件,打开用例编辑器,点击“添加条件”,条件为”假如被拖动的iMessage-tuodong的top值大于50,并且jiemian面板的状态为iMessage“。那么拖动结束时,移动“iMessage-tuodong”面板到绝对位置(5,50),再增加一个“线毫秒。类似的,向上拖动的,条件类似,如图所示;

  小白分享~~~互相进步!大神轻喷哦~最近在学习相关需求文档的编写,待到有感悟的时候一同分享~

  在看过众多大神见解以后,明白钻研Axure是不理智的,日常够用就好,能够将想法具体化给开发、UI看明白即可,这就是一个好的原型。

  高保真原型的制作着实没有任何必要,初期频繁修改需求,你又有多少精力去修改你的高保真原型图呢?

  本文由 @MC.boyiter 原创发布于人人都是产品经理。未经许可,禁止转载。

  今天试了下 真心复杂 而且后面的拖动没法做,软件版本只有移动到相对位置和绝对位置,没有水平拖动、垂直拖动

  底部三个热区设置用例的时候,其中上面的三个动态面板移动(拖动)的绝对值坐标,应该是一致的,不应该出现(5,50),(0,0)、(0,50)这3种情况。

  总结很到位:如此高保真的原型真的没有太大的必要性,维护起来不是一般的麻烦啊,关键是让团队能够轻松地理解。不过还是得赞叹一下作者的作品

  恩恩,我知道,高保真原型没必要,谢谢!总结就是我想对新人和我自己的告诫

  最近讨论的很火热的自如甲醛房问题,如果你是自如APP的产品经理,你的解决方案是什么?

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、招聘、社群为一体,全方位服务产品人和运营人,成立8年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上海广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里分享知识、招聘人才,与你一起成长。

设计吧推荐专题
你可能还会关注的文章
    无相关信息
  [keylink]'www.freedesign8.com.cn'[/keylink]
  • 精彩随机
  • 推荐图文
  • 创意图文
  • 热门图文
SQL Error: select * from artdesign_ecms_news where classid in (1,2,3,4,5,6,7,8,) and titlepic<>'' order by rand() desc limit 5
精彩专题
本栏热门
本栏精选
SQL Error: select * from artdesign_ecms_news where classid='3' and titlepic<>'' order by rand() desc limit 4
编辑推荐
网站留言 | 关于我们 | 广告业务 | 信息反馈 | 合作伙伴
版权所有 www.g22.com 2016-2018 凯发娱乐