这是一篇移ios动端规范的学习笔记。本人在进行移动端ui界面设计学习时，整理下来的同时也希望能帮到学到这里时有困难的同学。要记得好好学习天天向上哦（若发现文中有错误，请联系更正）。

目录：

1.市面上主流机型分辨率、显示规格及适配原则

2.ui组件布局设计

3.关于尺寸

4.字体

5.切图及命名规范

6.标注

1.市面上主流机型分辨率、显示规格 （其中具体分析换算可看这里一篇文章帮你理清pt，px， ppi，dpi，dp，sp）

适配原则

在设计中设计师需要设计一套基准设计图来达到适配多个分辨率的目的，我们可以在ps中选择中间尺寸750 x1134px作为基准，向下适配640x1136px，向上适配1242x2208px和750x1624px／1125x2436px。(在 Sketch 和 Adobe XD 中建立的画布就是375x667pt)

为了让大家了解适配的原则，本文将对此过程进行推导，首先设计一个常见的750x1334px的设计图，从上至下分别是状态栏、导航栏、首焦图、主要入口、分割、列表。

（1）750×1334（@2x）向下适配640×1136（@2x）

由于750x1334px和640x1136px两个尺寸的界面都是2倍的像素倍率，因此它们的切片大小是相同的，即系统图标、文字和高度都无需适配，需要适配的是宽度。

下面开始进行适配，上面提到了由于750x1334px到640x1136px都是2倍的像素倍率，界面的图标、文字大小等都是相同的，所以我们不需要改变图像大小，只需将画布大小改成640x1136px即可，然后再改变横向元素的间距以达到适配的目的。

首先打开750x1334px的设计稿，执行Ctrl/ Command+Alt+C（改变画布大小的快捷键），设置宽高为640和1136，点击「确定」。

前后调整：

a 导航栏右边的图标向左移动保持和原来的右边距一致，标题居中。

b 首焦图高度除以1.17（750／640=1.17得到）后居中，宽度640px。

c 主要入口右边的图标向左移动保持和原来的右边距一致，各图标的间距等宽。

（2） 750×1334（@2x）向上适配1242×2208（@3x）

1242x2208px界面上所有的元素的尺寸都是750x1334px界面上元素的1.5倍，所以我们在进行适配的时候直接将界面的图像大小变为原来的1.5倍，然后调整画布大小为1242x2208px，最后调整界面图标和元素的横向间距的大小完成适配。

首先对750x1334px的画布执行 Ctrl/Command+Alt+I 命令（调整图像大小），单位设置为百分比，宽高设置为150%，点击「确定」，调整之后的画布大小为1125x2001px。

紧接着对1.5倍之后的Ctrl/1125x2001px界面执行 Command+Alt+C（调整画布大小），鼠标单击「定位」左上角的格子，调整宽高为1242和2208px，点击「确定」。

上面左图拓展画布到右图完成适配做了如下调整：

导航栏右边的图标向右移动保持和原来的右边距一致，标题居中。

首焦图的高度乘以1.65（1242/750=1.65得到）后居中，宽度1242px。

主要入口右边的图标向右移动和原来的右边距一致，各图标的间距等宽。

（3） 750×1334（@2x）向上适配iphoneX 1125x2436px（@3x）

Phone X 比较特别，单独说一下，它的像素分辨率发生了变成了1125x2436px（@3x），在实际工作中为了方便向上和向下的适配，我们仍然可以选择熟悉的 iPhone 7（750x1334px）的尺寸作为模版进行设计，只是高度增加了290px；设计尺寸为：750x1624px（@2x）。设计完成之后将设计稿的图像大小拓展1.5倍即可得到1125x2436px（@3x）尺寸的设计稿。

在适配的时候需要注意，状态栏由之前的40px增加到88px，标签底部预留68px用于放置主页指示器，如下图所示。

