关于本设计指南

本设计指南介绍如何按照   官方的 iOS 人机界面指南 (HIG) 设计 iOS 应用，而不是如何设计自定义控件。这可以帮助您打破常规。本文档仅供参考，并非旨在解决复杂的特定设计问题。

（非官方文档，原作者Ivo会定期更新补充。最后更新于2014年11月11日。）

分辨率和显示规格

点（pt）和像素（px）的区别

像素（）是数字显示屏上最小的计算单位，在同样的屏幕尺寸下，PPI（每英寸像素数）越高，显示的像素越多，呈现的内容就越清晰。

点是与分辨率无关的测量单位。根据屏幕的像素密度，一个点可以包含多个像素（例如，在标准显示器上，1 pt 中有 2 x 2 个像素）。

当您为多种显示设备进行设计时，您应该使用“点”作为参考，但仍以像素为单位进行设计。这意味着您仍然需要以 3 种不同的分辨率导出您的资源，无论您为哪种分辨率设计您的应用？

注意

除非另有说明（例如，值后跟“px”），本指南中提到的所有尺寸均以点 (pt) 为单位。如果您需要转换为像素值，只需将屏幕尺寸乘以 2，或将高清屏幕的屏幕尺寸乘以 2。然后乘以 3。

6 Plus 上的降采样（）

在所有 iOS 设备上，渲染像素和实际像素相等。唯一的例外是：6 Plus HD 屏幕。由于其屏幕的像素分辨率低于原生 @3x 分辨率，渲染内容会自动调整为原始尺寸的约 87%（从 2208 x 1242 像素调整为 1920 x 1080 像素）。

（5S、6 和 6 Plus 显示屏之间的差异。更多信息请点击此处。）

应用程序图标

自身效果

应用图标通常以各种尺寸的方形 PNG 文件形式添加到应用包中下拉推荐词★64xl.com批量做词霸屏，哔站下拉，未添加任何效果。在设备上呈现时，iOS 会自动为应用图标添加各种效果。

圆角

以前使用简单半径值的圆角不再使用。从 iOS 7 开始，应用程序图标开始使用一种称为“超椭圆”（）的形状。由于   尚未发布官方形状模板，因此您将需要使用此非官方模板来确定图标的确切折叠程度。

不要在最终导出的资源中包含圆角。但您可能需要在设计过程中使用圆角，因为在添加描边或阴影等效果时，您需要将图标的角对齐到设计中。

注意：

如果您使用形状来遮罩图标资源，并希望应用一些与角落对齐的效果，请确保不要在遮罩区域之外使用任何透明部分。所有应用图标都不支持透明度，将呈现纯黑色。如果您的材质不是 100% 不透明的搜索框下面推荐的叫什么，用户会在圆圈边缘看到黑色噪点。因此，建议在设计时将画布的背景设置为与应用图标相同的背景。

中风（某些情况下）

如果您的应用图标使用白色背景，则会在图标上添加 1 像素灰色描边，以便于识别图标边框。这只会在 iOS 设置（如果您的应用列在其中）和 上发生。

旧版效果（iOS 6 及更早版本）

在旧版本的 iOS 中，默认包含这些效果：圆角（与 iOS7+ 图标使用的形状略有不同）、阴影（在主屏幕上）和光泽（可以禁用）。

网格

开发了一套黄金比例网格系统，可用于确定图标上元素的大小和对齐方式。然而，即使是在原生应用的图标中， 设计师也不会严格遵循此网格系统。因此，如果您的图标元素在不严格与网格对齐的情况下也能很好地工作，请打破规则并发挥创意。

字体

所有 iOS 版本的默认系统字体都是 Neue。从 iOS7 开始， 对此字体做了一些细微的更改，但在设计过程中使用原始 Neue 字体是完全没问题的。除了默认字体外，还有许多替代字体可供使用。您可以在此处找到 iOS 上预装字体的完整列表。

自定义字体

