用axure做出交互高保真原型之:文字输入越过限定输入的交互成效

  通过axure的文本框和函数的效用,告终一个高保真的交互原型,做出文字输入高出范围的后果。 一、主意

  通过axure的文本框和函数的效用,告终一个高保真的交互原型,做出文字输入高出范围的后果。

   二、妙技哀求

  哀求看本教程的同窗,需求对函数有所会意的效用又一个根本的操纵。借使不熟识的话,也可能通过本文来练习运用函数。函数也不是什么妖魔,实在他们很乖。

   三、宗旨

  学以至用,愿望全邦没有让人苍茫的教程。

   四、后台

  近来年华比拟敷裕,我就把原型都做成交互高保真的了,遭遇极少没做过的我就搜教程看,不过良众教程都写的很扼要,对练习的人哀求比拟高,不适合小白,我也终年由于肖似的教程走过不少弯途,踩过不少坑。此次也是踩了坑,是以写个小白教程,以资激劝自身输出。

  本落要转折寰宇!哼哼~

   五、教程

  原型地方及教程

  方法 1

  从元件库拖一个文本域元件到画布上,便是输入段落谁人元件(汉化后翻译是文本域,比拟专业,恐怕平常人回不太能分解。不过翻译是死的,人是活的是不是)。然后单击元件,正在右侧样式下面给这个元件定名一下,我定名的叫“输入框”,大众看神情吧,反正不互助的话奈何定名没人管得着你。接下来,双击输入框,输入提示文字,文字样式调度一下,颜色配置成999999。

  方法 2

  现正在,拖一个矩形元件,放到输入框的左下角。把矩形狂的边框线宽度配置为0,后台也配置为空缺就行。然后依照方法1的办法给矩形定名,我管他叫计数,由于这个矩形起到了显示输入框最大输入范围和统计今朝输入的字数的功用。

  方法 3

  接下来,双击输入框,给输入框增添变乱。一共增添两个变乱。变乱1是文本转折时框输入时范围文本框的输入为500字,并统计今朝输入的文字个数。变乱2是获取文本框主题时,清空今朝的提示文字。因为今朝文本框没有提示语的属性,是以只可用这种式样做成输入时清空提示语的交互。

  变乱1文本框文字转折时,配置两个操作。用到两个函数(点击函数可能查看用法):length和substring

  变乱1配置:选中文本框,点击新筑交互,然后采取文本转折时,采取元件计数,然后采取配置文本,点击值的右侧fx,配置函数。

  然后依照图示为今朝的元件也便是文本框,增添一个部分变量。

  增添完结后,点击增添函数或变量,采取适才增添的部分变量,然后再采取字符串函数length。

  然后,采取完函数后,正在函数后面加上/500。下图是配置完结后的姿势。这个函数配置的,便是下方右侧图示映现的实质。这个函数配置的寓意是,获取今朝的元件,也便是输入框文本的字符长度,也便是获取你正在输入框里输入了众少个字。然后/500是范围输入长度是500字的乐趣。是以集合下来便是下方右侧图示的文字输入字数范围提示的样式。

  现正在能获取你今朝输入的字数了,也显示了今朝可输入的字数是500字。接下来,就要配置怎么范围你的输入不越过500字了。还说采取输入框,然后增添行动,采取配置文本,然后元件,采取输入框。上一次采取的是计数,这一次采取输入框。上一次是由于要配置显示今朝输入字数和最大输入字数,这一次配置是要范围你正在文本框里输入的字符数,是以要采取文本框,切切不要搞错!!!

  跟之前雷同,配置函数,点击fx去配置函数。然后与下方中心的图所示雷同,先增添部分变量。然后采取插入函数或变量,增添适才增添的部分变量,上面有教奈何增添,不正在赘述了。此次增添完部分变量后,再增添一个字符串函数:substring。睹下方最右边的图。是substring不是substr,别搞错了。我看的教程就用的substr,结果有bug,没法输入文字,会自愿清空输入框。。。自后我去找的函数,换成了substring就好了。教程诚是坑我,是以我才写教程。。。空话少说,增添完函数后。如图,把函数里()里的from和to改成你要截取的字符串的领域。我改成了(0,500),乐趣是,不管文本框里输入众少字,我只显示从第一个到第500个字。从而到达范围输入的后果。到此,字数范围的交互就竣事了

  然后适才不是有个变乱2吗,变乱2是一个获取主题时的变乱。获取主题时,配置文本框的文本,这个文本配置上面都有教,大众温习一下。然后值呢,空着就行。蓝本我们文本是写了提示文案吗,你再浏览器单击时获取了主题,就会奉行这个获取主题时的变乱,然后把文本配置为空,就到达了我们的交互宗旨。

  本次教程到此竣事!

  此次写教程花了1个小时呢~

  可谓全心良苦。

发表评论

表情:
验证码
评论列表 (暂无评论,341人围观)

还没有评论,来说两句吧...