关于主页指示器的适配涉及到两种情况：底部出现标签栏、工具栏等操作设计时，需要将底色下延68px并填充原有颜色，这样的处理可以让底部设计更佳简洁舒适，没有功能操作时，页面底部不需要填充颜色，只需盖住主页指示器即可。

对于大多数采用瀑布流的页面来说，仅仅是屏幕高度上的变化，可以无视。但对于如：新手引导页、音乐播放器等需要单屏显示的界面就需要重新布局。

2.ui组件布局设计

先说尺寸，再详细介绍各部分功能

状态栏Status Bar

状态栏简单来说就是最上方显示设备当前状态的相关信息，比如时间，运营商，网络状态和电量。该部分为系统自带的设备和系统的配置，分为深色和浅色两种样式，可根据实际情况选择使用，不需要做设计修改。

状态栏

状态栏需注意：

全屏情况下，可以暂时隐藏状态栏，提高用户体验感，但不宜隐藏太久，可以通过下滑等简单的操作唤醒。

导航栏navigation bars

导航栏位于页面顶部，状态栏的下方。呈半透明状，可填充为背景色。在用户全屏浏览时可进行隐藏以便给用户更好的体验。（一般在查看全屏照片，观看视频时，阅读类软件阅读状态时导航栏会自动隐藏，然后可以通过简单的操作如单击屏幕唤醒导航栏）。

注意：当不需要导航或需要多个控件来管理内容时，请使用工具栏。

导航栏标题：多数情况下标题可以帮助用户了解他们在看什么。但标题不是必须的，也可以空着。

大标题和标准标题

内容需要特别强调时可以使用大标题。大标题方便用户浏览和搜索。

注意在iOS 13及更高版本中：

1.带大标题的导航栏不包含背景材质和阴影。

2.可以隐藏导航栏的底部边框（通过删除导航栏的阴影），其优点在于标题和内容之间的联系更紧密。

3.用户滚动内容区域时，大标题会转换为标准标题，这时候边框会重新出现，用来明确区分标题和内容。

导航栏设计中需注意：

1.导航栏不要挤满太多控件，通常仅包含以下元素：「标题」、「返回按钮」和「功能按钮」，当出现多个控件时，需将其折叠。

2.如果要使用多个文字按钮，要预留足够间隙以保证辨识性。

3.返回按钮只提供返回上一页的路径。

Search Bars 搜索栏

分搜索框、搜索icon、隐藏式搜索框/icon

搜索框：最常见的入口形式即在页面顶部以搜索框形式出现。

这种形式对应场景：冻结在页面顶部，方便用户快捷使用，多用于内容，电商类产品，搜索功能很重要。如淘宝，京东，小红书，知乎，美团都是这种方式。这种形式又分为以下几种交互方式：

1.搜索框随着上滑操作消失，反向滑动到顶部时出现，如微信，iOS 的备忘录都是这种方式。

2.上滑时搜索框收起变为搜索 icon，反向滑动时搜索框出现，如支付宝。

搜索icon：以搜索 icon 的形式出现在页面右/左上角也是很常见的一种。

这种形式对应的场景：搜索功能必不可少，但优先级没那么高，或页面元素过多，以小icon 的形式出现节省空间。如支付宝-财富页面和淘宝-微淘页面，搜索都是以 icon 的形式放在页面右上角。

隐藏式搜索框/icon：搜索默认隐藏，通过交互动作触发，如微信小程序页面，搜索是默认隐藏的，下拉才会出现，大家可以自己去体验一下。

搜索栏设计需注意：

1.启用清除按钮。大多数搜索栏都包含一个清除按钮，可清除该字段的内容。

适当时启用「取消」按钮。大多数专用搜索栏都包含一个「取消」按钮，该按钮可立即终止搜索。

左图为清除按钮，右图为取消按钮

2.可以使用占位符或者搜索栏上方的单行简短提示，指导用户可搜索的内容。

左图为占位符，右图为简短提示

