iOS 设计指南

有时候为iOS设计app并非一件简单的事，可是若是你能找到正确的最新的苹果设备信息，并按照正确的方向，那么为iOS设计app或许会变得简单容易些。

关于这些指南

这些指南描述了如何遵照苹果的iOS 人机交互指南来设计app，而不是讲用自定义控件能够作成什么样的设计，有时候打破规则也很重要。该文档的目的并非为一些复杂的设计问题提供解决方案。该文档是非官方的，将会按期更新和扩充内容，最近一次更新是2014年11月11日。

分辨率和显示屏规格（Resolutions和Display Specifications）

Points 和Pixels的区别

Pixels（像素）是数字显示屏上咱们可控制的最小物理元素，在一个特定屏幕尺寸中能够有多个像素，PPI（pixels-per-inch）越高，则渲染的内容会越清晰。

Points用以衡量分辨率。根据屏幕的像素密度，一个point能够包含多个像素（好比在常规的retina屏上，1pt包含2 x 2的像素）。

当你针对多个显示屏类型进行设计时，你应该以points进行思考，但以pixels进行设计。这意味着你仍须要以3种不一样的分辨率来输出设计资产，无论你针对哪一个分辨率设计应用程序。

iPhone 6+缩减像素取样

在iOS上渲染像素和物理像素（physical pixels）是等同的，只有一个例外：iPhone 6 Plus的Retina HD显示屏。因为它屏幕的像素分辨率要低于一个常规的@3x分辨率，因此被渲染内容会自动调整为原始尺寸的87%（从2208*1242像素来适应为1920*1082像素的显示屏分辨率）

iPhone 5S, 6 以及6+显示屏区别的详细信息可参看：The Ultimate Guide To iPhone Resolutions

App Icons

自动应用效果

多尺寸的应用程序icon一般被添加到应用程序包中，当在设备上渲染时，iOS会将效果应用在应用程序icon上。

（1）圆角

圆角半径值已经不存在了。从iOS 7开始，app icon已经使用了超椭圆的形状。因为苹果没有发布该形状的官方模板，因此你得精确地使用非官方的模板。

圆角的图形不该该包含在最终的输出资产中，但若是你想要添加和应用程序icon拐角对齐的描边和阴影效果，那你可能还会用到圆角图形。

提醒：由于你想将应用效果和icon拐角对齐，因此若是你正使用超椭圆的形状对icon资产进行蒙版（遮罩），那要确保在遮罩外的区域不能使用任何透明的图形。应用程序icon不支持透明度，相反做为纯黑色进行渲染。若是你的遮罩不是百分百精确，那用户将会在圆角边缘看 到黑色的锯齿。推荐将canvas的背景设置成和app icon同样的背景。

（2）边框描边(某些状况下)

若是你使用的app icon有白色的背景，那么将会应用1pixel的灰色边框，以便更容易地识别icon的边缘。这只能在设置app和App Store中进行。

（3）后续问题（iOS 6 和以前的版本）

在旧的iOS版本中，这些效果会自动应用：能够被禁用的圆角（和iOS 7+中使用的icon不一样）、主屏幕上的阴影效果以及关泽效果等。

栅格系统

苹果开发了具备黄金分割比例的栅格系统，可用以正确地调整和对齐icon上的元素。不过，甚至是苹果设计师的原生app icon也没有彻底严格地遵照栅格系统。因此若是你的icon上的元素在没有严格遵照栅格系统的状况下能更好地展现，那你能够考虑下打破一些固有的规则。

字体排版

全部的iOS版本中默认字体都是Helvetica Neue。从iOS 7开始，苹果使用了稍做修改的字体，可是在你的设计过程当中使用原始的Helvetica Neue是极好的。除了默认字体外，你还可使用不少可选的字体，你能够在此查看完整的预置字体列表。

自定义字体

从技术角度讲，True Type Font (.ttf)能够被用在iOS app中，但要注意许可问题。通常来讲，使用彻底免费或者商业化的字体是安全的。MyFonts最大数量地包含了可用在app中的许可字体。

调色板

iOS 7之后，苹果在操做系统和预装app中使用了更有生机和活力的调色板。虽然你可使用上边默认的iOS调色板，但你也可使用本身的颜色（若是你想不同凡响，固然要使用了）。

图标

在iOS app中，icon一个很好的用法是使用视觉化的关系来支持文本标签，从而执行一些操做或者彻底取代文本（最经常使用的好比"New"、"Delete"等）。一般，咱们使用icon来区分导航栏、工具栏以及标签栏。

各类"栏"的按钮icon

