产品经理培训
美国上市产品经理培训机构

400-111-8989

热门课程

产品经理培训之axure使用教程

  • 发布:产品经理培训
  • 来源:网络
  • 时间:2018-05-18 15:32

企业要生存和发展,必须创造利润,而企业的利润来自客户的购买。随着各行业针对企业的垂直细分服务越来越深入,ToB市场也越来越受到大家的重视,成为各方都竞相角逐的战场。

无论是在云服务、管理协作等,还是第三方技术支持、数据服务等,都有广大的空间,可以为企业创造出更大的价值。

那作为产品经理该如何深入、准确的挖掘企业的个性化需求?如何更好的理解商业模式,从而帮助企业创造价值?又该怎样高效与需求方沟通,提高沟通效率。以及ToB产品经理的晋阶路径是怎样的,如何进行自我提高。

这品文章问呢还是继续给大家分享的产品经理培训课程中的axure讲解,我们这期讲中继器高级应用随机数字键盘制作。

下面我们就先来先来看一下是怎么样的手机号码分隔效果。如下图:

产品经理培训之axure使用教程

当我们在文本输入框中输入时,它会自动的进行加间隔。例如,输入“1588”,它就会自动变为“158 8”。

需求明确了之后,接下来我们就开始准备元件。需要一个文本输入框和一个水平线。

产品经理培训之axure使用教程

放置好元件之后,我们可以对文本输入框属性中的边框设置为隐藏,这样就会感觉是在一条横线上输入内容。另外,还可以在文本输入框的属性中设置提示文字,及限制文本输入框的文字长度为“13”(为什么是13呢?因为分隔后会有两个空格)。

产品经理培训之axure使用教程

准备好元件之后,就可以添加交互动作了。在文本输入框中输入文字时(即文本改变时),让输入的手机号码自动分段,即重新设置文本输入框的文本为分段后的手机号码。

实现这个交互效果的关键在于如何将输入的手机号码进行分隔处理。

具体思路如下:

1、进行分隔时,需要把手机号码变为“3-4-4”格式,那么,我们就需要对前三位、中间4位以及末尾四位进行截取;

2、在输入号码时,因为会做分隔处理,当输入位数超过3个,号码中会包含空格,因此,截取之前需要先把号码中的空格清除;

3、分隔时,截取到的各部分号码之间要通过一个空格进行分隔;

4、在输入号码时,因为连接了空格,当输入位数超过3个,当前输入数字之前就会有多余的空格,需要把这个空格清除。

明确了思路之后具体的实现步骤如下:

1、根据思路2,我们先完成下面的公式,把当前输入的号码中所有的空格去除。

公式内容:This.text.replace(‘ ‘,”)

使用replace函数,把当前元件文字中的空格替换为空。

2、根据思路1,进行手机号码的截取。

首段号码:This.text.replace(‘ ‘,”).substr(0,3).

中段号码:This.text.replace(‘ ‘,”).substr(3,4).

末段号码:This.text.replace(‘ ‘,”).substr(7).

使用substr函数能从字符串的指定位置(即括号中的第1个参数)开始时截取一定的长度(即括号中第2个参数),如不指定长度,则默认从指定位置截取到末尾。字符串中字符的位置是从0开始的。

3、根据思路3,我们需要在号码段与段之间添加空格进行分隔。

具体的公式为:This.text.replace(‘ ‘,”).substr(0,3).concat(‘ ‘).concat(This.text.replace(‘ ‘,”).substr(3,4)).concat(‘ ‘).concat(This.text.replace(‘ ‘,”).substr(7))

concat函数能把文本对象和指定字符进行连接。这里需要注意它们的嵌套关系,第2、3段号码是concat函数的参数、即第1段号码.concat(空格).concat(第2段号码).concat(空格).concat(第3段号码)。

4、根据思路4,去除号码之后的空格。

公式为:This.text.replace(‘ ‘,”).substr(0,3).concat(‘ ‘).concat(This.text.replace(‘ ‘,”).substr(3,4)).concat(‘ ‘).concat(This.text.replace(‘ ‘,”).substr(7)).trim()

trim函数能把文本对象两侧的空格去除。


完成以上步骤之后,我们就实现了手机号码输入时自动分隔的交互效果。在这之后我们还需要进行一步操作,因为Axure RP 8的有一个Bug。当删除所有输入的内容,这时能看到,本应该出现的提示文字“请输入手机号码”,变成了文本框中的实际输入内容。