Tab Bars 标签栏

位于屏幕底部或顶部两种。与导航栏相同，标签栏是半透明度的，可填充为背景色。横屏或竖屏方向标签栏高度一致。在键盘输入时被隐藏。其数量不做限制，但一般情况下手机3-5个的标签数量比较合适。

顶部标签栏 app内顶部标签栏 底部标签栏 app内底部标签栏

标签栏设计时需注意：

1.标签栏一般用在最外层的全局导航，要一直可见。（模态视图除外，模态视图不从属于全局导航）

2.如果某标签没法使用，不要删除或者禁用标签，用户会觉得不稳定、难以预料。要保持标签可点击，并说明标签页内容不可用的原因。

3.不要把标签栏和工具栏混淆。标签栏用来导航，工具栏是针对当前视图的操作，两者不会同时出现。

4.切换标签的时候，相关联的视图随之转换，而不影响屏幕上其他位置的视图，否则会破坏页面的可预测性。

Toolbars 工具栏

通常在页面底部出现。包含了对当前页面的相关操作。和导航栏、标签栏一样，工具栏是半透明度的，可填充为背景色。横屏或竖屏方向高度一致。在用户不太可能需要他们的时候，或者输入键盘出现的情况下隐藏。（例如在Safari中，用户滑动屏幕浏览网页的时候工具栏是隐藏的。）

应用内工具栏

工具栏设计中注意：

1.工具栏不要使用分段控件。工具栏对指定内容操作，分段控件用来切换视图内容，两者含义不同。如果需要切换页面，可以使用标签栏进行切换。

2.使用图标还是文字按钮？3个以上建议图标，3个以下建议文字更加直观明了。

3.给文本按钮留有充足空间。文本按钮之间留有充足间距，更利于用户理解与点击。

3.关于尺寸

(1)设计稿尺寸

推荐750*1334px的尺寸来做设计稿，这是向上向下都最容易适配的尺寸，也可以用这个尺寸去适配Android版。

若使用Sketch设计：使用375 * 667尺寸即可，开发在Xcode里也是使用这个尺寸。

导出的@2x图适配IPhone 5/5S/5C/SE，6/6S/7/7S/8；

导出的@3x图适配Iphone 6/6S/7/7S/8 Plus， IPhone X

若使用Photoshop设计：画布就建成750 * 1334尺寸的即可。

导出原尺寸图片加后缀@2x，适配IPhone 5/5S/5C/SE， 6/6S/7/7S/8；

导出1.5倍图片加后缀@3x，适配IPhone 6/6S/7/7S/8 Plus， IPhone X

图标尺寸建议：APP应用图标，建议使用1024*1024尺寸去做，逐级缩小去应用到各种场景中。

(2)边距：

全局边距:常用的全局边距有32px、30px、24px、20px等等，当然除了这些还有更大或者更小的边距，但上面说到的这些是最常用的，而且有一个特点就是数值全是偶数。个人认为24px最为合理。

如iOS原生态页面“通用”页面是使用的是30px的边距。而微信支付宝分别使用的是20px和24px。

卡片间距：通常间距最小不低于16px，过小的间距会造成用户的紧张情绪，信息也会更显拥挤，当然也不能太大，会使界面变得松散，间距的颜色设置可以与分割线一致，也可以更浅一些。常用的间距是20px、24px、30px、40px，具体卡片之间距离的设置需要根据界面的风格以及卡片承载信息的多少来界定。

以iOS系统界面（750*1334px）为例，设置页面不需要承载太多的信息，因此采用了较大的70px作为卡片间距，有利于减轻用户的阅读负担；通知中心承载了大量的信息，过大的间距会让浏览变得不连贯和界面视觉松散，因此采用了较小的16px作为卡片的间距。

而其他的应用如微信卡片间距为40px，拼多多则为16px，聚划算为20px

