Axure提示文本框输入字数限制的交互

作者: 伊缘 分类: ||产品经理|| 发布时间: 2012-10-12 11:33

1. 在Axure中先通过矩形、按钮、文本面板等基本部件制作出界面的基本样式,在脚注编号和标签中将“提交”按钮命名为“提交”;将提示文字命名为“文字提示”;将多行文本框命名为“输入框”便于下一步进行相关用例的添加操作

    雪迪网图片

                         界面初始状态

    2. 制作一个动态面板,大小与多行文本框相同,命名为“提示弹出框”,将控制面板设为初始隐藏,并置于页面的最顶层。面板状态为两种:超出范围、为零。分别制作两种状态下的显示界面,用于当操作者点击“提交”按钮时,根据规范字数显示不同的显示结果。      (注:为了使控制面板的操作结果显示得效果更好,个人建议将控制面板状态下的界面矩形设置一些透明度,使整体效果看起来更顺畅,不会显得面板出现得过于突兀)

     雪迪网图片

                         添加动态面板

 雪迪网图片

  动态面板两种状态

 雪迪网图片

状态1 “超出范围”界面

                     雪迪网图片

                         状态2 “为零”界面

    3. 为多行文本框“输入框”添加用例,文本框的用例设置重点是为了实现已输入字数与提示文字之间的动态交互效果,包含两种情况:一种是当输入字数在规定字数范围内时的提示文字体现;另一种是当输入字数超出规定范围时的提示文字表示形式。具体用例内容见下图

 雪迪网图片

                  多行文本框用例内容

           其中的重点是雪迪网图片的设置,OnLoadVariable变量指的是在多行文本框中输入的字数,以本次所做界面为例,当文本框输入10个字的时候,作为界面以100字为输入上线的限制,提示文字应为“可输入90字”,因此雪迪网图片就是为了实现一个减法的效果,达到实现动态交互的目的。

4. 为“提交”按钮添加用例,按钮添加用例的目的是根据点击按钮时的文本框输入内容的结果显示不同的状态,若文本框输入的内容符合提示文字的要求,直接进行页面跳转或者其他下一步操作,这里不做过多解释,着重介绍当输入的内容不符合规范要求的时候的显示状态,这里就牵扯到了动态面板“弹出提示框”的两种状态    :超出范围、输入内容为零。雪迪网图片

                   “提交”按钮的用例设置

      根据两种状态的显示条件和显示内容,设置对应的用例,使按钮在各种条件下都有对应的结果显示,避免在不同情况下出现遗漏现象,保证了产品模型的严谨度。

小结

    本次产品实例的主要目标就是指明如何实现文本框与提示文字之间的动态交互,同时告诫大家在存在按钮的界面中,要全面的挖掘当出现不同的状态结果时,按钮的交互结果是什么,在一定程度上向大家阐明制作模型或进行需求业务逻辑分析时,要尽可能的包含所有可能出现的情况,尽可能的总结归纳,不要出现业务逻辑上的盲区或疏漏点。