IOS 人机交互指南

IOS 人机界面交互指南

UI设计基础
1.1design for IOS
1.1.1 设计跟随内容 (Defer to Content)
充分利用整个屏幕
重新考虑(尽量减少)拟物化设计的使用
用半透明UI元素样式来暗示背后的内容
1.1.2保证清晰(Provide Clarity)
让颜色简化UI
通过使用系统字体确保易读性
使用大量留白
使用无边框的按钮
1.1.3 用深度层次来进行交流(Use Depth to Communicate)
三大原则: 
1>遵从(Deference)：UI应该有助于用户更好地理解内容并与之交互，并且不会分散用户对内容本身的注意力。
2>清晰(Clarity)：各种尺寸的文字清晰易读；图标应该精确醒目，去除多余的修饰，突出重点，以功能驱动设计。
3>深度(Depth)：视觉的层次感和生动的交互动画会赋予UI新的活力，有助于用户更好地理解并让用户在使用过程中感到愉悦。
1.2 iOS应用解析(iOS App Anatomy)
几乎所有的iOS应用都应用了UIKit framework中定义的组件。了解这些基本组件的名称、作用和功能可以帮助你在应用的界面设计过程中做出更好的决策。UIKit提供的UI组件可以大致分为以下4种类型：
1.栏(Bars)：包含了上下文信息来指引用户他们所在的位置，以及控件来帮助用户导航或执行操作。
2.内容视图(Content Views)：包含了应用的具体内容以及某些操作行为，比如滚动、插入、删除、排序等等。
3.控件(Controls)：用于执行操作或展示信息。
4.临时视图(Temporary Views)：短暂出现给予用户重要信息或提供更多的选择和功能。

1.3 适应性和布局(Adaptivity and Layout)

