iOS设计指南

1100 查看

关于这个指南

这个指南主要是讲怎么根据iOS人机界面指南来设计app，而不是如何做自定义的控件。有时候，打破这些规则是有必要的。这篇文档的目的是指引你如何设计，而不是帮你解决一些复杂的、罕见的设计问题。

这篇非正式文档会定期更新。最近一次更新：2014年11月11日。

分辨率和屏幕大小说明

设备 Retina 竖屏(PX) 横屏(PX)
iPhone 6+ Retina HD 1080 x 1920 1920 x1080
iPhone 6 Retina 750 x 1334 1334 x 750
iPhone 55, 5S, 5C Retina 640 x 1136 1136 x 640
iPhone 44, 4S Retina 640 x 960 960 x 640
iPhone1st, 2nd & 3rd Generation No 320 x 480 480 x 320
iPad Air / Retina iPad1st & 2nd Generation / 3rd & 4th No 1536 x 2048 2048 x 1536
iPad Mini2nd & 3rd Generation Retina 1536 x 2048 2048 x 1536
iPadMini, 1st & 2nd Generation No 768 x 1024 1024 x 768

点和像素的区别

像素是我们在数字屏上所能控制的最小的值。在同一块屏幕上，像素越多就越清晰，PPI越高（像素/英寸），显示的内容就越清晰。

点是与分辨率无关的测量单位。根据屏幕的像素密度来计算，一个点可以包含多个像素（比如：在retina屏上，1点包含2×2个像素）。

当你为多种屏幕做设计的时候，你应该考虑的是点，而不是像素。意思就是不管你设计的是哪种app，你都需要有3种不同分辨率的素材。

注意

只要没有特殊说明（如在值的后面加px），这篇指南所用的单位都是点。如果你需要像素值，只需要把点的值乘2（针对Retina屏）或者点的值乘3（针对Retina HD屏）。

设备 资源分辨率 像素/英寸 屏幕尺寸
iPhone 6+ @3x 401 5.5″
iPhone 6 @2x 326 4.7″
iPhone 55, 5S, 5C @2x 326 4.0″
iPhone 44, 4S @2x 326 3.5″
iPhone1st, 2nd & 3rd Generation @1x 163 3.5″
iPad Air / Retina iPad1st & 2nd Generation/ 3rd & 4th @2x 264 9.7″
iPad Mini2nd & 3rd Generation @2x 326 7.9″
iPad Mini1st Generation @1x 163 7.9″
iPad1st & 2nd Generation @1x 132 9.7″

iPhone6+的下采样

对所有的iOS设备来说，显示像素和物理像素是相等的，只有一个例外：iPhone 6 Plus的Retina宽屏。因为它的屏幕比正常的@3x分辨率要低，显示的内容就自动地缩放了87%（2208 x 1242变为1980 x 1080）。

iPhone5S,6,6+都不一样，更多信息请看这里。

 

App 图标

设备 App 图标 AppStore 图标 索引 设置
iPhone 6+ 180×180 px 1024×1024 px 120×120 px 87×87 px
iPhone 6, 5S, 5, 5C, 4S, 4 120×120 px 1024×1024 px 80×80 px 58×58 px
Old iPhones 1st, 2nd, 3rd Generation 57×57 px 1024×1024 px 29×29 px 29×29 px
Retina iPadsMini 2 & 3, Air, 3 & 4 152×152 px 1024×1024 px 80×80 px 58×58 px
Old iPads1, 2, Mini 1 76×76 px 1024×1024 px 40×40 px 29×29 px

自动应用特效

添加到应用包里的app图标资源一般都是正方形的PNG图片。当设备显示出来的时候，iOS会自动给app图标添加各种特效。

圆角

以前的圆角，就是一个简单的半径而已。但iOS7以后，app图标使用了超椭圆形状来制作圆角。Apple没有发布这个形状的正式模板，如果你想使用的话，可以试试这个非正式模板，不过它或多或少有些误差。

最终导出的资源不应该包含圆角，它只是满足你在设计过程中添加效果的需要，比如描边或阴影效果就需要圆角，以便和图标的各个角对齐。

警告

如果你为了使用与图标圆角对齐的效果，而给资源添加了超椭圆的遮罩，那一定要保证遮罩外不要有任何透明的区域。app图标不支持透明，渲染出来以后，透明的地方会显示成黑色。如果你的遮罩没达到100%的精确度，那用户就会在圆角边缘看到一些小的黑色块。出现这种情况的时候，建议你把画布的背景色设置成和app图标的背景色一致。

描边（在某些情况下）

如果你的app图标用了白色的背景，那有1像素的灰色描边能更容易识别边缘。要做到这，只需要在settings或AppStore设置一下。

遗留特效（iOS6及之前的版本）

