HIG1~3章，6章的内容简单讲解（即HIG中的设计和概念部分）

1. 对
《iOS⼈人机交互指南》
的⼀一点理解
彭澎 LUNA
2012.10.24
12年11月6⽇日星期⼆二 1

2. 概览
Introduction
• 《iOS⼈人机交互指南》(Human Interface Guidelines，简称HIG)
http://developer.apple.com/library/ios/#documentation/UserExperience/
Conceptual/MobileHIG/Introduction/Introduction.html
• ⾯面向设计师和开发者
• 提供提供⼤大量的基础理论知识和技术指导
2
12年11月6⽇日星期⼆二 2

3. 概览
Introduction
• 伟⼤大的iOS应⽤用遵循平台与界⾯面设计原则
Great iOS Apps Embrace the Platform and HI Design Principles
——相关的章节 “平台特性”与“⽤用户界⾯面设计准则”
• 伟⼤大的应⽤用设计源于简明的定义
Great App Design Begins with Some Clear Definitions
——相关的章节 “应⽤用设计战略”与“案例研究:过渡到iOS”
• 伟⼤大的⽤用户体验植根于对细节的⽤用⼼心
A Great User Experience Is Rooted in Your Attention to Detail
——相关的章节 “⽤用户体验指南”与“iOS⽤用户界⾯面元素使⽤用指南”
• ⽤用户期望在使⽤用应⽤用的过程中体验iOS的技术
People Expect to Find iOS Technologies in the Apps They Use
——相关的章节 “iOS技术使⽤用指南”
• 所有应⽤用⾄至少需要⼀一些定制的设计元素
All Apps Need at Least Some Custom Artwork
——相关的章节 “定制图标与图像创作指南”
3
12年11月6⽇日星期⼆二 3

4. 概览
Introduction
• 伟⼤大的iOS应⽤用遵循平台与界⾯面设计原则
Great iOS Apps Embrace the Platform and HI Design Principles
——相关的章节 “平台特性”与“⽤用户界⾯面设计准则”
• 伟⼤大的应⽤用设计源于简明的定义
Great App Design Begins with Some Clear Definitions
——相关的章节 “应⽤用设计策略”与“案例研究:过渡到iOS”
• 伟⼤大的⽤用户体验植根于对细节的⽤用⼼心
A Great User Experience Is Rooted in Your Attention to Detail
——相关的章节 “⽤用户体验指南”与“iOS⽤用户界⾯面元素使⽤用指南”
• ⽤用户期望在使⽤用应⽤用的过程中体验iOS的技术
People Expect to Find iOS Technologies in the Apps They Use
——相关的章节 “iOS技术使⽤用指南”
• 所有应⽤用⾄至少需要⼀一些定制的设计元素
All Apps Need at Least Some Custom Artwork
——相关的章节 “定制图标与图像创作指南”
4
12年11月6⽇日星期⼆二 4

5. ⼀一、平台特性
12年11月6⽇日星期⼆二 5

6. 平台特性
Platform Characteristics
• 屏幕是⽤用户体验的核⼼心
The Display Is Paramount, Regardless of Its Size
• 屏幕的⽅方向是会变的
Device Orientation Can Change
• 使⽤用⼿手势，⽽而⾮非点击
Apps Respond to Gestures, Not Clicks
• 只会有⼀一个应⽤用在前台与⽤用户互动
People Interact with One App at a Time
• ⼀一个应⽤用只会有⼀一个窗⼝口与⽤用户互动
Preferences Are Available in Settings
• 偏好设定可以在“Setting”中修改
Most iOS Apps Have a Single Window
• 屏幕上“帮助”的效果有限
Onscreen User Help Is Minimal
6
12年11月6⽇日星期⼆二 6

7. 平台特性
Platform Characteristics
屏幕是⽤用户体验的核⼼心
• 最舒适的点击区域⼤大⼩小是44×44 点 (Points ⽽而⾮非Pixels)
• 精美的图⽚片设计，能让应⽤用出类拔萃
• 让⽤用户忘记设备专注于内容或任务
7
12年11月6⽇日星期⼆二 7

