Axure8.0教程：自动带出邮箱

yaya8335

输出邮箱时，假如自动带出邮箱地址，就会便利许多。如何用Axure8.0制造出自动带出邮箱地址的成果呢？本文作者分享了教程，但愿能给你带来帮忙。

本次分享的的案例是Axure8.0制造的自动带出邮箱地址成果：


一、制造原型
1、拖入一个矩形元件，设置宽度：66px，高度：20px，输出内容：“请输出邮箱”，字体设置为：微软雅黑，如图：
2、拖入一个矩形元件，设置宽度：240x，高度：40px，对其“选中”形态进行设置，如图：


3、拖入一个文本框在矩形框中，设置宽度：236x，高度：35px，设置类型为：文本，提醒文字为：邮箱，提醒款式为：#999999，暗藏提醒触发选择“获得焦点”，勾选“暗藏边框”选项，如图：


4、拖入一个矩形框，设置宽度：240x，高度：173px，命名为：矩描述器，对其暗影款式进行设置，如图：


5、拖入五各矩形框放入“矩描述器”中，设置宽度：240x，高度：40px，分别命名为：1、2、3、4，分别对其进行交互款式设置，如图：


“矩描述器”与其四个矩形组合，并设为暗藏，如图：


终究设计如图：


二、交互设置
1、对文本框进行“文本改动时”交互设置，假如文本形态为“ture”时，1的设置文本为[[LVAR1]]@qq.com，如图：


2的设置文本为[[LVAR1]]@十二6.net，如图：


3的设置文本为[[LVAR1]]@163.com，如图：


4的设置文本为[[LVAR1]]@139.com，如图：


不然，如图：


2、对文本框进行”获得焦点时“与”失去焦点时“进行设置，如图：


3、对组合的中的每个矩形（1、2、3、4）进行”鼠标点击时“进行设置，如图：


一切设置终了。
本文由@qianqianlu 原创公布于人人都是产品经理，未经许可，阻止转载。
题图来自 unsplash，基于 CC0 协定。
该文观念仅代表作者自己，人人都是产品经理平台仅提供信息存储空间办事。