广东快3>WIKI库>学习产品设计>axure淘宝手机充值效果

axure淘宝手机充值效果



淘宝网手机充值效果


最终达到效果:打开淘宝网页,话费充值,当鼠标点击以后,输入一个11位的号码,前三位下面有相应的显示,中间用“-”隔开,当输入到11位时,下面将不再显示。


top1.png


打开Axure软件,导入图片,如图。然后拖入文本框,覆盖住原来的位置,输入手机号命名。隐藏它的边框,调整一下大小。再拖拽一个矩形,填充为灰色,调整一下位置和大小。


top2.png


广东快3文本框,选择“文字改变时”,这里只能让它显示为数字,不能大于11位,所以“新增条件”,元件文字,不是数字的情况下,显示为空,确定。新增用例,新增条件,选择元件值长度,大于11时显示的状态,确定。设置文本,选择手机号码,它的值为:元件文字,手机号码,变量为,在字符串中选择0-11,确定。把下面的矩形添上名称,选择新增用例,选择设置文本,显示大图,设置它的值为:元件文字,手机号码,插入的的变量为字符串中0—3、3—7、7—11,确定。在输入手机号码时,它的相应下面的大图会显示大一些醒目的字体、字号和颜色。在下图位置进行设置,选择富文本,编辑文字,选择上字体,更改字体颜色、字号,确定。


top3.png


广东快3下面预览一下效果,生成HTML文件。当我们鼠标点击到输入手机号的位置,输入前三位,下面显示对应的前三位数值和“—”,当接着输入时,只显示前11位的手机号码。



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

分享到:

目录