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