旧的iOS版本，下面这些特效会自动应用：圆角（和iOS7+的图标使用的不是同一个形状），在主屏幕上的阴影效果和的光泽效果。光泽效果可以禁用。

网格系统

Apple开发了一个黄金比例的网格系统让你可以正确地缩放和排列icon上的元素。尽管如此，即使Apple的设计师也没有严格地按照这个网格系统来开发app图标。如果你的icon上的元素没有严格按网格对齐时，看起来更好一些，那你可以尝试着打破规则。

字体

所有iOS版本的默认字体都是Helvetica Neue。iOS7之后，Apple针对字体做了一些小修改，但在你的设计里使用原来的Helvetica Neue字体也是很不错的。现在除了默认字体之外，许多非传统的字体也可以使用了。你可以从这里找到完整的预安装字体列表。

用户字体

从技术上来说，任何True Type Font (.ttf) 都可以使用在iOS应用里，但是得注意授权。一般说来，使用对商业用途完全免费的字体是安全的。商业字体的应用证书是很难得到的，要得到它们可能有点贵。这是我收集的可以在手机应用里使用的字体证书。

配色

iOS以后，Apple给系统界面和预装app使用了醒目的配色。你能使用默认的iOS配色表上列出的颜色，也可以（如果你想让你的应用变得醒目）使用你自己的颜色

图标

iOS app中，图标与要执行的操作有视觉上的联系，可以作为文本标签很好的补充，或者完全取代文本（比如“New”，“Delete”等等）。通常的，我们使用图标区分Navigation Bar, Tool Bar or Tab Bar。

Bar按钮图标

bar中的图标总是会有两个不同的状态：默认状态是用1到1.5像素的线画出轮廓，激活状态则把这些线用颜色填充。

你一定不能造按钮图标中包含阴影或内阴影之类的额外特效，因为这些特效都是iOS之前的版本残留下来的（在iOS7重新设计了）。按钮图标应该用一种颜色绘制在透明的背景上——图标的形状通常作为遮罩，颜色则以编程方式实现。

活动视图图标

活动视图图标（也叫做共享弹窗）以前被设计成轮廓样式，但iOS8中，Apple又回到了在白色背景上用实色填充图标的风格。

通用的设计元素

iOS提供了一连串的视图和控件的集合，让开发者能快速建立界面。有一些元素可以被用户自定义，其它的不能也不应该那么做。当为iOS设计一个应用时，你应该了解你的工具集并坚持无论什么时候都尽可能使用它们。然而，有的项目里，自定义控件是值得的，因为你需要更加定制化的外观或者想要改变已经存在的控件的功能（危险区）。一切皆有可能，有时候打破规则是明智的，但是在准备这么做之前请在考虑考虑。

状态栏

状态栏包含基础的系统信息，像当前的信号，时间，电池状态等等。它看起来和 Navigation Bar类似，它们都用了同样的背景色填充。为了匹配app的样式和保证易读性，状态栏的内容主要有两种不同的样式：暗（黑色）和亮（白色）。

也可以隐藏状态栏，但准备这么做之前，请再考虑考虑。例如，app要经常下载网络内容时，用户更关心他们是否连接了WIFI网络；再比如，当app需要蓝牙连接第三方硬件时，用户更关心蓝牙是否开启。隐藏状态栏的一个合适的理由是：你想把所有会让人注意力分散的元素移除。例如，全屏内容展示，比如相册。

导航栏

导航栏是使应用穿梭在多个视图之间以及管理当前视图的控件。它总是出现在屏幕顶端，状态栏的下面。默认情况下，背景半透明，在导航栏下的内容会有些模糊。导航栏的背景可以设置成实色，渐变色或用户自定义的图片。

iPhone6竖屏模式下的Navigation Bar

iPhone 4S横屏模式下的Navigation Bar。导航栏的高度减少了12像素，iPads上除外。在横屏模式下，一般都隐藏状态栏。

下面的元素有一些特殊的对齐要求。

  • 后退按钮总是应该在左侧。
  • 当前视图的标题总是应该在导航栏正中。
  • 功能按钮总是应该在右侧。如果可能，不应该有超过一个的主要action，以避免误触和保持简洁。

工具栏

工具栏包含了一系列管理和操作当前视图内容的动作集。在iPhone上，总是出现在屏幕下边缘，在iPad上，它可能会出现在屏幕顶端。

类似于导航栏，工具栏的背景色也是可以修改的，默认情况下是半透明的，它下面的内容成模糊状。

在导航栏上，超过三个按钮就很难适配或者看起来很乱，这时候就应该使用工具栏。

搜索栏

 