8. 平台特性
Platform Characteristics
屏幕的⽅方向是会变的
• 在iPhone和iTouch上，⼤大部分⽤用户习惯竖持，所以⽤用户预期应⽤用以竖向启动
• 在iPad上，横竖持握都⽐比较常⻅见，所以⽤用户预期的启动⽅方向会与持握⽅方向⼀一致。
8
12年11月6⽇日星期⼆二 8

9. 平台特性
Platform Characteristics
使⽤用⼿手势，⽽而⾮非点击
• 利⽤用所有iOS内建的原有⼿手势
• 使⽤用者还是习惯⼀一⼿手⼀一指⾛走天下
9
12年11月6⽇日星期⼆二 9

10. 平台特性
Platform Characteristics
只会有⼀一个应⽤用在前台与⽤用户互动
• 应⽤用的五个状态：活动，不活动，后台，挂起，未启动
• 屏幕⼀一次只能展⽰示⼀一个程序，即只有⼀一个程序处于活动状态
10
12年11月6⽇日星期⼆二 10

11. 平台特性
Platform Characteristics
⼀一个应⽤用只会有⼀一个窗⼝口与⽤用户互动
• 良好对导航能让⽤用户对界⾯面产⽣生空间感
• 不要把内容堆在⼀一屏上，因为翻⻚页很容易
11
12年11月6⽇日星期⼆二 11

12. 平台特性
Platform Characteristics
其他特性
• 偏好设定可以在“Setting”中修改 • 屏幕上“帮助”的效果有限
12
12年11月6⽇日星期⼆二 12

13. ⼆二、⽤用户界⾯面设计原则
12年11月6⽇日星期⼆二 13

14. ⽤用户界⾯面设计原则
Human Interface Principles
• 整体之美
Aesthetic Integrity
• ⼀一致性
Consistency
• 直接操作
Direct Manipulation
• 反馈
Feedback
• 隐喻
Metaphors
• 让⽤用户来控制
User Control
14
12年11月6⽇日星期⼆二 14

15. ⽤用户界⾯面设计原则
Human Interface Principles
整体之美
• 应⽤用的外观和功能完美地结合
15
12年11月6⽇日星期⼆二 15

16. ⽤用户界⾯面设计原则
Human Interface Principles
⼀一致性
• 该应⽤用是否符合IOS标准？
• 该应⽤用⾃自⾝身是否保持⼀一致性？
• 当前的应⽤用跟之前的版本是否统⼀一？
16
12年11月6⽇日星期⼆二 16

17. ⽤用户界⾯面设计原则
Human Interface Principles
直接操作
• 通过旋转或移动设备来影响屏幕中的物体
• 通过⼿手势来操作屏幕中的物体
• 操作结果以可⻅见，迅速的⽅方式展⽰示给⽤用户。
17
12年11月6⽇日星期⼆二 17

18. ⽤用户界⾯面设计原则
Human Interface Principles
反馈
• 标准控件能响应每⼀一个⽤用户操作⾏行为。
• 细微的动画能作为意思明确的反馈，清晰地展⽰示操作结果。
• 声⾳音同样能提供有⽤用的反馈，但这个不应该做为主要或唯⼀一的反馈机制。
• 如果操作过程⽐比较久，需要不断更新操作进展。
18
12年11月6⽇日星期⼆二 18

19. ⽤用户界⾯面设计原则
Human Interface Principles
隐喻
• 由现实世界映射，⽤用户就能快速地掌握如何使⽤用。
• 恰当的隐喻，在使⽤用或体验⽅方⾯面不需要拘泥于现实世界的限制
• iOS让⽤用户实实在在的跟屏幕中的物体产⽣生交互，可以做到和现实中使⽤用
没有差别
19
12年11月6⽇日星期⼆二 19

20. ⽤用户界⾯面设计原则
Human Interface Principles
让⽤用户来控制
• 给出操作建议
• 对危险的操作提出警告
• 可预测的控件和⾏行为
• 有⾜足够的机会在操作被处理前取消
• 正在被执⾏行的操作能优雅地停⽌止
20
12年11月6⽇日星期⼆二 20

21. 三、应⽤用设计策略
12年11月6⽇日星期⼆二 21

