Axure 范例 详解.pdf

1. Accordion 交互介面设计 这个范例模拟了类似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．Auto Complete 交互介面设计 这个范例透过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事件：当键盘输入完字后，立刻触发某事件。本例中，当键盘输 入a 后，立刻触发动态面板的切换。) 3．模拟地图Zoom In/Out 交互设计 》进入地图缩放效果Prototype 展示范例。 》下载此范例RP 檔Axure RP Prototype 范例-地图缩放效果RP 檔(下载后请解压缩)。 ▲例3- 1 例3-1 详解： 该例使用两个动态面板的切换来实现类似google 地图的放大/缩小功能。 本例中用到的主要组件是动态面板和图片映射区域(在动态面板里)。 ▲放大/缩小动态面板的子状态之一(选中的组件是“图片映射区域”) ▲事件(当点击“图片映射区域”时，改变两个动态面板的状态) 4.下拉选单(droplist)交互设计-控制换页 说明： 现有一个Droplist，其中有AAA ，BBB，CCC 三项，如何为这三项设定Link，并且在输 出的页面中点选这三项中的任意一项，链接到对应的页面中。 》浏览这个范例的Prototype 》下载这个范例的RP 文件(下载后请解压缩) 》教学影片-以下拉选单(droplist)来控制换页(1 分43 秒) ▲例4- 1 例4-1 详解： 本例主要讲下拉选单和矩形流程图的用法。 先把下拉选单的值设置好，如下图： ▲下拉选单的值(打钩的为默认显示项) 在站点地图中建3 个子页面，用于跳转。 ▲站点地图