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...