IOS界面设计尺寸标准规范

安全间距可以为1倍线宽，高速信号线线宽可以设的很细，目前接触到的最小线间距为5mil，也就是0.127mm。在iOS系统的长期发展中，随着功能和界面的不断丰富，整个系统日趋复杂，App内部的功能架构也有同样的情况。

因此，Apple设计团队在新系统中强调了“指引”这一设计思维，并充分地把这一设计思维贯彻到了iOS 11的方方面面。

扩展资料：

发展历程

（1）2007年1月9日苹果公司在Macworld展览会上公布，随后于同年的6月发布第一版iOS操作系统，最初的名称为“iPhone Runs OS X”。

（2）2007年10月17日，苹果公司发布了第一个本地化iPhone应用程序开发包（SDK），并且计划在2月发送到每个开发者以及开发商手中。

（3）2008年3月6日，苹果发布了第一个测试版开发包，并且将“iPhone runs OS X”改名为“iPhone OS”。

移动领域的两大风向标--Android和iOS，也是移动应用设计时最大的两个竞争对手。Android与iOS在市场份额、受欢迎程度、使用人口统计方面数据不相上下，在这里，我们对比了Android和iOS之间的简单设计差异，这将帮助我们弄清一个与另一个有何不同。

由于碎片化的原因，安卓系统的应用设计会有细微的差异。

我们先来了解一下Android与iOS UI应用设计在扁平化设计和材质设计方面的对比。

人机界面指南主要基于三个原则。清晰、尊重和深度。简单来说，该方法支持极简主义，使用简洁的元素，注重排版和扁平化色彩。

简而言之，Android Material Design被认为是Flat设计的升级版，带有拟态性（一种流行的设计概念，即让所代表的物品与现实世界中的对应物相似）。

用Google设计副总裁 MatíasDuarte 的话来说，它是–

有了这些基础知识，让我们从7个方面研究两个平台之间的差异。

目录

1. 导航

2. 按钮

3. 图标和屏幕分辨率

4. 字体

5. 控件

6. 卡片

7. 警报

对于iOS应用程序，总是在“后退”按钮旁边提示上一个选项卡的名称。在中间，显示当前选项卡的名称，而在右上角则显示“编辑”或“完成”（控制按钮）。

说到Android的设计规则，应用程序通常在抽屉菜单或后退按钮（可选）之后的左上角显示标题。移至右上方，总是有一个操作项，例如搜索图标（也可以是多个，例如“收藏夹”图标），其后是溢出菜单。

在iOS中，主导航始终显示在底部，功能菜单专门用于存储一次性功能。而在Android中，通常会在功能菜单中看到主要导航，或者以搜索栏，浮动操作按钮等形式在整个界面中存在。

ios界面指南中，没有类似抽屉导航菜单的标准控件。iOS的全局导航被放置在应用屏幕的底部，一般位于最末位的 "更多"标签下找到二级导航。

Android中，二次导航是一个抽屉，一旦按下功能菜单图标，就会从左到右打开，同时产生一个深色的遮罩层。

有四种方法可以在iOS应用中实现“后退”操作：

在某些情况下，Android应用程序中给出了类似后退的操作，您可以通过该操作进入前一个标签。但是，最常见和最简单的方法是使用导航栏中的后退按钮（Android 10中现在是可选的）。

iOS和Android中的按钮风格最主要的设计区别在于，iOS中的按钮遵循扁平化的设计模式，不带阴影、支持标题大小写。Android遵循Material Design，带阴影且字母大写。

另一个比较重要的按钮是Floating action button（FAB行动呼吁按钮）。例如安卓系统中Gmail的compose按钮，iOS系统中社交媒体应用的新建文章按钮。

两种系统都使用8dp的网格来构建屏幕结构，而最常见的边框是16dp。

在开发移动应用程序时，以预定义的尺寸设计图标是非常关键的。这里有一个表，描述了所有的测量。

这些表格一开始可能会让人有点不知所措，但是如果你知道基本尺寸，并且能够使用倍数进行检查和导出，会发现这并不复杂。

