一．概述
编写目的：编写iOS移动产品设计规范（以下简称“设计规范”）主要是为了规范化公司移动产品设计，将常用控件的设计标准化，使其更符合iOS平台的特性，降低用户的学习成本。
此外，也能让产品、UI、开发人员在产品细节上达成共识，减少沟通成本，提升开发效率。
主要面向对象：产品人员、UI设计师、交互设计师、开发人员。
适用范围：iOS平台上所有APP与大多数移动版网页。
二．设计原则
2.1设计
依从：用户界面（UI）应当有助于用户理解内容并与之互动，而非对抗。
清晰：文字在每种字号下都易于阅读，图标表意准确清晰，装饰也恰到其度，并以对功能的无比关注驱动设计。
纵深：视觉上的分层界面和逼真的动作使其更赋活力，提升了用户的愉悦和理解。
2.2交互
可控：所有交互应该给予用户安全感，让人感觉程序可操纵性。
适时反馈：永远在合适的时间出现，惊喜而非“惊吓”。
有意义：交互是为了引导而存在，尽量避免无意义的炫技。
三．格式
3.1标准单位
3.1.1Pixels(像素)
Pixels是数字显示屏上我们可控制的最小物理元素，在一个特定屏幕尺寸中可以有多个像素。
3.1.2Points（点）
Points用以衡量分辨率。根据屏幕的像素密度，一个point可以包含多个像素（比如在常规的Retina屏上，1pt包含2 x 2的像素）。
3.2字体的选择
iOS版本中默认字体都是Helvetica Neue。建议中文字体Mac下用的是Heiti SC(黑体-简)。Windows下则为华文细黑。设计以iPhone6的尺寸进行设计，所以所有的字号都要使用双号数字。
3.3字体大小（建议大小）
确保一个自定义字体在不同尺寸下的所有类型都具备可读性。实现这一效果的方法之一是效仿在不同的文本尺寸下iOS系统呈现字体样式的一些方法。例如（以iPhone6及以下尺寸为例）：
1）文本永远都不应该小于22px，内容样式使用34px的字号作为最大尺寸的默认文本尺寸设置。（个别情况：文字最小使用20px的，如标签栏图标的文字为20px;文字最大使用34px及以上的，如弹窗按钮文字为36px）
2）为了区分标题与内容样式，标题样式使用更重的值，可以是颜色或字体大小区分。
3）导航栏的文本使用相同的字号，值为34px。
3.4屏幕与显示
3.4.1 图像分辨率（ppi）
PixelsPer Inch所表示的是每英寸所拥有的像素（Pixel）数目。因此PPI数值越高，即代表显示屏能够以越高的密度显示图像。当然，显示的密度越高，拟真度就越高。
我们在移动应用中提到ppi和dpi其实都一样（概念不同，但对设计来讲没有特别需要深入了解），所以我们先忽略掉dpi。
1）第一代的iPhone屏幕密度：165 ppi；(基本已经淘汰)
2）iPhone4开始后的屏幕密度：326 ppi；
3）iPhone6 plus屏幕密度：401 ppi；
iPhone6 plus缩减像素取样
在iOS上渲染像素和物理像素（Physical pixels）是等同的，只有一个例外：iPhone 6 plus的Retina HD显示屏。由于它屏幕的像素分辨率要低于一个常规的@3x分辨率，所以被渲染内容会自动调整为原始尺寸的87%（从2208*1242像素来适应为1920*1080像素的显示屏分辨率）
3.4.2 iOS的常见分辨率和显示规格
3.4.3界面基本组成元素（建议高度）
几乎所有的iOS应用都应用了UI Kit framework中定义的组件。了解这些组件的名字，作用和构成能够帮助你设计应用过程中做出更好的决定。
界面基本组成元素包括：状态栏（Status Bar）+导航栏（NavigationBar）+标签栏（Tab Bar）/工具栏（Tool Tabs）+内容区域；
AppStore、Safari界面预览
3.5图标icon
每一个应用程序需要的应用程序图标和启动文件或图像。此外，一些应用程序需要自定义图标来表示应用程序的具体内容，功能或模式的导航栏，工具栏和标签栏。
图标按照最大的尺寸1024x1024px来设计，之后按比例缩小到每个尺寸，进行调整。提交没有高光和阴影的直角图形。(如下图所示)
设计时，可用栅格系统来帮助设计：
苹果开发了具有黄金分割比例的栅格系统，可用以正确地调整和对齐icon上的元素。不过，甚至是苹果设计师的原生App icon也没有完全严格地遵守栅格系统。所以如果你的icon上的元素在没有严格遵守栅格系统的情况下能更好地展示，那你可以考虑下打破一些固有的规则。
一个APP所需提供以下6种图标尺寸：
3.6启动页图片尺寸
如果你需要为这些设备创建静态图像发布，请使用以下尺寸(个别情况要除去状态栏高度)：
iPhone4s(@2x):640x960px(640x920px)
iPhone5s(@2x):640x1136px(640x1096px)
iPhone6(@2x):750x1334px（750x1294px）
iPhone6 plus(@3x):1242x2208px（1242x2148px）
iPhone6 plus横屏启动：2208x1242px
四．按钮
4.1图标按钮
iOS提供了许多与在内置的应用程序所使用的标准工具栏和导航栏按钮。
所以，设计过程中请尽量不要“创造”图标按钮，而多使用iOS提供的标准图标按钮或在其基础上进行“适当”修改。
工具栏和导航栏按钮举例：
iOS的包括一些表视图元素，可以扩展表视图功能。除非另有说明，这些元素都适合，只有表视图中使用。
各种"栏"的按钮icon:
各种"栏"中的按钮icon应该有两种状态：默认状态下的1或者1.5pt笔画宽度的轮廓样式，以及纯色填充的活跃状态。
不要在按钮icon上添加任何额外的效果，比如下拉阴影或者内阴影。按钮icon应该在一个透明背景上以一种纯色进行绘制--icon的形状作为遮罩，颜色将会以编程形式应用。
给每个互动的元素充足的空间，从而让用户容易操作这些内容和控件。
控件最小可点击区域为：88x88 px（这个是针对开发人员）。
4.2 按钮状态说明
按钮状态在设计时主要分为普通（normal）、选中（selected）、高亮（highlighted）、不可点（disabled）四种，大部分按钮都包含了这4种状态。
4.3按钮样式要求
按钮三种样式：第一种是直角；第二种是圆角（圆角为8px）；第三种是全圆角。
4.4设置按钮--开启、关闭样式，建议以下样式
用户可使用开关在"on"和"off"两种状态间切换。设计师可自定义两种状态的颜色，但是开关按钮的外观和尺寸是设定好的不能更改。
五．常用设计元素（参考系统控件库）
iOS提供了很多不错的现成的视图和控件，可帮设计师快速构建页面。设计师可以将一些元素自定义到某个级别，但是也有一些元素不能或者不应该进行自定义。当为iOS设计应用程序时，你应该知道一些工具集的使用，只要是可能，就应该坚持下去。但在一些情况下，可能需要设计一些自定义控件，因为你需要一个更加定制化的界面或者想要改变现有控件的功能（有点危险）。几乎任何一件事情都是有可能的，而有时候你需要打破既有的规则，不过需要三思。
5.1状态栏(Status bar)
包含了基本的系统信息，比如运营商、时间、电池状态以及其他等，它在视觉上通常与导航栏联系在一起，并且使用相同的背景填充。
5.2导航栏(Navigationbar)
导航栏包含在app多个视图间进行导航的控件，以及在当前视图中管理内容的选项。导航栏通常展示在屏幕的顶部，状态栏的底部。默认情况下，背景是半透明的，在导航栏下方还有模糊的内容。导航栏的背景可以是纯色的，渐变的或者是自定义的位图模式。
横屏模式下的iPhone 6导航栏
横屏模式下的iPhone 4S导航栏。导航栏的高度减了24px，除了iPad。这也是常见的横屏模式下隐藏状态栏的方法。
元素应当遵循特定的对齐模式：
1)返回按钮通常居左对齐。
2)当前视图的标题应当居中展示在bar中。
3)Action按钮通常居右对齐。如果可能的话Action按钮应当限制在一个主要操作行文，以避免错误点击，并维持其简洁性。
5.3标签栏(Tab bar) (系统定制)
用户可使用标签栏在APP的单个视图间快速导航，并且标签栏也只能用于这个目的。标签栏通常出现在屏幕的底部。默认情况下，标签栏是略透明的，并且向导航栏一样使用系统的模糊效果。
1）标签栏包含固定的最大数量的tabs，一旦标签数量超过其可容纳的最大数量，后边的标签将会展示在隐藏的"more-tab"列表中，并且有一个选项可重排标签顺序。
2）虽然iPhone上最多可展示5个标签，但是在iPad上最多可展示7个标签。
5.4工具栏(Tool bar)
工具栏包含用于管理或者操作当前视图中内容的一些操作。在iPhone上，它通常出现在屏幕的底部，但在iPad上也能出现在屏幕的顶部。
和导航栏类似，工具栏的背景填充也能调整，默认情况下工具栏本身是半透明的，在其下方还有模糊的视图内容。
当一个特定视图要求三个以上主要活动，但放在导航栏上又显得凌乱时，建议可以使用工具栏（作参考）。
5.5搜索栏(Search bar)
搜索栏默认有两种风格：突出的和最小化的。两种类型的搜索栏在功能上是一样的。
1.只要用户没有输入文本，搜索栏中会展示占位符文本。
2.键入搜索项目后，占位符消失，一个清晰的删除按钮会出现在搜索栏的右侧。
搜索栏可以利用一个提示--一个短句来介绍搜索的上下文环境。比如"键入某个城市、邮政编码或者机场"
不使用提示和使用提示两种风格
最小化搜索栏类型
想要提供对检索词条的更多控制，可用Scope bar（范围栏）限制搜索栏，Scope bar会使用和搜索栏一样的风格，当搜索结果有清晰的定义类别时，这种方法比较有用。
5.6分段控制(Segmented control）
分段控制以放置更多的标签，可以通过在视图中左右滑动，切换不同的界面。可帮助用户定义搜索的范围。分段控制的数量最好控制在4个以内，必须要用竖线分割，超出4个，不建议使用这个样式。（如下图所示）
每个分段可包含一个文本标签或者一个图片（icon），但不能同时包含两者。另外，不建议在一个分段控件中混合使用不同的分段风格，比如文本和图片。每个分段的宽度会基于分段的数量自动调整（2个分段各占50%，4个分段各占25%）。
5.7表视图（Table view）
表视图以单列或者多列形式展示少数或者多个列表风格的信息，并有能将内容分组的选项。根据你展示的数据类型，通常可使用两种基本的表视图风格：
无格式的：
分组样式：
分组表视图允许用户对内容进行分组。每个分组可以有页眉（最佳用法是描述类组的上下文环境）和页脚（适用于帮助文本等）。一个分组的表视图至少需要包含一个类组，并且每个类组至少要包含一行内容。
对于以上两种表视图类型，可用几种风格来展示数据，以方便用户快速扫描、阅读和适当调整内容。
默认：
默认的表视图有一个居左对齐的可选图片和标题。
带有副标题:
在每行标题下展示小字号的副标题，适用于进一步的解释说明或者简短描述。
带有数值:
带数值表类型可展示与行标题相关的特定数值。类似默认的类型，每行都有一个居左对齐的图片和标题。在该类型中，数值居右对齐，通常使用比标题淡一点的文本颜色。
5.8活动视图（Activity view）
活动视图用以展示特定的任务。这些任务可以是系统默认的任务，比如通过可用选项分享内容，或者是完全自定义的活动。当为自定义任务按钮设计icon时，你应当遵从活跃状态和栏按钮icon的一些设计指南--纯色填充、无任何效果、以及在一个透明背景上。
活动：活动页面用来执行可用操作列表中的单项操作，并且强迫用户确认或者取消某个活动。
在竖屏模式下（以及尺寸比较小的横屏模式下），活动以按钮列表形式滑入，并呆在屏幕的底部。这种情况下，活动列表应该有一个取消按钮来关闭视图和执行任何列表中的Action。
5.9提醒视图(Alert view)
提醒视图的目的是用来通知用户一些关键性的信息，并有选择地迫使用户做出选择。
提醒视图通常包含一个标题文本（最好不要超过一行）、一个（纯信息提醒，比如"好"）或者两个按钮（要求用户做出决定，比如"取消"或"好"）。
5.10编辑菜单（Edit menu）
用户可使用编辑菜单执行复制、粘贴以及剪切等操作。虽然你能控制用户可以选择哪个操作，但是编辑菜单的视觉外观是设定好的，不能重新配置，除非你设计一个完全自定义的编辑菜单。
5.11弹出视图（Popovers）
当某项特定操作要求多个用户输入才能继续进行时弹出视图就非常有用了。在水平方向上，弹出视图可通过箭头指向展示下方相关的控件（比如按钮）。弹出控件的背景透明度稍有降低，可展示其下方的模糊内容，像iOS 7以后其他很多UI元素一样。
弹出视图是一种非常强大的临时视图，可包含类似导航栏、表视图、地图或者web视图等对象。随着弹出视图所包含内容和元素的增加，其窗口也能滚动展示。
5.12选择器（Pickers）
选择器用来在一个可用值列表中选择某个值，和web上的下拉选框功能类似。选择器的扩展版本是日期选择器，允许用户滚动日期和时间列表来选择一个月、日以及具体时间。
除了背景色外，不可能更改其视觉风格或者尺寸。很多时候，选择器位于屏幕的底部，像键盘一样展示，但不能用在其他地方。
5.13滑杆（Sliders）
滑杆控件允许用户从允许值范围中选择一个特定的值。由于使用滑杆选择一个值的操作非常流畅，并且无需额外的步骤，所以建议在选择预估值的时候使用滑杆，而不是选择精确的值。比如滑杆可以很好地用来设置音量，用户可以听到和看到音量大小的不同，而通过输入文本来设置精确的DB值是不切实际的。
六．文件命名格式规范
6.1文件夹
同一功能下的切图放在一个文件夹下，文件夹用中文命名，名称由对应的功能模块确认。
例：设置功能所有的切图放在“设置”文件夹下。
6.2文件切片命名规则
设计的时候，我们以iPhone 6（750px/375pt）的尺寸作为基准设计，切图的时候我们通常需要切两套图。
1）格式：普通：image.png；两倍图:image@2x.png；三倍图：image@3x.png。
2）保存：png-24,保留透明度。
3）尺寸：像素（避免出现小数，如@2x的图标为88x88，@3x的图标为132x132）；
4）命名：iPhone6及以下：模块_功能_控件_状态@2x.png
iPhone6plus:模块_功能_控件_状态@3x.png
需要用英文表示。
举个例子：
文件命名实例与对应图示：
网友评论