内容间距：根据格式塔原则（简单来说就是邻近性原则），内容之间的距离决定着他们的关系，互相靠近的元素越容易被人们看做是有关联的一组。而那些距离较远的则自动划分组外。

举例：比如轻芒阅读APP的主界面中，每一个应用名称都与它对应的图标距离较近，保持亲密的关系，也让用户的浏览变得更直观。而如果当应用名称与上下图标距离相同，就分不出它是属于上面还是下面，这会让用户产生错乱的感觉。同理，日日煮app也遵循着此原则。

轻芒阅读 日日煮

（3）内容布局

这里简单介绍最常用的两种布局形式：列表式布局和卡片式布局。

a. 列表式布局

以我们最常用的微信和 QQ 为例，其「信息」页面都是采用的列表式布局，在采用这种布局形式的时候要注意列表舒适体验的最小高度是80px。而自如app和唯品会app信息列表分别为110px和106px。

b. 卡片式布局

其特点在于，每张卡片的内容和形式都可以相互独立，互不干扰，在使用卡片式布局的时候要注意卡片本身一般是白色的，而卡片之间的间距颜色一般是浅灰色，当然不同产品风格颜色可能不一样，有些是浅灰色偏蓝等。

双栏卡片的布局形式，比较常见于以图片信息为主导的 App。例如一些商城的商品陈列页面。这种形式与卡片式类似，但它能在一屏里显示更多的内容，至少4张卡片。同时，由于分开左右两栏的显示，用户可以更加方便地对比左右两栏卡片的内容。

（4）界面图片比例

对于图片的尺寸和比例没有严格的规范，设计师往往凭借经验和感觉设置一个看起来不错的尺寸，但事实上我们是有章可循的。运用科学的手段设置图片的尺寸，可以获得最优的方案，常见的图片尺寸有16:9、4:3、3:2、1:1和1:0.618（黄金比例）等。

启动图标

在设计模板还没有如今这么发达时，设计师需要设计启动图标（1024x1024px）之后按照程序员的要求切出几十个不同尺寸的图标。比如，在手机中@3x情况下桌面图标尺寸为180x180px，在@2x情况下为120x120px；在应用商店图标需要使用的尺寸是1024x1024px；这个工作太烦人了，好在现在我们只需要专注在启动图标设计本身上了。在苹果给我们的这套资源中，有 Template-AppIcons-iOS 这个文件。打开这个文件，用我们自己设计的启动图标替换掉智能对象里的内容，你会发现所有尺寸的图标都变成了我们的图标。然后我们把背景隐藏，切出这些图标即可。图标设计建议使用 AI 等矢量软件，然后使用规范切出图像资源。

4.字体

iOS 英文使用的是 San Francisco（SF 旧金山）字体。中文使用的是苹方黑体。（下载地址）中文苹方的字族有不少可供选择的粗细，那么我们设计界面时需要根据信息的逻辑权重分配粗细：标题应该较粗，说明字体应该较细并且可以设计成灰色。其实字体的设计最重要的考量就是信息层级。苹果认为 APP 的字体信息层级有：大标题（Large Title）、标题一（Title 1）、标题二（Title 2）、标题三（Title 3）、头条（Headline）、正文（Body）、标注（Callout）、副标题（Subhead）、注解（Footnote）、注释一（Caption 1）、注释二（Caption 2）这几种。

注意：下图中HIG对APP的字体建议（基于@2x）且全部是针对英文SF字体而言的

中文字体需要我们灵活运用，以最终呈现效果为基准调整。在设计具体界面时我们一定要以用户的使用情景来考虑，把设计稿导入手机去思考行高与字体大小是否是可读的。10pt（20px）是手机上显示的最小字体，最大的应该是目前的大标题字体了，达到了34pt（68px）。

关于字体大小一般下面这个范围是比较合适的：

顶部操作栏文字大小    34-38px

标题文字大小              28-34px

正文文字大小              26-30px