22. 应⽤用设计策略
App Design Strategies
• 定义你的应⽤用程序
Create an App Definition Statement
• 为设备⽽而设计
Design the App for the Device
• 为任务量⾝身定制界⾯面
Tailor Customization to the Task
• 原型和迭代
Prototype and Iterate
22
12年11月6⽇日星期⼆二 22

23. 应⽤用设计策略
App Design Strategies
定义你的应⽤用程序
• 列出所有⽤用户可能喜欢的功能点
• 明确你的⺫⽬目标⽤用户
• 通过对⺫⽬目标⽤用户的定义筛选功能点
• 在整个开发过程中贯彻
23
12年11月6⽇日星期⼆二 23

24. 应⽤用设计策略
App Design Strategies
为设备⽽而设计
• 拥抱iOS界⾯面规范
• 确保程序在iPad和iPhone上通⽤用
• 慎重考虑web移植应⽤用的设计
24
12年11月6⽇日星期⼆二 24

25. 应⽤用设计策略
App Design Strategies
为任务量⾝身定制界⾯面
• 不要为了定制⽽而定制
• 尽可肯能不要加重⽤用户的认知负担
• 在控件和内容间保持差异
• 在设计定制控件前要三思
• 确保对定制界⾯面进⾏行充分的⽤用户测试
25
12年11月6⽇日星期⼆二 25

26. 应⽤用设计策略
App Design Strategies
原型和迭代
• 使⽤用纸质原型或线框图对主要视图和控件进⾏行布局
• ⽤用Xcode的模板创建原型并安装在设备上，提供⼀一个真实的测试环境。
26
12年11月6⽇日星期⼆二 26

27. 四、⽤用户体验指南
12年11月6⽇日星期⼆二 27

28. ⽤用户体验指南
User Experience Guidelines
抓住主要的任务 内容至上 自上而下地考虑
让用户有逻辑可循 使用方法明显、容易 使用能被用户理解的术语
最小化必要的输入 淡化文件操作 允许协作和互联
弱化设置功能 恰当地品牌化 让查询变得快速且回报丰厚
编写良好的描述能有效地推介应用 简洁 保持UI控件一致性
考虑加入实物感和真实感 用绝佳的图片取悦用户
手持方向会改变 让点按目标的尺寸符合指尖大小
使用精妙的动画来交互 恰当地支持手势 只是在必要的时候才要求用户保存
偶尔在模态下处理简单的任务 迅速启动应用
28
12年11月6⽇日星期⼆二 28

29. ⽤用户体验指南
User Experience Guidelines
抓住主要的任务
• 分析应⽤用，哪些任务是必须的
• 分析每个屏幕，哪些功能是必需的
29
12年11月6⽇日星期⼆二 29

30. ⽤用户体验指南
User Experience Guidelines
内容⾄至上
• 游戏类 • 效率类
惬意的故事 减轻控件在界⾯面中的⽐比重
漂亮的图⽚片 控件外观和程序的图⽚片⻛风格⼀一致
反馈及时的游戏操控 不交互时，隐去控件
30
12年11月6⽇日星期⼆二 30

31. ⽤用户体验指南
User Experience Guidelines
⾃自上⽽而下地考虑
• ⽤用户会这样使⽤用设备：
• 所以把最常⽤用的信息放在顶部
• 并且信息⾃自上⽽而下，从概括向具体渐进，从⾼高级向低级渐进
31
12年11月6⽇日星期⼆二 31

32. ⽤用户体验指南
User Experience Guidelines
让⽤用户有逻辑可循
• 符合逻辑的信息路径，能⽅方便⽤用户做出预测。
• ⼤大多数情况下，只提供单⼀一的路径。
32
12年11月6⽇日星期⼆二 32

33. ⽤用户体验指南
User Experience Guidelines
使⽤用⽅方法明显、容易
• 尽量减少控件
• 合理地使⽤用标准
控件和⼿手势 • 控件所配⽂文案清晰
易懂
33
12年11月6⽇日星期⼆二 33

34. ⽤用户体验指南
User Experience Guidelines
使⽤用能被⽤用户理解的术语
• 所有⽤用于与⽤用户沟通的⽂文案，都需要保证你的⽤用户能够理解。
• 多了解你的⺫⽬目标⽤用户，以判断所使⽤用的⽂文案是否适⽤用于他们。
34
12年11月6⽇日星期⼆二 34