多年来，苹果一直是Helvetica Neue字体的粉丝，然而在2015年，苹果开始使用San Francisco，它更节省空间，非常适合手机、台式机和iOS Watch使用。

Android系统，一直使用Roboto作为标准系统字体。在可预见的未来，谷歌也没有计划改变这一深受喜爱的元素。

控件设计包含搜索、CTA按钮、选择控件和标签等元素。每一个都满足了这样或那样的目的，让我们来看看他们的位置。

搜索功能对于两个平台来说都非常重要，苹果最近还在iMessage中加入了 "搜索栏 "。

在苹果中，搜索选项有两种类型--突出和隐藏。通常情况下，搜索图标会显示在上边的选项卡上，而有时需要从上到下拖动屏幕才能显示搜索栏。此外，如果要取消搜索查询，可以按 "取消"，如果要清除，可以用 "X"。

在安卓系统中，没有隐藏的搜索栏，你总能在上层标签中找到一个。如果要取消搜索，只需点击"←"图标即可，如果要清除查询，则和iOS中的一样。

浮动的动作按钮（FAB）在Android中充当主要行动按钮，可以出现在顶部应用栏或一些组件的边缘。而iOS应用中的主要行动按钮总是出现在页面的右上角。

不过也有一些例外，少数iOS会在底部工具栏显示CTA，而Android则在上部工具栏显示。

如果需要显示一些选项，可以在iOS平台上使用选取器控件，选取器一般出现在底部。

对于在Android平台上显示很少的选项，通常使用一个出现在原地的下拉菜单，或者一个出现在中心的模态对话框，使用模态框时应用背景变暗。

据观察，iOS系统并没有一个视觉上类似于 "标签"的控件。它使用的是一个分段的按钮。Android使用了"扁平化设计的tab"来实现同样的效果。

卡片是图片、文字、视频的集合，还包括按钮和评论。

在iOS中，卡片的特点是无阴影、全宽、无圆角。而在安卓系统中，卡片的设计有阴影、沟槽、圆角等功能。

安卓系统的提醒采用的是扁平化的按钮样式，具体尺寸可以在材质设计指南中找到。操作按钮被放置在提醒的右下角。这些 "按钮 "完全以文字为主（全大写），让用户更容易理解。

至于iOS系统的提醒，则是用分割线隔开。它们基本采用句子或标题的形式，在独立的区块中呈现。它们被放置在弹出窗口的中心。

本文涵盖了iOS和Android所有的初步差异，希望对你有所帮助，而设计一个iOS或Android的移动应用，总是有迭代的准则，所以，一定要保持信息的更新，及时调整自己的产品设计。

Q. 为什么iOS和Android上的应用看起来不一样？

品牌和意识形态的不同，已经波及到他们的操作系统的运作方式。两个平台的UI设计已经成为品牌的符号化。

Q. 如何设计一个原生应用？

在设计原生应用时，必须始终遵守iOS UI应用设计指南和Material设计指南。这样才能使应用与它所要针对的平台同步。另外，这些平台有不同的要求，所以你的应用必须满足它们才能在应用商店上发布。

Q. iOS比Android更方便用户使用吗？

这个问题的答案是纯主观的。它是基于用户的个人偏好。有些人可能会觉得iOS更实用，而有些人则在各方面都偏爱Android。

目前，很多UI设计师的UI设计稿是先做iPhone6(750×1334)的，目的是向上适配iPhone6Plus，同时向下适配iPhone5和iPhone4的尺寸。这一节课也算是25学堂为大家精心整理的iPhone6界面设计尺寸规范大全。

iOS篇

————————————————————————————————————

界面尺寸

☆ 状态栏(status bar)：就是电量条，其高度为：40px；

☆ 导航栏(navigation)：就是顶部条，其高度为：88px；

☆ 主菜单栏(submenu，tab)：就是标签栏，底部条，其高度为：98px；

☆ 内容区域(content)：就是屏幕中间的区域，其高度为：1334px-40px-88px-98px=1108px