从技术上讲，任何字体 (.ttf) 都可以在 iOS 应用程序中使用，但要小心许可。您应该确保安全并使用完全免费用于商业用途的字体。但是，很少有字体被授权在应用程序中进行商业使用，即使有，也很难获得许可。获得许可也可能很昂贵，但如果需要，有大量字体可供授权用于移动应用程序。

颜色

从 iOS 7 开始，苹果开始在系统界面和预装应用上使用鲜艳的颜色。你可以使用上面默认的 iOS 配色方案，也可以使用自己的颜色（如果你想脱颖而出，最好这样做）。

图标应用

在 iOS 应用中，图标始终是直观表示操作的最佳方式。它们经常与文本一起使用或完全替代文本（常见的有“新建”、“删除”等）。或者在标签栏上，我们会对图标进行相应的处理。

栏按钮图标（Bar）

栏上的图标应该有两种不同的状态：用 1 或 1.5 pt 轮廓描绘的默认状态，以及用实心填充的活动状态。

不要在按钮图标上添加任何效果，例如阴影或阴影，因为这在旧 iOS 版本（iOS7 之前）上是多余的。此外，按钮图标应在半透明背景上用纯色绘制 - 图标的形状将用于遮罩，而图标颜色将以编程方式分配。

活动视图图标

活动视图上的图标（如众所周知的共享弹出窗口）通常是线性图标，但从 iOS 8 开始搜索框下面推荐的叫什么， 又恢复使用纯白色背景上的实心填充图标。

常见的设计元素

iOS 提供了大量现成的视图和控件，帮助开发人员快速创建界面。有些元素可以在一定程度上进行自定义，但有些元素可能无法、也不应该进行自定义。在设计 iOS 应用程序时，您需要了解这些工具库并学习何时使用它们。但是，有时创建自定义控件可能更好，因为您需要更个性化的外观或想要更改现有控件的功能。（危险地带）。简而言之，一切皆有可能，有时打破规则更有意义，但您必须三思而后行。

状态栏

状态栏包含基本系统信息，例如当前事件、时间、电池状态等。从视觉上看，状态栏与导航栏相连，使用相同的背景填充。为了匹配应用的风格并确保可读性，状态栏内容有两种不同的样式：深色（黑色）和浅色（白色）。

你可以隐藏状态栏，但同样，要三思而后行。例如，当应用正在下载网页内容时，用户可能想知道它是否连接到 WIFI 网络；或者当应用正在请求与第三方硬件建立蓝牙连接时，蓝牙是否已打开。如果你真的想隐藏它，隐藏状态栏的一个合理理由是当你想从单个元素中移除所有干扰时，比如当显示需要全屏显示的内容时，比如图片幻灯片。

导航栏

导航栏包含用于在应用中的不同视图之间导航和管理当前视图中的内容的控件。导航栏始终位于屏幕顶部，状态栏正下方。默认情况下，导航栏的背景略微透明处理，下方内容采用毛玻璃模糊处理。背景可以填充纯色、渐变色或自定义位图。

（6纵向模式下的导航栏。）

（4S 横屏状态下的导航栏，栏高缩减为 12pt，iPad 也是如此，横屏状态下隐藏状态栏是常见的做法）

导航栏元素总是遵循特定的对齐方式。

工具栏()

工具栏包含管理和控制当前视图内容的操作。在计算机上，工具栏始终位于屏幕底部边缘，而在 iPad 上，工具栏可以显示在屏幕顶部。

和导航栏一样，其背景填充也可以自定义，默认是半透明效果，内容模糊。

工具栏通常用于具有 3 个以上主要操作的特定视图。否则很难容纳，外观也会显得杂乱。

搜索栏

搜索栏有两种默认样式：() 和 ()。两者具有相同的功能。

搜索栏可以有一条警告——一句简短的句子来解释搜索功能。例如，“输入城市、邮政编码或机场。”

（搜索栏弹出状态，有提示和无提示）

（最小化状态的搜索栏。）

为了更好地控制查询搜索，您可以将范围栏连接到搜索栏。范围栏使用与搜索栏相同的样式，当您明确定义搜索结果类别时非常有用。例如，音乐应用中的搜索结果可以再次按艺术家、专辑或歌曲进行过滤。

