移动设备人机交互设计

– 所有类型的模态视图都会打断用户的工作流。 – 需求确认或者承认视图的频繁出现更让用户厌烦。
警示框
• 对于用户而言，在两者之间做出选择 是最容易的，警示框上的按钮数目最 好也是两个
• 设置警示框上按钮的方法：
– 两个按钮时，左边的按钮通常使用深色 ，而右边的按钮从不使用深色。如操作 有潜在危险时，“取消”按钮应该在右 边并使用浅色；如操作没危险时，“取 消”按钮应该在左边并使用深色。
• 了Fra Baidu bibliotek目标平台
– 软硬件厂商会提供详细文档，从中获得必要的目标平台信息
• 易于检索
– 避免嵌套过深的多级菜单，缩减不必要的功能
• 采用一致的界面风格
– 各种移动应用开发平台都提供某种形式应用界面的风格指南
• 避免不必要的文本输入
– 采用选择列表或模糊查询
• 服务个性化
– 保留用户信息以便能够记录用户的个性化信息，如Cookie
手机交互设计的八个原则
• 原则3：尽量减少用户输入 • 移动端的虚拟键盘一直是科技界无法解决的
一个难题，虚拟键盘的主要缺点：
– 输入定位无法反馈，所以无法形成高效的盲打 – 空间限制，手指的点击经常造成误按
• 输入时尽量多给出参考
– 经常需要结合上下文
2
• 原 则 4 ： 保持全局 导 航一直存在， 最好还能预览 其他模 块 的 动态 – 减少主页面和次级页面之间的跳转次数
移动设备交互设计
2013/12/31
移动设备交互设计的问题
• 如何在有限的资源条件下有效地为用户提供 信息服务
– 屏幕尺寸小，分辨率较低，无法展示丰富的多 媒体内容
– 只能采用顺序展示信息 – 数据输入困难 – 网速慢
移动界面交互设计
• 一般设计原则 • 移动交互界面导航 • 移动交互界面设计原则
移动交互一般设计原则
– 信息分级导航: 表视图可以显示多级信 息，用户也易于通过扩展图标发现信息 的层级关系。
– 浏览分组信息: 可以将通讯录分组，如 同事、家庭或者学校，信息在视觉上清 晰可辨。
– 查找索引信息: 如果使用普通表视图， 可以通过界面右边的索引信息（如字母 表）帮助用户快速查找。
文本视图
网页视图
运行指示
• 自定义图标要和系统自带的图标有明显的区别
– PNG格式。 – 纯白色的alpha。 – 无阴影, 抗锯齿。 – 如增加斜角，必须为90度。 – 工具栏和导航栏上的图标大小为20×20像素；标签栏图标大
小30×30像素。
• iPhone会在自定义的图标加上装饰效果，比如按下或者 选中的效果，所以也不必创建一个全彩色的图标。
• 用户使用移动产品在很多情况下都是碎片时间 • 在需等待情况下，不能把一个枯燥的等待界面
呈现在用户的面前，那用户很快就会换其他 APP。
3
2013/12/31
原则 7：自动保存用户的输入成果
原则 8：为了程序响应的速度，设计有时候需要担 任掩护的作用
Android与iPhone界面布局对比
一些iPhone交互设计元素
• 表示后台有程序正在运行，但任 务完成时不会提醒用户。
• 当程序执行的任务无法立即完成 时，工具栏上会显示稍大点的运 行指示。
– 运行指示提供了很好的反馈机制， 明确地告知用户程序正在运行比告 诉用户任务已经完成更为重要。
• 颜色默认为白色
6
2013/12/31
iPhone标准按钮和图标
边框型
• 使用iPhone自带的按钮和 图标的优势在于:
2013/12/31
米聊的通知中心，里面包含的通知类型多， 显得有点凌乱
原则 5：提供非模态的反馈 • 模态：界面中只有提醒弹框才具有可交互行为
，其他一切都不可操作，这样会打断任务流
• 非模态用List Notification, Toast list等方式来提 醒用户
原则 6：不要让用户等待任务完成
移动界面导航
• 建立导航流程图表，规划移动应用的导航流程
1
1-1
1-2
1-3
1-1-1 1-1-2
1-2-1
1-3-1
1-3-2 1-3-3
一个手机游戏的导航流程图表
欢迎界面
退出
主菜单
继续
新游戏
选项
积分榜
帮助
游戏
Game Over
确认
退出
示例导航流程图表
1
2013/12/31
手机交互设计的八个原则
7
• 标签栏显示在屏幕的最底部，用于变换同组数据的不同显示方式，或者调 用程序的子单元。
• 用户可以在程序的任何界面使用标签栏切换模式或者视图
方法和行为
• 警示框、控件列表和模态视图迫使用户点击按钮之后才能继续使用程序，尽 管它们时常警告用户潜在的危险或者提供额外的选择，也要避免过度使用， 原因在于：
– 缩短开发时间。 – 增加界面的稳定性。当系
统升级时，即使程序外观 改变，这些标准按钮和图 标依旧可用。
• 有两种类型按钮：
– 边框型。可以在导航栏和 工具栏上使用。
– 普通型。适用于工具栏， 如非要使用在导航栏上， 会被转换成边框型。
iPhone标准按钮和图标
普通型
• 标签栏上的标准图标
自定义图标和图片
– 警示框上有一个按钮时，按钮使用浅色 – 警示框上的文字必须简明扼要
控件列表
• 集合了通过点击而启动任务 的选择性按钮，通常用在：
– 提供完成任务的多个可选方式 • 在拍照功能中，控件列表提 供发送照片的三个目的地。
– 在完成具有潜在危险的任务之 前获取确认。 • 例如，根据邮件设置，点击 工具栏上的垃圾箱按钮，通 过控件列表删除邮件或者取 消删除。
• 具有潜在危险的操作，应使用 红色的按钮提醒用户，而且要 将这样的按钮放在控件列表的 顶部：
– 顶部的按钮，视觉更明显。 – 有时用户在试图点击“Home”
按钮时，可能意外触发了控件 列表，将有危险性的按钮放在 底部会增加误操作的概率。
5
2013/12/31
模态视图
• 默认从界面底部滑出并占据整个界面， 并短暂地显示与之前不同的界面，直到 用户完成某项操作
• 状态栏显示iPhone的重要信息，包括 信号强度、网络连接和电池量
• 全屏式的程序是否隐藏状态栏需要 慎重考虑，否则用户退出程序才能 看到手机的状态，这样的用户体验 并不理想。
– 例如，拍照时用户的注意力集中在照片上， 这时隐藏状态栏几秒钟是合理的，用户可以 通过点击找回状态栏、导航栏和工具栏。
• 原则 1:基于用户的心里模型，而不是基于 工程实现模型
手机交互设计的八个原则
• 原 则 2 ：培养用 户 使用情景的思 维 方式 做 设计
米聊2.0时还是把添加好友放置在好友列表的第一排，用户很难发现
手机交互设计的八个原则
• 原 则 2 ：培养用 户 使用情景的思 维 方式 做 设计
微信1.0的时候把添加好友放置主Tab上，方便用户很快的添加好友
– 57×57像素，直角。 – 无发光效果。 – 无透明度。
启动图片
• 启动图片类似于开机画面，是用户点击程序图标之后看到的 图片，几秒之后才会显示应用程序的主界面。
• 启动图片的设计：
– PNG格式 – 320×480像素，可以临时改变状态栏的颜色。 – 启动图片和应用程序的主界面的背景相似。
导航栏、工具栏和标签栏上的图标
为了让用户易于发现和记住，最好使用风格统一的翻 转方式
表视图
• 以栏列表的形式显示数据，栏可以拆分成项或者组，每栏可包含文本 、图片或者控件。
• iPhone OS 定义了两种外观不同的表视图类型:普通型,编组型
开关控件
• 表视图使用户操作更容易
– 选项: iPhone OS 不包括类似于菜单那样 的多项选择式控件，但表视图也有可供 用户选项的列表项。
• 导航栏有两个作用：
– 强调程序中不同视图的导 航
– 便于管理视图中的内容
4
2013/12/31
工具栏（toolbar）
• 当用户需要操作当前界 面内容时，使用界面底 部的工具栏更为合适
• 一个选项的区域为 44×44像素，所以工具 栏上选项要限定在五个 以内,这样用户也容易点 击想要的选项
标签栏（status bar）
– 如果非要隐藏状态栏，那也必须有利于用户 体验，并且用户可以通过点击轻易地重现状 态栏，但也不要为了重现状态栏而定义一个 手势,用户不喜欢发现和记住这样的操作
导航栏（navigation bar）
• 导航栏显示在状态栏的下 方，包括标题、按钮和分 段控件。对于信息层次分 明的产品应用型软件尤其 有用。
• 完成和程序主功能有关系的独立任务， 尤其适合于主功能界面中欠缺的多级子 任务。
– 如撰写新邮件时的模态视图，包含了地址和 消息文本、输入光标、取消和发送按钮。
• 为让用户意识到模态视图是过渡性的操作，可以 指定以下切换方式： – 竖向移动: 模态视图从屏幕的底部滑进滑出。 – 翻转: 当前界面切换到模态视图时从右到左翻转， 视觉上看起来模态视图好像在当前界面的背面。
• iPhone中图标和图片的标准位深度为 24位（红绿蓝各8位），加上8位的 alpha通道，推荐使用PNG格式。
程序图标
• 程序图标放置在手机程序主界面上， 点击之后可以启动程序。如左图，
小图标显示在 S果po和tl手igh机t搜设索置结中。• 小图标的设计： PNG格式。 29×29像素。
iPhone可以将图片自动加上阴影、发 光和圆角效果。 程序图标的设计：