35. ⽤用户体验指南
User Experience Guidelines
最⼩小化必要的输⼊入
• 平衡⽤用户的输⼊入与
获得的信息 • 简化⽤用户的输⼊入⽅方
式 • 在合适的时候，从
iOS 获取信息
35
12年11月6⽇日星期⼆二 35

36. ⽤用户体验指南
User Experience Guidelines
淡化对⽂文件的操作
• 如果你的应⽤用允许⽤用户创建或编辑⽂文件，它应该:
• ⾼高度图形化的
• ⼿手势直接操作
• 不要让⽤用户到处找新建⽂文档按钮
36
12年11月6⽇日星期⼆二 36

37. ⽤用户体验指南
User Experience Guidelines
容许协作和互联
• 考虑多⼈人共⽤用⼀一台
• 多平台共享数据 iPad的情况
• ⽤用户之间⽅方便地
互动和分享
37
12年11月6⽇日星期⼆二 37

38. ⽤用户体验指南
User Experience Guidelines
弱化设置功能
• 不常⽤用设置，放在 • 常⽤用的设置，安排 • 最常⽤用的选项，融
在应⽤用内的选项中 ⼊入到主界⾯面中。
系统选项中。
38
12年11月6⽇日星期⼆二 38

39. ⽤用户体验指南
User Experience Guidelines
恰当地品牌化
• 精炼地，且不浮夸地将品牌的颜⾊色或图像融⼊入应⽤用。
• 避免将原本显⽰示内容的区域来放置⼲⼴广告
39
12年11月6⽇日星期⼆二 39

40. ⽤用户体验指南
User Experience Guidelines
让查询变得快速且回报丰厚
• 为数据建⽴立索引
• 搜索远程数据前，实时加载本地数据。
• 异步加载媒体⽂文件
• 搜索数据分类，使⽤用范围选择栏（scope bar）。
40
12年11月6⽇日星期⼆二 40

41. ⽤用户体验指南
User Experience Guidelines
编写良好的描述能有效地推介应⽤用
• ⾼高亮你觉得⽤用户最喜欢的特性
• 避免拼写、语法和标点错误。
• 避免使⽤用⼤大写字⺟母。
• 写出对具体 bug 的修复。
41
12年11月6⽇日星期⼆二 41

42. ⽤用户体验指南
User Experience Guidelines
简洁
• 努⼒力将信息⽤用浓缩的⽂文案表达。
• 保持控件的标签简短，或使⽤用能被理解的符号
42
12年11月6⽇日星期⼆二 42

43. ⽤用户体验指南
User Experience Guidelines
保持UI控件⼀一致性
• ⾃自定义控件/图标外观 • 决不能让标准的控件/图 • 使⽤用标准控件/图标的
时，尽量和标准控件/ 标指代其他的含义 优势：稳定性
图标保持⼀一致
43
12年11月6⽇日星期⼆二 43

44. ⽤用户体验指南
User Experience Guidelines
考虑加⼊入实物感和真实感
• 让视图和控件模仿现实中的物体和物体的控制⽅方法
• 图⽚片设计适当地夸张 • ⽤用动画进⼀一步强化物理效果，物理的真实感⽐比
或加强，有冲击⼒力 追求外观上的真实感更为重要
44
12年11月6⽇日星期⼆二 44

45. ⽤用户体验指南
User Experience Guidelines
⽤用绝佳的图⽚片取悦⽤用户
• 漂亮的、精致的图⽚片吸引⼈人们使⽤用程序，即使很简单的任务也⽤用得很开⼼心。
• 精美的图⽚片设计能在⽤用户⼼心中树⽴立品牌形象。
• 模仿宝质地优良的原料的外观是个好办法。
45
12年11月6⽇日星期⼆二 45

46. ⽤用户体验指南
User Experience Guidelines
⼿手持⽅方向会改变
• 考虑改变展⽰示辅助信息和功能的呈
现⽅方式。
• 避免布局有过⼤大改变
• 避免⻚页⾯面重新加载
• 横屏时，给⽤用户更好的阅读体验
• 使⽤用动画让重排的元素可被追踪
• 理解应⽤用的使⽤用环境，赋予横持
竖持不同的使⽤用体验
46
12年11月6⽇日星期⼆二 46

