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

  • 1,136 views
Uploaded on

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

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

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,136
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
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