Your SlideShare is downloading. ×
对《iOS人机交互指南》的一点理解
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

对《iOS人机交互指南》的一点理解

1,154

Published on

HIG1~3章,6章的内容简单讲解(即HIG中的设计和概念部分)

HIG1~3章,6章的内容简单讲解(即HIG中的设计和概念部分)

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,154
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 对 《iOS⼈人机交互指南》 的⼀一点理解 彭澎 LUNA 2012.10.2412年11月6⽇日星期⼆二 1
  • 2. 概览 Introduction • 《iOS⼈人机交互指南》(Human Interface Guidelines,简称HIG) http://developer.apple.com/library/ios/#documentation/UserExperience/ Conceptual/MobileHIG/Introduction/Introduction.html • ⾯面向设计师和开发者 • 提供提供⼤大量的基础理论知识和技术指导 212年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 ——相关的章节 “定制图标与图像创作指南” 312年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 ——相关的章节 “定制图标与图像创作指南” 412年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 612年11月6⽇日星期⼆二 6
  • 7. 平台特性 Platform Characteristics 屏幕是⽤用户体验的核⼼心 • 最舒适的点击区域⼤大⼩小是44×44 点 (Points ⽽而⾮非Pixels) • 精美的图⽚片设计,能让应⽤用出类拔萃 • 让⽤用户忘记设备专注于内容或任务 712年11月6⽇日星期⼆二 7
  • 8. 平台特性 Platform Characteristics 屏幕的⽅方向是会变的 • 在iPhone和iTouch上,⼤大部分⽤用户习惯竖持,所以⽤用户预期应⽤用以竖向启动 • 在iPad上,横竖持握都⽐比较常⻅见,所以⽤用户预期的启动⽅方向会与持握⽅方向⼀一致。 812年11月6⽇日星期⼆二 8
  • 9. 平台特性 Platform Characteristics 使⽤用⼿手势,⽽而⾮非点击 • 利⽤用所有iOS内建的原有⼿手势 • 使⽤用者还是习惯⼀一⼿手⼀一指⾛走天下 912年11月6⽇日星期⼆二 9
  • 10. 平台特性 Platform Characteristics 只会有⼀一个应⽤用在前台与⽤用户互动 • 应⽤用的五个状态:活动,不活动,后台,挂起,未启动 • 屏幕⼀一次只能展⽰示⼀一个程序,即只有⼀一个程序处于活动状态 1012年11月6⽇日星期⼆二 10
  • 11. 平台特性 Platform Characteristics ⼀一个应⽤用只会有⼀一个窗⼝口与⽤用户互动 • 良好对导航能让⽤用户对界⾯面产⽣生空间感 • 不要把内容堆在⼀一屏上,因为翻⻚页很容易 1112年11月6⽇日星期⼆二 11
  • 12. 平台特性 Platform Characteristics 其他特性 • 偏好设定可以在“Setting”中修改 • 屏幕上“帮助”的效果有限 1212年11月6⽇日星期⼆二 12
  • 13. ⼆二、⽤用户界⾯面设计原则12年11月6⽇日星期⼆二 13
  • 14. ⽤用户界⾯面设计原则 Human Interface Principles • 整体之美 Aesthetic Integrity • ⼀一致性 Consistency • 直接操作 Direct Manipulation • 反馈 Feedback • 隐喻 Metaphors • 让⽤用户来控制 User Control 1412年11月6⽇日星期⼆二 14
  • 15. ⽤用户界⾯面设计原则 Human Interface Principles 整体之美 • 应⽤用的外观和功能完美地结合 1512年11月6⽇日星期⼆二 15
  • 16. ⽤用户界⾯面设计原则 Human Interface Principles ⼀一致性 • 该应⽤用是否符合IOS标准? • 该应⽤用⾃自⾝身是否保持⼀一致性? • 当前的应⽤用跟之前的版本是否统⼀一? 1612年11月6⽇日星期⼆二 16
  • 17. ⽤用户界⾯面设计原则 Human Interface Principles 直接操作 • 通过旋转或移动设备来影响屏幕中的物体 • 通过⼿手势来操作屏幕中的物体 • 操作结果以可⻅见,迅速的⽅方式展⽰示给⽤用户。 1712年11月6⽇日星期⼆二 17
  • 18. ⽤用户界⾯面设计原则 Human Interface Principles 反馈 • 标准控件能响应每⼀一个⽤用户操作⾏行为。 • 细微的动画能作为意思明确的反馈,清晰地展⽰示操作结果。 • 声⾳音同样能提供有⽤用的反馈,但这个不应该做为主要或唯⼀一的反馈机制。 • 如果操作过程⽐比较久,需要不断更新操作进展。 1812年11月6⽇日星期⼆二 18
  • 19. ⽤用户界⾯面设计原则 Human Interface Principles 隐喻 • 由现实世界映射,⽤用户就能快速地掌握如何使⽤用。 • 恰当的隐喻,在使⽤用或体验⽅方⾯面不需要拘泥于现实世界的限制 • iOS让⽤用户实实在在的跟屏幕中的物体产⽣生交互,可以做到和现实中使⽤用 没有差别 1912年11月6⽇日星期⼆二 19
  • 20. ⽤用户界⾯面设计原则 Human Interface Principles 让⽤用户来控制 • 给出操作建议 • 对危险的操作提出警告 • 可预测的控件和⾏行为 • 有⾜足够的机会在操作被处理前取消 • 正在被执⾏行的操作能优雅地停⽌止 2012年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 2212年11月6⽇日星期⼆二 22
  • 23. 应⽤用设计策略 App Design Strategies 定义你的应⽤用程序 • 列出所有⽤用户可能喜欢的功能点 • 明确你的⺫⽬目标⽤用户 • 通过对⺫⽬目标⽤用户的定义筛选功能点 • 在整个开发过程中贯彻 2312年11月6⽇日星期⼆二 23
  • 24. 应⽤用设计策略 App Design Strategies 为设备⽽而设计 • 拥抱iOS界⾯面规范 • 确保程序在iPad和iPhone上通⽤用 • 慎重考虑web移植应⽤用的设计 2412年11月6⽇日星期⼆二 24
  • 25. 应⽤用设计策略 App Design Strategies 为任务量⾝身定制界⾯面 • 不要为了定制⽽而定制 • 尽可肯能不要加重⽤用户的认知负担 • 在控件和内容间保持差异 • 在设计定制控件前要三思 • 确保对定制界⾯面进⾏行充分的⽤用户测试 2512年11月6⽇日星期⼆二 25
  • 26. 应⽤用设计策略 App Design Strategies 原型和迭代 • 使⽤用纸质原型或线框图对主要视图和控件进⾏行布局 • ⽤用Xcode的模板创建原型并安装在设备上,提供⼀一个真实的测试环境。 2612年11月6⽇日星期⼆二 26
  • 27. 四、⽤用户体验指南12年11月6⽇日星期⼆二 27
  • 28. ⽤用户体验指南 User Experience Guidelines 抓住主要的任务 内容至上 自上而下地考虑 让用户有逻辑可循 使用方法明显、容易 使用能被用户理解的术语 最小化必要的输入 淡化文件操作 允许协作和互联 弱化设置功能 恰当地品牌化 让查询变得快速且回报丰厚 编写良好的描述能有效地推介应用 简洁 保持UI控件一致性 考虑加入实物感和真实感 用绝佳的图片取悦用户 手持方向会改变 让点按目标的尺寸符合指尖大小 使用精妙的动画来交互 恰当地支持手势 只是在必要的时候才要求用户保存 偶尔在模态下处理简单的任务 迅速启动应用 2812年11月6⽇日星期⼆二 28
  • 29. ⽤用户体验指南 User Experience Guidelines 抓住主要的任务 • 分析应⽤用,哪些任务是必须的 • 分析每个屏幕,哪些功能是必需的 2912年11月6⽇日星期⼆二 29
  • 30. ⽤用户体验指南 User Experience Guidelines 内容⾄至上 • 游戏类 • 效率类 惬意的故事 减轻控件在界⾯面中的⽐比重 漂亮的图⽚片 控件外观和程序的图⽚片⻛风格⼀一致 反馈及时的游戏操控 不交互时,隐去控件 3012年11月6⽇日星期⼆二 30
  • 31. ⽤用户体验指南 User Experience Guidelines ⾃自上⽽而下地考虑 • ⽤用户会这样使⽤用设备: • 所以把最常⽤用的信息放在顶部 • 并且信息⾃自上⽽而下,从概括向具体渐进,从⾼高级向低级渐进 3112年11月6⽇日星期⼆二 31
  • 32. ⽤用户体验指南 User Experience Guidelines 让⽤用户有逻辑可循 • 符合逻辑的信息路径,能⽅方便⽤用户做出预测。 • ⼤大多数情况下,只提供单⼀一的路径。 3212年11月6⽇日星期⼆二 32
  • 33. ⽤用户体验指南 User Experience Guidelines 使⽤用⽅方法明显、容易 • 尽量减少控件 • 合理地使⽤用标准 控件和⼿手势 • 控件所配⽂文案清晰 易懂 3312年11月6⽇日星期⼆二 33
  • 34. ⽤用户体验指南 User Experience Guidelines 使⽤用能被⽤用户理解的术语 • 所有⽤用于与⽤用户沟通的⽂文案,都需要保证你的⽤用户能够理解。 • 多了解你的⺫⽬目标⽤用户,以判断所使⽤用的⽂文案是否适⽤用于他们。 3412年11月6⽇日星期⼆二 34
  • 35. ⽤用户体验指南 User Experience Guidelines 最⼩小化必要的输⼊入 • 平衡⽤用户的输⼊入与 获得的信息 • 简化⽤用户的输⼊入⽅方 式 • 在合适的时候,从 iOS 获取信息 3512年11月6⽇日星期⼆二 35
  • 36. ⽤用户体验指南 User Experience Guidelines 淡化对⽂文件的操作 • 如果你的应⽤用允许⽤用户创建或编辑⽂文件,它应该: • ⾼高度图形化的 • ⼿手势直接操作 • 不要让⽤用户到处找新建⽂文档按钮 3612年11月6⽇日星期⼆二 36
  • 37. ⽤用户体验指南 User Experience Guidelines 容许协作和互联 • 考虑多⼈人共⽤用⼀一台 • 多平台共享数据 iPad的情况 • ⽤用户之间⽅方便地 互动和分享 3712年11月6⽇日星期⼆二 37
  • 38. ⽤用户体验指南 User Experience Guidelines 弱化设置功能 • 不常⽤用设置,放在 • 常⽤用的设置,安排 • 最常⽤用的选项,融 在应⽤用内的选项中 ⼊入到主界⾯面中。 系统选项中。 3812年11月6⽇日星期⼆二 38
  • 39. ⽤用户体验指南 User Experience Guidelines 恰当地品牌化 • 精炼地,且不浮夸地将品牌的颜⾊色或图像融⼊入应⽤用。 • 避免将原本显⽰示内容的区域来放置⼲⼴广告 3912年11月6⽇日星期⼆二 39
  • 40. ⽤用户体验指南 User Experience Guidelines 让查询变得快速且回报丰厚 • 为数据建⽴立索引 • 搜索远程数据前,实时加载本地数据。 • 异步加载媒体⽂文件 • 搜索数据分类,使⽤用范围选择栏(scope bar)。 4012年11月6⽇日星期⼆二 40
  • 41. ⽤用户体验指南 User Experience Guidelines 编写良好的描述能有效地推介应⽤用 • ⾼高亮你觉得⽤用户最喜欢的特性 • 避免拼写、语法和标点错误。 • 避免使⽤用⼤大写字⺟母。 • 写出对具体 bug 的修复。 4112年11月6⽇日星期⼆二 41
  • 42. ⽤用户体验指南 User Experience Guidelines 简洁 • 努⼒力将信息⽤用浓缩的⽂文案表达。 • 保持控件的标签简短,或使⽤用能被理解的符号 4212年11月6⽇日星期⼆二 42
  • 43. ⽤用户体验指南 User Experience Guidelines 保持UI控件⼀一致性 • ⾃自定义控件/图标外观 • 决不能让标准的控件/图 • 使⽤用标准控件/图标的 时,尽量和标准控件/ 标指代其他的含义 优势:稳定性 图标保持⼀一致 4312年11月6⽇日星期⼆二 43
  • 44. ⽤用户体验指南 User Experience Guidelines 考虑加⼊入实物感和真实感 • 让视图和控件模仿现实中的物体和物体的控制⽅方法 • 图⽚片设计适当地夸张 • ⽤用动画进⼀一步强化物理效果,物理的真实感⽐比 或加强,有冲击⼒力 追求外观上的真实感更为重要 4412年11月6⽇日星期⼆二 44
  • 45. ⽤用户体验指南 User Experience Guidelines ⽤用绝佳的图⽚片取悦⽤用户 • 漂亮的、精致的图⽚片吸引⼈人们使⽤用程序,即使很简单的任务也⽤用得很开⼼心。 • 精美的图⽚片设计能在⽤用户⼼心中树⽴立品牌形象。 • 模仿宝质地优良的原料的外观是个好办法。 4512年11月6⽇日星期⼆二 45
  • 46. ⽤用户体验指南 User Experience Guidelines ⼿手持⽅方向会改变 • 考虑改变展⽰示辅助信息和功能的呈 现⽅方式。 • 避免布局有过⼤大改变 • 避免⻚页⾯面重新加载 • 横屏时,给⽤用户更好的阅读体验 • 使⽤用动画让重排的元素可被追踪 • 理解应⽤用的使⽤用环境,赋予横持 竖持不同的使⽤用体验 4612年11月6⽇日星期⼆二 46
  • 47. ⽤用户体验指南 User Experience Guidelines 让点按⺫⽬目标的尺⼨寸符合指尖⼤大⼩小 • 给你的可触摸元素⾄至少 44×44 像素的⾯面积。 • 这个⾯面积可以包含操作对象及其周围的⼀一部分空间。 4712年11月6⽇日星期⼆二 47
  • 48. ⽤用户体验指南 User Experience Guidelines 使⽤用精妙的动画来交互 • 微妙、适当的动画应该做到: • 表达状态 • 提供有⽤用的反馈 • 增强直接控制的感觉 • 将⽤用户⾏行为的结果视觉化 4812年11月6⽇日星期⼆二 48
  • 49. ⽤用户体验指南 User Experience Guidelines 恰当地⽀支持⼿手势 • iPhone⽤用户⼤大多还是习惯⼀一⼿手⼀一指⾛走天下。 • iPad可以考虑多点触摸⼿手势。 • ⼿手势可加速任务的完成,但不应 该是唯⼀一完成任务的⼿手段。 • 尽量避免定义新⼿手势,否则,确保你定义 的⼿手势不会与系统标准⼿手势冲突 4912年11月6⽇日星期⼆二 49
  • 50. ⽤用户体验指南 User Experience Guidelines 只是在必要的时候才要求⽤用户保存 • ⽤用户不需要明显的保存按钮,程序会⾃自动保存进度。 • ⽤用户会随时按HOME键,所以要经常且快速保存⽤用户进度。 • 如果允许⽤用户编辑信息或修改重要选项,那么交给⽤用户⾃自⼰己保存。 5012年11月6⽇日星期⼆二 50
  • 51. ⽤用户体验指南 User Experience Guidelines 偶尔在模态下处理简单的任务 • 保持模态任务简短精炼。 • 在模态任务中总是提供明显,安全的出⼝口 • 别让模态任务有层级结构,否则⽤用户不知道按下按钮后是结束了当前 层级还是整个任务。 5112年11月6⽇日星期⼆二 51
  • 52. ⽤用户体验指南 User Experience Guidelines 迅速启动应⽤用 • 展⽰示与应⽤用程序第⼀一屏⼀一样的启动图⽚片。 • 避免强制插播“关于”或启动画⾯面。 • 以合适的默认⽅方向启动。 • 如果可以的话,从程序上次离开的位置启动。 5212年11月6⽇日星期⼆二 52
  • 53. 五、局限12年11月6⽇日星期⼆二 53
  • 54. 局限 Limitations HIG的局限性 • 表述过于概念化,显得有些泛泛 • 着重在“输⼊入”和“输出”这两个使⽤用体验的关键点上 • 中⽂文版⻓长时间未更新了。。。 5412年11月6⽇日星期⼆二 54
  • 55. 局限 Limitations HIG的商业⺫⽬目的 • 苹果需要更多的iOS应⽤用开发团队,需要更多优秀的应⽤用程序, 以确保他们的市场地位和战略⺫⽬目标。 • 所以HIG有很强的商业⺫⽬目的:树⽴立⽂文化上的威望,使消费者更依 赖苹果的设备,对其他设备产⽣生排他意识。 5512年11月6⽇日星期⼆二 55
  • 56. 六、问诊有道词典12年11月6⽇日星期⼆二 56
  • 57. 问诊 Inquiry 问诊有道词典 • 发⾳音按钮尺⼨寸过⼩小 • 主任务不明确 • 查询过程没有反馈 • 没有实现异步加载 5712年11月6⽇日星期⼆二 57
  • 58. 问诊 Inquiry 问诊有道词典 • 没有使⽤用⼿手势 • 控件UI不⼀一致 • 重要按钮要放在⽅方 便点按的地⽅方 5812年11月6⽇日星期⼆二 58
  • 59. 问诊 Inquiry 问诊有道词典 新版有道词典 尽请期待 5912年11月6⽇日星期⼆二 59
  • 60. 谢谢聆听12年11月6⽇日星期⼆二 60

×