47. ⽤用户体验指南
User Experience Guidelines
让点按⺫⽬目标的尺⼨寸符合指尖⼤大⼩小
• 给你的可触摸元素⾄至少 44×44 像素的⾯面积。
• 这个⾯面积可以包含操作对象及其周围的⼀一部分空间。
47
12年11月6⽇日星期⼆二 47

48. ⽤用户体验指南
User Experience Guidelines
使⽤用精妙的动画来交互
• 微妙、适当的动画应该做到：
• 表达状态 • 提供有⽤用的反馈
• 增强直接控制的感觉 • 将⽤用户⾏行为的结果视觉化
48
12年11月6⽇日星期⼆二 48

49. ⽤用户体验指南
User Experience Guidelines
恰当地⽀支持⼿手势
• iPhone⽤用户⼤大多还是习惯⼀一⼿手⼀一指⾛走天下。
• iPad可以考虑多点触摸⼿手势。
• ⼿手势可加速任务的完成，但不应
该是唯⼀一完成任务的⼿手段。
• 尽量避免定义新⼿手势，否则，确保你定义
的⼿手势不会与系统标准⼿手势冲突
49
12年11月6⽇日星期⼆二 49

50. ⽤用户体验指南
User Experience Guidelines
只是在必要的时候才要求⽤用户保存
• ⽤用户不需要明显的保存按钮，程序会⾃自动保存进度。
• ⽤用户会随时按HOME键，所以要经常且快速保存⽤用户进度。
• 如果允许⽤用户编辑信息或修改重要选项，那么交给⽤用户⾃自⼰己保存。
50
12年11月6⽇日星期⼆二 50

51. ⽤用户体验指南
User Experience Guidelines
偶尔在模态下处理简单的任务
• 保持模态任务简短精炼。
• 在模态任务中总是提供明显，安全的出⼝口
• 别让模态任务有层级结构，否则⽤用户不知道按下按钮后是结束了当前
层级还是整个任务。
51
12年11月6⽇日星期⼆二 51

52. ⽤用户体验指南
User Experience Guidelines
迅速启动应⽤用
• 展⽰示与应⽤用程序第⼀一屏⼀一样的启动图⽚片。
• 避免强制插播“关于”或启动画⾯面。
• 以合适的默认⽅方向启动。
• 如果可以的话，从程序上次离开的位置启动。
52
12年11月6⽇日星期⼆二 52

53. 五、局限
12年11月6⽇日星期⼆二 53

54. 局限
Limitations
HIG的局限性
• 表述过于概念化，显得有些泛泛
• 着重在“输⼊入”和“输出”这两个使⽤用体验的关键点上
• 中⽂文版⻓长时间未更新了。。。
54
12年11月6⽇日星期⼆二 54

55. 局限
Limitations
HIG的商业⺫⽬目的
• 苹果需要更多的iOS应⽤用开发团队，需要更多优秀的应⽤用程序，
以确保他们的市场地位和战略⺫⽬目标。
• 所以HIG有很强的商业⺫⽬目的：树⽴立⽂文化上的威望，使消费者更依
赖苹果的设备，对其他设备产⽣生排他意识。
55
12年11月6⽇日星期⼆二 55

56. 六、问诊有道词典
12年11月6⽇日星期⼆二 56

57. 问诊
Inquiry
问诊有道词典
• 发⾳音按钮尺⼨寸过⼩小 • 主任务不明确 • 查询过程没有反馈
• 没有实现异步加载
57
12年11月6⽇日星期⼆二 57

58. 问诊
Inquiry
问诊有道词典
• 没有使⽤用⼿手势 • 控件UI不⼀一致 • 重要按钮要放在⽅方
便点按的地⽅方
58
12年11月6⽇日星期⼆二 58

59. 问诊
Inquiry
问诊有道词典
新版有道词典
尽请期待
59
12年11月6⽇日星期⼆二 59

60. 谢谢聆听
12年11月6⽇日星期⼆二 60