各类"栏"中的按钮icon应该有两种状态：默认状态下的1或者1.5pt笔画宽度的轮廓样式，以及纯色填充的活跃状态。

不要在按钮icon上添加任何额外的效果，好比下拉阴影或者内阴影，由于这些是iOS 7以前版本中的用法。按钮icon应该在一个透明背景上以一种纯色进行绘制--icon的形状做为遮罩，颜色将会以编程形式应用。

活动视图图标

活动视图（一般指分享弹出视图）中的icon以轮廓样式设计，但苹果在iOS 8之后回归到白色背景上的实体填充icon风格。

经常使用设计元素

iOS提供了不少不错的现成的视图和控件，可帮开发者快速构建页面。开发者能够将一些元素自定义到某个级别，可是也有一些元素不能或者不该该进行自定义。当为iOS设计应用程序时，你应该知道一些工具集的使用，只要是可能，就应该坚持下去。但在一些状况下，可能须要设计一些自定义控件，由于你须要一个更加定制化的界面或者想要改变现有控件的功能（有点危险）。几乎任何一件事情都是有可能的，而有时候你须要打破既有的规则，不过须要三思。

状态栏

状态栏包含了基本的系统信息，好比运营商、时间、电池状态以及其余等，它在视觉上一般与导航栏联系在一块儿，而且使用相同的背景填充。为了匹配你的app的风格，而且易于阅读，状态栏的的内容通常有两种不一样的风格：深色（黑色）和浅色（白色）。

你能够隐藏导航栏，但要思考清楚。好比在app下载web内容时，用户可能对设备是否链接上WiFi网络比较感兴趣，在app要求蓝牙链接第三方硬件时，用户可能会想知道应用是否启用了蓝牙。一个使人信服的隐藏状态栏的理由是你想移除对的那个元素的全部干扰信息，好比全屏展现内容，好比图片。

导航栏

导航栏包含在app多个视图间进行导航的控件，以及在当前视图中管理内容的选项。导航栏一般展现在屏幕的顶部，状态栏的底部。默认状况下，背景是半透明的，在导航栏下方还有模糊的内容。导航栏的背景能够是纯色的，渐变的或者是自定义的位图模式。

竖屏模式下的iPhone 6导航栏。

横屏模式下的iPhone 4S导航栏。导航栏的高度减了12pt，除了iPad。这也是常见的横屏模式下隐藏状态栏的方法。

元素应当遵循特定的对齐模式：

1.返回按钮一般居左对齐。

2.当前视图的标题应当居中展现在bar中。

3.Action按钮一般居右对齐。若是可能的话action按钮应当限制在一个主要操做行文，以免错误点击，并维持其简洁性。

工具栏

工具栏包含用于管理或者操做当前视图中内容的一些操做。在iPhone上，它一般出如今屏幕的底部，但在iPad上也能出如今屏幕的顶部。

和导航栏相似，工具栏的背景填充也能调整，默认状况下工具栏自己是半透明的，在其下方还有模糊的视图内容。

当一个特定视图要求三个以上主要活动，但放在导航栏上又显得凌乱时，你可使用工具栏。

搜索栏

搜索栏默认有两种风格：突出的和最小化的。两种类型的搜索栏在功能上是同样的。

1.只要用户没有输入文本，搜索栏中会展现占位符文本，而书签icon则可用来访问最近或者保存的搜索。

2.键入搜索项目后，占位符消失，一个清晰的删除按钮会出如今搜索栏的右侧。

搜索栏能够利用一个提示--一个短句来介绍搜索的上下文环境。好比"键入某个城市、邮政编码或者机场"

不使用提示和使用提示两种风格

最小化搜索栏类型

想要提供对检索词条的更多控制，可用scope bar（范围栏）限制搜索栏，scope bar会使用和搜索栏同样的风格，当搜索结果有清晰的定义类别时，这种方法比较有用。好比，在一款音乐类app中，搜索结果能够按照专辑和歌曲再次过滤。

标签栏

用户可以使用标签栏在app的单个视图间快速导航，而且标签栏也只能用于这个目的。标签栏一般出如今屏幕的底部。默认状况下，标签栏是略透明的，而且向导航栏同样使用系统的模糊效果。

标签栏包含固定的最大数量的tabs，一旦标签数量超过其可容纳的最大数量，后边的标签将会展现在隐藏的"More-tab"列表中，而且有一个选项可重排标签顺序。

虽然iPhone上最多可展现5个标签，可是在iPad上最多可展现7个标签。

为了提醒用户视图上的新信息，有时候须要在标签栏按钮上使用标记数量。若是一个视图被临时禁用，那么相关的标签按钮不该当彻底被隐藏，相反应当淡出视觉范围以表示其禁用状态。