标签栏

标签栏通常用于在应用中的独立视图之间快速切换，一般仅以此方式使用。它们通常位于屏幕底部。默认情况下，它们使用与导航栏相同的轻微半透明度，并使用相同的系统模糊来覆盖内容。

标签栏最多只能容纳一个固定的标签数量。一旦超过最大数量，最后一个标签将被“更多标签”取代，其余标签将隐藏在此处的列表中。此外，通常还有一个选项可以显示重新排序标签。

iPod 上的最大标签数为 5 个，而 iPad 在没有“更多”标签的情况下最多可以显示 7 个。

通知用户新视图上有新消息，通常是通过在标签栏按钮上显示数字标记。如果视图暂时隐藏，则关联的标签按钮不会完全隐藏，而是缓慢淡出以传达不可用状态。

表格视图

表格视图用于呈现大多数列表样式的信息，具有一列或多列，您可以选择多行来划分信息或对其进行分组。

根据您选择的数据类型，您可以使用两种基本类型的表格视图。

纯表

纯表格由一定数量的行组成，顶部可以有页眉，底部可以有页脚。它可以在屏幕右侧有垂直导航来浏览表格，这在显示大量数据时非常有用。在右侧，您还可以按某种方式对项目进行排序（例如从上到下按字母顺序排列）。

分组表

分组表格视图将您的“表格行”组织成组。每个组可以有一个标题（最好用于描述组的内容）和一个页脚（用于显示帮助信息等）。分组表格必须至少包含一个组。，并且每个组必须至少有一行。

对于这两种表视图类型，都有一些样式可以呈现数据，使用户可以轻松检索、浏览甚至修改数据：

默认

默认的表格行样式是图标加标题，图标在左边。

有字幕

带副标题的表格样式允许在标题下方添加简短的副标题文本。通常用于进一步解释或简要描述。

具有数值

数字表样式可以具有与行标题相关联的特定值。与默认样式类似，每行也可以有一个图标和一个标题，均左对齐。紧接着是右对齐的数字文本，通常采用不同的颜色。比标题文本颜色浅。

模态框、浮动框、警告提示

iOS 提供了多种临时视图，可以在一定程度上显示、编辑和修改数据以适应特定情况。每个临时视图都有特定的用途，并且每个视图的外观都不同。所有临时视图都有一个共同点：显示时，它将位于当前视图的顶部（即，位于其他所有内容之上），而下面的内容将被半透明的黑色背景覆盖。

活动视图

活动视图是用于执行特定任务的视图。这些任务可以是默认的系统任务，例如共享带有选项的内容，也可以是完全自定义的操作。设计自定义任务按钮图标时，应遵循与栏按钮图标相同的原则。活动状态的规格相同 - 实心填充，无其他效果，半透明背景。

行动（）

操作菜单（ ）用于从可用操作中选择一个操作，要求应用程序用户选择一个操作来继续或取消。

在纵向模式下（以及某些小屏幕上的横向模式下），操作菜单始终显示为从屏幕底部滑出的一列按钮。在这种情况下，操作菜单应该有一个取消按钮来关闭视图。而不是只能执行先前的操作。

当有足够的空间时（例如在 iPad 屏幕上），操作菜单视图将由操作菜单视图替代。此时不需要有关闭按钮，因为可以通过单击外面的任何空白处来关闭它。

警告提醒()

警告提醒用于通知用户关键信息，并可以强制用户做出一些行动选择。

警报视图始终包含一个标题文本，可以是多行（对于纯信息警报，如“确定”）和一或两个按钮（用于请求决定，如“发送”和“取消”）。

同时，可以添加提示文字，如有需要，还可以添加两个输入文本框，其中一个可以覆盖文本，用于输入密码或PIN码等私人信息。

编辑菜单

当选择一个元素（文本、图像等）时，编辑菜单允许用户执行复制、粘贴、剪切等操作。虽然菜单上的选项是可自定义的，但您无法设置菜单的外观。除非您自己构建自定义编辑菜单。

浮动框 ()

