Axure交互|PC端QQ登录效果演示

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

最近在写需求文档,再写Axure是为练手之用,大神轻喷!

这里主要是演示PC端QQ的登录流程(不涉及其他的交互,比如聊天)。图片都是用占位符代替的。

效果图:

效果图

下面分享一下制作过程。如有错误,欢迎指教;

1. 制作桌面

利用QQ截图确定桌面大小比例,然后引入图片部件,导入桌面图片。再拖入占位符和标签。制作“我的电脑”、“回收站”、“QQ”图标。命名如图所示。

2,确定任务栏和某些图标

分别拖入三个矩形部件,设置为不透明0,分别放在“我的电脑”、“回收站”、“QQ”图标上。三个矩形部件都设置选中状态为不透明30,填充淡灰色(如下图所示);

3选中状态都设置

选中“我的电脑”上的矩形部件,在部件交互与说明窗口中,为“鼠标移入时”添加用例,双击打开用例编辑器。单击用例编辑器左侧的“设置选中”-“选中”,设置pctouch(“我的电脑”图标上的透明矩形部件)为选中状态(如下图所示);

4,设置移入时选中

同理,在在部件交互与说明窗口中,为“鼠标移出时”添加用例,设置pctouch(“我的电脑”图标上的透明矩形)为取消选中状态(如下图所示);

5,设置移出时取消选中

其他两个图标上的矩形用例事件类似,在这里就不一样赘述了;

同时选中三个图标中的矩形(pctouch、recycletouch、QQtouch),在部件属性与样式窗口中,输入[选项组]名称为“touch”(如下图所示);

6.设置选项组

2. 制作QQ登录界面

利用QQ截图,获取QQ登录界面样式。再从部件库中拖入矩形、标签、文本输入框、图片、占位符等部件,全部选中,转换为动态面板,命名为“QQDL”(如下图所示);

7,制作QQ登录界面,转化成动态面板

为动态面板“QQDL”增加状态2,在state2中制作QQ登录中界面(如下图所示);

8,制作登录中界面

在state1中选中“安全登录”矩形部件,在部件交互与说明窗口中,为“鼠标单击时”添加用例,双击打开用例编辑器。单击用例编辑器左侧的“动态面板”-“设置面板状态”,设置“QQDL”动态面板状态为state2(如下图所示);

9,设置登录跳转

同理,在state2中,选中“取消”矩形,在部件交互与说明窗口中,为“鼠标单击时”添加用例,设置“QQDL”动态面板状态为state1(如下图所示);

10,取消登录跳转

在主页,选中动态面板“QQDL”,在部件交互与说明窗口中,为“状态改变时”添加用例,双击打开用例编辑器,点击“添加条件”,条件为“假如动态面板‘QQDL’的状态为state2”,如果符合以上条件,那么设置等待时间为2000毫秒,然后再单击用例编辑器左侧的“部件”-“隐藏”,设置隐藏动态面板“QQDL”(如下图所示);

11,设置登录成功

3. 制作QQ界面

从部件库里拖入矩形、文本输入框、标签等部件,制作QQ界面的大体模样(这里主要做的是交互,对于图片更多是用占位符代替),全部选中,转换为动态面板,命名为“QQ”;同时在站点地图里,为主页添加子页面,命名为“联系人”(如下图所示);

12.建立QQ界面

打开子页面“联系人”。拖入相应部件,制作消息人列表。对于“我的设备”列表内容,直接用矩形,标签等部件制作,转换为动态面板(命名为“my shebei neirong”)并隐藏,放置合适位置,打开动态面板,放置一个同等大小的图片热区(制作单击事件);

在“我的设备”上,放置图片热区部件。选中图片热区“picture1”在部件交互与说明窗口中,为“鼠标单击时”添加用例,双击打开用例编辑器。单击用例编辑器左侧的“部件”-“显示/隐藏”-“切换可见性”,设置“my shebei neirong”动态面板可见性切换,同时勾选“推动/拉动部件”(如下图所示);

13,设置我的设备列表的内容

对于“我的好友”列表内容,此处用中继器制作(依旧需要放置图片热区,制作单击事件),并在中继器“项目交互”里为“每项加载时”添加用例,如下图所示。(设置好数据集后,其他操作与上述类似,在这里就不一一赘述了)(如下图所示);

“亲戚”列表内容此处省略,与上述类似;

14,设置中继器

回到主页,点击隐藏动态面板“QQ”;选中动态面板“QQDL”,在部件交互与说明窗口中,为“状态改变时”的用例补充事件,添加“显示‘QQ’”(如下图所示);

15

在桌面上。将“QQDL”动态面板隐藏,选中“QQ”上的透明矩形(QQtouch),为“鼠标单击时”添加用例事件—显示“QQ”动态面板(如下图所示);

16,显示登录界面

选中“QQDL”动态面板中右上角的占位符(关闭页面的作用),为“鼠标单击时”添加用例事件—隐藏“QQDL”动态面板,以及设置该登录面板状态为“state1”(如下图所示);

同理选中“QQ”动态面板中右上角的占位符(关闭页面的作用),添加关闭用例事件;

17.关闭QQ登录界面

总结:

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

望所有想入门的新人,都可以谨记这一点,也包括我。(最近课程太多了,学产品的进度被拖了,好烦好烦~~~)

链接分享

作者链接:http://pan.baidu.com/s/1cJvLhG 密码: rmer

官方地址:http://pan.baidu.com/s/1nv0c66X 密码:t2tn

 

作者:MC.boyiter(QQ:811720747),一名在校僧,欢迎交流~求实习~

您的赞赏,是对我创作的最大鼓励。
2人打赏

评论( 4

登录后参与评论
  1. 有一步有点问题。。点取消虽然回得来,但面板启用2s后仍然被隐藏了。

    回复
  2. 迫不及待想试试😄

    回复
  3. 我居然一步一步跟着教程做,做出来了,哈哈。

    回复
    1. 回复

      厉害

加载中