原型设计基础与案例实战第5章

《原型设计基础与案例实战第5章》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、第5章数据操作在Axure中，可以很方便地设置常用的交互动画。有了交互动画，原型可以动起来了，但原型里的数据并不会真正变化。本章会介绍如何通过设置变量、函数和中继器，来控制、修改原型中的数据。5.1变量变量是Axure屮存储数据的抽象概念。可以通过变量名称引用变量，使用变量屮存储的数据。Axure中元件的位置、宽度等元件数据是变量，页面的名称、窗口大小等系统数据也是变量。用户还可以输入数据并定义变量。5.1.1使用变量变量主要应用于动作和条件的设置中。在配置动作时，通常可以在直接输入数值來修改参数、改变特定的变量。例如，配置“移动

2、”动作时，可以直接输入数字，改变元件的位置；配置“设置文本”动作时，可以直接输入文字，改变元件上的文本。但在有些时候，直接输入数值不能满足我们的需求。例如，希望把元件移动到另一个元件底部；或希望将“矩形”上的文字设为“输入框”里的文字。无论是获得元件底部的坐标值，还是获得“输入框”里的文字，都需要使用变量。使用变量就需要用到fx功能。（1）在配置动作界面、设置条件界面等许多需要输入“值”的界面都可以看到fx按钮。图5・1仪按钮（2）单击fx按钮，进入“编辑文本”界面，如图5-2所示。•界而上第1个输入框可以插入变量或包含变量的表达

3、式。•界而上第2个输入框可以添加局部变量，后文会有详细介绍。图5-2fx输入界面提示：变量名或包含变量名的表达式，必须写在括号“[[]]”内。括号外的都会被当成普通文字。（3）单击“插入变量或函数”按钮，会弹出如图5-3所示菜单。其中包含了Axure中所有种类的变量和函数，前6类是变量，后5类是函数。＞全局变量

4、＞中继器/数据集变量函数＞元件＞页面＞窗口

5、＞就示指针＞Number＞字符串＞数学＞日期＞布尔图5・3插入变量或函数卜•面具体介绍Axure中的每种变量和函数。5.1.2全局变量通常，全局变量是用来临时存储数据的。使用全局

6、变量前，需要先创建全局变量。创建后,即可将要存储的数据赋值给全局变量。1•案例说明下面通过一个案例，来说明全局变量的用法。图5-4所示这个原型中，用户先在搜索框中输入“xxx”，单击“搜索”按钮后，下面的文字元件显示结果提示“找不到xxx”。这个过程需要用全局变量存储用户输入的文字。图5・4搜索实现的思路是：将“搜索框”元件上的文字内容传给全局变量，再将全局变量的数据加工后传给“文字提示”元件。2.设置全局变量的值（1）在“搜索”按钮的“鼠标单击时”中添加动作一一设置变量值，如图5-5所示。图5-5设置全局变量提示：界面中可以看到

7、已经有一个变量OnLoadVariableo这个变量是系统自动创建的。（2）单击右上角的“添加全局变量”按钮，进入全局变量界面。添加一个变fiinput,如图5-6所示。•单击绿色加号，可以添加新的变量•单击红色叉号，可以删除变量•单击箭头，可以调整顺序■金IV交RX创it全局3EI3用于测删中3536切換时EUIE・SUH在疋淤艺SW奶®HP?便用2"成!6少的变鼠变■名必刹■字毋如・少于2P＞弼・并且不他含空格.+fX*»(a)不能输入屮文(b)可以输入英文IB仝觸交足創变■用于浏删中斑切損时存储銘療.如■在IE那»»洞览原型

8、mi9V用2H1I®少的变5LStl■名必剥■字母如・少于2"字符.并且不S含空恬・1八》IQ■名栋«UOIOnLoadVanaWe用户81入X图5-6添加全局变量提示：输入新变量名称时需要注意字数限制，而且只能是英文字母或数字。如图5■所示中输入中文是不行的。(3)在配置动作界面选中input,设置input值为“搜索框”元件上的文字，如图5-7所示。配口动作图5・7添加全局变量3•使用全局变量(1)添加动作一一设置文本，如图5-8所示。设置“搜索结果”(文字元件)的值为“找不到[[input]]”，其中,“找不到”是一段文字，

9、[[input]]是变量。图5・8设置文本（2）预览原型，可以在浏览器中查看原型的效果。在输入框中输入“王者荣耀”，点击“搜索”按钮，会出现文字提示“找不到王者荣輝”，如图5-9所示。“王者荣輝”四个字通过全局变量，从输入框传给了文字捉示元件。找不到匚者荣縫图5-9原型预览4.全局变量的生命周期全局变量这个名称是翻译的有问题的。它并不存在于“全局”。全局变量只在当前页面有效。当跳转到其他页面，或者页面刷新之后，全局变量就会清零。貝有一种情况例外，如图5-10所示。打开链接动作有一个特殊的配置选项一一“重新打开页而”（变量修改有效）

10、。选择这个选项刷新页面后，页面中的变量保持当时的值不变。图5-10重新加载当前页面（变量修改有效）5.1.3元件变量元件变量分为代表“某个元件”的变量，和代表元件某个“属性”的变量。1•元件本身也是变量元件本身也是一个变量。如图5T1中,This和