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

输入邮箱时,如果自动带出邮箱地址,就会方便许多。如何用Axure8.0制作出自动带出邮箱地址的效果呢?本文分享了教程,希望能给你带来帮助。

本次分享的的案例Axure8.0制作的自动带出邮箱地址效果:

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

预览及下载地址:https://51x7ns.axshare.com

一、制作原型

1、拖入一个矩形元件,设置宽度:66px,高度:20px,输入内容:“请输入邮箱”,字体设置为:微软雅黑,如图:

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

2、拖入一个矩形元件,设置宽度:240x,高度:40px,对其“选中”状态进行设置,如图:

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

3、拖入一个文本框在矩形框中,设置宽度:236x,高度:35px,设置类型为:文本,提示文字为:邮箱,提示样式为:#999999,隐藏提示触发选择“获取焦点”,勾选“隐藏边框”选项,如图:

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

4、拖入一个矩形框,设置宽度:240x,高度:173px,命名为:矩形容器,对其阴影样式进行设置,如图:

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

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

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

“矩形容器”与其四个矩形组合,并设为隐藏,如图:

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

最终设计如图:

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

二、交互设置

1、对文本框进行“文本改变时”交互设置,如果文本状态为“ture”时,1的设置文本为[[LVAR1]]@qq.com,如图:

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

2的设置文本为[[LVAR1]]@126.net,如图:

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

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

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

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

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

否则,如图:

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

2、对文本框进行”获取焦点时“与”失去焦点时“进行设置,如图:

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

3、对组合的中的每个矩形(1、2、3、4)进行”鼠标点击时“进行设置,如图:

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

所有设置完毕。

去年今日运营文章

  1. 2021:  石墨文档公开分享功能临时关闭(0)
  2. 2021:  KOL营销新战略!小红书品牌破局“内卷”的发力点在哪里?(0)
  3. 2021:  小红书流量红利词「0基础」实操手册(0)
  4. 2021:  挖掘小红书数据,助力品牌投放(0)
  5. 2021:  千瓜数据官网分析达人,助力品牌筛选优质KOL(0)

本文由纤纤露投稿,不代表爱运营立场,如若转载,请注明出处:https://www.iyunying.org/pm/axure/292037.html

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 2022年9月14日 下午1:49

发表评论

登录后才能评论