1.3.1 为自适应而开发(Build In Adaptivity)
1.3.2 在不同环境提供良好体验(Provide a Great Experience in Each Environment)
在所有环境下都保持对主体内容的专注。
避免布局上不必要的变化。
如果你的应用只在一个方向上运行，那么请直接一点。
1.3.3 使用布局来沟通(Use Layout to Communicate)
强调重要内容或功能，让用户容易集中注意在主要任务上
使用不同的视觉化重量和平衡来告诉用户当前屏显元素的主次关系
使用对齐来让阅读更舒缓，让分组和层次之间更有秩序
确保用户在内容处于默认尺寸时便可清楚明白它的主要内容与含义。
准备好改变字体大小。
尽量避免UI上不一致的表现
给每个互动的元素充足的空间
1.4 启动与停止(Starting and Stopping)
1.4.1 即时启动(Start Instantly)
尽可能地，避免让用户做过多设置
聚焦在80%目标用户的需求上
尽可能用其他方式获取更多的用户信息
如果你必须要求用户设置用户信息，在你的应用中直接提示用户输入
尽可能让用户晚一点再登录
谨慎使用新手引导,好的应用不需要新手引导
只提供开始使用应用所必需的信息
使用动画和可交互的方式来吸引用户，并让用户通过实际操作来学习如何使用
能够让用户很容易地取消或者跳过新手引导。
不要太早要求用户去给你的应用评分
一般建议按照屏幕默认的定向方式启动你的应用。
提供一张与应用首页看上去一样的闪屏
如果可能，不要让用户在初次启动应用时阅读免责声明或者确认用户协议
1.4.2 时刻准备好停止(Always Be Prepared to Stop)
iOS 应用不存在关闭或退出选项
随时并尽快保存用户信息
当应用停止的时候保存尽可能多的当前状态的详细信息
不要强制让应用退出。
如果应用中所有的功能当前都不可用，那么应该显示一些内容来解释当前的情形，并建议用户如何进行后续操作
如果只有部分功能不可用，那么只要当用户使用这些功能时显示提示即可。
1.5 导航(Navigation)
分层
扁平
内容或体验驱动
应该让用户时刻清楚自己当前在应用中所处的位置，及如何前往目的页面
使用导航栏(Navigation Bar)帮助用户轻松访问分层内容
使用标签栏(Tab Bar)显示同类型的内容或功能。
在应用中，如果每屏显示的都是同类项或同类页，可以使用页面控件(Page Control)。
一般来说，最好能给用户提供到达每一屏的唯一路径。
如果某屏内容用户需要在不同场景下查看，可以考虑使用临时视图，例如模态视图、动作菜单或警告框。想要了解更多
1.6 模态情境(Modal Contexts)
必须引起用户关注的时候,一个独立的任务需要完成或者很明确需要被放弃，为了避免在模棱两可的状态下遗漏用户信息的时候
保证模态任务简单、简短和高度聚焦。
始终提供明显、安全的退出模态任务的途径
一个任务需要多层级的模态视图时
保证提醒对话框的内容都是必要且可操作的
尊重用户关于接收通知的偏好设置
1.7 交互性与反馈(Interactivity and Feedback)
1.7.1 可交互元素吸引用户点击(Interactive Elements Invite Touch)
在内容区域，必要时可以给按钮添加边界或背景
为了暗示交互性，设计时会使用很多线索，包括点击的反馈、颜色、位置、上下文、表意明确的图标和标签等。并不需要过于修饰元素来向用户展示可交互性。
1.7.2 用户所知道的标准手势(Users Know the Standard Gestures)
不要给标准手势赋予不同的行为
不要创建和标准手势功能相似的手势操作
可以用复杂手势作为完成某任务的快捷方式，但不能是唯一触达方式
除非是游戏，否则避免定义新的手势
在特定的环境中，可以考虑使用多指操作
1.7.3 反馈有助于理解(Feedback Aids Understanding)
尽可能将状态或其他的反馈信息整合到UI中。
避免显示不必要的提醒对话框
让用户更容易的进行选择
适时地从iOS中获取信息
提供有用的反馈来平衡用户的输入
1.8 动画(Animation)
细微、精美的动画遍布iOS的用户界面，他们使应用的体验更具吸引力，更具动态性
1.9 品牌推广(Branding)
以精致优雅不唐突的方式植入品牌元素
避免远离用户关心的内容
抵抗住诱惑，不要把你的logo贯穿整个应用
1.10 颜色与字体(Color and Typography)
1.10.1 色彩有助于增进沟通(Color Enhances Communication)
如果你要创建多样的自定义颜色，要确保它们能够和谐共存
注意在不同情境下的颜色对比
当你使用自定义的栏颜色时，着重考虑半透明的栏和应用内容
注意颜色的盲区
考虑选择一种基准色颜色来表征交互性与状态。
避免给可交互和不可交互的元素使用相同的颜色。
色彩可以向用户传达信息，但不一定会以你希望的方式。
大多数情况下，不能让颜色喧宾夺主，让用户分心。
1.10.2 优秀的排版提供清晰的传达(Great Typography Enables Clear Communication)
文本尺寸的响应式变化需要优先考虑内容。
确保一个自定义字体在不同尺寸下的所有类型都具备可读性
通常情况下，应用中整体应该使用单一字体
1.11 图标和图形(Icons and Graphics)
1.11.1 应用图标(The App Icon)
1.11.2 小图标(Small Icons)
1.11.3 图形(Graphics)
支持Retina显示屏
显示照片或图片时请使用原始尺寸，并不要将它拉伸到大于100%
不要使用从苹果系列产品中复制的图形
不要将苹果的应用图标，图像或者截图用于你的设计中
1.12 术语和措辞(Terminology and Wording)
保证你使用的术语是用户能理解的
使用非正式的友好语气，但不需要太过卑微
像新闻编辑一般遣词造句，避免不必要的冗余语句
给控件加上短标签或者容易理解的图标
描述时间时要注意准确性
为你的应用写一则漂亮的App Store描述，最大程度地把握住这个与潜在用户沟通的绝佳机会
修正所有的拼写、语法与标点符号错误
尽量少用全大写的词汇
可以描述bug修复情况
设计策略
2.1 设计原则(Design Principles)
2.1.1 美学完整性(Aesthetic Integrity)
2.1.2 一致性(Consistency)
2.1.3 直接操作(Direct Manipulation)
2.1.4 反馈(Feedback)
2.1.5 隐喻(Metaphors)
移动分层视图来显示被遮挡的内容
拖曳、轻扫和滑动游戏中的对象
点击开关，滑动滑块，转动选择器
轻扫来翻阅书本或杂志
2.1.6 用户控制(User Control)
2.2 从概念到产品(From Concept to Product)
2.2.1 定义应用(Define Your App)
1.列出所有你认为用户可能喜欢的功能
2.确定目标用户
3.根据目标用户过滤功能清单
4.不止于此
当你想要新增一个功能时
当你考虑用户界面的外观和操作时
当你考虑应该使用怎样的措辞时
2.2.2 为任务量身订制界面(Tailor Customization to the Task)
2.2.3 原型 & 迭代(Prototype & Iterate)
2.3 案例学习：从桌面到iOS(Case Study: From Desktop to iOS)
IOS技术
3.1 3D触摸(3D Touch)
3.1.1 轻压和重压(Peek and Pop)
3.1.2 主屏幕快捷操作(Home Screen Quick Actions)
3.2 Live Photos
在不支持Live Photo的环境中，把Live Photo像传统照片一样展示
不要分开展现Live Photo的附加画面和声音
确保用户可以区分Live Photo 和传统静止图片
把用户所做的调整应用到Live Photo的所有帧中
3.3 钱包(Wallet)
3.4 苹果的移动支付平台(Apple Pay)
3.5 研究型应用程序(Research Apps)
3.6  应用扩展(App Extensions)
3.6.1 今天部件(Today Widgets)
3.6.2 分享和动作扩展(Share and Action Extensions)
3.6.3 图片编辑扩展(Photo Editing Extensions)
3.6.4 文档提供者扩展(Document Provider Extensions)
3.6.5 自定义输入法(Custom Keyboards)
3.7  HomeKit
3.8 多任务处理(Multitasking)
准备好被打断，并恢复
确保你的UI可以处理两倍高度的状态栏
准备好暂停需要人们注意或主动参与的活动
确保音频行为合适
适度使用本地通知
必要时，在后台完成用户的任务
3.9 通知(Notifications)
3.10 社交媒体(Social Media)
3.11 iCloud
3.12 HealthKit
3.13 应用内购买服务(In-App Purchase)
3.14 游戏中心(Game Center)
3.15 iAd富媒体广告(iAd Rich Media Ads)
3.16 无线打印 (AirPrint)
3.17 访问用户数据(Accessing User Data)
确保使用户理解分享私人数据的原因
应用需要个人信息的原因不明显时向用户做出解释
只有当你的应用没有用户数据就无法提供基础服务时，才在一开始就征求用户的许可
避免在用户选择需要数据的功能之前调用触发提醒框的程序
检查位置服务的设置来避免触发没必要的提醒
3.18 快速查看(Quick Look)
3.19 声音(Sound)
3.20 VoiceOver
3.21 路线选择(Routing)
3.22 编辑菜单(Edit Menu)
3.23 撤销与重做(Undo and Redo)
3.24 键盘和输入页面(Keyboards and Input Views)
UI 元素
4.1 栏
4.1.1 状态栏
4.1.2 导航栏
4.1.3 工具栏
4.1.4 工具栏与导航标准按钮
4.1.5 标签栏
4.1.6 标签栏标准图标
4.1.7 搜索栏
4.2 内容视图
4.2.1 活动
4.2.2 活动视图控制器
4.2.3 集合视图
4.2.4 容器视图控制器
4.2.5 图片视图
4.2.6 地图视图
4.2.7 页面视图控制器
4.2.8 浮出层,UIPopoverPresentationController
4.2.9 滚动视图(Scroll View)
4.2.10 分栏视图控制器
4.2.11 表格视图
4.2.12 文本视图
4.2.13 网络视图
4.3 控件
4.3.1 活动指示器
4.3.2 添加联系人按钮
4.3.3 日期时间选择器
4.3.4 详情展开按钮
4.3.5 信息按钮
4.3.6 标签
4.3.7 网络活动指示器
4.3.8 页面控件
4.3.9 选择器
4.3.10 进度视图
4.3.11 刷新控件
4.3.12圆角矩形按钮
4.3.13 分段控件
4.3.14 滑块
4.3.15 步进器
4.3.16 开关按钮
4.3.17 系统按钮
4.3.18文本框
4.4临时视图
4.4.1 警告框
4.4.2 操作列表

4.4.3模态视图