Axure_60_交互原型设计详细实例教程(二)

《Axure_60_交互原型设计详细实例教程(二)》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、Axure6.0交互原型设计详细实例教程（二）——注册表单的判断验证模型在Axure里血，我们可以根据不同的条件判断，來实现全真模拟的表单验证，比如在验证码错谋的时候点击“提交”，提示“请输入正确的验证码”等等，下面我们一起來看一下如何实现条件判断的：第一步：准备好注册表单的各个元件我们简单点，包括邮箱、密码、确认密码、验证码、提交按钮和错谋提示框，并为每一个元件命名（命名方式见教程一），这里我们分别命名为“邮箱”、“密码”、“确认密码”、“验证码”、''提交”和“错误提示”。錯误提示框是一个空的文本框.功能相当

2、于flash里面动态文本第二步：理清验证逻辑这一步对于程序员来说应该会很好理解,就是if…do…elseif…do…elseif…do…,详细分解出来就是：当点击“快速注册”按钮的时候：1.如果邮箱输入框为空，“错课提示”处提示“请输入您的邮箱！”2.如果邮箱输入框不为空，但是不包含和”两个字符，“错误提示”处提示“请输入正确的邮箱！”3.如果密码输入框为空，“错误提示”处提示“请输入您的密码！”4.如果密码输入框不为空，但是确认密码输入框的值和密码输入框的值不等，“错误提示”处提示“两次密码不一致，请重新输入！

3、”5.如果验证码输入框为空，“错误提示”处提示“请输入验证码！”1.如果验证码输入框不为空，但是值不等于slat,“错误提示”处提示“请输入止确的验证码！”2.如果邮箱输入框不为空，且包含和”两个字符，且密码输入框不为空，且确认密码输入框的值和密码输入框的值相等，且验证码输入框值等于slat,跳转到“XXX”页而。上而的七个判断是有顺序的，程序从上往下依次读取，如果不满足第一条则验证第二条，然后依次往下验证，前面6条是错谋验证，最后1条是正确验证，成功则执行Z后的操作，只要理解了上面这个逻辑，下面的就简单了。第三

4、步：在axure中添加判断事件郎箱:注意了，所有的验证都是在点击“快速注册”按钮的时候触发的，因此我们事件应该写在“快速注册”按钮的“onelick"操作上：心标签“#提交01I添…施悪…TOnClek礎认密码:SLAT肓不?换张□快速—□—接下來依次写上6个事件:点击上图中的添加事件后弹出条件1的事件编辑框如下图,然后我们点击"AddCondition"添加判断条件，你可以理解成是在写”if条件”。Step1:DescnptionCase1Step2:Addactions▲琏檳在当罚g□甲rr开基冬在林匚送頊卡

5、中打开廷接左彈出官□中打开垂疾注父誉口申打开更擾关闲当前酚口左轅(S)中打开基接⑻J动屯面板昱却痴s)2^8$氐(s)空損3!氏的可元性怡)移动面夜(s)&nQPaneK5)toFrontAWidfletsandVariables迪5支量宙件値($)滾动灵妾辱酒7区琢启看爼件(时無迫件⑶据佝S)设墨为送走总隹迫件釣宦点展开节点(时折罰(S)AddConditionnfigureactionsStep3:OrganizeactionsSelectanacttoninStep3toconfigureHideStep2

6、点击“AddCondition”弹出条件编辑框:ConditionBuilder这里可以进小」厂匸同时满足下面的条件■还是只好为Y«ff「IBIffiS于•目和“all▼cfthefollowing:valueofvanahte_lonLoadVariat▼这里的帝思举个例就明白了：equals▼value齐田X点击添加条小于淋框跚连起来就星:当勺陥”输入框的值的长度小于1时，执行…说明ifvalueofvariableOnLoadVariableequals"写下如下条件:ConditionBuilder满足a

7、ii・ofthefollowing:全部清除lengthofwidgetvalue▼圧箱islessthanTvalue说明iflengthofvalueofwidget/诸islessthan^V好，条件1写完了，点击确定，然后设置在条件1下执行的事件，应该是“错误提示”输入框的值显示“请输入您的邮箱！”Step1:DescriptionCase1EdrtConditionClearConcitionStep4:ConfigureactionsStep2:AddactionsStep3:Organizeacti

8、onsHideStep22•打开变童编馆器科冷器-•■二SetVariableandWidgetValuestssTm项:全和除textonwidget・霜盘示v▼equallovalue做以上设首■然后点击編国文本'说明Settextonwidgetequalto羅入文本En?erandformattextbelowToinsertvanablesorexpressio