| 设备|App Store|程序应用|主屏幕|spotlight搜索|标签栏|工具栏和导航栏|

| :-------------:|:-------------:| :-----:|:-----:|:-----:|

|iPhone6 plus（@3x）|1024 1024px|180 180px|144×144px|87×87 px|75 75px|66 66px|

|iPhone6（@2x）|1024 1024px|120 120px|144×144px|58 58px|75 75px|44 44px|

|iPhone5 - 5s - 5c（@2x） |1024 1024px|120 120px|144×144px|58 58px|75 75px|44 44px|

|iPhone4 - 4s（@2x）|1024 1024px|120 120px|144×144px|58 58px|75 75px|44 44px|

|iPad3 - 4 - Air - Air2 - mini2|1024 1024px|180 180px|144×144px|100 100px|50 50px|44 44px|

|iPad1 - 2|1024 1024px|90 90px|72 72px|50 50px|25 25px|22 22px|

|iPad mini |1024 1024px|90 90px|72 72px|50 50px|25 25px|22 22px|

字体

iPhone 上的字体英文为： HelveticaNeue 至于中文，Mac下用的是黑体-简，Win下则为华文黑体，所有字体要用双数字号。

百度用户体验部做过一个小调查， 对于app字体大小的调查结论如下：

ios与其他平台区分的三个主要主旨：

1.Clarity（清晰）

在整个系统中，文字在各种尺寸上都清晰可辨；

图标精确而清晰，装饰巧妙且恰当，并且对功能的敏锐关注激发了设计；

负空间，颜色，字体，图形和界面元素巧妙地突出重要内容并传达交互性。

2.Deference（遵从）

流畅的动作和清晰美观的界面在帮助人们理解并与内容互动的同时，还能不与之竞争；内容通常填满整个屏幕，半透明和模糊通常暗示更多；

尽量少的使用边框，渐变和阴影可使界面轻量，同时确保内容至关重要。

3.Depth（深度/层次感）

清晰的视觉层和逼真的动作传达层次，赋予活力，促进理解；

触摸和可发现性提高了乐趣，并能够访问功能和附加内容而不会丢失上下文；

过渡可以在您浏览内容时提供深度感。

Design Principles

为了最大限度地提高影响力和覆盖面，请在考虑应用的身份时牢记以下原则。

1.Aesthetic Integrity（审美完整性）

审美完整性体现了app的外观和行为与其功能的整合程度。

例如，一个帮助用户执行严肃任务的app可以通过使用微妙、不显眼的图形、标准控件和可预测的行为来保持他们的专注。

另一方面，沉浸式app，如游戏，可以提供吸引人的外观，传递乐趣和刺激感，同时鼓励发现。

2.Consistency（一致性）

一个一致的app通过使用系统提供的界面元素、众所周知的图标、标准文本样式和统一术语来实现熟悉的标准和范例。

这种app符合用户期望的特征和行为

3.Direct Manipulation（直接操作）

对屏幕内容的直接操作会吸引用户并促进理解。

当用户旋转设备使用手势触动屏幕内容时会体验到直接操作。

通过直接操纵，用户可以看到他们行动的直接、可见的结果。

4.Feedback（反馈)

反馈对用户的行动进行了确认，并显示行动结果以使用户了解情况。

内置的iOS app为用户的每一项操作提供可感知的反馈。

轻触时会突出显示交互元素；进度指示器会传达长时间运行的项目的状态；动画和音效有助于阐明操作的结果。

5.Metaphors（隐喻）

当一个app的虚拟对象和动作都是对熟悉事物的隐喻时（不管基于现实世界还是数字世界），用户学习的更快

隐喻在iOS系统中发挥的很好，因为用户是直接与屏幕产生物理交互的。

用户移动视图来查看更多的内容；拖拽内容；切换开关、移动滑块并且直接滚动来选取值；甚至可以像翻书或杂志一样轻快翻页。

6.User Control（用户控制）

在整个iOS中，用户是掌控者，而不是app。