搜索栏有两种不同的默认样式：突出的和最小化。这两种样式都有同样的功能。

  • 用户只要没有文字键入，搜索栏里就显示一个占位符文字，并且还有一个可以用来获取最近搜索内容的书签图标。
  • 一旦搜索的内容键入，占位符就消失了，然后一个清晰的删除按钮就出现在了搜索栏右边缘。

搜索栏可以利用一个提示——输入短句来介绍搜索的上下文环境。例如，键入“城市”，“邮编”，“机场”。

突出 搜索栏样式，使用和不使用提示的两种风格

最小化搜索栏样式
为了更多的控制搜索，可以使用范围栏限制搜索栏。范围栏和搜索栏有同样的样式，但它的搜索结果分门别类的归类了。例如，在音乐app中，可以用演唱者，专辑或歌曲来过滤搜索结果。

标签栏

标签栏允许用户通过同一app中的单个间视图快速导航，这也是使用他的唯一目的。它总是出现在屏幕底部。默认情况下，它像导航栏一样，有一些透明并且对在它下面的内容使用了系统模糊。

标签栏仅仅能包含固定数量的标签。一旦超过了这个数量，末尾的标签就会最替换成“More-tab”。点击后弹出隐藏的 tab 列表。可以使用重排序标签功能重排序。

iPhones上的最大标签数是5个，在iPad上最大标签数是7个。

为了在视图上告知用户新消息，可以给标签栏按钮添加红点带数字的标记。如果视图暂时不可用，与之关联的标签按钮不应该完全隐藏；而是应该把图标淡化显示，从视觉上表示被禁用的状态。

表视图

表视图以单列或多列展示少量或多个列表信息，并且有可以将内容分组的选项。

根据你的数据类型，有两种基本的表视图类型可以使用。

无格式

无格式表视图包含数行，顶端可以有表头，底部有表脚。屏幕右边缘可以显示垂直导航，通过它导航到表的各个地方。这种情况适合展示大量的、可排序的数据（例如：按字母排序）。

组

组表视图允许你把行组合成一个组。每个组都有自己的头（最好是用于描述组的用途）和脚（可以是帮助文本等等）。一个组表视图至少需要包含一个组，每个组至少需要有一行。

对于这两种类型的表，都有几种呈现数据的样式，能让用户方便地扫读、细读以致修改数据。

默认

默认样式包含左端一张可选的图片和一个标题

带有子标题

子标题样式的表视图在标题下还有小字号的子标题文本。它能够进一步的说明标题或者有简短描述。

带值

带值样式的表视图允许你展示一个与该行标题相关的值。和默认样式类似，每行左边都可以有图片和标题。标题对应一个右对齐的值，值的颜色一般比标题略淡一些。

模态，弹出框和通知窗

iOS给展示，编辑，操作数据的临时界面提供了多种样式，让临时界面能够更符合特定环境。临时界面有各自存在的特殊目的并且它们互相之间看起来都不同，所有的临时界面都有一个相同的地方：在显示的时候，它在当前视图处于最上层（它们出现在一切视图之上），其他内容都被一个半透明的黑色背景所覆盖。

活动视图

活动视图被用来执行一些特定的任务。这些任务可以是系统任务，像内容分享，它们也可以完成自定义的操作。当设计自定义任务按钮的图标时，你应该遵循的原则与设计激活状态的 bar 按钮相同——实色填充，无特效，在一个透明背景上。

功能

Action Sheet 常常被用来执行一系列操作里的一个单独的操作，强制用户确认某个操作，或者选择取消。

在竖屏模式下（和在分辨率较小的横屏模式下）Action 总是显示成一个按钮列表，并从屏幕下方滑动出来。Action 上应该有取消按钮来关闭视图以保证不执行列表上的任何动作。

当有足够的空间时（例如：在iPad上），Action外观上就变成了弹出框。关闭视图的按钮也不需要了，因为敲击弹出框外的任何地方，视图就自动关闭了。

通知窗

通知窗的作用是告知用户一些关键信息和强制用户做一些决定。

通知窗一定包含一行标题文本和一个（纯信息提示，例如：ok）或两个(需要用户做一些决定，例如：send和cancel)按钮。

你也可以加上一些信息，如果需要，也可以加上两个文本输入域，其中一个可以是密文输入框，适用于输入密码或PINs值这样的敏感信息。

编辑菜单

当元素被选中时（文本，图片，其他），就弹出编辑菜单，它允许用户执行像复制，粘贴，剪切之类的操作。虽然你能控制用户可以选择哪些操作，但编辑菜单的外观是设定好的，不能重新配置，除非你写一个自己的编辑菜单。

弹出框

有一些特定的功能操作在运行之前需要用户多个输入，这时候弹出框就很有用。最好的例子是添加一个条目，在条目创建之前，总要有一些状态需要设置。

