Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Cd12e07009406040be2f2faef7f9c37e?s=47 kidult00
October 31, 2013

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

Cd12e07009406040be2f2faef7f9c37e?s=128

kidult00

October 31, 2013
Tweet

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
  4. None
  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