iOS7设计规范分享_PartI_UI设计基础

Transcript

1. iOS 设计规范分享 Part I : UI 设计基础 00 , 2013.10.16 uegeek.com
2. 规范学习目的： 1.知道怎样设计出一个好的iOS应用界面 2.思考1中提及的“好”为什么好
3. Part 1 UI设计基础 Part 2 设计策略 Part 3 iOS技术 Part 4 UI元素 Part 5 图标和图形设计 http://sina.lt/ntD 2013.9.18 updated iOS Human Interface Guidelines
5. 谈话
6. 谈话 MobileHIG iOS7 10天成为 谈话高手
7. 谈话的基本原则 谈话包含什么 如何开始和结束谈话 第一印象很重要 谈话主题和引导 谈话过程中的互动 谈话的内容 谈话 MobileHIG iOS7 10天成为 谈话高手
8. 谈话的基本原则 / 为iOS7而设计
9. iOS7三大设计原则 1 Deference 依从 2 Clarity 清晰 3 Depth 有层次
10. iOS7三大设计原则 1 Deference 依从 UI是用来帮助用户理解app、与内容 之间进行交互，但UI和内容之间并 不冲突。
11. iOS7三大设计原则 1 Deference 依从 利用全屏 避免过重的UI 效果喧宾夺主 让半透明的视觉 元素透露其背后 的内容
12. iOS7三大设计原则 2 Clarity 清晰 让各种尺寸的文字均易读、icon精 确清楚、装饰物巧妙合适，以功能 驱动设计。
13. iOS7三大设计原则 2 Clarity 清晰 让各种尺寸的文字均易读、icon精 确清楚、装饰物巧妙合适，以功能 驱动设计。 「Style is a matter of taste. Capability and clarity are not.」
14. iOS7三大设计原则 2 Clarity 清晰 充分运用留白 通过色彩简化UI 使用系统字体，确保清晰易读 (系统字体会自动调整字/行间距) 使用无边框的按钮 (通过情境/颜色/标题指示)
15. iOS7三大设计原则 3 Depth 有层次 通过视觉的层次感和动画来展现生 命力，让用户感到愉悦。
16. iOS7三大设计原则 3 Depth 有层次 半透明背景营造 的层次感 切换年、月、日视图模式时使用增强动画过渡 效果，带来明显的纵深感
17. iOS7三大核心设计原则
18. iOS7三大核心设计原则 Deference 依从 Clarity 清晰 Depth 有层次 形式追随功能
19. 谈话包含什么 / iOS 应用解析
20. UIKit框架提供的UI元素可以分为4类： 1 内容视图(Content views) 2 栏(Bars) 3 控件(Controls) 4 临时视图 (Temporary views)
21. 视图(View)和视图控制器(View controler) ：
22. 如何开始和结束谈话 / 开始和停止
23. 即刻启动，直入主题 更快启动 • 避免无意义的启动画面/启动体验； • 按照默认的屏幕方向启动； • 使用与应用首屏尽量一致的启动图片，让人感觉加载更快； • 应用重启后要恢复到退出时的状态，以便继续使用
24. 即刻启动，直入主题 减少使用障碍 • 应用安装后不需要设置就能使用； • 延迟登录； • 尽量不要在初次加载时，让用户阅读并确认免责声明/协议等
25. 随时准备停止 iOS 没有关闭或者退出的选项，但有后台运行和切换机制，app需要： • 及时、尽可能频繁地保存用户数据； • 尽量保存app当前状态的各种细节，以便快速回到之前的状态； • 如果app不可用/部分不可用时，应该友好地告知并提供建议 注：仅在访问该功能时
26. 第一印象很重要 / 布局
27. 通过布局让用户知道：哪些东西最重要，可以做什么，内容之间的关联 大小：确保交互元素足够大(44x44)，用户很容易与内容和功能互动
28. 通过布局让用户知道：哪些东西最重要，可以做什么，内容之间的关联 位置：将重要的内容和功能放在更显著的位置，使用户的注意力更好地聚焦
29. 通过布局让用户知道：哪些东西最重要，可以做什么，内容之间的关联 关系：利用视觉表现的权重和平衡，展示元素之间的重要程度
30. 通过布局让用户知道：哪些东西最重要，可以做什么，内容之间的关联 • 使用对齐、缩进、分组等层次语言，帮助用户快速浏览内容； • 确保主要内容在默认尺寸下可以被阅读和理解； • 保持元素统一的表现形式
31. 谈话主题和引导 / 导航
32. 总体上讲，导航可以分为三种类型： 树形结构 扁平结构 由内容或体验所驱动的结构 无论哪种类型，要确保路径符合逻辑、可以预知、容易跟随。 用户应该始终能够了解当前所处位置，以及怎样行进到下一个目标位置。
33. 导航元素 导航栏 (navigation bar) 标签栏 (tab bar) 分页控件 (page control) 在树形结构中前后行进 呈现扁平化的信息结构 暗示多个同类条目的存在
34. 谈话过程中的互动 / 交互和反馈 动画 模态情境
35. 交互和反馈 采用标准手势： • 不要为标准手势赋予不同的行为； • 将复杂的手势作为快捷方式，而不是唯一方式； • 不要定义新的手势(游戏除外)； • 对于iPad应用考虑使用多指手势 Tap Drag Flick Swipe Double tap Pinch Touch & hold Shake
36. 交互和反馈 如何表现可交互元素的操作可见性(affordance)： • 链接色/关键色； • 上下文（如响应前一步操作，元素位置，文字等）； • 文案的动作指向性（如以动词开头）； • 在内容区域，必要时可以加上按钮边框
37. 交互和反馈 用反馈帮助理解： • 用不同形式的反馈，帮用户了解当前状态，了解接下来可以做什么，或预计操作会产生怎样的结果； • 慎用警告提示(alert)，尽量不要打断用户
38. 交互和反馈 让输入简单易行： • 手机上输入行为很难做到无痛，需要耗费用户时间和注意力； • 用选择代替输入，或者从合适的地方自动获取信息； • 给予用户有价值的反馈，不要让人白白输入
39. 动画 提供精细、适当的动画，可以： • 传达状态 • 提高用户对直接操作的感知 • 可视化操作结果
40. 动画 设计动画效果时需要注意： • 谨慎添加动画，避免造成干扰，尤其在非沉浸式app中； • 自定义动画跟iOS内置动画不冲突； • 动画风格类型一致； • 让自定义动画更符合实际情况，不要打破用户的心理模型
41. 模态情境 模态是一种独占性的面板，在响应模态窗口的操作之前，不能返回父窗口进行操作。
42. 模态情境 模态本质上是一种打断，仅在以下情况考虑创建模态情境： • 非常有必要吸引用户的注意力； • 必须完成某些任务或弃某项操作，否则无法确定用户数据
43. 模态情境 设计模态窗口时要注意： • 任务要简单、简短、易聚焦； • 始终提供一种明显而安全的退出方式； • 如果任务需要一系列层级化的模态视图，避免在子层级中使用“完成”按钮而引起歧义； • 只有必不可少的重要信息才使用警告框，最好同时提供可执行的选项； • 尊重用户对于是否接收通知信息的设定
44. 谈话的内容 / 术语和措辞 颜色和排版 图标和图像 品牌
45. 术语和措辞 文案是好的设计必需考虑的一部分： • 说人话； • 语气轻松友善，但不要太过随便； • 字斟句酌，不说废话； • 优化控件的标签或图标，使人一眼就能明白； • 数据要精准（不是指位数精确，而是避免产生歧义）； • 在应用商店里对app进行描述时，是与潜在用户沟通的好机会
46. 颜色和排版 在iOS7中，颜色可以指示操作、传达活力、提供视觉连续性，从而增进沟通： • 用色要和谐，留意颜色在不同情境和文化下的含义； • 考虑不同场景下的颜色对比（如导航栏背景和文字颜色，可以用灰阶测试）； • 如果要自定义bar条颜色，考虑bar条透明度和内容颜色； • 选择合适的关键色/链接色，要明确区分可操作/不可操作元素的颜色； • 为色盲考虑，避免仅通过颜色指示元素的可操作性； • 不要让颜色分散用户的注意力
47. 颜色和排版 文字要清晰易读： • iOS7系统会自动调整字间距和行间距； • 重要内容才适配字号调整； • 用户调整字号时，可能需要调整排版布局； • 使用自定义字体时要确保清晰易读（不应小于22pt）； • 选择合适的关键色/链接色，要明确区分可操作/不可操作元素的颜色； • 最好只使用一种字体
48. 图标和图像 • 应用图标是门面，应该独特、井然有序、有魅力、过目难忘； • 系统的Bar条图标是用户所熟悉的，尽量使用它们
49. 图标和图像 图像 • 支持Retina display，提供@2x 图片； • 以原始的纵横比展示图片，缩放比例不要大于100%； • 不要在设计中使用复制苹果产品的图片
50. 品牌 • 以精致优雅不唐突的方式植入品牌的颜色和图片； • 品牌展示永远不应优先于为用户提供价值； • 不必在所有地方展示品牌logo
51. 整合iOS系统
52. 使用标准UI元素 对开发者更高效，对用户更易理解 • 遵循每个UI元素的使用指南； • 尽量不要使用自定义UI控件来执行一个标准的交互操作； • 不要使用系统定义的按钮和图标表达其他含义； • 提供沉浸式的任务或体验的app ，可以创建完全自定义的控件
53. 响应横屏和竖屏 • 不管设备处于什么方向，都要聚焦和关注主要内容； • 一般情况下，要让app支持横屏和竖屏； • 响应设备方向更改时，要预测用户的需求； • 在iPad上，app要尽量支持所有的方向
54. 弱化文件和文档的概念 • 尽量允许用户在不需要打开电脑iTunes的情况下管理文档； • 给用户一种安全感，告知工作进程始终会被保存，除非主动取消或者删除
55. 设置选项 • 尽量避免把用户引导至“设置”中； • 尽量让用户在app中进行操作； • 尽量在主要的UI中提供设置选项
56. 重点回顾：iOS7三大设计原则
57. 重点回顾：iOS7三大设计原则 1 Deference 依从 2 Clarity 清晰 3 Depth 有层次
58. Part 1 UI设计基础 Part 2 设计策略 Part 3 iOS技术 Part 4 UI元素 Part 5 图标和图形设计 Next Thank you