表视图（Table View）

表视图以单列或者多列形式展现少数或者多个列表风格的信息，并有能将内容分组的选项。根据你展现的数据类型，一般可以使用两种基本的表视图风格：

无格式的

无格式表视图包含的几行内容的顶部能够有页眉，最后一行后边能够有页脚。能够在屏幕右边缘展现垂直导航，以便在表中进行导航，这种状况适合展现以某种方式储存的大数据集的时候，好比按照字母降序排列。

分组样式

分组表视图容许用户对内容进行分组。每一个分组能够有页眉（最佳用法是描述类组的上下文环境）和页脚（适用于帮助文本等）。一个分组的表视图至少须要包含一个类组，而且每一个类组至少要包含一行内容。

对于以上两种表视图类型，可用几种风格来展现数据，以方便用户快速扫描、阅读和适当调整内容。

默认

默认的表视图有一个居左对齐的可选图片和标题。

带有副标题

在每行标题下展现小字号的副标题，适用于进一步的解释说明或者简短描述。

带有数值

带数值表类型可展现与行标题相关的特定数值。相似默认的类型，每行都有一个居左对齐的图片和标题。在该类型中，数值居右对齐，一般使用比标题淡一点的文本颜色。

模态视图、弹出视图以及提醒（警示）视图

iOS提供了多种风格的临时视图，能够某种方式在既定的状况下展现、编辑或者操做数据。虽然每种临时视图因某个很是特定的目的而存在，但外观上却大有不一样，不过全部临时视图都有一个相同的地方：在展现时，它就是当前视图上最上方的图层，下方的内容被一个黑色的背景所覆盖。

活动视图（ACTIVITY VIEW）

活动视图用以展现特定的任务。这些任务能够是系统默认的任务，好比经过可用选项分享内容，或者是彻底自定义的活动。当为自定义任务按钮设计icon时，你应当听从活跃状态和栏按钮icon的一些设计指南--纯色填充、无任何效果、以及在一个透明背景上。

活动（ACTIONS）

活动页面用来执行可用操做列表中的单项操做，而且强迫用户确认或者取消某个活动。

在竖屏模式下（以及尺寸比较小的横屏模式下），actions以按钮列表形式滑入，并呆在屏幕的底部。这种状况下，活动列表应该有一个取消按钮来关闭视图和执行任何列表中的action。

当有足够可用的空间时（好比iPad上），活动列表可在视觉上转为弹出视图。不过此时不必定非得有一个关闭按钮，用户点击弹出视图外的任何地方都能关闭弹出视图。

提醒视图

提醒视图的目的是用来通知用户一些关键性的信息，并有选择地迫使用户作出选择。

提醒视图一般包含一个标题文本（最好不要超过一行）、一个（纯信息提醒，好比"OK"）或者两个按钮（要求用户作出决定，好比"Send"或"Cancel"）。

你能够在提醒视图中添加消息文本，若是须要的话则可添加两个文本域，其中之一能够是蒙版的输入区，适合密码或者PINs之类的敏感信息。

编辑菜单（EDIT MENU）

用户可以使用编辑菜单执行复制、粘贴以及剪切等操做。虽然你能控制用户能够选择哪一个操做，可是编辑菜单的视觉外观是设定好的，不能从新配置，除非你设计一个彻底自定义的编辑菜单。

弹出视图（Popovers）

当某项特定操做要求多个用户输入才能继续进行时弹出视图就很是有用了。在水平方向上，弹出视图可经过箭头指向展现下方相关的控件（好比按钮）。弹出控件的背景透明度稍有下降，可展现其下方的模糊内容，像iOS 7之后其余不少UI元素同样。

弹出视图是一种很是强大的临时视图，可包含相似导航栏、表视图、地图或者web视图等对象。随着弹出视图所包含内容和元素的增长，其窗口也能滚动展现。

模态视图

模态视图适用于须要多个命令和用户输入的状况，位于屏幕上全部内容的最上方。典型的模态视图一般提供：

1.描述任务的标题。

2.关闭模特视图的按钮，没有保存或执行任何其余操做。

3.保存或者提交任何已输入内容的按钮。

4.模态窗口主体中提供大量用户可输入的元素。

有三种可用的模态视图类型：

1.全屏模式：覆盖整个屏幕

2.页表模式：竖屏模式下，模态视图覆盖屏幕上的部份内容，仅在半透明的暗色背景上展现部分父视图的内容。横屏模式下，模态视图会像全屏模态视图那样展现。

