移动用户交互设计 移动端运动社交应用项目设计 5.2 移动端运动社交应用项目设计（2）.ppt

交互设计 UI/UE设计 项目实战 入门到精通 手机APP */32 移动端运动社交应用项目设计（2） 移动应用交互设计 */32 本节课的目标 掌握移动应用导航模式 移动应用中的栏 移动应用中的对话框 */32 交互设计 UI/UE设计 项目实战 入门到精通 手机APP iOS应用的导航模式 交互设计 UI/UE设计 项目实战 入门到精通 手机APP */32 iOS应用的导航模式 平铺导航模式 内容组织无层次变化，内容都放置在同一个屏幕上 可左右或者上下滑动屏幕，查看内容 标签导航模式 内容放置在几个模块里，模块之间无关联 点击标签实现各功能和模块的切换 树形结构导航模式 面包屑导航 内容层次感强 */32 平铺导航 分屏控件的导航实现 作用 将一个大的屏幕分成几个小的标准屏幕来显示 手势 点击或者滑动 优点 快速查看信息 在少数对象上执行任务 多应用于实用型应用程序 */32 平铺导航 分页控件的导航实现 主要应用于电子书、电子杂志及普通应用 大都以翻书的动画效果呈现页面跳转（iBooks） 功能按钮置于界面顶部或隐藏 可以双页显示 思考： 分页控件导航导致页面切换不便，用什么样的办法解决呢？ */32 平铺导航 答案 可以在页面底部添加可以拖动或者点击的滑块，通过拖拽或点击实现页面之间的快速切换 */32 iOS的标签导航 每个标签代表一个功能模块，各功能之间是相对独立的 */32 iOS的标签导航 标签栏中的标签不能超过5个 如果需要分类的项目较多，把最后一个设置成更多... 另： 注意区分标签栏和工具栏 */32 iOS的树形结构导航 树形结构导航层次可以无限深（不超过4层） */32 iOS的树形结构导航 树形结构在iPhone和iPad上的区别 iPad采用分栏视图和悬浮层 */32 模态视图 在导航过程中，有的时候需要暂时放弃主要任务而去做一些次要任务。完成次要任务后，再回到主要任务上。这个次要任务就是在“模态视图”中完成的。 */32 模态视图 默认情况模态视图从屏幕底部滑出 模态视图上必须要有 确定 取消 手机全屏显示 安卓不需要模态视图 */32 交互设计 UI/UE设计 项目实战 入门到精通 手机APP 安卓应用的导航模式 交互设计 UI/UE设计 项目实战 入门到精通 手机APP */32 安卓的导航 标签 具备iOS平铺导航和标签导航的特点 可滑动和点击切换 树形 优缺点同iOS树形结构导航 在操作控件栏中可以添加下拉列表，并切换到其他视图 */32 交互设计 UI/UE设计 项目实战 入门到精通 手机APP 移动应用中的栏 交互设计 UI/UE设计 项目实战 入门到精通 手机APP */32 状态栏 一般出现在屏幕顶部，包含网络情况、时间、电量、信号强弱、通知等用户需要的信息 iOS系统的状态栏 固定高度为20点 设计时要考虑是否隐藏 安卓系统的状态栏 高度不固定 */32 iOS中的工具栏、导航栏、标签栏 工具栏 处理屏幕中的操作，没有导航和屏幕跳转功能 手机中一般在屏幕底部 注意：有固定用途一些系统图样按钮，不能挪做它用 */32 iOS中的工具栏、导航栏、标签栏 导航栏 位于屏幕顶部，分为左、中、右3个区域 模态视图的导航，右边需要一个确定按钮 */32 iOS中的工具栏、导航栏、标签栏 标签栏 位于屏幕底部，实现标签导航以及应用中功能模块切换 */32 安卓中的菜单栏和操作栏 操作栏 起到导航、切换视图和操作菜单等作用 主要分四个区域 应用图标 下拉列表控件 完成当前界面操作按钮 溢出按钮 使用时可以分割成不同的部分 */32 安卓中的菜单栏和操作栏 菜单栏 类似ios界面下面的标签栏 因为Andorid手机在屏幕下方有触摸键所以原生Android菜单栏是放在顶部的 导航栏和菜单栏每一个应用都或许不一样，Android对于尺寸没有太明确的数据规范 由于ios标准严格，规范系统，所以目前大多的做法是先设计ios系统下的界面布局与视觉，然后再修改为适合Andorid系统的界面 */32 交互设计 UI/UE设计 项目实战 入门到精通 手机APP 移动应用中的对话框 交互设计 UI/UE设计 项目实战 入门到精通 手机APP */32 iOS中的对话框 警告框 给用户提示信息，让用户进行选择的对话框 至少要有一个按钮 不超过两个按钮 思考： 如果设计警告框，确定按钮放在哪儿（左还是右）？取消按钮放在哪儿（左还是右）？ */32 iOS中的对话框 答案 左右都可以 非破坏性的操作，确定按钮放右边，取消放左边，因为更好操作 破坏性的则反之 */32 操作列表 手机端的操作列表：从屏幕下方滑出 ipad端的操作列表：表现为一个带箭头的黑色