必威体育Betway必威体育官网
当前位置:首页 > 运营推广

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

时间:2019-08-17 22:40:00来源:运营推广作者:seo实验室小编阅读:59次「手机版」
 

qqdl是什么

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

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

效果图:

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

1. 制作桌面

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

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

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

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

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

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

2. 制作QQ登录界面

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

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

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

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

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

3. 制作QQ界面

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

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

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

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

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

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

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

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

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

总结:

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

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

链接分享

相关阅读

大屏手机时代,如何重塑界面交互

这是一个大屏手机的时代。强调这件事情的意义在于,这已经成为事实。这是一个大屏手机的时代。强调这件事情的意义在于,这已经成为事

用户上传图片后实现图片预览效果(解决fakepath路径问题

注意:实现这个效果最重要的就是获取到用户上传到网页上的真实路径。关键代码:<%@ page language="java" contentType="text/html; c

UI交互设计教程分享:提高界面交互体验的“葵花宝典”

​本次分享的是在界面设计中最长实用也最容易被忽略的十个原则,就是尼尔森十大可用性设计原则,这是十分基础且重要的原则。原则是死

Excel 宏编程-第一个Hello World程序,实战演示!

先看大屏幕,我要演示的效果就是点击hello按钮,运行我们的宏,输出Hello World!第一步 首先进入开发工具页签,点击宏,创建一个的宏,我起的

Axure教程:网页二级联动交互应该怎么做?

步骤如下(1)准备下拉列表框选择一个表单元件,我们要选择的是“下拉列表框”,对表单元件进行简单的美化操作(如下图所示)。(2)添加动态面板

分享到:

栏目导航

推荐阅读

热门阅读