移动用户交互设计 Axure互联网应用交互基础 4.3 Axure互联网应用交互基础（下）-理论.pptVIP

交互设计 UI/UE设计 项目实战 入门到精通 手机APP */18 Axure互联网应用交互基础（下） 全局导航原型设计 */18 本节课目标 了解鼠标悬停效果的实现方式 掌握全局导航交互设计技巧 */18 交互设计 UI/UE设计 项目实战 入门到精通 手机APP 上机练习--鼠标悬停效果 交互设计 UI/UE设计 项目实战 入门到精通 手机APP */18 鼠标悬停改变背景 使用动态面板 状态1中设置背景色是红色的，在状态2中设置背景色是绿色的，然后在鼠标移入时事件（ON MouseEnter）中，让面板的状态发生改变，从而改变部件的背景色 使用Image部件 Image部件有几个特殊的效果，其中一个就是允许用户在鼠标悬停的时候，制定另外一张图片来代替当前的图片 可以制造两张图片切换的效果：一个Image部件可以承载5张图片，一张是正常时候显示的、一张是鼠标悬停时候显示的、一张是鼠标悬停然后按下的时候显示的、一张是部件被选中时候显示的、一张是部件被禁用之后显示的 使用矩形部件 矩形部件允许在正常的时候有一个样式，而在鼠标悬停的时候制定另外一个样式 如：改变背景颜色、边框颜色、边框的宽度等 */18 交互设计 UI/UE设计 项目实战 入门到精通 手机APP 上机练习--全局导航交互设计 交互设计 UI/UE设计 项目实战 入门到精通 手机APP */18 全局导航 全局导航定义 全局导航又称主导航，是页面上一组通用的导航元素，提供用户最基本的访问，方向上指引 全局导航常见元素 LOGO、主导航条、使用工具（注册登录、回主页的窗口、搜索等） */18 全局导航分析 可伸缩的全局导航 当用户鼠标在一级分类上悬停时，一级分类下属的二级和三级分类就会显示出来 而当用户结束悬停后，二级和三级分类就会收缩起来 教师指导学生上机 WE CHANGE LIVES */18 总结 鼠标悬停改变背景色的效果 使用动态面板 使用Image部件 使用矩形部件 什么情况使用动态面板来处理鼠标悬停事件？ 鼠标悬停的时候，播放一段动画 鼠标悬停的时候，改变尺寸，比如那些鼠标悬停后就变大的广告 鼠标悬停的时候，出现伸缩的菜单 鼠标悬停的时候，部件的位置发生变化。如：有明显的位移 鼠标悬停的时候，不但改变了自己的状态，还改变了其他部件的状态 */18 总结 全局导航交互效果 动态面板状态切换 设置选择/选中 设置为选项组 设置为选项组的工作原理 当选项组中的一个形状按钮点击设置为选中状态后，选项组中的其他形状按钮都会切换到默认样式，即未选中 添加部件到选项组 选中要添加到选项组的部件--（右键）设置选项组名称或到部件属性面板底部设置选项组名称 注意：鼠标点击设置部件为选中的动作，要添加在每个选项组部件上才能工作 */18 设置为选项组 设置为选项组的工作原理 当选项组中的一个形状按钮点击设置为选中状态后，选项组中的其他形状按钮都会切换到默认样式，即未选中 添加部件到选项组 选中要添加到选项组的部件--（右键）设置选项组名称或到部件属性面板底部设置选项组名称 注意：鼠标点击设置部件为选中的动作，要添加在每个选项组部件上才能工作 */18 交互设计 UI/UE设计 项目实战 入门到精通 手机APP Axure RP基础知识回顾 交互设计 UI/UE设计 项目实战 入门到精通 手机APP */18 坐标 左上角坐标为X0：Y0 AxureRP的坐标计算是从页面区域的左上角开始的 神秘的隐藏Z坐标 置于最前 置于最后 向前移动一层 向后移动一层 */18 生成原型在浏览器中查看 发布到AxShare 创建账号/使用已有账号 设置项目名 确认结束 */18 常用快捷键--移动部件 Shift+拖拽 延x/y轴移动部件 Ctrl+拖拽 复制并移动部件到鼠标光标位置 Ctrl+Shift+拖拽 延x/y轴复制并移动部件到鼠标光标位置 Shift+箭头 移动部件10px 箭头 移动部件1px 均匀分布选中部件 选中多个部件--水平分布/垂直分布 粘贴部件到鼠标光标处 右键--粘贴 */18 常用快捷键--选择部件 慢速点击 选择被压在下一层的部件 多层重叠 鼠标左键慢速点击可选择下一层... ...下一层 在设计区域的空白处 右键--选择上面/下面全部 */18 本章总结 鼠标悬停效果的实现方法有哪几种? 什么是全局导航？全局导航有什么特点？ 如何实现全局导航的交互效果？ */18 交互设计 UI/UE设计 项目实战 入门到精通 手机APP 交互设计 UI/UE设计 项目实战 入门到精通 手机APP