为苹果iOS设备设计精美的应用。
此设计指南描述的是如何按照苹果官方的 iOS 人机界面指南（HIG）为 iOS 设计应用，而不是教你如何设计自定义控件。掌握这些，可以帮助大家打破规则。此文档只作指导作用，并非为了解决复杂的、特定的设计问题。
这是一篇非官方文档，将定期更新和补充。最后更新于：2014年11月11日。
（译者注：向一直提供iOS速查干货的 Ivo Mynttinen 大神致敬，以及这篇的原文。考虑到此文档不会像官方指南那样对名词作详细解释，对于一些难理解的地方，在大标题后的英文处已经加上了相应的官方指南链接，需要的可以进去查阅。）
像素（pixels）是数码显示上最小的计算单位。在同一个屏幕尺寸，更高的PPI（每英寸的像素数目），就能显示更多的像素，同时渲染的内容也会更清晰。
点（points）是一个与分辨率无关的计算单位（真实尺寸）。根据屏幕的像素密度，一个点可以包含多个像素（例如，在标准Retina显示屏上1 pt 里有2 x 2个像素）。
当为多种显示设备设计时，应该以“点”为单位作参考，但设计还是以像素为单位设计的。这意味着仍然需要以3种不同的分辨率导出你的素材，不管是在哪种分辨率下设计应用。
注意
如没有另外指定（如一个数值加上“px”），此指南提到的具体尺寸均以点（pt）为单位。如果需要转换成相应的像素值，很简单，Retina屏相应乘2或Retina HD屏则乘3。
在所有iOS设备上，渲染的像素和实际像素是相等的。唯一的例外是：iPhone 6 Plus的Retina HD屏幕。因为其屏幕的像素分辨率比自然的 @3x 分辨率更低，渲染的内容会自动调整到大约原尺寸的87%（从2208 x 1242像素适应到1920 x 1080像素)。
（iPhone 5S、6 和 6 Plus显示的区别。想了解更多请点击 这里。）
应用图标（App icons）素材通常会以多种尺寸无添加效果的、正方形的PNG文件添加到应用包中。当在设备上渲染时，iOS会自动为App图标添加多种效果。
圆角
过去简单半径值的圆角已经不再使用了。从iOS 7开始，App的图标开始使用一种叫“超椭圆”（Superellipse）的形状。因为苹果公司并未发布官方的形状模板，所以想要准确地确定图标将会被折叠多少需要用到这个非官方模板 。
圆角不要包含在最终的导出素材中。但在设计过程中可能会需要用到圆角，因为添加描边或阴影等效果时，要对齐图标的边角来设计。
注意：
如果希望图标设计上运用的一些效果可以对齐到边角，而以Supererllipse形状来遮罩你的图标素材，那么，确保不要在遮罩区域外使用任何透明的部分。因为所有的应用图标均不支持透明，透明区域将会渲染成纯黑色。如果你的素材不是100%不透明的，那么用户将会在圆形边缘上看到黑色噪点。所以设计这类图标时推荐画布背景设置成和App图标相同的颜色背景。
描边（在某些情况下）
如果应用图标使用了白色背景，为了能够识别出图标的边界，将会带上1像素的灰色描边。这只有在iOS“设置”（如果应用在这里列了出来）和AppStore上会是这样。
遗留效果（iOS6及以前的版本）
在iOS旧版本上，会自带这些效果：圆角（稍微不同于iOS7+图标使用的形状）、投影（在主屏幕上）和光泽（可以禁用）。
苹果开发了一套黄金比例栅格系统，可以在你的图标上很好地确定元素的尺寸和对齐。不过，即使在原生应用的图标上，苹果的设计师们也没有严格按照这个栅格系统来设计。所以，如果你的图标元素不完全严格对齐栅格也可以表现得很好，就打破规则约束吧，按照自己的想法来。
所有iOS版本的默认系统字体都是Helvetica Neue。iOS7开始，苹果对此字体作了一些轻微的修改，但在设计过程中使用原来的Helvetica Neue字体完全没问题。除了默认的字体，也有许多代替字体可以使用。你可以在 iOS完整预装字体清单 里查找。
技术上，任何字体（.ttf）都可以在iOS应用上使用，但要注意授权许可。应该安全地使用那些可以完全免费商业用途的字体。不过App商业用途许可的字体非常少，即使有，获得其许可也会比较昂贵。需要的话，MyFonts 目前提供了大量的字体，可以授权移动应用使用。
苹果从iOS7开始，在系统界面和预装应用上使用明亮的配色。当设计应用时可以使用以上默认的iOS配色，也可以使用自己的颜色（如果想脱颖而出的话最好这样做）。
iOS应用里，作为动作执行的视觉表现，图标永远是最好的方式，其常用于搭配文本或者完全代替文本（常见的有“新建”、“删除”等）。通常，在导航栏、工具栏或标签栏上，我们会对图标作一些相应处理。
Bar上的图标应有两种不同的状态：以1或1.5pt线宽的轮廓线描绘的默认状态，以实体填充的活动状态。
不要在按钮图标上添加任何如投影或阴影这样的效果，因为这在旧iOS版本（iOS7 Redesign之前）上显得十分多余。此外，按钮图标应该在透明背景上以纯色绘制——图标的形状将用于遮罩，而图标颜色将会以编程方式赋予。
活动视图（如众所周知的分享弹出框 Share Popover）上的图标通常是线性图标，但iOS8开始，苹果又回归到了在纯白背景上使用实体填充图标了。
iOS提供了大量的可以直接使用的视图和控件，帮助开发者快速创建界面。有些元素是可以一定程度上自定义的，其他则不行，而且也不应该去自定义它。当设计iOS应用时，最好了解这些工具库，学会什么时候合适就去使用他们。不过，有些时候，如果想要一个更个性的外观，或者改变一个已存在控件的功能（危险领域），那么创建一个自定义控件也许会更好。总之一切皆可能，打破规则有时候是明智之举，但请一定三思而后行。
状态栏包含基本系统信息，例如当前事件、时间、电池状态及其他更多信息。视觉上状态栏是和导航栏相连的，都使用一样的背景填充。为配合App的风格和保证可读性，状态栏的信息内容有两种不同的风格：暗色（黑）和亮色（白）。
可以隐藏状态栏，但还是那句，请三思。举个例子，当应用下载网络内容时，用户可能想知道，是否连上了一个WIFI网络；或者，当应用要请求蓝牙连接到第三方硬件时，是否打开了蓝牙。如果真要隐藏，一个合理的隐藏状态栏的理由是，在你希望从一个单一元素里移除一切干扰的时候，比如当展示需要全屏的内容时，如图片幻灯。
导航栏包含了一些控件，用来在应用里不同的视图中导航，以及管理当前视图中的内容。导航栏总在屏幕的顶部，状态栏的正下方。默认的，导航栏背景会进行轻微半透明处理，以及对下面的内容进行毛玻璃般的模糊处理。背景可以填充纯色、渐变颜色，或者是自定义位图。
（iPhone 6竖屏时的导航栏。）
（iPhone 4S横屏时的导航栏。栏高度减少到12pt，在iPad上也是这样。在横屏时隐藏状态栏是习惯做法。）
导航栏元素总是按照特定的对齐方式。
工具栏包含一些管理、控制当前视图内容的动作。iPhone上，工具栏将永远在屏幕底部边缘，而在iPad上，其可以在屏幕顶部出现。
和导航栏一样，其背景填充也可以自定义，默认是半透明效果以及模糊处理遮住的内容。
工具栏通常用于超过3个主动作的特定视图。否则很难适应而且外观会看起来很混乱。
搜索栏默认有两种风格：凸显（Prominent）和最小（Minimal）风格。两种风格的功能都相同。
搜索栏可以设置一段提醒文本——用简短的句子介绍搜索功能。例如，“输入一个城市、邮编或机场。”
（凸显风格的搜索栏，无提示和有提示版。）
（最小风格的搜索栏。）
为了让查询搜索能更好地控制，可以为搜索栏加上上一个范围栏（Scope Bar）。范围栏将使用和搜索栏相同的风格，其在明确定义了搜索结果类别的情况下会很有用。例如，一个音乐应用，搜索结果可以再次通过歌手、专辑或歌曲进行筛选。
标签栏常用于快速切换应用上的独立视图，且一般也只能这样用。通常标签栏在屏幕底部。默认情况下背景使用和导航栏一样的轻微半透明效果，以及使用和系统一样的模糊处理下面遮住的内容。
标签栏仅可以拥有固定的最大标签数。一旦数目超过最大数目，则最后一个选项卡将会以“更多标签”代替，其余标签以列表形式隐藏于此，另外，一般会有选项可以对显示的选项卡重新进行排序。
iPhone上最大选项卡数目是5个，而ipad上则可以显示多达7个而无需“更多”标签。
通知用户在一个新视图上有新消息，通常会在标签栏按钮上显示一个数字徽标。如果一个视图暂时隐藏，相关的选项卡按钮不会完全隐藏，而是会慢慢淡化以传达一个不可用的状态。
表格视图用于呈现大多数列表风格的信息，可以一列或者多列，也可以选择几行来划分信息或分组。
根据你选择的数据类型，可能会用到这两种基本的表格视图类型。
纯表格
纯表格由一定的行数组成，在顶部可以拥有一个表头，以及底部可以含有一个表尾。可以在屏幕右端带一个垂直导航，通过表格的形式进行导航，这在呈现大量数据时十分有用。在右端还可以通过一些方式进行排序（例如，按字母自上到下排序）。
分组表格
分组表格视图以分组的方式组织你的"表行"。每个分组可以有一个头（最好用于描述组的内容）以及一个尾（显示帮助信息等）。分组表格至少要由一个分组组成，而且每个分组至少要有一行。
对于这两种表格视图类型，都拥有一些风格，能以一定的方式呈现数据，让用户可以简单地检索、浏览甚至修改它：
默认
默认的表格行风格是一个图标加一个标题，而图标在左端。
带副标题
带副标题的表格风格在标题下面允许有一个简短的副标题文本。常用于进一步解释或简短描述。
带数值
带数值表格风格可以带一个与行标题相关的特别值。和默认风格类似，每行也可以有一个图标和标题，都是左对齐。紧随其后的是右对齐的数值文本，通常颜色会比标题文本的颜色浅些。
iOS提供多种临时视图，可以一定程度上显示、编辑和修改数据，以适应给定的情境。每个临时视图都是具有特别的用途的，而且每个外观都不一样。所有临时视图都有一个共同点：当显示时，会在当前视图的最顶层（即在其他所有的上面），而且下面的内容会蒙上一层半透明黑色背景。
活动视图（Activity View）
活动视图是用于执行特定任务的视图。这些任务可以是默认系统任务，如通过选项分享内容等，或者可以完全自定义这些动作。当设计自定义任务按钮图标时，你应该按照和栏按钮图标激活状态下同样的规范——实体填充，没有其余的效果，放在一个半透明背景上。
动作（Actions）
动作菜单（Action Sheets ），用于从可执行的动作中选择执行一个动作，要求App用户选择一个动作继续，或者取消。
在竖屏时（以及在一些小屏幕横屏上也是），动作菜单总是以一列按钮滑动而出显示在屏幕底部。在这种情况下，一个动作菜单应该有一个取消按钮来关闭此视图，而不是只能执行前面的动作。
当有足够空间时（例如在iPad屏幕上），动作菜单视图则换成一个浮动框（Popovers）。这时并不要求要有一个关闭按钮，因为点击任意外面的空白地方就可以关闭了。
警告提醒（Alerts）
警告提醒用于通知用户关键信息，以及可以强制用户做出一些动作选择。
警告视图总包含一个标题文本，可以不限于一行（对于纯信息警告如“OK”），以及不限一个或两个按钮（请求式的决定，如“发送”和“取消”）。
同时，你可以添加一条信息文本，如果需要，可以添加两个输入文本框，其中一个可以是遮盖的文本，用于输入私密信息如密码或PIN码。
编辑菜单
在一个元素被选定时(文本，图片及其他)，编辑菜单允许用户执行复制、粘贴、剪切等操作。虽然菜单上的选项是可以自定义的，但菜单的外观你是无法设置的，除非你构建一个自己的自定义编辑菜单。
浮动框（Popover）
当要求用户在程序进行的同时输入多个信息时，浮动框（Popover）是个绝佳选择。举个例子，当选择添加一个项目时，有好几项属性需要在项目被添加前设置好，这时，这些设置完全可以在浮动框上完成。
在一般情况下，浮动框上方会有一个相关的控件（如一个按钮），当打开的时候浮动框的箭头指向控件。浮动框背景也是轻微减少不透明度的毛玻璃模糊效果，就像iOS7以来的其他大多数UI元素一样。
浮动框是一个强大的临时视图，其可以包含多种元件，例如可以拥有自己的导航栏，表格视图，地图以及网页视图。当浮动框因为包含大量元素而拥有较大尺寸时，可以在浮动框内滚动，从而到达视图底部。
模态（Modals）
对于要求用户执行多个指令或输入多个信息的任务来说，模态视图是十分有用。模态出现在所有元素的顶层，而且，当打开时，其区块会与下面的其他元素产生交互（推出动效）。
输入模态常拥有：
这是三种可用的模态视图风格：
iOS为所有你能想到的基本输入类型提供了范围很广的控件。这些控件你会发现十分重要（因为经常会用到），完整的可用控件的列表，你得去iOS开发者资料库里查看。
按钮（Buttons）
或许所有中最常用的控件就是这经典好用的按钮了。从iOS7开始，默认按钮设计就不再看起来像个按钮了，而更像是一个纯文本链接。不过按钮控件还是具有高度的自定义性的，允许你自定义文本风格、投影以及颜色，甚至是一个按钮都是可以定制的。假如没有文本标签的话，全自定义背景都行。
记住，一个按钮有多个状态，每个状态需传达相关视觉语言：默认（Default），高亮（Highlighted），选定（Selected），不可用（Disabled.）。
选择器（Pickers）
选择器用于从可用值列表中选定一个值。其等于网站上常用的下拉选框（选择器也用于触摸模式下的Safari浏览器）。选择器的拓展版本是“日期选择器”（Datepicker），可以让用户滚动一个日期时间列表来选择日、月份和时间。
（左边：表格视图里的日期选择器，右边：代替键盘的选择器。）
除了背景颜色外，选择器控件的视觉风格、尺寸都不能调整。通常，选择器在屏幕的底部。当键盘同时出现时，其可能出现在其他位置。
分段控件（Segment Controls）
分段控件包含一系列分段（至少两个），可以用于筛选内容或为整理的分类内容创建标签。
（没有Icon和有Icon的分段控件）
每个分段可以包含一个文本或一个图标，但不能同时有文本和图标。另外，也不推荐在一个分段控件里混用分段类型（文本和图标混合出现）。一个分段的宽度会基于分段的数量自动改变（即两个分段：各占总控件宽度50%，5个分段则各占20%）。
滑块（Sliders）
滑块控件可以让用户从一个允许范围内滑动滑块选择一个特定的值。因为滑动十分流畅也无需其余步骤就可以选择一个值，所以推荐滑块用于选择一个估计值，而不是一个需要精确的数值。比如，滑块控件可以很好地设置音量，因为用户可以从音量上听出区别，同时可以看到滑块上响和不响的区别，但如果是输入一个数值来设置分贝值就十分不现实了。
（无Icon和有Icon的滑块控件。）
可以设置最小值和最大值的Icon，在显示控件始端和末端显示，让用户直观地知道滑块的用途。
步进器（Stepper）
步进器应用在用户需要在一个允许范围里输入一个精确值的情况（例如，1至10）。一个步进器需要包含两个分段按钮，一个用于减少当前值，一个用于增加。
视觉上，步进器可以高度自定义。
开关（Switch）
开关允许用户快速切换两种可用状态：打开和关闭。这也就是iOS应用上的“复选框”，只不过以开关的形式表现。开关控件可以自定义打开和关闭状态的颜色，但开关切换按钮的样式和尺寸不能设置修改。
键盘（Keyboards）
对于特殊文本的输入提供了多种键盘类型。可以创建自己的完全自定义键盘，但默认键盘不能自定义风格或尺寸。
本文档只是提供了一些让你入门 iOS 设计的基本信息。一旦深入，需要了解更多的细节，那么下面这些文章和资源会帮到你：
通用
动效&原型
教程
栏按钮图标
App 图标
UI Kits
希望设计能带给大家好心情
13
作品
650
粉丝
18
关注
大牛，别默默的看了，快登录帮我点评一下吧！:)
登录 立即注册