app可以建议一个行动方案或警告危险后果，但app接管决策通常是一个错误。

好的app可以在用户授权和避免不必要的结果之间找到正确的平衡。

app可以通过保持交互元素熟悉和可预测，确认破坏性操作以及轻松取消操作（即使它们已经在进行中）来使用户感觉自己在控制。

加上Android生态中纷繁复杂的各种奇葩尺寸，现在APP设计开发必须考虑适配大、中、小三种屏幕。所以如何做到交付一套设计稿解决适配大中小三屏的问题？设计和开发之间采用什么协作模式？一个基本思路是：

1、选择一种尺寸作为设计和开发基准；

2、定义一套适配规则，自动适配剩下两种尺寸；

3、特殊适配效果给出设计效果。

手机淘宝的iPhone 6/iPhone 6 Plus适配版本即将提交App store审核。先晒一下我们采用的协作模式，再慢慢说明原委。

第一步，视觉设计阶段，设计师按宽度750px（iPhone 6）做设计稿，除图片外所有设计元素用矢量路径来做。设计定稿后在750px的设计稿上做标注，输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿，在1125px的稿子里切图。

第二步，输出两个交付物给开发工程师：一个是程序用到的@3x切图资源，另一个是宽度750px的设计标注图。

第三步，开发工程师拿到750px标注图和@3x切图资源，完成iPhone 6（375pt）的界面开发。此阶段不能用固定宽度的方式开发界面，得用自动布局（auto layout），方便后续适配到其它尺寸。

第四步，适配调试阶段，基于iPhone 6的界面效果，分别向上向下调试iPhone 6 plus（414pt）和iPhone 5S及以下（320pt）的界面效果。由此完成大中小三屏适配。

为什么选择iPhone 6作为基准尺寸？

当面对大中小三种屏幕需要适配的时候，很容易想到先做好一种屏幕，再去适配剩下两种屏幕。第一个决定是到底以哪种屏幕作为设计和开发的基准尺寸。我们选择中间尺寸的iPhone 6（750px/375pt）作为基准，基于几个原因：

1、从中间尺寸向上和向下适配的时候界面调整的幅度最小。375pt下的设计效果适配到414pt和320pt偏差不会太大。假设以414pt为基准做出很优雅的设计，到320pt可能元素之间比例就不是那么回事了，比如图片和文字之间视觉比例可能失调。

2、iPhone 6 plus有两种显示模式，标准模式分辨率为1242x2208，放大模式分辨率为1125x2001（即iPhone 6的1.5倍）。可见官方系统里iPhone 6和iPhone 6 plus分辨率之间就存在1.5倍的倍率关系。很多情况下这两种尺寸可以用1.5倍直接等比适配。

3、1242x2208这个奇葩的数值是苹果官方都不愿意公开宣传的一个分辨率，不便于记忆和计算栅格。640x1136虽然是广泛应用的一个分辨率，但是大屏时代依然以小尺寸为设计基准显然不合时宜，设计师会停留在小屏的视角做设计。

所以，iPhone6的750x1334是最适合基准尺寸。

只交付一套设计稿，默认用什么规则来适配？

前文提到适配策略是先选择iPhone 6作为基准设计尺寸，然后通过一套适配规则自动适配到另外两种尺寸。这套适配规则总结起来就一句话：文字流式，控件弹性，图片等比缩放。

控件弹性指的是，navigation、cell、bar等适配过程中垂直方向上高度不变；水平方向宽度变化时，通过调整元素间距或元素右对齐的方式实现自适应。这样屏幕越大，在垂直方向上可以显示更多内容，发挥大屏幕的优势。

按照上述默认适配规则，大中小三种屏幕显示效果均相同。有时候想在大屏幕显示更多内容，需要设计出特殊适配效果。比如App store首页焦点图，从iPhone 6适配到iPhone 6 plus时焦点图尺寸和排版做了特殊处理。底下应用列表也从一排3+个变成一排4+个，真正实现了大屏幕显示更多内容的理念。这些就需要设计师给出相应设计稿。