互联网产品交互设计 课件 第6章+Axure交互设计进阶

-------202X------汇报人：AiPPT时间：20XX.XXPOWERPOINTAxure交互设计进阶POWERPOINTDESIGN202X目录CONTENTS05Axure中继器应用06综合案例与实践01Axure交互设计基础02链接与元件显示隐藏03动态面板进阶应用04元件复杂交互设计POWERPOINTDESIGN202XDESIGN01POWERPOINTAxure交互设计基础01媒介与场景媒介是产品展现的形式，如手机中的导航App；场景是使用环境，如行走或驾驶时使用导航。设计时需考虑媒介特性与场景需求，如导航App需在移动中快速响应。03交互设计原则遵循可视、反馈、一致、易读、易取等原则，确保设计符合用户直觉，提供良好反馈，保持界面一致性和易用性。这些原则有助于减少用户学习成本，提高操作效率和满意度。02用户、行为与目的用户是设计核心，需深入了解其需求；行为是用户与产品交互方式；目的是用户使用产品的目标。以用户为中心设计，满足行为习惯，达成使用目的，提升用户体验。交互设计五要素动作与交互样式动作是用例中具体行为，如改变文本、跳转页面；交互样式描述元件样式变化，如字体、颜色、线型。结合动作和交互样式，可让元件在交互中呈现不同视觉效果，增强交互表现力。元件交互入门案例以“提交”按钮为例，设置“鼠标单击时”事件，添加“设置文本”动作，实现点击按钮改变文字效果。操作包括选中按钮、添加用例、选择动作、配置动作，最后预览查看效果。事件与用例事件是对外界操作的响应，如点击、选中；用例是动作组合，定义事件响应，如显示隐藏元件、设置变量。通过合理设置事件和用例，可实现丰富交互效果，如点击按钮切换界面。Axure元件基础交互POWERPOINTDESIGN202XDESIGN02POWERPOINT链接与元件显示隐藏链接交互分多种类型，如当前窗口、新窗口、弹窗窗口、父级窗口、内联框架、锚点链接等。不同类型适用于不同场景，如新窗口适合打开外部链接，内联框架适合页面局部刷新。链接交互分类01制作链接需添加用例、插入动作、配置动作，如选择“当前窗口”打开指定页面或外部URL。通过链接交互可实现页面间跳转，满足用户浏览不同内容的需求。链接制作流程02以页面导航为例，设置导航栏中各菜单项链接，实现点击跳转到对应页面，方便用户快速获取信息。操作包括选中菜单项、添加用例、选择链接类型、配置目标页面或URL。链接交互案例03Axure链接交互设计显示隐藏类型元件显示隐藏有三种类型：仅显示、仅隐藏、切换可见性，可实现弹窗、二级菜单等交互效果。设置时需选择目标元件，选择显示隐藏方式，并可设置切换时间和方式。显示隐藏设置设置显示隐藏需选中元件，勾选“可见性”，选择显示隐藏或切换，还可设置推动拉动元件。通过显示隐藏可控制元件在不同状态下的呈现，实现复杂交互逻辑。显示隐藏案例以弹窗为例，设置弹窗初始隐藏，点击按钮触发显示切换动作，实现点击按钮弹出弹窗效果。操作包括添加弹窗、设置隐藏、添加触发按钮、设置切换动作，最后预览查看效果。Axure元件显示与隐藏POWERPOINTDESIGN202XDESIGN03POWERPOINT动态面板进阶应用动态面板用于多界面场景切换，如导航、排行榜、登录注册切换，每个状态是独立页面，可自由编辑。动态面板比普通元件更灵活，可实现复杂界面切换和布局变化。动态面板概念创建动态面板有两种方式：选中元件转化为动态面板，或直接从元件库拖拽动态面板元件。创建后可添加多个子状态，每个状态可独立设置元件和布局，实现不同界面内容。动态面板创建编辑动态面板需双击面板进入状态管理界面，添加状态并命名，双击子状态进入编辑界面。编辑时可添加元件、设置布局和交互，如添加登录注册界面的输入框和按钮。动态面板编辑Axure动态面板基础动态面板切换动态面板切换需设置交互事件，选择触发动态面板的按钮，添加动作设置切换目标状态。设置后点击按钮可实现动态面板在不同状态间切换，如点击“登录”按钮切换到注册状态。动态面板条件交互可为动态面板设置交互条件，如判断复选框是否勾选，根据条件执行不同动作。通过条件交互可实现更复杂逻辑，如用户未勾选协议时提示，勾选后跳转页面。动态面板案例以登录注册切换为例，设置动态面板包含登录和注册两个状态，通过按钮点击实现状态切换。操作包括添加动态面板、设置状态、编辑各状态界面、设置按钮交互，实现流畅切换效果。动态面板交互设置POWERPOINTDESIGN202XDESIGN04POWERPOINT元件复杂交互设计设立条件需选中元件，双击事件添加动作，点击“添加条件”，设置元件属性、关系和值。例如，判断复选框是否勾选，选择“选中状态”属性，设置关系为“==”，值为“true”。以注册协议为例，设置用户未勾选协议时提示，勾选后跳转页面，通过条件判断实现不同操作。操作包括选择按钮、添加动作、设置条件、配置满足条件和不满足条件的动作。条件设立步骤条件设立案例交互条件用于判断特定情况是否满足，如复选框是否勾选、文本框是否输入内容。条件由元件、属性、关系、值等组成，通过合理设置可实现复杂交互逻辑。条件设立概念交互条件设立全局变量可用于跨页面数据传递，如登录状态、用户名等，实现页面间数据共享。例如，登录成功后将用户名存储到全局变量，在个人中心页面读取显示。全局变量应用局部变量可用于局部事件处理，如表单验证、数据计算等，简化交互逻辑。例如，在表单提交时，使用局部变量获取输入值，进行验证和处理。局部变量应用变量概念全局变量可在整个原型中存储和传递数据，局部变量仅在特定区域或事件中使用。变量可用于存储用户输入、页面状态等信息，实现数据共享和交互逻辑控制。全局变量与局部变量登录状态管理设置全局变量存储登录状态，登录成功时设置为“已登录”，在其他页面根据状态显示不同内容。操作包括设置全局变量、在登录页面设置变量值、在其他页面读取变量值并设置显示内容。表单验证使用局部变量获取表单输入值，进行验证，如判断是否为空、格式是否正确，根据结果设置提示信息。操作包括设置局部变量、获取输入值、设置验证条件和动作，实现表单验证逻辑。全局变量与局部变量案例POWERPOINTDESIGN202XDESIGN05POWERPOINTAxure中继器应用中继器是Axure中用于动态存储和管理数据的元件，可模拟数据库操作，实现数据的增删改查。中继器由数据集和项组成，数据集类似数据库表，项是数据展示模板，可重复使用。中继器概念创建中继器从Default元件库拖拽到页面编辑区，双击中继器进入项编辑界面，设置项布局和数据绑定。可在中继器数据表中添加数据列和数据行，设置列名为数据字段，如姓名、手机号、地址。中继器创建编辑中继器需在项编辑界面添加元件，设置元件数据绑定，如将文本框绑定到数据列，实现数据动态展示。可通过添加行、删除行、上移下移行等操作管理数据集，实现数据动态更新。中继器编辑中继器基础中继器可实现数据增加、删除、修改、查询等操作，通过设置交互动作实现数据动态管理。例如，点击“添加”按钮向中继器数据集添加新行，点击“删除”按钮删除选中行。中继器数据操作中继器可结合系统变量实现复杂交互，如使用局部变量获取用户输入，设置中继器数据项。例如，在表单提交时，使用局部变量获取输入值，设置中继器数据项，实现数据动态添加。中继器与系统变量以通讯录为例，设置中继器包含姓名、手机号、地址等数据列，通过表单输入添加联系人，动态展示联系人列表。操作包括创建中继器、设置数据列、编辑项布局、设置数据绑定、添加表单输入和提交按钮、设置交互动作。中继器案例中继器交互设计POWERPOINTDESIGN202XDESIGN06P