来源：蜘蛛抓取(WebSpider)
时间：2017-11-02 16:26
标签：
ipad淘宝不能横屏
您的位置：
一款APP，从设计稿到切图
作者：BAT_LCK
依旧声明：这里写的不是一种规范，只是一种工作方法，大家在具体工作中，一定要灵活运用。另外，技术的更新是非常快的，我写的这些可能某些东西已经和你们的工程师搭档所用的方法不一样了，所以，还是要灵活运用~
我本身是一名GUI设计师，所以我只站在GUI设计师的角度去把APP从项目启动到切片输出的过程写一写，相当于工作流程的介绍吧;公司不同，流程不尽相同，但是终究还是能有些帮助。
这里我们只说IOS系统下的设计，至于Android，因为尺寸太多，涉及的东西比较乱，我整理好以后再说吧。
页面篇幅比较长，不推荐一次性看完，那样你潜意识里就会对它厌烦了，所以可以有时间读一读，看一看。
Part 1 项目立项
完善的公司会把项目相关人员聚集起来，产品经理会把产品详细的用原型展示出来，包括产品定位，市场需求，主打卖点，产品性质以及各模块具体功能，逻辑跳转演示一下;之后会评估项目用时，各部门协调，项目启动。
话不多说，接到原型，那我们应该做什么准备工作呢?
在项目设计之初，就该进行项目归档整理，我的习惯是“项目名称+版本序列”;
没有最正确的工作方法，只有最适合自己的工作习惯。
我个人习惯把不同类型的文件划分到不同类型的文件夹里，有的设计师习惯全都放在一个文件夹里，如果文件少还说的过去，如果页面过多，就知道这样的利弊了。
工欲善其事必先利其器，基本上我做界面设计用的最多的就是PS和AI了，版本无所谓，用着舒服就行，推荐版本高一点的，低版本好多方便功能都没有。
标注工具：
PxCook，目前我还没用上Mac，所以也不知道传说中的Sketch到底多神奇。PxCook在Windows上标注还比较顺手，虽然它还附带切图功能，但是比较鸡肋，不推荐用它切图。
切图工具：
Cutterman 官网地址 /
一款PS的插件，切图非常方便，但不支持绿色免安装版本PS，推荐安装官方完整版PS，然后自行破解。官网上有安装使用教程，自己研究下吧，因为我也是最近才开始接触这款插件。
Assistor PS 也是一款PS的切图标注插件，也被誉为神器;依旧是自己研究下吧，最近我也是刚接触这款插件。
标注工具以及这两款插件我都会上传，至于安装方法去“百度一下”吧，易学易用。
Part 2 Photoshop
现在常用的几种设计尺寸
1. 640*960 4时代的尺寸，刚接触APP设计用的是这个尺寸，拟物盛行的时代(现在用这个尺寸设计的应该比较少了吧);
2. 640*S/5C，IPhone更新，咱们设计也得跟着与时俱进(应该还有人用这个设计尺寸)，进入扁平的时代了;
3. 750*1334 6 目前我做设计稿的设计尺寸，IPhone6的尺寸，向下可以适配4，5，向上可以适配6
我记得IP6推出后，我问总监应该用什么尺寸设计，他说用IP6的吧，好适配，切出来就是@2x了，改一改上下都能照顾到。
推荐做设计稿的时候使用IPhone6的尺寸进行设计。
IP 6的尺寸相比于IP 5来说，很多系统控件尺寸并未变化，只是高度也就是内容显示区域发生了变化。下面是IPhone
6的空白文档，我建立了参考线。
文档建立之初就设置好参考线是个很好的工作习惯，我希望更多的设计师可以养成更好的工作习惯。
上下的参考线很容易设
置，因为是根据IPhone自身系统设置的，左右的参考线我习惯设置为24px，也就是显示内容距离边框的距离。这不是绝对的，我和总监研究过，究竟是设
置为左右30px还是24px比较好，通过对国内国外各种APP的对比，觉得24px更适合一些，不宽不窄，这个完全是设计师个人的设计习惯，所以不要当
成什么规范，确切的说，整个屏幕你都可以随便做，但是我们这里说的是正常页面。
Part 3 页面标注
标注是重中之重，工程师能不能完整的还原设计稿，很大一部分取决于标注;如果不清楚你该怎么标，一定要和工程师沟通!
每个工程师实现效果的方法不同，我在这里所说的，是我的标注习惯，但应该适用于大部分的设计师和工程师。
不需要每一张效果图都进行标注，你标注的页面能保证工程师开发每个页面的时候都能顺利进行即可;
这里的标注软件使用的是PxCook，先标一个空白文档，看看都需要什么吧
这里要说一句，PxCook虽然可以自动读取颜色，但是还不能对PSD文档里设置的透明度读取，所以如果你用了透明色，推荐你用文字标注直接写出来原色值以及透明度。
基本上我并不使用PXCook里面的颜色标注工具，而是使用文字标注工具，因为要标识两种色值，PxCook只能显示一种色值。
一般我的习惯是PS和标注软件同时打开，因为有时候标注软件并不能完全的把PSD文件里的东西标注出来，所以标注也要灵活运用，如果无法标注，就到PS里查看一下，然后再使用文字标注说明一下。
标注颜色是使用16进制，还是RGB：
都用得到，要看实现什么东西，建议标注颜色时，两种色值表达都标上(16进制&RGB)。
你需要标注的内容有：
1.文字需要提供：字体大小(px),字体颜色;
2.顶部标题栏的背景色值，透明度;
3.标题栏下方以及Tab bar上方其实有一条分割线，需要提供色值;
4.内容显示区域的背景色(如果是全部页面白色，那就和工程师说一句就行);
5.底部Tab bar的背景色值。
因为页面的种类成千上万，我想每种页面都讲一下，但是不现实，希望可以举一反三。
下面的是一个比较普通的首页页面，但是基本上一款APP中应该标的元素都有了~
一般页面你需要标注这些地方：
所有元素统一距离屏幕最左24px(全局性的数据可以直接和工程师沟通，也可以标注，推荐标注出来)
1.标题栏：背景色，标题栏文字大小，文字颜色(不再赘述);
2.Banner：所有撑满横屏的大图，不需要横向尺寸，把高度标出了就可以了;
3.菜单图标：
图标的大小和图标的可点击区域不一定一致
也就是说，图标可以做的很小，但是为了保证点击的准确性和流畅性，工程师可以把可点击区域设置的很大，这样标注和切图的时候就要注意，标注的是可点击区域的大小，切图切的也是可点击区域的大小，也就是用透明区域去补上，否则图片会模糊。
在设计的时候就要考虑可点击区域的范围，比如X宝购物车页面左侧的小圈，可点击区域要比实际小圈尺寸大很多。
这 种类型的图标需要标注图标点击区域大小，图标距离屏幕最左最右以及上下的距离。至于图标的间距，因为有些时候可能
设计师不能完全做到1px不差，所以我基本不标，交给工程师让他们去处理，其实等距排列的图标不需要标间距，因为工程师还要动态适应不同的屏幕，标了间距
也是白标(还是要和你的搭档沟通怎么去标注);
4.模块间隔：这个位置其实不是太重要，我习惯标注上这里，麻烦能少则少。
5.图片+文字：这个应该比较常见，只标注一个单位(图+文)就可以了。
图片需要标注宽高，因为工程师要设置图片区域，从后台调取，可以这么说，软件里除了横屏撑满的图，基本上所有的图片都要标注宽高。
图片距离上下左右的距离，文字大小颜色，这里的文字其实算两个控件，标题文字以及说明文字，需要单独标出。
Tab Bar：
这个位置其实比较特殊，你可以单独标注图标大小+文字大小;还可以图标文字算作一个控件，整个切出来;
我们工程师的习惯是用整个的，也就是图标+文字算作一个ICON，所以我基本不怎么标注单独的图标(这里可以和你的搭档去沟通一下，看他是什么开发习惯)。
关于列表页类型的标注问题
普通的列表有两种方法(去问你的搭档，他喜欢用什么方法)：
1.标出行高，行内元素居中;
2.标出行内元素，元素上下间距，确定行高;
每种元素的位置如何确定：
通常标注的都是元素距离屏幕最左侧的距离，比如上图的图标元素距离左侧24px，文字元素距离左侧100px。
标注这个东西没有固定的方法，工程师的开发习惯不同，标注方法也不同。
该怎么标注虽然可以在网上找到方法，但那不一定适合你，一定和自己的搭档勤沟通，方法是死的，人是活的……
所有的页面标注总结起来就是：标文字，标图片，标间距，标区域;
(上述图标出现了45px的单数，因为软件自动吸附上去了显示了图标本身的尺寸，切图的时候记得输出个偶数尺寸的切片)
Part 4 切片资源的输出
切之前务必要和你的工程师搭档沟通一下，该如何去切才能配合他的开发。
全局性的切图常见问题
① 你的所有设计尺寸，包括图形效果，应该尽量使用偶数。
技术开发使用的尺寸是设计稿像素尺寸的一半，也就是说，如果你用24px的字体，技术那边就是设置为12
所以标注的时候务必使用偶数，为了保证最佳的设计效果，避免出现0.5像素的虚边。
② 切图尺寸应该提供几套?
ico_car.png IPhone2G，3G，3GS使用(好像没人用这手机了吧)
ico_car@2x.png IPhone4，5，6优先加载此尺寸图片(不是必须使用这个尺寸，是优先加载调用这个尺寸)
ico_car@3x.png IPhone6 plus使用的尺寸
可以简单的理解为倍数关系(其实是为了满足不同分辨率，我觉得不用过于深究)，如果你使用IPhone
6尺寸做设计稿，那么切片输出就是@2x，缩小2倍就是@1x，扩大1.5倍就是@3x了。
理论上，为了达到最好的视觉效果，你应该输出三套尺寸，推荐输出三种尺寸的切片资源。
我的工程师搭档要求我给两套尺寸就可以，也就是@1x @2x的两种尺寸，因为我们没有6
plus的测试机，所以看不到效果，据他说应该不会太失真，但是为了保证效果，我还是给三套尺寸。
另外现在几乎看不到3GS了，所以需不需要提供一倍图，还是要和工程师讨论一下~
@1x @2x @3x是开发工具Xcode软件需要的UI资源，命好名称后，IOS设备会自动的选取合适尺寸。
③共用资源的图片，输出一张就可以
类似这种重复的按钮之类的，只要提供一张共用的资源就可以了;上面的文字是技术写上去的。
理论上按照最佳视觉效果，你应该提供多尺寸的图片;但通常我只提供最大尺寸的一张图片即可，这一点要和你的搭档沟通好，却问他需要什么方式。
④切片的输出格式
文件→存储为Web所用格式
位图格式：PNG 24，PNG 8，JPG
在JPG和PNG两种格式图片大小相差不是很大的情况下，推荐使用PNG;如果图片大小相差很大，使用JPG。
欢迎页面，ICON一定要使用PNG格式，在不影响视觉效果的前提下，可以考虑使用PNG 8;
矢量图格式：PDF，SVG
IOS原生支持的两种矢量图片格式，但是支持的一般，并不能保证100%把所有图片效果渲染出来;
为了保险起见，我通常不使用这两种格式，推荐还是使用位图，如果以后技术提升，100%支持SVG和PDF这种矢量格式图，那个时候也许不用提供这么多套尺寸了~
⑤图标的点击区域
最小点击区域问题：
IOS人机指导手册里推荐的最小可点击元素的尺寸是44*44 point(点)，在设备上1
point等于1像素，所以转换成像素就是44*44像素，换算成物理尺寸大概是7mm左右吧(人机工效学研究中得出的结论：用食指操作，触击范围在
7mm左右合适;用拇指操作，范围在9mm左右合适)。据说这个尺寸下，不容易出现误操作，误点击;小于这个尺寸，点击就会变的有些不太准确，一向注重用
户体验的苹果公司定义这个最小点击尺寸也不是没根据的……
所以现在做设计，为了图标精致，你可以把图标做的小一些，但是切图输出的时候，要
考虑用户点击难易度的问题，所以，切图的时候，涉及到需要点击的小图标的时候，普通屏幕还是切44px大小，高清屏就需要切88px，不够的地方用透明区
域补全，否则用户点击的时候会比较困难，会很不灵敏。
⑥图片图标的不同状态
每种图标或者图片如果有不同状态，每一种不同的状态都需要进行切片输出。
比如按钮有正常(normal)，按下(pressed)，选中(selected)，禁用(disabled)等多种状态，
最常出现的就是normal→pressed→某些特定按钮控件会出现选中状态，具体情况具体分析吧。这里显示的是你要知道按钮可能有几种状态……
切片的命名规则
命名并不是统一的规范，不同的公司不同的工程师有着自己不同的命名规范和命名习惯，但是大致还是有迹可循的，一般是：
切片种类+功能+图片描述(可有可无)+状态.png
名称应使用英文命名(中文不识别，推荐小写字母)，不要以数字或者符号当作开头，使用下划线进行连接。
举个例子：一个首页的处于正常状态的确定按钮
btn_sure_nor.png
btn_sure_nor@2x.png
切片种类是按钮(btn);功能是确定(sure);状态是normal(正常)
我通常是以这种命名方式进行命名，如果你的公司有设计文档，去看看之前留下的命名规范，如果没有，那就去问工程师吧。
Tab bar(底部栏)
说说Tab bar这里，因为比较特殊。
如果单纯的只有图标，自然是只切图标就好了;
早上和工程师沟通，这里该怎么切，工程师给的建议是
图标+文字的模式，图标最好单独切，文字后面程序加上去。
另外记住，同一模块的图标切片大小保持一致，上图的四个图标本身尺寸并不相同，但是切图的时候你需要切出相同尺寸的阴影大小，便于工程师开发使用。
该怎么切图，还是要和你的工程师搭档去沟通一下;
以下是常用命名，这是我的命名习惯，并不是规范，所以要灵活，如果实在不知道英文，就用拼音代替也行。
说说Tab bar这里，因为比较特殊。
如果单纯的只有图标，自然是只切图标就好了;
早上和工程师沟通，这里该怎么切，工程师给的建议是
图标+文字的模式，图标最好单独切，文字后面程序加上去。
另外记住，同一模块的图标切片大小保持一致，上图的四个图标本身尺寸并不相同，但是切图的时候你需要切出相同尺寸的阴影大小，便于工程师开发使用。
该怎么切图，还是要和你的工程师搭档去沟通一下;
以下是常用命名，这是我的命名习惯，并不是规范，所以要灵活，如果实在不知道英文，就用拼音代替也行。
Part 5 工作常用数据
你需要使用的字体：
如果是用Mac设计的小伙伴，直接就用苹果黑体字就好了;不过用Windows的就没那么幸运了，PC上还没和IPhone默认字体效果完全一样的字体，通常都是拿其他字体代替。
苹果丽黑 Hiragino Sans GB W3(普通)/W6(粗体) 比较接近IPhone字体的一款字体，这是我之前一直使用的设计字体。
黑体-简 STHeitiSC-Light Mac里面拷出来的苹果黑体，比较贴近IPhone手机字体，目前在用。
我会把这两款字体上传，有需要可以下载。
关于字体大小的问题
顶部操作栏文字大小 34-38px
标题文字大小 28-34px
正文文字大小 26-30px
辅助性文字大小 20-24px
Tab bar文字大小 20px
文字大小只是一个范围，这要根据设计的视觉效果来决定，不要死记硬背，但是切记，字体大小要用偶数。
你需要知道的IPhone设计尺寸(这里是一个整屏的尺寸包括了状态栏)
320*480 IPhone3GS (我没见过3GS实体机，只在网上见过图片，但你需要知道这个尺寸)
640*960 IPhone 4/4s (4时代的设计尺寸)
640*1136 IPhone 5/5s/5c (5时代的设计尺寸，虽然现在出来6/6 plus，但还有人再用这个尺寸设计)
750*1334 IPhone 6 (目前最新的设计尺寸，基本上现在做IOS的APP设计，用这个的应该最多)
IPhone6 plus
(这是标准分辨率，也就是设计需要的尺寸;另外还存在物理分辨率是，这并不需要深入理解。plus还涉及到横屏，横屏是是没有状态栏的，设计横屏时可以参考IPad的设计模式)
你需要提交的启动页面
这是开发工具Xcode提供的LaunchImage(启动页面)的各项尺寸，不过好像现在已经改了，这还是工程师很久之前给我的，咋一看是不是吓
一跳?工程师是按照IOS的系统版本来设置的，但你是设计师，你是按照IPhone的版本来作图的，所以其实没有那么多，真实情况下，我们的工程师要求提
供以下几个尺寸：
640*960 (4/4s)
640*s/5c)
750*1334 (6)
(6 plus)
(6 plus的横屏尺寸，如果你们的软件支持横屏模式，你就需要做一张横屏的启动页面)
注意，启动页面一定要是PNG格式的
图标的提交尺寸
IOS系统可以自动把图片裁剪为圆角，所以提交图标的时候，你只需要提交正方形的PNG图片即可。
因为需要的图标非常多，不可能全部加进去，只能选择最好的尺寸，我们的工程师要求我提供以下图标尺寸：
Retina APP Icon for APP Store(高清屏的APP Store)
512*512 APP Icon for APP Store(普通屏幕的APP Store)
120*120 6的主屏幕尺寸
114*114 5/4s/4的主屏幕图标尺寸
57*57 3GS的主屏幕图标尺寸
58*58 Retina Settings图标尺寸
29*29 Settings图标尺寸
提交的图标尺寸不是固定的，所以，去找和你搭档的工程师，让他给你出一份需要提交的图标尺寸文档。
差不多用的到的就这些，有时间可以去查看一下苹果的IOS人机指导手册或者开发文档，上面有更加详细的数据说明。
但实际工作中需要的并不像手册上提供的尺寸那么多，所以工作之中，和你的工程师搭档去沟通，你要知道的是你们公司开发所用的数据，而不是苹果提供给你的数据。
(转载请保留)
互联网的一些事，已超50万小伙伴关注！当前位置： >>
《iOS 人机界面准则》中文版
iOS 人机界面准则郎启旭? 译者按本书译自 Apple 官方推出的设计指南《iOS Human Interface Guidelines》，但并未取得官方翻译授权。 由于经验不足、水平有限，翻译中难免存在错误和疏漏之处，欢迎来信指正。后续如有更新，也会在我的微信公众号 上告知（搜索微信号：langnote），欢迎关注。郎启旭 2014 年 1 月 25 日邮箱： | 知乎：/people/langqixu | 博客： | Copyright ? 2013 Apple Inc. All Rights Reserved.1 目录用户界面设计基础 8 为 iOS 7 而设计 8依从内容 9 清晰呈现 11 纵深传达 15iOS 应用解析 21 启动和停止 23立即启动 23 随时准备停止 24布局 27 导航 30 模态情境 33 交互和反馈 35用户对标准手势了如指掌 35 交互性元素引人触控 37 反馈增进理解 41 信息输入轻松容易 42动画 43 品牌化 45 色彩和字体 47色彩增进沟通 47 文字清晰易读 48 | Copyright ? 2013 Apple Inc. All Rights Reserved.2 目录图标和图形 51应用图标 51 条栏图标 51 图像 52术语和措辞 53 与 iOS 整合 55正确使用标准 UI 元素 55 响应设备方向变化 56 弱化文件和文档处理 57 必要时提供设置方式 58 充分利用 iOS 技术 59设计策略 60 设计原则 61美学完整性 61 一致性 61 直接操控 62 反馈 63 隐喻 64 用户控制 64从概念到产品 65定义你的 App 65 1. 列出所有你认为用户会喜欢的功能点 65 2. 定义你的目标用户 65 3. 通过定义目标用户来筛选功能点 66 4. 继续向前 66 为任务量身定制 67 原型&迭代 68案例研究：从桌面到 iOS 69iPad 中的 Keynote 69 iPhone 中的「邮件」 71 iOS 中的网页内容 72 | Copyright ? 2013 Apple Inc. All Rights Reserved.3 目录在 iPhone 5 中运行 74 iOS 技术 81 Passbook 82 多任务处理 84 路线导航 86 社交媒体 88 iCloud 90 App 内购买 92 Game Center 94 通知中心 96 iAd 富媒体广告 99 AirPrint 102 位置服务 104 快速预览 106 声音 107理解用户期望 107 定义应用的声音行为 108 管理音频中断 111 合适地处理远程多媒体控制事件 113VoiceOver 114 编辑菜单 115 撤销和重做 117 | Copyright ? 2013 Apple Inc. All Rights Reserved.4 目录键盘和输入视图 118 用户界面元素 119 条栏 120状态栏 120 导航栏 121 工具栏 123 工具栏和导航栏图标 124 标签栏 126 标签栏图标 127 搜索栏 129 范围栏 130内容视图 131活动 131 活动视图控制器 132 精选视图 133 容器视图控制器 134 图像视图 135 地图视图 136 页面视图控制器 137 弹出窗口（仅 iPad） 138 滚动视图 141 分栏视图控制器（仅 iPad） 142 表格视图 144 文本视图 149 Web 视图 150控件 152活动视图指示器 152 「添加联系人」按钮 153 日期选择器 153 详情展开按钮 154 信息按钮 155 标签 155 网络活动指示器 156 页码控件 156 | Copyright ? 2013 Apple Inc. All Rights Reserved.5 目录选择器 157 进度视图 158 刷新控件 158 圆角矩形按钮 159 分段控件 159 滑块 160 步进器 161 开关 161 系统按钮 162 文本框 163临时视图 165警告框 165 操作菜单 168 模态视图 170图标和图像设计 171 图标和图像尺寸 172 应用图标 174文档图标 177 Spotlight 和「设置」图标 177启动画面 179 条栏按钮图标 181 报刊杂志图标 184 Web Clip 图标 186 创建可伸缩图像 187 文档修订历史 188 | Copyright ? 2013 Apple Inc. All Rights Reserved.6 表格声音 107表 30-1 音频会话类别及其相关行为 109条栏 120表 35-1 用于工具栏和导航栏的标准按钮 125 表 35-2 用于标签栏的标准标签图标 128图标和图像设计 171表 39-1 自定义图标和图像的尺寸（像素单位） 173报刊杂志图标 184表 43-1 每期报刊杂志图标的最大缩放尺寸 185 | Copyright ? 2013 Apple Inc. All Rights Reserved.7 用户界面设计基础? 「为 iOS 7 而设计」（第 8 页） ? 「iOS 应用解析」（第 21 页） ? 「启动和停止」（第 23 页） ? 「布局」（第 27 页） ? 「导航」（第 30 页） ? 「模态情境」（第 33 页） ? 「交互和反馈」（第 35 页） ? 「动画」（第 43 页） ? 「品牌化」（第 45 页） ? 「色彩和字体」（第 47 页） ? 「图标和图形」（第 51 页） ? 「术语和措辞」（第 53 页） ? 「与 iOS 整合」（第 55 页） | Copyright ? 2013 Apple Inc. All Rights Reserved.8 为 iOS 7 而设计iOS 7 具体体现了以下主旨：? 依从（Deference）。用户界面（UI）应当有助于用户理解内容并与之互动，而非对抗。 文字在每种字号下都易于阅读，图标表意准确清晰，装饰也恰到其度，并以对功能的无比关 ? 清晰（Clarity）。 注驱动设计。 ? 纵深（Depth）。视觉上的分层界面和逼真的动作使其更赋活力，提升了用户的愉悦和理解。无论你是重新设计一个现有的 app，还是创造一个全新 app，都可以考虑借鉴 Apple 重新设计内置 app 的方法： iOS 7 中的「天气」 iOS 6 中的「天气」? 首先，剥离界面，将核心功能展露，并重新审视应用的实质。 iOS 7 的主旨（依从、清晰和纵深）去提升用户界面设计和用户体验。谨慎且有根据地构建每一个 ? 接着，基于 细节和装饰。 | Copyright ? 2013 Apple Inc. All Rights Reserved.9 为 iOS 7 而设计 依从内容? 在这个过程中，随时准备推翻成见，保持怀疑，并以内容与功能为中心来驱动每一个设计上的决定。依从内容虽然通透、美观的界面和流畅的动画效果是 iOS 7 体验中最为瞩目的部分，但用户的内容才是真正的核心。 下面这些方法可以确保你的设计追随功能，并依从于用户内容。充分利用整块屏幕。重新考量对插图和视觉框架的使用，可以考虑 让内容扩展到屏幕边缘。「天气」就是一个很好的范例：漂亮的全 屏界面非常直观地呈现出某个地点当前天气的关键信息，而且还有 多余空间可以显示每个小时的天气数据。 | Copyright ? 2013 Apple Inc. All Rights Reserved.10 为 iOS 7 而设计 依从内容重新考量模拟现实的视觉表现。浮雕、渐变和阴影效果有时会让界 面元素变得沉重，进而喧宾夺主。相反，要突出内容并让界面扮演 一个辅助性的角色。 | Copyright ? 2013 Apple Inc. All Rights Reserved.11 为 iOS 7 而设计 清晰呈现通过半透明的界面元素来暗示背后的内容。半透明效果（如「控制 中心」）可以提供情境，帮助用户看到更多可用的内容，并给人一 种短暂停留的暗示。在 iOS 7 中，半透明元素只模糊渲染在其正 背后的内容，给人一种透过宣纸的感觉，但屏幕上的其他部分并不 会模糊。清晰呈现清晰呈现是另一种在你的 app 中来确保依从内容的方法。下面这些方法可以使得最重要的内容和功能都能清晰呈现 并便于操作。 | Copyright ? 2013 Apple Inc. All Rights Reserved.12 为 iOS 7 而设计 清晰呈现大量使用留白。留白会让重要内容和功能更为突出、更易于理解。 同时，留白还可以传达一种安静平和的感觉，这会让 app 看上去 更加专注和高效。 | Copyright ? 2013 Apple Inc. All Rights Reserved.13 为 iOS 7 而设计 清晰呈现用色彩简化界面。使用一种主题色――例如「便签」中的黄色―― 来突出重点，并巧妙地暗示其交互性。同时，这会给 app 带来一 致性的视觉主题。内置的 app 使用了一系列纯净的系统颜色，而 每一种颜色在深色浅色两种背景中看起来都很好。 | Copyright ? 2013 Apple Inc. All Rights Reserved.14 为 iOS 7 而设计 清晰呈现使用系统字体以确保易读性。iOS 7 的系统字体能够自动调整字间 距和行高，这会让文本内容易于阅读，且在任意字号下都显示良 好。无论你是使用系统字体还是自定义字体，请确保使用「动态字 体」（Dynamic Type），这样在用户选择不同的字号时你的 app 可以作出响应。 | Copyright ? 2013 Apple Inc. All Rights Reserved.15 为 iOS 7 而设计 纵深传达拥抱无边框按钮。在 iOS 7中，所有的条栏按钮都没有边框。无边 框按钮会在按钮的内容区域内使用情境、颜色和一个动作导向的标 题来暗示其交互性。如果合适，还可以通过显示纤细的边框或者浅 色背景来让按钮更加突出。纵深传达iOS 7 会在不同的分层界面（layers）上显示内容，这些包含层次和位置的分层界面能帮助用户理解界面对象之间的 关系。 | Copyright ? 2013 Apple Inc. All Rights Reserved.16 为 iOS 7 而设计 纵深传达通过在主屏幕之上浮现一个半透明背景，来将文件夹中的内容和屏 幕其他部分区分开来。 | Copyright ? 2013 Apple Inc. All Rights Reserved.17 为 iOS 7 而设计 纵深传达「提醒事项」在多个图层中显示列表，如图所示。当用户使用其中 某一个列表时，其他的列表会在屏幕底部被收起。 | Copyright ? 2013 Apple Inc. All Rights Reserved.18 为 iOS 7 而设计 纵深传达当用户在「日历」的年度、月份和日视图之间切换时，强烈的转场 动画会给他们一种纵深和层次感。滚动如图所示的年视图，用户一 眼就能看到当天的日期并执行其他日历任务。 | Copyright ? 2013 Apple Inc. All Rights Reserved.19 为 iOS 7 而设计 纵深传达当用户选中某个月份，年度视图会以放大效果消失，并随之展现 月份视图。当天的日期仍然保持红色高亮，而年份则出现在返回 按钮中，这样用户便能准确了解自己现在所处的位置，是从哪里 过来的，以及如何返回。 | Copyright ? 2013 Apple Inc. All Rights Reserved.20 为 iOS 7 而设计 纵深传达类似的转场动画还发生在用户选中某一天时：月份视图会向上下两 侧分开，从而将本周推到屏幕顶部，随之显示被选中的某天的每小 时视图。通过这些转场效果，「日历」强化了年度、月份和日视图 之间的层级关系。 | Copyright ? 2013 Apple Inc. All Rights Reserved.21 iOS 应用解析几乎所有 iOS 应用都会使用一些由 UIKit 框架定义的 UI 组件。了解这些基本组件的名称、角色和作用，将会帮助你 在设计 app 界面时做出正确合理的决定。UIKit 提供的界面元素大致可以分为四类：? 条栏。条栏包含告知用户其所在位置的情境信息，以及帮助用户浏览或执行操作的控件。 ? 内容视图。内容视图容纳 app 特有的内容，并支持诸如滚动，插入，删除和条目重排等行为。 ? 控件。控件可以触发操作或展示信息。 ? 临时视图。临时视图会简要地给用户呈现重要信息，并附带操作和功能。除了定义界面元素，UIKit 还定义了一些可执行功能的对象，例如手势识别、绘制、辅助功能和打印支持。 从编程角度来说，由于界面元素都继承自 UI View，因此它们都可以被看成不同类型的视图。视图知道如何绘制其 自身的界面，以及感知用户在其范围内的触控行为。所有的视图类型包括控件（例如按钮和滑块），内容视图（例如 精选视图和表格视图）和临时视图（例如警告框和操作列表）。 | Copyright ? 2013 Apple Inc. All Rights Reserved.22 iOS 应用解析若要在你的 app 中管理一组或一系列的视图，你通常要用到视图控制器。视图控制器可以协调视图显示，实现用户 交互的功能，还能管理一个页面到另一页之间的转场效果。例如，「设置」使用了一个导航控制器来显示其一系列的 层级视图。 下面的示例展示了视图和视图控制器是如何协作呈现出一个 iOS app 的。虽然开发者们通常会基于视图和视图控制器去思考设计一个 iOS 应用，但用户更倾向于这是在体验一个又一个的页 面。从这个角度来说，每一个页面都对应着 app 中一个明确的视觉状态或模式。 注意：每个 iOS 应用都包含窗口――但不同于电脑程序的窗口――iOS 中的窗口没有任何可见部分，而且不能被移动 到屏幕上的其他位置。大多数 iOS app 都只包含一个窗口，但那些支持外接显示器的 app 可以拥有更多窗口。 在《iOS 人机界面准则》中，我们会使用页面（Screen）这个能被大多数用户理解的词。作为开发者，你也将会在 不同的上下文中读到页面这个词，但这时指的是 你可以用来访问外部显示设备的 UIScreen 对象。 | Copyright ? 2013 Apple Inc. All Rights Reserved.23 启动和停止立即启动一般来说，在接触新 app 的一两分钟内人们就会决定是否继续使用。如果你把握住这转瞬即逝的机会迅速呈现有用 的内容，就可以激发新用户的兴趣，并给所有用户带来出色的体验。 重要：不要在人们安装好你的 app 后告诉他们需要重启设备。重启会耽误时间，还会让你的 app 看起来不太可靠且 难以上手。如果你的 app 由于内存使用或其他问题导致它只能在系统刚启动时才能很好运行，那你需要处理这些问 题。有关开发高度优化的 app 的指南，请参阅《iOS App Programming Guide》中「Using Memory Efficiently」一节。 尽可能避免使用启动画面或其他类似的启动体验。最好让用户可以立即开始使用你的 app 。 推荐 不推荐 | Copyright ? 2013 Apple Inc. All Rights Reserved.24 启动和停止 立即启动避免要求用户提供设置信息，代之以： 80% 用户的需求。这样，大部分用户不需要进行任何设置，因为你的 app 已经按他们期望的方式设置好 ? 关注 了。如果有一些功能只有极少数用户可能需要或者大部分用户只会用一次，请抛弃这样的功能。 如果你可以使用任何内置程序或设备中用户所提供的信息，那就从系统中获取 ? 尽可能通过其他方式获取信息。 这些信息，而不要让用户再输一次。 app 中输入。然后，尽快存储这些信息（例如，在你 app 的 ? 如果你确实需要提供设置信息，请让人们在你的 设置中）。这样一来，在有可能体验到你 app 的乐趣前人们不会被迫切换到 iOS 的「设置」中了。如果人们 将来需要修改这些信息，可以在任何时间前往 app 的设置页面进行修改。 尽可能将登录延后。最好在用户没有登录时就可以通过导航来浏览你的 app 并使用部分功能。用户在在可以做点有 用的事情前通常已经从那些强制他们登录的 app 中离开了。 一般来说，以设备的默认方向启动。在 iPhone 上，其默认方向是竖屏；在 iPad 上，则是设备当前的方向。如果你 的 app 只支持横屏，你应该始终以横屏方式启动，然后让用户在需要时旋转设备。 注意：对于只支持横屏的 app，最好能同时支持横屏竖屏两种状态，即 Home 键会在左侧或右侧的状态。如果设备 已经处于横屏，除非有很好的理由支持，否则只支持横屏的 app 应当就以此方向启动。另外，对只支持横屏的 app，Home 键应该在其右侧。（如需了解更多关于支持不同设备方向的信息，请参阅「响应设备方向的改变」（第 56页）） 显示一个和 app 首屏极其相似的启动画面。iOS 会在你的 app 启动的瞬间显示这个启动画面，这可以让用户感觉你 的 app 非常快，并让你有足够的时间去加载内容。参阅「启动画面」（第 180 页）了解如何创建启动画面。 如果可能，避免在用户首次加载你的 app 时让他们阅读免责声明或确认终端用户许可协议。你可以让 App Store 显 示你的免责声明或者终端用户许可协议（EULA），以便人们可以在下载 app 前读到它们。如果你确实需要在 app 内展示这些东西，请确保以一种和 UI 保持和谐的方式将其整合进去，并在商业需求和用户体验间把握平衡。 App 重启后要恢复其状态，以便用户可以从中断的地方继续使用，而不要让用户去记住如何返回之前所在的位置。如 需了解更多关于高效重建和恢复 app 状态的方式，请参阅「State Preservation and Restoration」。随时准备停止iOS 应用永远不会显示一个「关闭」或「退出」选项。人们退出一个 app 的方式就是切换到另一个 app、返回主屏 幕或者让设备进入睡眠模式。 当人们从你的 app 切换离开，iOS 的多任务处理会将其挂到后台，并切换到新 app 的界面中。为了应对这种情况， 你应当：? 尽快并尽可能频繁地在合理范围内存储用户数据。这样做是因为处于后台的 app 随时都有可能被退出或结束。 | Copyright ? 2013 Apple Inc. All Rights Reserved.25 启动和停止 随时准备停止app 停止时，尽可能最多地保存当前状态的细节。这样的话，当人们切换回来时就不会失去之前所处的情 ?当 境。例如，如果你的 app 有显示可滚动的数据，那在停止时要保存当前所处的滚动位置。你可以前往「State Preservation and Restoration」了解更多关于高效重建和恢复 app 状态的方式。 有些 app 可能需要在用户运行其他 app 时一直在后台运行。例如，当用户在另一款 app 中检查待办事项或者玩游 戏时，他们会希望让正在播放音乐的 app 能继续播放。想要了解如何正确优雅地处理多任务，请参阅「多任务处 理」（第 84 页）。 永远不要以程序化的方式自动退出一个 iOS app。用户有可能会将其认为是程序崩溃了。如果由于一些可预知的问 题导致程序无法使用，那你需要告诉用户发生了什么、他们能做点什么。以下是两个不错的方法：如果所有的功能都不可用，就向用户展示一个界面去描述问题并建 议用户如何纠正。这能给用户一种反馈，让他们觉得你的 app 并 没有出错。这也会赋予用户以控制感，让他们来决定是采取纠正措 施并继续使用你的 app，还是切换到另一个 app。 | Copyright ? 2013 Apple Inc. All Rights Reserved.26 启动和停止 随时准备停止如果只有部分功能不可用，那在用户用到这些功能时提供解释界面 或者提示。这样的话，人们还可以使用 app 的其他功能。如果你 决定使用警告框，请确保只在用户尝试使用不可用的功能时展示。 | Copyright ? 2013 Apple Inc. All Rights Reserved.27 布局布局不止关乎界面元素在 app 中如何呈现。通过你的布局能让用户知道哪些东西是最重要的、他们能做什么以及所 有这些是如何联系起来的。基于你的程序所运行的设备及其所处的方向（横向或竖向），你的布局可能需要随之调 整。 给每个交互元素以足够的间距，以便用户对内容和控件进行操作。可点击控件的点击区域不小于 44 x 44 点。 推荐 不推荐 | Copyright ? 2013 Apple Inc. All Rights Reserved.28 布局将重要内容和功能放到更重要的位置，以便用户可以更容易地关注主要任务。一些可行的方法是，将主要元素放置在 屏幕的上半部分，并靠近屏幕左侧（基于从左至右的阅读习惯）：利用视觉上的权重和平衡来向用户显示界面元素之间的相对重要程度。相比尺寸较小的元素，那些大尺寸的元素更吸 引目光，看上去也更重要。同时，较大尺寸的元素也更容易被用户点击，这让它们在某些复杂环境里常用的 app （例如「电话」和「时钟」）中更为有用。利用对齐来减少浏览和信息传达的分组和层级。对齐会让 app 看上去紧凑有序，还能让用户在滚动一整个屏幕的信 息时保持目光焦点。不同信息分组之间的缩进和对齐，暗示着这些分组是如何关联，这让用户可以更容易地找到特定 条目。 确保主要内容在默认尺寸下可以被阅读和理解。例如，用户不应需要滚动才读到重要文本，或者放大图片才能看到主 要内容。 | Copyright ? 2013 Apple Inc. All Rights Reserved.29 布局随时准备应对文字大小的变化。当用户在「设置」中更改文字大小时，他们会希望大多数的 app 可以作出合适的响 应。为适应一些文字字号的变化，你可能需要调整布局；如需了解关于在 app 中显示文字的更多信息，请参阅「文 字清晰易读」（第 49 页）。 尽可能避免在界面中出现不一致的样式。通常来说，拥有相似功能的元素看上去也应该很像。用户常常会认为那些他 们所看到的不一致背后必定富有深意，然后花时间去理解它们。 | Copyright ? 2013 Apple Inc. All Rights Reserved.30 导航除非与用户期望相悖，否则人们并不会注意到 app 的导航体验。你需要做的就是让导航与应用的结构、意图相契 合，而不让用户注意到导航本身。 广义上来说，这里有三种主要的导航样式，分别对应三种不同的应用结构：? 层级式 ? 扁平式 ? 内容/体验主导式在层级式 app 中，用户通过在每个页面进行一次选择进行导航直至到达目标位置。要到达到另一个位置，用户必须 原路返回几步（或者从最开始重新出发）并作出不同的选择。「设置」和「邮件」是使用层级式结构 app 的绝佳示 例。请查看此文档的 HTML 版本以观看视频。 | Copyright ? 2013 Apple Inc. All Rights Reserved.31 导航在一个扁平式信息结构的 app 中，由于所有的主要类别都可以从主页面进入，用户可以直接从一个主要类别调到另 一个类别。「音乐」和 App Store 便是使用扁平式结构的范例。请查看此文档的 HTML 版本以观看视频。 在 app 中使用内容/体验主导式的信息结构并不奇怪，导航同样是由内容或体验定义的。例如，用户要浏览一本书， 是通过从一个页面移动到下一页或是在内容目录中选择一页；在游戏中，导航尝尝是体验的一个重要部分。请查看此文档的 HTML 版本以观看视频。 | Copyright ? 2013 Apple Inc. All Rights Reserved.32 导航在某些情况下，组合使用多个不同的导航样式会很不错。例如在扁平信息结构中，同一类目下的项目最好能以层级形 式来展示。 永远要让用户知道自己正处于应用中的什么位置，并清楚如何去往他的下一个目标。无论使用哪种符合应用结构的导 航样式，最重要的是让用户的使用路径符合逻辑、可以预知且易于学习。 UIKit 中定义了一些用来实现层级式与扁平式导航的标准界面元素，同时也提供了一些元素来帮助你实现以内容为主 导的导航样式，例如针对书本风格或媒体浏览风格的应用。而以体验为主导的导航样式――例如一款游戏应用――一 般来说都是建立在自定义的元素与交互行为上的。 用导航栏来让用户在层级数据之间轻松穿梭。导航栏的标题能告诉用户目前在层级关系中所处的位置；后退按钮则可 以轻松回到上一层级。如需了解更多信息，请参阅「导航栏」（第 121 页）。 用标签栏来展示平级分类的内容或功能。标题栏可以很好支持扁平结构的信息，因为它能随时随自如地实现在不同类 目之间的切换。 如需了解更多信息，请参阅「标签栏」（第 126 页）。 用页码控件来指示有多个子项目或多屏内容。 页码控件可以很好地告知用户有多少个页面，以及当前正处于哪个页 面。例如，「天气」使用了页码控件以显示用户已经打开了多少个特定位置的天气页。 如需了解更多信息，请参阅 「页码控件」（第 156 页）。 总的来说，最好是给用户以唯一的路径前往每个页面。如果用户需要多种情境中查看某个页面，请考虑使用临时视图 （例如模态视图、操作列表或警告框）。 如需了解更多信息，请参阅「模态视图」（第 170 页）、「操作菜单」 （第 168 页）和「警告框」（第 165 页）。 UIKit 也提供以下的相关控件： 159 页）。分段控件可以给用户一种办法，以在页面中查看内容的不同类别或方面，而无需 ? 「分段控件」（第 通过导航到一个新页面去。 123 页）。尽管工具栏看上去和导航栏或者标签栏很像，但它不是导航。反而，工具栏给用户 ? 「工具栏」（第 一种可以在操作当前页面内容的控件。 | Copyright ? 2013 Apple Inc. All Rights Reserved.33 模态情境模态――一个承载内容或体验的模式――自有其优点和缺点。它可以帮用户完成某些任务或者不受干扰地获取信息， 但也会暂时性地阻止用户与 app 的其他部分交互。理想情况下，用户能够以非线性的方式和 iOS app 交互，所以最好能精简你 app 中模态体验。通常，只在以下这些 情况下考虑创建模态情境：? 非常需要吸引用户注意 ? 必须完成自包含任务（或明确放弃），以避免让用户的数据处于不明确状态保持模态任务简短精炼。你不会希望用户将模态视图看成是你 app 中的一个小程序。如果子任务过于复杂，用户在 进入模态情境时会忽略他们的主要任务。在创建一个涉及层级视图的模态任务时需要尤为谨慎，因为用户会感到迷茫 以及忘记如何原路返回。如果模态任务必须在多个视图中包含子任务，确保在层级之间给用户一个唯一、清晰的路 径，并避免产生循环。如需了解使用模态视图的准则，请参阅「模态视图」（第 170 页）。 始终提供一个明显而安全地退出模态任务的方式。当用户退出模态视图时，他们通常会知道其任务会被结束。 | Copyright ? 2013 Apple Inc. All Rights Reserved.34 模态情境如果任务需要一系列多层级的模态视图，请确保用户在轻点次顶层视图中的「完成」按钮时知道会发生什么。检查任 务流程，以决定次级视图中的「完成」按钮是仅仅完成视图中的部分任务，还是完成整个任务。鉴于存在混淆的可能 性，请尽可能避免在附属视图中使用「完成」按钮。 使用警告框传达必要――且可操作――的信息。警告框会中断用户的体验过程，并需要一次点击才能结束，因此让用 户获知警告框出现的合理性是很重要的。如需了解更多信息，请参阅「警告框」（第 165 页）。 尊重用户关于接收通知信息的设定。在「设置」中，用户会设置希望以怎样的方式接收来自你的 app 的通知信息。 请确保遵循这些设定，以免用户关闭来自你 app 的所有通知消息。 | Copyright ? 2013 Apple Inc. All Rights Reserved.35 交互性和反馈用户对标准手势了如指掌人们使用手势――例如轻点、拖拽和双指开合――来和 app 以及他们的 iOS 设备交互。使用手势能在人与设备之间 建立起一种亲密的人性化联系，并增强用户对直接操控屏幕对象的感知。一般来说，人们会希望他们所使用的 app 中的手势操作保持一致。轻点（Tap） 用来按下或选中一个控件或项目拖拽（Drag） 用来滚动或切换内容（即，从屏幕一边移动到另一边） 可以拖拽一个对象滑动（Flick） 用来快速滚动或切换 | Copyright ? 2013 Apple Inc. All Rights Reserved.36 交互性和反馈 用户对标准手势了如指掌轻扫（Swipe） 使用一只手指轻扫，可以返回上一个页面，可以显示在分栏视图 中的隐藏视图（仅 iPad），或表格视图里某行的「删除」按钮。 在 iPad 上，四指轻扫可以在多个应用之间进行切换。双击（Double tap） 用来放大内容或图片，并将其置于屏幕中央。 如果内容已被放大，则会将其缩小。双指开合（Pinch） 双指张开或闭合以放大或缩小内容长按（Touch and hold） 在可编辑或可选择的文本中会显示放大镜视图，用来 定位光标。 | Copyright ? 2013 Apple Inc. All Rights Reserved.37 交互性和反馈 交互性元素引人触控摇晃（Shake） 用来执行撤销或重做操作。除了用户熟知的标准手势，iOS 还定义了一些在系统全局应用的操作手势，比如展开「控制中心」或「通知中心」。 无论用户当前在使用什么应用，都可以通过这些手势进行操作。 避免为标准手势赋予不同的行为。除非你的 app 是游戏，否则重新定义标准手势的行为可能会让用户迷惑，并使其 难以使用。 避免重复创建和标准手势具有相同行为的自定义手势。用户习惯于标准手势的行为，他们并不希望学习了不同的方式 却做了同样的事情。 可以使用复杂手势作为完成任务的快捷方式，但不能是唯一的执行方式。尽可能给用户提供简单直接的操作方式，哪 怕需要一两次额外的点击。简单的手势让用户更沉浸于体验和内容，而非交互本身。 通常，应避免定义新的手势，除非你的 app 是游戏。在游戏和其他沉浸类 app 中，自定义手势可以成为体验乐趣的 一部分。但在那些帮助人们完成重要事务的 app 中，最好使用标准手势，这样用户就不需要努力去发现或记住它 们。 在 iPad 上，可以考虑使用多指手势。iPad 的大屏幕为自定义多指手势带来了广阔空间，包括那些多人操作的手势。 尽管复杂的手势并适用于所有 app，但对于那些人们会花费大量时间在其中的应用来说，例如游戏或创造内容的 app，这会提升体验。另外要记住，非标准的手势通常不容易被发现，不要让这类手势成为执行操作的唯一方式。交互性元素引人触控为达到显著的交互性，内置 app 使用了各式各样的暗示，包括颜色、位置、情境和富有含义的图标和标签。用户基 本不需要额外的装饰来告诉他们页面中的元素是可交互的或者暗示它会用来做什么。 | Copyright ? 2013 Apple Inc. All Rights Reserved.38 交互性和反馈 交互性元素引人触控主题色（key color）会给用户以强烈的交互性视觉指示，尤其是 在那些没有大量使用其他颜色的 app 中。在「联系人」中，蓝色 表明了那些交互性元素并给 app 以一个统一且易于辨认的视觉主 题。返回按钮使用了一些暗示来传达其交互性和传达其功能：它出现在 导航中，其中显示着一个后退的箭头和一个描述上一个页面的标 题，而且通常会使用一个主题色。 | Copyright ? 2013 Apple Inc. All Rights Reserved.39 交互性和反馈 交互性元素引人触控图标或者标题可以提供清晰的行动号召来吸引用户点击。例如，在 「地图」中的标题――如「添加书签」和「到这里的路线」――清 晰地描述了用户可以进行的操作。结合主题色和行动性的标题，便 不再需要按钮边框和其他装饰。在内容区域，只在需要时为按钮添加边框或背景。条栏、操作列表和警告框中的按钮不需要边框，因为用户知道这些 区域的大部分项目是可交互的。另一方面，在内容区域可能会需要边框或背景，以将其和内容的其他部分区别开来。 例如，「音乐」、「时钟」和 App Store 在几个特定情境中都使用了有边框的按钮。 | Copyright ? 2013 Apple Inc. All Rights Reserved.40 交互性和反馈 交互性元素引人触控「音乐」用按钮背景将其和上方的解释性文本区分开来。「时钟」在「秒表」和「计时器」页面中使用了有框按钮，使得用 户即使身处错综复杂的环境也能也能注意到「开始计时」和「暂 停」按钮并轻松点击。 | Copyright ? 2013 Apple Inc. All Rights Reserved.41 交互性和反馈 反馈增进理解App Store 在表格列表的每一行中都使用了有框按钮，以强调点 击某行获取更多信息和点击购买按钮之间的区别。反馈增进理解反馈有助于用户了解 app 正在做什么、发现他们接下来能做什么以及了解他们的操作会有什么结果。UIKit 的控件和 视图提供了多种类型的反馈。 尽可能在用户界面中整合状态和其他相关的反馈信息。无需采取任何操作或从内容中打断，用户就可以获得相应类型 的信息。例如，「邮件」会在工具栏中显示更新状态，这样不会和用户内容相冲突。避免不必要的警告框。警告框是一种高效有力的反馈形式，但它只应用于传达最重要――理想情况下可操作――的信 息。如果用户看过太多没有包含重要信息的警告框，他们很快就会学会忽略这些提示。如需了解更多关于使用警告框 的信息，请参阅「警告框」（第 165 页）。 | Copyright ? 2013 Apple Inc. All Rights Reserved.42 交互性和反馈 信息输入轻松容易信息输入轻松容易无论人们是点击控件还是使用键盘，信息输入都会耗费时间和精力。如果在 app 解决问题前就要求人们输入太多信 息，那他们会感觉受挫。 使用选项来让用户输入变得轻松容易。例如，你可以使用选择器或者表格视图代替文本框，因为对大多数人来说，从 一个列表中找到并选中某一项比输入文字要容易。 「提醒事项」中的时间选择器「设置」中的选项列表适当时，从 iOS 获取信息。人们在他们的设备中存储了很多信息。如果你可以很容易地自己找到这些信息，那就不要 要求人们输入它们，例如他们的联系人或日历信息。 通过给予用户有用的信息来平衡信息输入的请求。付出和回报的感觉有助于用户觉得他们正在你的 app 中取得进 展。 | Copyright ? 2013 Apple Inc. All Rights Reserved.43 动画漂亮而精致的动画效果遍及 iOS 界面，它们让 app 体验更为诱人、更具活力。恰到好处的动画效果可以：? 传达状态并提供反馈 ? 增强直接操控的感受 ? 帮助人们将他们行为的结果可视化请查看此文档的 HTML 版本以播放视频。 谨慎地添加动画效果，尤其是在并不提供沉浸体验的 app 中。过度或者无意义的动画效果会阻塞 app 流程、降低性 能并分散用户注意力。 尤其要有目的并克制地使用动画效果和 UIKit 动态行为，并确保其效果经过测试。适当地使用动画效果，可以提升用 户感受和乐趣；但过度使用动画会让 app 看上去无所适从、难以操控。 如果合适，创建与内置动画效果相一致的自定义动画。人们习惯于内置 iOS app 优雅的动画效果。事实上，人们往 往把视图之间流畅的转场效果、改变设备方向时的流体响应以及基于物理原理的滚动看成是 iOS 体验的一部分。除非 你正在创建一个沉浸型的 app（例如游戏），自定义动画应当和内置的动画效果相差无几。 在你的 app 中使用一致的动画效果。和其他类型的自定义设计一样，最重要的是要一致地使用自定义动画，以便用 户可以随着使用你的 app 而积累经验。 | Copyright ? 2013 Apple Inc. All Rights Reserved.44 动画一般来说，要确保自定义动画真实可信。人们往往愿意接受外观上的艺术创新，但当他们体验到毫无意义或违背物理 规律的动态效果时仍然会感到怪异和困惑。例如，如果你通过在屏幕顶部往下滑动触发一个视图，你应当可以通过向 上滑动关闭这个视图，这样做有助于用户想起视图是从何而起。如果你通过在屏幕底部往下滑动来关闭同一个视图， 你会打破用户认为屏幕顶部存在可用视图的心智模型。 | Copyright ? 2013 Apple Inc. All Rights Reserved.45 品牌化成功的品牌化不仅仅是为 app 注入品牌资产。最优秀的 app 会将现有品牌资产和独特的外观整合起来，给用户带来 愉悦而难忘的体验。 iOS 让品牌化变得容易，使用自定义图标、颜色和字体就能创建一套独特的 UI，从而让你的 app 和其他人区分开 来。当你在设计这些元素时，请记住以下两点： app 中的其他元素，无论这些元素是自定 ? 每一个自定义元素都要好看而且正常运作，但它也需要看上去从属于 义的还是标准的。 iOS 7 中显得自然，你的 app 不需要和内置 app 长得很像，但它确实需要融合依从、清晰和纵深 ? 为了让其在 （如需了解更多关于这些设计主旨的信息，请参阅「为 iOS 7 而设计」（第 9 页））。花时间去弄清楚在你的 app 中什么是依从、清晰和纵深，并将其通过你的自定义元素传达出来。 当你需要在 app 中提醒用户品牌的存在时，请遵循以下准则： 以优雅谦逊的方式整合品牌资产。人们使用你的 app 是为了搞定问题或者娱乐；他们并不希望感觉像是在被强迫观 看一个广告。为了获得最佳的用户体验，你需要通过你所选择的字体、颜色和图像安静地让用户感知到品牌的存在。 | Copyright ? 2013 Apple Inc. All Rights Reserved.46 品牌化推荐不推荐不要挤占人们所在意的内容的空间。例如，在屏幕顶部显示一个附加的固定条栏，只用来显示品牌资产，这会意味着 内容的显示空间变少了。相反，尊重用户内容，并考虑以更少干扰的方式遍布展现品牌，例如使用自定义颜色、字 体、或巧妙地自定义屏幕的背景。 不要在整个 app 中处处展现你的标识。移动设备的屏幕相对来说很小，标识的每一次展现都会挤占用户所希望看到 的内容的空间。更重要的是，在 app 中展现标识和在网页中显示标识目的不同：用户常常会访问了一个网页而不知 道它的所有者，但要说用户不用看应用图标就会打开一个 iOS app，这不太可能。 | Copyright ? 2013 Apple Inc. All Rights Reserved.47 颜色和字体色彩增进沟通在 iOS 7 中，颜色有助于暗示交互性、传达活力并提供视觉上的一致性。内置 app 使用了一系列纯粹干净的颜色， 使得它们无论是单独还是整体看起来都非常棒，而且还包含了亮色和暗色两种背景。如果你要创建多种自定义颜色，请确保它们在一起会协调。例如，如果粉色对于你的 app 风格来说必不可少，那你 应当创建一系列相配的粉色来用在整个 app 之中。 注意在不同情境下的颜色对比。例如，如果在导航栏背景和条栏按钮标题之间没有足够的对比，用户会很难看到这些 按钮。一个经验法则是，需要区分的颜色之间的对比度至少要达到 50%。在设备上查看颜色对比以测试效果，这要 在不同的光线情况中进行，包括晴天的户外。 建议：一种发现需要更高对比度的区域的方式是，降低 UI 的饱和度并以灰度模式查看其显示效果。如果你在交互和 非交互元素或灰度版本的背景之间很难发现区别，你可能需要增加这些元素之间的对比。 当你自定义条栏的颜色时，要将半透明的条栏和 app 内容考虑进去。如果你需要创建一个条栏颜色以匹配特定颜 色，例如当前品牌中的一个颜色，你可能需要试验许多颜色才能得到你想要的效果。条栏的外观同时受到 iOS 内置的 半透明效果和条栏背后的 app 内容的影响。 A P I 备 注 ： 如 果 需 要 给 条 栏 按 钮 项 目 着 色 ， 请 使 用 tintColor 属 性 ； 若 要 给 条 栏 本 身 着 色 ， 则 使 用 barTintColor 属性。如需了解更多关于这些条栏属性的信息，请参阅《UINavigationBar Class Reference》、 《UITabBar Class Reference》、《UIToolbar Class Reference》和《UISearchBar Class Reference》。 要考虑色盲人群。大多数色盲用户很难区分红色和绿色。测试你的 app，确保你没有在任何地方将红色和绿色作为区 分两种状态或值的唯一方式（一些图像编辑软件有这样的工具可以帮助你验证色盲的情况）。通常，使用不止一种方 式去表示元素的交互性是一个不错的想法（如需了解更多关于在 iOS 7 中表示交互性的信息，请参阅「交互性元素引 人触控」（第 38 页））。 | Copyright ? 2013 Apple Inc. All Rights Reserved.48 颜色和字体 色彩增进沟通考虑选择一个主题色以显示交互性和状态。内置 app 中的主题色包括「标签」的黄色和「日历」的红色。如果你要 定义一个主题色以显示交互性和状态，确保你的 app 中的其他颜色不会与之冲突。 避免在交互和非交互元素中使用相同的颜色。颜色是用户界面元素显示其交互性的一种方式。如果交互和非交互元素 用一样的颜色，那么用户会很难知道他们点的是哪里。 颜色增进沟通，但并不总是你所希望的方式。每个人看到的颜色都不同，而且在许多文化中人们对颜色的含义如何对 应也有所不同。花点时间去了解你所使用的颜色在其他国家和文化中可能会被如何解读。你需要尽可能确保 app 中 的颜色传达着合适的信息。 大部分情况下，不要让颜色干扰用户。除非颜色是你的 app 主旨中不可或缺的部分，否则它通常应仅是一种恰到好 处的升华。文字清晰易读最为首要的是，文字必须清晰易读。如果用户根本看不清你的 app 中的文字，那字体设计得再漂亮也无济于事。在 iOS 7 app 中使用「动态字体」（Dynamic Type），可以实现：? 自动调整每一种字体大小的字间距和行高 ? 为不同语义的文本块指定不同的文本样式，例如正文、脚注或大标题 ? 文字会适当响应用户对文字大小的设置更改（包括辅助功能中的文字大小）注意：如果你在使用自定义字体，仍然可以根据系统设置的文字大小缩放字体。当用户改变设置，你的 app 要做出 适当的响应。 对你来说，使用「动态字体」可能需要一些工作量。如需了解如何使用文本样式并确保你的 app 在用户改变文字大 小设置时得到通知，请参阅《Text Programming Guide for iOS》中「Text Styles」一节。 | Copyright ? 2013 Apple Inc. All Rights Reserved.49 颜色和字体 文字清晰易读在响应文字大小的变化时，优先让内容变化。对用户来说，不是所 有内容都同等重要。当用户选择一个更大的文字大小时，他们想让 他们所在意的内容易于阅读；他们一般并不希望页面中的每一个字 都变大。 例如，当用户在「辅助功能」中选择了一个更大的文字大小，「邮 件」中的收件人和消息正文以大号文字显示，但一些不太重要的文 本――例如时间和发件人――还是以较小大小显示。如果合适，在用户选择不同的文字大小时调整布局。例如，在用户选择一个小号的文字大小事，你可能会想将单栏的 正文文本布局更改为两栏布局。如果你决定为不同文字大小调整布局，比起在每一种可能的大小都改变布局，你可能 要选择以大小分组来实现――如较小、中等和较大。 Make sure all styles of a custom font are legible at different sizes. One way to do this is to emulate some of the ways iOS displays font styles at different text sizes. For example: 确保自定义字体的所有样式在不同大小下都清晰可见。这样做的一个途径是，模仿 iOS 在不同文字大小下显示字体样 式的一些方式。例如： 22 点。作为对照，正文样式在大字号下使用 34 点字体大小 ? 即便用户选择了最小文字大小，文字也不应小于 作为默认文字大小设置。 2 点。例外情况是两个标题样式，在最小、小和 ? 通常来说，每一档文字大小设置的字体大小和行间距的差异是 中等设置时都使用相同字体大小、行间距和字间距。? 在最小的三种文字大小中，字间距相对宽阔；在最大的三种文字大小中，字间距相对紧密。 ? 标题和正文样式使用一样的字体大小。为了将其和正文样式区分，标题样式使用加粗效果。 ? 导航控制器中的文字使用和大号的正文样式文字大小（明确来说，是 34 点）。 | Copyright ? 2013 Apple Inc. All Rights Reserved.50 颜色和字体? 文本通常使用常规体和中等大小，而不是用细体和粗体。通常，在你的 app 中只使用一个字体。几个不同的字体混搭会让你的 app 像是杂乱无章。相反，可以使用一个字体 和仅仅几个样式和大小。根据不同的语义用途，使用 UIFont 文本样式 API 以定义不同的文本区域，例如正文或标 题。 不推荐 推荐 | Copyright ? 2013 Apple Inc. All Rights Reserved.51 图标和图像应用图标每个 app 都需要一个漂亮的应用图标。很多时候，人们会完全根据你应用图标的样子，来建立关于你的产品品质、 目的和可靠性的第一印象。当你在构思应用图标时，你应将以下几点牢记于心。此外，当你准备开始创建图标时，请参阅「应用图标」（第 175 页）一节以获得详细指导和说明。? 应用图标是产品品牌的重要组成部分。要将设计图标看成是向用户讲述产品故事以及构建情感联系的机会。 ? 优秀的应用图标都是独特、简洁、动人和令人难忘的。 ? 应用图标在不同尺寸不同背景上都要显示良好。那些在大尺寸图标上可以增强效果的细节元素在小尺寸上可能 会变得模糊不清。条栏图标iOS 提供了大量代表常见任务和内容类型小图标，它们可以用在标签栏、工具栏和导航栏中。最好尽可能地使用内置 图标，因为用户已经熟知其含义。如果需要表示自定义操作或自定义内容类型，你可以创建自定义条栏图标。设计这些线条流畅的图标和设计应用图标 不太一样。如果你需要创建自定义条栏图标，请参阅「条栏按钮图标」（第 221 页）了解如何创建。 | Copyright ? 2013 Apple Inc. All Rights Reserved.52 图标和图像 图像请注意，在导航栏或工具栏中，你可以用文本来替代图标以显示项 目。例如，「日历」使用「今天」、「日历」和「收件箱」替代工 具栏上的图标。为帮助你决定在导航栏或工具栏中是使用文本还是图标，你可以算算同一时间有多少图标在屏幕上可见。屏幕上出现 过多的图标会让 app 看上去很复杂。另外要注意，这一决定可能因 iPhone app 和 iPad app 而有所不同，因为 iPad app 往往在条栏文字上有更多空间。图像iOS app 往往包含丰富的图形元素。无论是在展示用户照片还是创造自定义作品，你都应当遵循以下这些原则： 支持 Retina 显示屏。确保你的 app 中所有的插图和图形元素都有提供 @2x 资源。 以原始宽高比显示照片和图形，且放大比例不超过 100%。你不会希望自己 app 中的差图和图形元素看上去失真或 过大。让用户自己选择是想要放大图像还是缩小图像。 不要在你的设计中使用 Apple 产品的复制图像。这些图像都是有版权的，而且这些产品设计会频繁变更。 | Copyright ? 2013 Apple Inc. All Rights Reserved.53 术语和措辞你在 app 中所展示的每一个字都是你与用户对话的一部分。要将这样的对话看成是在你的 app 中清晰表达和营造轻 松氛围的机会。「设置」是一个所有用户都会用到的 app，它用简单而直接的语言 来描述用户能做的事。例如，「设置 & 勿扰模式」并没有使用技术 术语去解释各种设置的效果，因为那对普通用户来说可能很难理 解。确保你所使用的术语能被用户理解。基于对用户的了解去判断你即将使用的词汇和短语是否恰当。例如，对于那些面 向普通用户的 app，技术术语几乎没有用处，但对于那些为精通技术的用户设计的 app 来说，使用技术术语可能又 会备受赞赏。 使用轻松友好的语气，但不要过分亲密。要避免语气生硬或过于正式，但也不要过于虚情假意或曲意逢迎。要记住， 用户可能会频繁看到你的 UI 中的文字，起初看似精妙的表达看多了也许会变得令人生厌。 像报纸编辑那样思考，找出那些冗余和不必要的字词。如果你界面中的文本简短而直接，用户便能迅速轻松地理解。 找出那些最重要的信息，简明地表述并突出显示，这样一来人们就不用在一大堆文字中寻找他们要找的信息或下一步 要做什么了。 给控件加上简短的文本标签或为人熟知的图标。这样人们一眼就能知道这个控件的作用。 | Copyright ? 2013 Apple Inc. All Rights Reserved.54 术语和措辞日期信息表述要务必准确。一般来说，在你的界面中使用像今天和明天这样友好的词汇来显示日期信息是合适的。但 如果你没有考虑用户当前所在的位置，这样的表达可能就会让人困惑。例如，要考虑到某些事件正好在午夜前开始。 对于同一时区的用户，该事件是发生在今天，但对那些更早时区的用户，这个事件可能已经在昨天发生。 撰写一段优秀的 App Store 产品描述文案，要尽量利用这个和潜在用户沟通的机会。除了准确描述你的 app 并突 出你认为人们可能会喜欢的品质之外，还需要确保： 尽管这些错误不会被每个人发现，但在一部分人心中会对你的 app 品质留 ? 更正所有的拼写、语法和表达错误。 下负面印象。 偶尔使用全部大写的词语有助于吸引人们的注意力，但当整段文字都是大写时， ? 尽量少使用全部大写的词语。 它会变得难以阅读，看上去像是在对用户大吼大叫。 bug 修复。如果你的 app 的新版本包含一些用户所期待的 bug 修复，那在描述中提到这些修 ? 考虑描述某些 复将会是个好主意。 | Copyright ? 2013 Apple Inc. All Rights Reserved.55 与 iOS 整合与 iOS 整合可以在这个平台上给用户带来迷人而愉悦、宾至如归的体验；但这不代表要创建一个和内置 app 一模一 样的 app。 领会驱动 iOS 的设计主旨――这些在「为 iOS 7 而设计」（第 9 页）中有所表述――并思考你的 app 应如何传达 这些主旨，这是将你自己独一无二的 app 整合到平台的最好方式。当这样做时，请遵循本节提到的准则，这会有助 于给用户以他们所期待的体验。正确使用标准 UI 元素尽可能使用 UIKit 提供的 UI 元素，这会是一个不错的做法。当你使用标准 UI 元素而非创建自定义元素时，你和你的 用户都会受益：? 如果 iOS 引入了一个重新设计的外观，标准 UI 元素会随之自动更新，但你自定义的元素则不会。 UI 元素往往会提供多种自定义外观和行为的方式。例如，所有视图（即，从 UIView 中继承而来的对象） ? 标准 都可以改变颜色，这会让给 app 添加颜色变得容易。如需了解更多给 UI 元素添加颜色的信息，请参阅《iOS7 UI Transition Guide》中「Using Tint Color」一节。? 人们习惯于标准 UI 元素，所以他们会立刻了解在你的 app 中该如何使用它们。为充分发挥使用标准 UI 元素的优势，你必须： 每一个 UI 元素都遵循设计规范。当一个 UI 元素看上去和用起来都符合用户期望时，他们便可以根据已有的经验在你 的 app 中去使用它们。你可以在「条栏」（第 120 页）、「内容视图」（第 131 页）、「控件」（第 152 页）和 「临时视图」（第 165 页）中找到这些 UI 元素的规范。 不要混用 iOS 不同版本的 UI 元素样式。你不会希望用户感到困惑，因为和当前设备中运行的版本相比，显示的 UI 元素看上去却属于老版本的 iOS。 通常，不要为标准交互行为创建一个自定义 UI 元素。首先问问自己，为什么要创建一个行为方式和标准元素完全一 样的自定义 UI 元素。如果你仅仅是想自定义外观，请考虑通过使用 UIKit 的自定义外观 API 或者着色来改变标准元 素的样子。如果你是希望行为上有细微差异，那在你调整其属性和特性时，一定要清楚标准元素是不是可以实现你想 要的效果。而如果你是需要完全自定义交互行为，则最好设计一个看上去和标准元素不太近似的自定义元素。 | Copyright ? 2013 Apple Inc. All Rights Reserved.56 与 iOS 整合 响应设备方向变化建议：Interface Builder 会让创建标准 UI 元素变得容易，比如使用自定义外观的 API，设置属性和特性，以及在你 的控件中添加自定义和系统提供的图标。如需了解更多关于 Interface Builder 的信息，请参阅《Xcode Overview》。 不要为系统定义的按钮和图标赋予其他含义。iOS 提供了很多可以在你的 app 中使用的按钮和图标。确保你理解了 这些按钮和图标的文档和含义；而不是基于自己对其外观的阐释。（你可以在「工具栏和导航栏按钮」（第 124 页）和「标签栏图标」（第 127 页）中找到这些图标的含义。） 如果不能为你 app 中的功能找到一个有合适含义的系统按钮或图标，可以自己创建一个。参阅「条栏按钮图标」 （第 182 页），你可以了解有助于你设计自定义图标的准则。 如果你的 app 有着沉浸式的任务或体验，那么创建完全自定义的控件可能会是合理的做法。由于你正在创建一个独 特的环境，而在这样的 app 中，探索如何与环境互动也是用户所期待的一种体验。响应设备方向变化人们通常希望能在任何方向下使用 iOS 设备，所以最好让你的 app 在那个时候作出恰当的响应。 无论是横屏还是竖屏方向，始终保证突出重要内容。这将是你最优先的目标。人们使用你的 app 来浏览并与他们所 关心的内容交互。在设备发生旋转时改变焦点，这会让人们迷惑并让他们觉得已经对 app 失去控制。 一般来说，要让 app 在所有方向上都要能正常运行。人们希望在不同方向上使用你的 app，所以最好能满足他们的 这一期望。特别是 iPad 用户，他们会希望能在当前握持设备的任意方向上使用你的 app。但的确有一些 app 只能 在竖屏或横屏方向下运行。如果你的 app 确实需要只在一个方向上运行，你应当： app，忽略当前设备的方向。例如，假设有一个仅支持横屏的游戏或多媒体播放 ? 以默认支持的方向启动你的 app，即便设备当前是竖屏方向，以横屏方向启动这个 app 也是合适的。这样，当人们在设备竖屏时启动 app，他们便会知道要旋转设备到横屏方向以查看内容。 | Copyright ? 2013 Apple Inc. All Rights Reserved.57 与 iOS 整合 弱化文件和文档处理UI 元素。如有需要，无需在界面中添加不必要的东西，以默认支持方向运行 ? 避免显示一个提示用户旋转设备的 app 也能清楚地提示用户需要旋转设备了。 例如，如果某个 app 只能以横屏运行，无论人们是将主屏幕按钮放在右边还是左边 ? 支持一个方向的两种变化。 去握持设备，他们应该都能使用这个 app。而如果用户在使用过程中 180 度旋转设备，app 最好也能 180 度 旋转内容以及时响应。 如果你的 app 将设备方向的变化作为一种用户输入方式，则以 app 特定的方式处理设备旋转。例如，一款允许用户 通过旋转设备移动方块的游戏，它不可能以旋转屏幕的方式响应设备旋转。在像这样的情况下，你应该支持以所需方 向的两种变化形式启动，并允许人们在开始 app 主要任务前在两种变化中切换。一旦人们开始主要任务，马上以 app 特定的方式响应设备变化。 在 iPhone 上，在响应设备方向变化时考虑用户需求。用户尝尝会旋转他们的设备到横屏方向，因为他们想要「看到 更多。」如果你仅仅是将内容放大，你不一定能满足用户预期。相反，重新调整文本行数，如果需要还可以调整界面 布，以便可以在屏幕上看到更多内容。 在 iPad 上，力图支持所有方向以满足用户期望。iPad 的大屏幕降低了用户旋转设备至横屏以「看到更多」的欲望。 而且由于人们不再留意设备的框架限制和主屏幕按钮的位置，他们不太会认为该设备有默认方向。 当你在设计你的 iPad app 该如何在所有方向上提供优秀的体验时，请遵循以下准则： 虽然要让最重要的内容时刻处于焦点，但你也可以通过改变次级信息的 ? 考虑改变辅助信息或功能的显示方式。 显示方式以响应设备旋转。 例如，一款以横屏方向展现矩形棋盘的 iPad 游戏，需要在竖屏方向时重新调整棋盘以良好显示。相比在竖屏方 向时垂直拉伸棋盘――或者让顶部或底部留空――游戏可以在多出来的空间里显示附加信息或物体。 在所有方向上一致的体验会让用户在旋转设备时可以维持原有的使用习惯。例如， ? 避免毫无意义的布局变化。 如果你的 iPad app 在横屏方向中显示一个矩阵列表，那就不需要在竖屏时以列表形式显示相同的信息（即使 你可能会调整矩阵的尺寸）。 试着在所有方向中维持相似的格式。如果人们是在 app 中阅读 ? 尽可能避免在旋转时重新定义信息和文本格式。 文字，那尤其重要的是要在旋转设备时帮助他们停留在原来的位置。 如果某些格式的调整不可避免，那使用动画以帮助人们跟随变化。例如，如果你在旋转方向时中增加或移除了 一栏文字，你可以将栏的变化隐藏并让新的布局简洁地淡入显示。为了让自己设计出合适的屏幕旋转行为，你 可以想象一下如果你是在和现实世界中的这些内容发生物理性的互动，该是怎样的样子。 当每个方向都有单独的启动画面后，无论当前设备是哪个方向，人们都能 ? 为每一个方向提供单独的启动画面。 体验到平滑的 app 启动。iPad 的主屏幕支持切换屏幕方向，所以人们有可能在以和上一个 app 相同的屏幕方 向启动你的 app。弱化文件和文档处理iOS app 可以帮助人们创建和管理文件，但这并不意味着人们应该在 iOS 设备中思考文件系统的问题。 | Copyright ? 2013 Apple Inc. All Rights Reserved.58 与 iOS 整合 必要时提供设置方式在 iOS 中，不存在类似 OS X 系统中 Finder 这样的 app，因此人们也不应该像在电脑上那样被要求和文件直接交 互。特别是不应让人们面对任何会让其联想到文件元数据或存储位置的东西，例如：? 显示文件层级的打开/保存对话框 ? 关于文件权限的信息尽量让人们不需要打开电脑上的 iTunes 就能管理文档。考虑使用 iCloud 去帮助用户访问他们在所有设备上的内 容。如需了解如何在你的 app 中提供更好的 iCloud 体验，请参阅「iCloud」（第 90 页）。 如果你的 app 帮助人们创建和编辑文档，那最好提供某种文件选择器来让用户打开已有文档或创建新文档。理想情 况下，这个文档选择器应该：? 高度图形化。用户看一下屏幕上文档的视觉形式便能轻松找到他们想要的文档。 例如，人们可以水平滚动一个已有文档的缩略图列表，然后轻点 ? 让人们使用尽量少的手势来完成想要的操作。 一下打开想要打开的文档。不要让人们到其他别的地方去创建一个新文档，而是在文档选择器中让他们轻点一个占位 ? 包含新建文档功能。 图像去创建一个新文档。 建议：你可以使用「快速预览」（Quick Look）特性让人们在你的 app 内预览文档，即便你的 app 不能打开它 们。如需了解如何在你的 app 中提供这个特性，请参阅「快速预览」（第 106 页）。 让用户确信他们的工作成果始终会被保存，除非明确地取消保存或进行删除。如果你的 app 能帮助人们创建和编辑 文档，那就不要再让他们采取额外的保存操作。iOS app 应该承担起保存用户的输入内容的责任，无论是在他们打开 另一个文档还是切换到其他应用时。 如果你的 app 的主要功能不是创造内容， 而你允许用户在查看信息和编辑信息之间切换，那么最好提醒用户保存内 容变更。在这样的场景中，最好在显示信息的视图中提供一个「编辑」按钮。当人们轻点「编辑」按钮，随之替代的 是一个「保存」按钮并新增一个「取消」按钮。「编辑」按钮的变化有助于提醒人们他们正处于编辑模式，可能需要 保存内容变化，而「取消」按钮则提供了不保存变更直接退出的机会。必要时提供设置方式虽然大多数 app 可以不需要或者推迟进行设置，但有些 app 可能会需要给用户一种更改安装或设置选项的方式。优 秀的 app 能让大多数人立即上手使用，并在主要界面中提供一些途径以调整用户体验。 尽量避免让用户跑到系统「设置」中去。请记住，进入「设置」需要先从你的 app 切换离开，而你并不会希望用户 这样做。 当你从大多数用户的期望来设计你的 app 功能时，就会降低对设置选项的需求。如果你需要用户信息，从系统中获 取而非让用户提供。如果你决定必须要提供一些用户偶尔需要更改的设置选项，请参阅《iOS App Programming Guide》中「The Settings Bundle」一节，以了解如何在代码中支持。 | Copyright ? 2013 Apple Inc. All Rights Reserved.59 与 iOS 整合 充分利用 iOS 技术如果需要，让用户在你的 app 内部进行设置。将配置选项整合到你的 app 中，这样的话人们不需要离开你的 app 去进行设置，从而让你可以即时地响应设置更改。 尽可能在主界面中提供设置选项。如果设置选项对应的是应用的主要任务，或者人们可能会频繁地更改设置，那么最 好将其放到主界面中。如果人们只是偶尔才会更改 app 配置，那就将它们放到一个单独的视图中。充分利用 iOS 技术iOS 提供了丰富的技术，以各种方式支持用户所期待的常见任务和场景。这样的期望意味着，相比设计自定义的方 式，更好的做法是将这些系统支持的技术整合到你的 app 中。 有一些 iOS 技术――例如「多任务处理」（第 84 页）和「VoiceOver」（第 114 页）――是所有 app 都应当纳 入的特性。其他技术则根据 app 具体功能而定，例如处理票据和礼物卡（「Passbook」（第 82 页））、支持用户 在 app 内购买（「App 内购买」（第 92 页））、在 app 内显示广告（「iAd 富媒体广告」（第 99 页））、和 「Game Center」（第 94 页） 整合以及支持「iCloud」（第 90 页）。 | Copyright ? 2013 Apple Inc. All Rights Reserved.60 设计策略? 「设计原则」（第 61 页） ? 「从概念到产品」（第 65 页） ? 「案例研究：从桌面到 iOS」（第 69 页） ? 「在 iPhone 5 中运行」（第 74 页） | Copyright ? 2013 Apple Inc. All Rights Reserved.61 设计原则美学完整性美学完整性不是用来衡量 app 的艺术表现或风格特征，而是指 app 的外观与行为是否与其功能相衬一致。用户不止关心 app 是否实现了它所承诺的功能，他们也在很大程度上会被 app 的外观和行为所影响，尽管有时他们 并未意识到这一点。例如，一款协助人们处理重要任务的 app，它会通过弱化装饰性元素并使用标准控件和可预期的 行为等方式来将焦点放到任务上。这样一款清晰一致地传达出其目的和特点的 app，会让用户对其产生信任。然而， 如果这个 app 使用了杂乱无章、充满干扰的 UI，用户可能会对这个 app 的可靠性和信赖度产生怀疑。 另一方面，对那些鼓励沉浸体验的 app（例如游戏），用户会期望一个充满乐趣、让人兴奋和期待探索的迷人外观。 用户不希望在游戏中完成一个严肃或枯燥的任务，相反，他们期望游戏的外观和行为能够和它的目的相一致。一致性一致性可以让用户将 app 中的某部分界面的经验和技巧复用到其他地方，或者从一个 app 复用到另一个 app。一致 性的 app 不是对其他 app 的简单复制，也不是风格上的一成不变，相反，它关注用户所习惯的方式和标准，并提供 一个具有内在一致性的体验。 | Copyright ? 2013 Apple Inc. All Rights Reserved.62 设计原则 直接操控要判断一个 iOS app 是否符合一致性原则，可以通过以下几个问题来考量： 是否和 iOS 标准保持一致？它是否正确地使用了系统控件、视图和图标？是否以用户所期望的方式利用了 ? App 设备的特性？ 自身是否具有内部一致性？文本内容是否使用了统一的用辞和风格？同样的图标是不是通常意味着相同的 ? App 意思？当用户在不同的位置执行同一个操作时是否符合其预期？自定义的界面元素外观和其行为是否保持一 致？? App 变？是否在合理范围内与之前的版本保持一致？术语和含义是不是仍然相同？基本概念和主要功能是否基本不直接操控当人们直接操控屏幕上的物体而不是使用另外的控件来操作时，他们就会更沉浸在任务当中，从而更容易地了解自己 的操作会产生的结果。 | Copyright ? 2013 Apple Inc. All Rights Reserved.63 设计原则 反馈使用多点触控界面，人们可以双指开合以直接放大图片或者内容区域。在游戏中，玩家则可以直接移动屏幕上的物体 并与之互动――例如，一款游戏可能会展示一个密码锁，用户可以旋转密码盘去打开。 在 iOS app 中，人们可以在如下场景里体验到直接操控：? 旋转或以其他方式移动设备以影响屏幕上的物体 ? 使用手势动作操纵屏幕上的物体 ? 可以看到他们的动作有直接且可见的结果反馈反馈可以让人们知道系统已经收到他们的操作行为，并向其呈现操作结果，让他们了解自己的任务进程。iOS 的内置 app 在响应用户的每一个操作行为时都提供了可感知的反馈。当用户点击列表项和控件时，它们会被短 暂地高亮。而那些会持续超过几秒钟的操作，对应的控件则会显示已完成的进度。 精致的动画效果可以给用户有意义的反馈，以此帮助他们了解其行为的结果。例如，在列表中添加一个新条目时会有 动画，以便让人们察觉到视觉上的变化。 声音也可以为用户提供拥有的反馈，但这不应该是唯一的反馈方式，因为用户不是所有时候都能听到他们的设备声 音。 | Copyright ? 2013 Apple Inc. All Rights Reserved.64 设计原则 隐喻隐喻如果 app 中的虚拟对象和操作行为是一段相似体验的隐喻，无论这些体验是基于真实世界还是数字世界，用户都会 很快了解如何使用这个 app。 在 app 使用隐喻去展现使用方法或体验时，最好不要被它所基于的对象或行为局限。 由于用户能和屏幕直接产生互动，iOS app 为隐喻提供了广阔空间。iOS 中的隐喻包括：? 移开图层视图，展现其下方的内容 ? 在游戏中拖拽、轻敲、或扫开物体 ? 点击切换开关、滑动滑块或转动选择器 ? 在书或杂志中的翻页用户控制让用户而不是 app 去触发并控制操作。App 可以针对危险结果提出一系列建议操作或警告，但不应该剥夺用户的控 制权而由 app 来做决策。优秀的 app 会找到一个恰当的平衡，在赋予用户所需要的控制权的同时，帮助其避免不希 望发生的结果。当行为和控件是熟悉且可预期时，用户会感觉 app 更为可控。如果一个操作行为简单而直接，用户就可以轻松地理 解并记住它们。 人们期望在一个操作执行之前有足够的机会去取消，同时，对于那些存在潜在风险的操作也希望有机会去确认其意 图。总之，人们希望能够从容地中止一个即将执行的操作。 | Copyright ? 2013 Apple Inc. All Rights Reserved.65 从概念到产品定义你的 AppApp 定义陈述是一份对 app 的主要目的及其目标用户简洁而具体的阐述。 在你开发的早期就创建 app 的定义陈述，这将有助于你把一个想法和一堆功能变成一个用户梦寐以求的完整产品。 在整个开发过程中，通过定义陈述来决定哪些潜在功能点和操作行为是否有合情合理。可以通过以下步骤来创建一个 稳健的 app 定义陈述。1. 列出所有你认为用户会喜欢的功能点从这一步开始进行头脑风暴。你要尝试记下所有和你主要产品创意相关的任务。不要担心这个列表太长，稍后你会再 做筛选。 假设你最初的想法是开发一个帮助用户采购食物的 app。当你进行头脑风暴时，你会想到一大堆用户可能会感兴趣的 潜在特性。例如：? 创建清单 ? 获取菜谱 ? 比价 ? 附近的商店 ? 食谱备注 ? 获取和使用优惠券 ? 浏览厨艺作品 ? 发现不同的美食 ? 查找食材成份2. 定义你的目标用户现在你需要弄清楚，是什么让你 app 的用户群体和其他 iOS 用户区分开来。在你主要想法的情境中，什么对他们最 为重要？以采购食物为例，你可能需要问你的用户是否：? 经常在家做饭，还是喜欢加工好的熟食 | Copyright ? 2013 Apple Inc. All Rights Reserved.66 从概念到产品 定义你的 App? 被认为是优惠券达人，还是认为不值得为优惠券花时间 ? 热衷于搜寻特殊食材，还是很少在日常食材之外冒险 ? 严格遵循菜谱，还是将菜谱用作灵感来源 ? 少量多次，还是量多次少地进行采购 ? 希望为不同目的维护几个正在进行的清单，还是仅仅记住几件东西在回家路上购买 ? 执着于某个品牌，还是接受采购最方便的替代品 ? 每次采购都倾向于购买类似的东西组合，还是按菜谱来买经过思考这些问题，假设你确定了最符合你目标用户的三个特征：喜欢试验新菜谱、总是很忙、以及在不会太麻烦时 尽量节俭。3. 通过定义目标用户来筛选功能点在确定了目标用户的特征之后，如果你得到了为数不多的几个特性，那就对了：优秀的 iOS app 都会精准聚焦于它 们所要帮助用户完成的任务。 现在，回想你在第一步中列出的那个长长的潜在特性清单。即便是这些特性都有用，但也不是所有特性都会被你在第 二步中定义的目标用户所喜欢。 当你不断在目标用户的情境中去验证特性清单，你就会领悟到你的 app 应该聚焦于三个主要特性：创建清单、获取 使用优惠券和发现食谱。 现在，你可以开始定义你的 app 了，具体地概括 app 是做什么用的以及给谁用。对于这个食物采购 app，一个好的 定义陈述可能是这样的： 「一个购物清单创建工具，为勤俭的美食家而生。」4. 继续向前在整个开发过程中，始终要用你的app 定义陈述去判断功能点、控件和用词是否妥当。例如： 当你考虑增加一个新功能时，问问自己，这对你 app 的主要目的和目标用户是不是不可或缺？如果不是，把它放在 一边，它可能是构建另一个 app 的基础。例如，你已经确定你的用户喜欢探索烹饪，那么强调打包好的蛋糕和加工 好的熟食可能不会被用户喜欢。 当你考虑 UI 的外观和行为时，问问自己，你的目标用户是喜欢简洁流畅的设计，还是一个更明显的主题风格？以用
