Axure范例详解1VIP专享

1. 这个范例模拟了类似Microsoft Outlook 左侧功能列的展开效果。这种使用者介面样式 (UI pattern)称为 "Accordion"。 》进入Accordion 效果Prototype 展示范例。 》下载此范例RP 文件 Axure RP Prototype 范例-Accordion 效果RP 文件(下载后请解压缩)。 ▲例1-1 ▲例1-2 例1-1、例1-2详解： 例1-1 动态面板里包含了如下元素：背景，父目录，子目录。 所有的元素都使用矩形制作： 背景(140×210px)使用灰色填充； 父目录(140×50px)使用蓝色填充，双击可写字，12号字体,后两个使用了切换动态面板指令，点击即可切换到动态面板的其他子状态； 子目录(140×25px)使用了轮转样式，当鼠标划过时，会改变样式。 注意： 1． 动态面板的尺寸为140×210px，子状态中超出范围的元素将不会显示出来。 2． 排在最上面的子状态是默认显示状态。 ▲动态面板内的所有元素 ▲背景色填充 ▲轮转样式的设置(选中矩形，鼠标右键/编辑按钮形状/编辑轮换样式) (▲OnClick事件：用鼠标点击该组件，就会触发事件) ▲动态面板状态转换的设置(选中矩形，双击右边“注解和交互”中的OnClick) 例 1-2 例 1-2跟例 1-1大多数设置一样，区别在于父目录的填充色是渐变色，状态的切换不用点击鼠标，只要鼠标划过就会自动切换。 ▲渐变色的填充 (▲OnMouseEnter事件：当鼠标进入该组件的区域就会自动触发事件) ▲动态面板状态转换的设置 2 这个范例透过Axure RP 的 OnKeyUp event 来模拟常见的UI Design Pattern-自动完成(Auto Complete)的效果。 自动完成(Auto Complete)的特性： 当使用者必须输入一个容易错或不易记住的字符串时，自动完成的功能可以协助使用者避免上述困扰，且加快输入速度。 》进入Auto Complete 效果Prototype 展示范例。 》下载此范例RP 文件 Axure RP Prototype 范例-Auto Complete 效果RP 文件(下载后请解压缩)。 ▲例2-1 例2-1详解： 例2-1主要由 3个组件组成：背景、输入框和动态面板。 形成此效果的原理是：对输入框中字进行判断，如果符合条件，就会返回相应的结果，如果不符合条件，则不进行任何操作。 ▲例2-1中的所有组件 首先，在动态面板中设置好所有的子状态和子状态里的内容。 ▲动态面板中的所有子状态 ▲子状态 a中的所有内容 然后设置输入框中的条件：如果输入框中的文字是 a-k任一小写字母，那么下面就会出现一些自动完成的条目。 ▲条件设置(OnKeyUp...