产品邦-帮助产品经理成长

互联网产品经理学院-满足产品经理的求知欲-产品邦

当前位置: 主页 > Axure > Axure案例分析 >

Axure制作QQ签名效果-axure案例解析教程

来源:非原型,不设计 heguangming.com 作者:萧何 点击:
产品邦产品经理学院注:QQ面板签名的交互很便捷,当鼠标点击签名栏时其变成可编辑状态,当失去光标(焦点)时则自动提交并保存签名内容,Axure也可以实现此交互。交互思路:1、点击签名栏,签名栏状态变为可编辑状态 2、若签名栏已有内容,则自动全选内容 3、

产品经理学院提供全面的产品经理学习培训教程。
本教程为 Axure制作QQ签名效果-axure案例解析-Axure案例分析
通过本 axure rp 6.5 教程可以掌握 Axure制作QQ签名效果-axure案例解析的方法。

产品邦产品经理学院注:

  QQ面板签名的交互很便捷,当鼠标点击签名栏时其变成可编辑状态,当失去光标(焦点)时则自动提交并保存签名内容,Axure也可以实现此交互。



交互思路:

1、点击签名栏,签名栏状态变为可编辑状态
2、若签名栏已有内容,则自动全选内容
3、当光标(鼠标焦点)离开签名栏时,签名栏显示刚刚输入的内容


在QQ的主面板上,可以实现QQ签名的输入更改
 

显示状态:


 

输入状态:


 

Axure实际制作
 

问题分析:2种不同的状态可以用动态面板来解决,本案例的重点是如何保证在输入状态下修改的内容,可以传递到显示状态中

 

 第一步:使用snagit截图工具,截一个QQ面板的头部部分,如图:




 

 第二步:拖动一个矩形组件,覆盖到QQ签名部分





 

并给其设置和QQ面板一样的色调,并设置矩形的边框为无,覆盖到QQ签名部分


矩形组件尺寸:160*21
 




 

第三步:设置动态面板


拖动一个动态面板到页面编辑区域,并设置尺寸为160*21.添加2个状态,分别为显示状态、输入状态




 

 编辑2个状态,在显示状态中,放入我们刚才制作的矩形组件,在输入状态中放入 一个尺寸为160*21的文本框组件




 



 

 

并将动态面板移动到之前的矩形组件位置(既:QQ签名位置)

 

 第四步:设置 显示状态下组件交互,单击时到输入状态


 


 

第五步:键盘输入时,设置变量值等于输入框的值





 

第六步:当失去焦点时,设置到动态面板到显示状态,并设置矩形组件的值等于变量值




 

 源文件下载

 

Axure制作QQ签名效果RP文件--axure案例解析



友荐云推荐 (责任编辑:蓝极行)
顶一下
(2)
66.7%
踩一下
(1)
33.3%
------分隔线----------------------------
栏目列表
推荐内容