当某个操作需要用户在程序运行过程中输入多条信息时，弹出框是一个很好的选择。一个很好的例子是当选择添加一个项目时，在添加该项目之前需要输入几个属性设置，此时，这些设置都可以在浮动框上完成。

一般情况下，浮动框上方都会有一个相关控件（比如按钮），浮动框打开时箭头指向该控件，浮动框背景也是不透明度稍微降低的毛玻璃模糊效果，和其他 iOS 7 以来的大多数 UI 元素一样。

浮动框是一种功能强大的临时视图，可以包含各种组件，例如其自身的导航栏、表格视图、地图和网页视图。当浮动框由于包含大量元素而尺寸较大时，您可以向内滚动以到达视图底部。

模态框()

对于需要用户执行多个指令或输入多条信息的任务，模态视图是一种非常有用的视图。模态显示在所有元素的顶部，打开后，其块与下方的其他元素分开。交互元素可创建交互。

输入模式通常具有：

有三种可用的模态视图样式：

控制()

iOS 为所有你能想到的基本输入类型提供了广泛的控件。这些是你会发现最重要的控件（因为你会经常使用它们），要查看可用控件的完整列表，你必须查看。

按钮（）

最常用的控件可能就是经典好用的按钮了。从 iOS7 开始，默认的按钮设计不再像按钮，而更像是纯文本链接。不过按钮控件的自由度还是很高的。可自定义，可以自定义文字样式、阴影、颜色，甚至一个按钮都可以自定义。如果没有文字标签，也可以完全自定义背景。

请记住，按钮有多种状态，每种状态都需要传达相关的视觉语言：()、()、()、()。

选择器()

选择器用于从可用值列表中选择一个值。它相当于网站上常用的下拉框（选择器也用于触摸模式下的浏览器）。选择器的扩展版本是“日期选择器”（）。允许用户滚动日期和时间列表以选择日期、月份和时间。

（左：表格视图中的日期选择器，右：选择器取代键盘。）

除背景颜色外，选择器控件的视觉样式和大小无法调整。通常，选择器位于屏幕底部。当键盘也显示时，它可能出现在其他位置。

分段控制 ( )

分段控件由一系列段（至少两个）组成，可用于过滤内容或为有组织的、分类的内容创建标签。

（无图标和有图标的分段控件）

每个段可以包含文本或图标，但不能同时包含两者。另外，不建议在分段控件中混合使用段类型（混合文本和图标）。段的宽度根据段数自动变化（即两个段：每个占控件总宽度的 50%，五个段：每个占 20%）。

滑块（）

滑块控件允许用户通过滑动滑块从一系列值中选择特定值。由于滑动非常顺畅，并且不需要额外的步骤来选择值，因此建议使用滑块来选择估计值，而不是需要精确选择的值。例如，滑块控件非常适合设置音量，因为用户可以听到差异，并在滑块上看到响度和静音之间的差异，但输入数值来设置分贝值却很困难。这完全不切实际。

（带有和不带有图标的滑块控件。）

可以为最小值和最大值设置图标，并在显示控件的开始和结束时显示，让用户直观地知道滑块的用途。

步进器（）

当用户需要输入允许范围内的精确值（例如，1 到 10）时，可使用步进器。步进器应包含两个分段按钮，一个用于减少当前值，另一个用于增加当前值。

从视觉上看，步进器具有高度可定制性。

转变（）

开关允许用户快速在两个可用状态之间切换：开启和关闭。这与 iOS 应用上的“复选框”相同，但采用开关的形式。开关控件可以自定义开启和关闭状态的颜色，但开关按钮的样式和大小无法修改。

键盘（）

提供多种键盘类型供特殊文本输入。您可以创建自己的完全自定义的键盘，但默认键盘无法自定义样式或大小。

进一步阅读和资源

本文仅提供一些基本信息，帮助您开始使用 iOS 7。一旦您深入了解，您可能会对更多细节感兴趣。以下文章和资源可能会对您有所帮助：

一般的

动画和原型

教程

酒吧按钮图标

应用程序图标

UI 套件