3.表格页面模式：竖屏模式下，模态视图出如今屏幕的中间。模态视图范围以外，父视图内容展现在半透明背景之下。当须要展现键盘时，模态视图的位置会自动调整。横屏模式下相似全屏模态视图。

控件（Controls）

iOS为基本上任何类型的输入需求提供了各类各样的控件。如下列出的是最经常使用的控件，但想要看详细的完整的可用控件列表，请在iOS Developer Library中查看。

按钮

最经常使用的控件多是按钮。iOS 7以来，默认的按钮设计看起来更像一个纯文本连接。按钮控件支持高度自定义。按钮能够有几种不一样的状态，可使用视觉语言传达：默认、突出、选择以及禁用等。

选择器（PICKERS）

选择器用来在一个可用值列表中选择某个值，和Web上的下拉选框功能相似。选择器的扩展版本是日期选择器，容许用户滚动日期和时间列表来选择一个月、日以及具体时间。

左：表视图中的日期选择器，右：选择器做为键盘

除了背景色外，不可能更改其视觉风格或者尺寸。不少时候，选择器位于屏幕的底部，像键盘同样展现，但不能用在其余地方。

分段控件（SEGMENT CONTROLS）

分段控件包含一组至少两个以上的分段，可用来过滤内容或者为清晰分类的内容建立标签。

不带icon与带icon的分段控件

每一个分段可包含一个文本标签或者一个图片（icon），但不能同时包含二者。另外，不建议在一个分段控件中混合使用不一样的分段风格，好比文本和图片。每一个分段的宽度会基于分段的数量自动调整（两个分段各占50%，5个分段各占20%）。

滑杆（SLIDERS）

滑杆控件容许用户从容许值范围中选择一个特定的值。因为使用滑杆选择一个值的操做很是流畅，而且无需额外的步骤，因此建议在选择预估值的时候使用滑杆，而不是选择精确的值。好比滑杆能够很好地用来设置音量，用户能够听到和看到音量大小的不一样，而经过输入文原本设置精确的dB值是不切实际的。

不带icon与带icon的滑杆控件

能够为最小值和最大值设置icon，icon会展现在滑杆控件的开始和末尾两端，从而在视觉上增强滑杆的目的。

进步器（STEPPER）

当用户从一个有限的值范围中（好比1-10）键入准确的值的时候，可以使用进步器。进步器一般包含两个分段按钮，一个是下降当前值，一个是增长当前值。

进步器的视觉外观支持高度自定义：

1.可以使用本身的icon做为进步器按钮；

2.当想维持iOS原生的外观时，你能够自定义进步器边框、背景以及icon的颜色。

3.若是你更进一步使用自定义，那你能够为进步器的按钮和分割符使用彻底自定义的图片。

开关（SWITCH）

用户可以使用开关在"ON"和"OFF"两种状态间切换。设计师可自定义两种状态的颜色，可是开关按钮的外观和尺寸是设定好的不能更改。

键盘（KEYBOARDS）

有多重键盘类型可为特定的文本输入提供最好的键盘。虽然你可使用本身彻底自定义的剑兰，但默认的键盘无需调整风格和尺寸，不少时候更加方便一些。

延伸阅读和资源

上述指南仅提供了开始iOS设计的基本信息，一旦深刻挖掘，你可能会对更细节性的内容感兴趣，那么下边这些文章和资源或许能帮到你：

基础内容：

苹果：iOS Human Interface Guidelines（中文版）

苹果：UIKit User Interface Catalog

Marc Edwards：My app design workflow

Treehouse：Learn Mobile App Design

动画和原型

Framer.js：$79.99, 可试用

Marvel：免费

Pixate：iOS动态原型

Origami：Facebook出品的交互原型利器

Meng To：How To Prototype In Xcode Using Storyboard

入门指南

Mike Rundle：Building iOS Apps From Scratch

开源控件收集：Cocoa Controls

"栏"按钮icon

Creative Market：3000 Retina Icons for iOS（$99）

2080 iOS 8 Icons

Creative Market：on Creative Market（$69）

Creative Market：1640 iOS Icons - Streamline（$69）

Creative Market：500 Line Vector Icons（$11）

App ICONS

Photoshop：App Icon Template

Sketch：iOS App Icon Template

UI KITS

Sketch：iPhone GUI for Sketch (iOS 7)

Photoshop：iOS 7 GUI PSD (iPhone)

Sketch：iPad GUI for Sketch (iOS 7)

Photoshop：iPad GUI PSD

Sketch：iOS 8 UI Kit + for Sketch

Sketch：Blueprint

 

本文由CocoaChina翻译自Ivo Mynttinen Design，原文：The iOS Design Guidelines，转载请注明出处。

 

Coc