张晓3小时学会Axure图文教程案例篇02 文本输入显示效果张晓3小时学会Axure图文教程案例篇02 文本输入显示效果.pdf

3 小时学会Axure 产品经理原型设计系列教程-案例篇 3 小时学会Axure 图文教程案例篇 ——02 文本输入显示效果 作者：张晓 网站上与用户互动时，经常需要用户输入信息，如用户信息录入、用户对产品的意见反 馈等，这节课我们就用 Axure rp7 来实现一个记住用户输入内容并将其显示出来的原型交 互案例。 一、文本输入显示效果 原型软件：Axure RP Pro 7.0 中文汉化版 实例描述： 1、不输入任何内容时，隐藏提示语标签（Label ）； 2、不输入内容后点提交按钮，会显示提示语标签，同时标签上显示“请输入内容”； 3、输入内容后点提交按钮，会显示提示语标签，同时标签上显示用户输入的内容。 二、交互设计步骤 STEP1 ：页面布局。 将标签（Label ）、文本框（Text Field ）、HTML 按钮（HTML Button ）控件拖入至 工作区面板中，并完成控件的布局。同时将文本框命名为“内容输入文本框”，将用于显示 内容的标签命名为“提示语标签”，以标识该控件。 1 3 小时学会Axure 产品经理原型设计系列教程-案例篇 STEP2 ：将提示语标签（Label ）设为默认隐藏。 选中用于提示语的标签控件，在工具栏中勾选“隐藏”，将该控件默认隐藏掉。 控件勾选隐藏后，在工作区中将以黄色显示，表明该控件已被隐藏。 2 3 小时学会Axure 产品经理原型设计系列教程-案例篇 STEP3 ：定义HTML 按钮的交互用例。 1、选中“HTML 按钮”控件，在【控件交互和注释】面板中双击“鼠标单击时”用例，打 开用例编辑器对话框； 2、在用例编辑器对话框中，单击“新增条件”按钮，打开【条件生成】对话框，然后选择 选择的条件为“控件文字”，对象为“内容输入文本框”，判断的条件设为“值=空值（不 填任何内容）”，最后单击“确定”按钮返回【用例编辑器】对话框； 3 3 小时学会Axure 产品经理原型设计系列教程-案例篇 4 3 小时学会Axure 产品经理原型设计系列教程-案例篇 5 3 小时学会Axure 产品经理原型设计系列教程-案例篇 3、设置输入内容为空时的交互用例。在用例编辑器“点击新增动作框”内，单击“显示/ 隐藏”、”设置文本“动作，分别选择”提示语标签“控件，并将”设置文本“动作的对象” 提示语标签“的值设为”请输入内容！“。 4、设置输入内容不为空时的交互用例。 6 3 小时学会Axure 产品经理原型设计系列教程-案例篇 （1 ）用例选择”鼠标单击时“，双击，打开用例编辑器对话框； （2 ）在用例编辑器对话框中对条件进行编辑。此时判断条件选择”≠ “。 此时我们可以看到在用例2 下方的条件为“else if”，表示当用例1 的条件（输入内容 值为空时）不成立但用例的条件成立时，将执行用例2。 7