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