在水平方向下，弹出框显示在相关控件的下方，并通过一个向上箭头指向展示它的相关控件。弹出框的背景稍稍降低了一点不透明度，它下面的内容会有些模糊，就像iOS7中的许多其他UI元素一样。

弹出框是一个非常强大的临时界面，它可以包含导航栏，表视图，地图，网页视图等多种对象。弹出框的尺寸会随着所包含的内容而增长，当它包含了太多元素而增长到视图底部时，它就会变成一个可滚动的弹出框。

模态

模态对于需要用户多次输入或需要多条指令的任务来说，是很有用的视图。它们也是出现在一切视图之上，并且，当它打开的时候，系统会锁住在它之下的任何交互元素。

典型的模态通常提供：

  • 描述任务的标题；
  • 不保存、不执行任何操作就关闭模态视图的按钮
  • 存储和提交任何输入信息的按钮；
  • 各种要用户输入的控件；

模态有三种不同的样式:

  1. Full screen: 覆盖整个屏幕.
  2. Page sheet: 在竖屏模式下，模态视图仅覆盖部分内容，只在半透明的黑背景下展示部分父视图内容.在横屏模式下，page sheet模态就像全屏模态一样展示
  3. Form sheet: 在竖屏模式下，模态出现在屏幕中间，模态视图范围之外，父视图内容展示在半透明背景之下。当键盘显示的时候，模态视图会自动调整它的位置。

控件

iOS提供了很大范围内你所能想到的大部分基础控件。下面列出了最重要的控件（通常使用），但对可得到的所有控件列表，你应该访问iOS Developer Library.

按钮

最为常用的控件还是普通的按钮。iOS7之后，默认按钮的设计看起来不再像一个按钮，更像一个文本链接。按钮允许你高度自定义它的样式，从文本，阴影，颜色到预设的图标或者不带文本的图标（用自定义背景做图标）等等一切都可以自定义。

请牢记按钮有几种状态，应该从视觉上一望而知：默认，高亮，选择，无效。

选择器

选择器用来从一个可用值列表里选出一个值。就类似网页上的下拉列表。选择器的扩展是日期选择器，允许用户从日、月、时中滚动选择一个日期和时间。

除了背景颜色以外，选择控制器的样式和尺寸（像键盘一样）都不能改变。大多数情况下，它们都出现在键盘出现的底部，但它也可以在其他位置出现。

分段控件

分段控件包含数个分段按钮（至少两个），分段用于过滤内容或或者作为清晰分类的内容的 tab 栏。

每个分段都可以包含一个文本标签或一幅图（图标），但不能都有。另外，不推荐在一个分段控件里同时出现这两种分段按钮样式（文本和图像）。每个分段的宽度都会基于分段的数量自动的改变。（两个分段：控件总宽的50%，5个分段：控件总宽的20%）。

滑块

滑块控件允许从一个范围的值中选出一个。因为选择值的过程平滑没有任何跳跃，所以推荐用滑块来选择一个估算的、不精确的值。例如：用滑块来控制音量就很棒，用户可以看出和听出大声和非常大声的区别，如果用输入框来设置一个精确的分贝值就有些不切实际了。

它也可以给最小值和最大值设置图标，显示在滑块控件的开头和结尾，在视觉上强化滑块的目的。

步进器

步进器使用在用户需要输入一个范围内的某个精确值的时候（例如：1-10）。步进器包括两个分段按钮，一个是增加当前值，一个是降低当前值。

界面上，步进器控件有很高的自由度:

  • 你可以为步进按钮使用自己的图标;
  • 如果要维持 iOS 原生的样式，你也可以自定义边框、背景和图标的颜色：只需设置 tint color，即可自动改变这些元素的颜色。
  • 如果你想更进一步，你可以为步进器按钮和分隔符使用自定义图片。

切换开关

切换开关允许用户快速的在两个状态之间切换：开和关。它是iOS应用的勾选框。能为它自定义开和关状态的颜色，但是这个按钮的外观和尺寸不能改变。

键盘

 

不同的键盘类型能为特殊的文本输入提供更适合键盘。你也可以定义自己的键盘，默认的键盘不能自定义样式或尺寸。

深入阅读和资源

这份指南仅提供了设计iOS应用的基础信息。一旦你深入挖掘，你会对更多的信息感兴趣。这些文章和资源都会帮助到你。

ANIMATIONS & PROTOTYPING

DEVELOPMENT STARTER GUIDES

BAR BUTTON ICONS

APP ICONS

UI KITS


最近更新的内容
你可能感兴趣的文章

2024 - 快车库 - 我的知识库 重庆启连科技有限公司 渝ICP备16002641号-10
企客连连 表单助手 企服开发 榜单123

渝公网安备 50010702501581号