辅助性文字大小           20-24px

Tab bar文字大小         20px

文字大小只是一个范围，这要根据设计的视觉效果来决定，不要死记硬背，但是切记，字体大小要用偶数。

5.切图及命名规范

切图的方法有很多种：Sketch 和 Adobe XD 可以直接导出。Phtoshop 不具备这个功能，但是我们可以使用 cutterman、蓝湖等插件导出切图。不管是自带功能还是插件，导出切图都可以导出@2x和@3x图，而设计稿只需要 iPhone6/7/8一套即可。

其具体方法是：

（1）Adobe XD 中，将需要切出的元素在图层面板（Ctrl + Y）点击添加批量导出标记记录；然后点击 菜单 - 导出- 所选画板-用于iOS- 导出所有画板即可。

（2）ps中，在 Cutterman 官网下载 PS插件后，点击窗口 -扩展功能 - Cutterman 调出面板；然后选择 iOS 并高亮选中@3X和@2X；在图层面板里选中需要切图的元素，点击「导出选中图层」即可。

（3）蓝湖平台，可以下载 Sketch、Adobe XD 或 Photoshop 对应的插件。然后在不同设计软件插件中将设计稿上传到蓝湖（PS需要用插件标记需要切出的元素），然后在蓝湖网页版点击切图按钮，选择视网膜@2x和高清视网膜@3x，再点击「下载该页全部切图」即可。

通常我们只需要对 icon 进行切图即可，文字、线条和一些标准的几何形状是不需要切图的，例如搜索框只需要在标注中描述它的尺寸、圆角大小、背景色值、不透明度即可，开发人员就可以用代码实现这种效果。

切图命名规范

切图最后需要命名成规范的格式，这样方便程序员查找。切图命名的格式建议全英文，如果大家英文不好需要想办法提升一点简单的词汇量。借由上述工具切图后，需要整理切图命名，或在切图之前对图层命名亦可。以下是切图元素的中英文对照：

△ 切图命名对照表

然后我们要按照「功能_类型_名称_状态@倍数」来命名每个切图，不要使用数字或者符号作为开头。

举例：

a.l例如我们导航条上有一个搜索图标，那么它的名称就是：navi_icon_search_default@2x.png（导航_图标_搜索_正常@2x.png）使用下划线进行连接。

b.例如一个首页处于正常状态下的按钮命名是 home_btn_nor@2x.png。（首页_按钮_正常@2x.png）。

6.标注

当界面设计定稿之后，设计师需要对界面进行标注给开发工程师在还原界面时进行参考。在一份设计稿中需要标注的内容是文字的字号大小、粗细、颜色、不透明度；界面的背景颜色、不透明度；各个图标、列表、文字之间的间距。

常用的标注工具有蓝湖、 Mark Man 、PX Cook像素大厨、标你妹啊。

a.蓝湖平台自动标注功能

将 Sketch 和 Adobe XD、Photoshop 的设计稿上传至蓝湖后，在蓝湖平台每个页面左侧有一个类似分享的图标，点击会获取一个网址，这个网址就是系统生成的自动标注。它会自动识别设计稿中字体大小和间距等，甚至有代码参考。

b.Markman 手动标注

Markman 同样是国产标注神器。而且是我使用的第一个标注工具，选用底部工具可以进行手动标注，标注后导出 png标注图即可。

c.使用Px像素大厨标注

像素大厨同样提供了自动标注、手动标注两种标注方法。自动标注需要上传设计稿，手动标注需要设计师使用「尺子」来测量距离、「吸管」来吸取色号。在界面上部有单位选择，如果我们给 iOS 开发做标注，那么单位最好选择 PT，与开发环境一致。

d.「标你妹啊」自动标注

国产标注在线神器。只需要登录网站后，上传设计稿可直接生成标注网址，发给程序员就可以啦。同样提供代码参考和自动标注间距尺寸等功能。