进行一个什么操作呢?需要对交互事例设置条件,判断如果元件文字为空,设置当前元件文字为空。

下面我们就先来先来看一下是怎么样的手机号码分隔效果.

当我们在文本输入框中输入时,它会自动的进行加间隔。例如,输入“1588”,它就会自动变为“158 8”。

需求明确了之后,接下来我们就开始准备元件。需要一个文本输入框和一个水平线。


放置好元件之后,我们可以对文本输入框属性中的边框设置为隐藏,这样就会感觉是在一条横线上输入内容。另外,还可以在文本输入框的属性中设置提示文字,及限制文本输入框的文字长度为“13”(为什么是13呢?因为分隔后会有两个空格)。

产品经理培训之axure使用教程

准备好元件之后,就可以添加交互动作了。在文本输入框中输入文字时(即文本改变时),让输入的手机号码自动分段,即重新设置文本输入框的文本为分段后的手机号码。

实现这个交互效果的关键在于如何将输入的手机号码进行分隔处理。

具体思路如下:

1、进行分隔时,需要把手机号码变为“3-4-4”格式,那么,我们就需要对前三位、中间4位以及末尾四位进行截取;

2、在输入号码时,因为会做分隔处理,当输入位数超过3个,号码中会包含空格,因此,截取之前需要先把号码中的空格清除;

3、分隔时,截取到的各部分号码之间要通过一个空格进行分隔;

4、在输入号码时,因为连接了空格,当输入位数超过3个,当前输入数字之前就会有多余的空格,需要把这个空格清除。

明确了思路之后具体的实现步骤如下:

1、根据思路2,我们先完成下面的公式,把当前输入的号码中所有的空格去除。

公式内容:This.text.replace(‘ ‘,”)

使用replace函数,把当前元件文字中的空格替换为空。

2、根据思路1,进行手机号码的截取。

首段号码:This.text.replace(‘ ‘,”).substr(0,3).

中段号码:This.text.replace(‘ ‘,”).substr(3,4).

末段号码:This.text.replace(‘ ‘,”).substr(7).

使用substr函数能从字符串的指定位置(即括号中的第1个参数)开始时截取一定的长度(即括号中第2个参数),如不指定长度,则默认从指定位置截取到末尾。字符串中字符的位置是从0开始的。

3、根据思路3,我们需要在号码段与段之间添加空格进行分隔。

具体的公式为:This.text.replace(‘ ‘,”).substr(0,3).concat(‘ ‘).concat(This.text.replace(‘ ‘,”).substr(3,4)).concat(‘ ‘).concat(This.text.replace(‘ ‘,”).substr(7))

concat函数能把文本对象和指定字符进行连接。这里需要注意它们的嵌套关系,第2、3段号码是concat函数的参数、即第1段号码.concat(空格).concat(第2段号码).concat(空格).concat(第3段号码)。

4、根据思路4,去除号码之后的空格。

公式为:This.text.replace(‘ ‘,”).substr(0,3).concat(‘ ‘).concat(This.text.replace(‘ ‘,”).substr(3,4)).concat(‘ ‘).concat(This.text.replace(‘ ‘,”).substr(7)).trim()

trim函数能把文本对象两侧的空格去除。

产品经理培训之axure使用教程

完成以上步骤之后,我们就实现了手机号码输入时自动分隔的交互效果。在这之后我们还需要进行一步操作,因为Axure RP 8的有一个Bug。当删除所有输入的内容,这时能看到,本应该出现的提示文字“请输入手机号码”,变成了文本框中的实际输入内容。如下图:


进行一个什么操作呢?需要对交互事例设置条件,判断如果元件文字为空,设置当前元件文字为空。如下图:

产品经理培训之axure使用教程

更多产品经理培训相关知识及教程请关注产品经理培训官网pm.tedu.cn。达内产品产品经理培训班火热招生中!欢迎你的到来哦!

免责声明:内容和图片源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容

免费预约企业总监级讲师试听课

怕钱不够?就业挣钱后再付学费!     怕学不会?0基础入学,达内定制课程!     担心就业?近12万家雇主企业,推荐名企就业!

上一篇:产品经理培训课程-Axure嵌套百度地图
下一篇:产品经理必备的这几个软件!了解一下!

互联网各大平台产品经理岗位摘要

产品经理的职业规划!做产品经理的你必须要懂

产品经理该如何画好流程图

产品经理的技术涵养

选择城市和中心
贵州省

广西省

海南省