ios设计规范（下）

5.视觉设计(Visual Design)

5.1适应性和布局(Adaptivity and Layout)

⼈们老是但愿他们的全部设备，随时随地都能使⽤他们喜欢的App。在iOS中，界⾯元素和布局可以⾃动改变形状和⼤⼩以匹配不一样的设备，⽐如在iPad中多任务操做时、分屏模式时以及屏幕旋转时的显示。所以，你必须设计⼀个适应性强的界⾯，在任何环境中都能提供良好的(⽤户)体验。

设备屏幕尺⼨

iOS设备有各类不一样的屏幕尺⼨，能够横屏或者竖屏使⽤。

⾃动布局

⾃动布局是构建⾃适应界⾯的开发⼯具。你能够定义App的内容规则。例如，您能够约束⼀个按钮，使其老是⽔平居中，而且位于图像下⽅8点，⽽无论可⽤的屏幕空间如何。当检测到某些场景变化(称为特征)时，⾃动布局将根据特定约束⾃动调整布局。 你能够将 APP 设置为动态适应特征，包括:

当检测到App使⽤环境变化（称为特征）时，⾃适应会根据指定的约束⾃动从新调整布局。您能够将应⽤设置为动态适应各类特征，包括：

• 不一样的设备屏幕尺⼨、分辨率和颜⾊(显示)模式(sRGB/P3)(screen sizes,resolutions, and color gamuts (sRGB/P3))
• 不一样的设备⽅向(横屏 / 竖屏)
• 拆分视图(Split view)在iPad上的多任务处理模式(Multitasking)
• 动态⽂本的⼤⼩变化(Dynamic Type)
• 场景定制的国际化特征(布局⽅向的从左到右或者从右到左，⽇期/时 间/数字格式，字体变化，⽂本⻓度)
• 系统特性可⽤性(3D Touch)

布局引导和安全区域

布局引导定义了在屏幕上实际上并无显示的矩形区域，但对内容的定位、对⻬和间距提供了帮助。该系统包含预约义的布局引导，能够⽅便地在内容 周围应⽤标准的边缘，并限制⽂本的宽度以达到最佳的可读性。你还能够⾃定义布局引导。

遵照 UI Kit 定义的安全区域和布局边界: 这些布局引导能够根据设备和(显示)内容进⾏适当的嵌⼊，安全区域还能够防⽌内容对状态栏、导航条、⼯具栏和标签栏的影响。标准系统提供的视图⾃动采⽤安全区域布局引导。 尺⼨类型 尺⼨类型是根据它们的⼤⼩⾃动的分配内容区域。该系统定义了两个尺⼨种类，常规的(表示可拉伸的空间)和固定的(表示固定⻓度的空间)，描述视图的⾼度和宽度。 视图能够拥有任何尺⼨类型的组合:

• 常规的宽度，常规的⾼度
• 紧凑的宽度，紧凑的⾼度
• 常规的宽度，紧凑的⾼度
• 紧凑的宽度，常规的⾼度

与其余环境变化⼀样，iOS基于内容区域的尺⼨是动态地进⾏布局调整的。 例 如，当垂直尺⼨种类从固定⾼度变为常规⾼度时，多是由于⽤户将设备从横 屏旋转到竖屏，标签栏可能会更⾼。

设备尺⼨类型 基于屏幕尺⼨，不一样尺⼨类型的组合应⽤于不一样设备的全屏体验。

多任务的尺⼨类型 在iPad上，当你的App在进⾏多任务处理时，尺⼨类型也一样适⽤。

布局注意事项 确保重要内容在默认⼤⼩下清晰可读: 除⾮⽤户选择调整⼤⼩，不然不该该让⽤ 户横向滑动才能阅读重要的⽂字信息，或者放⼤才能看清重要的图⽚。

在整个App中保持⼀致的视觉外观: ⼀般来讲，具备类似功能的元素应该看起来 相似。

利⽤视觉权重和平衡来表示重要性: ⼤的对象⽐⼩的对象更能抓住⼈的眼球，显 得更重要。⼤的对象也更容易点击，这在容易分散注意⼒的使⽤环境中(如厨房 或健身房)使⽤时这点尤其重要。⼀般来讲，处于从左往右的阅读环境时把⾸要 的对象放在屏幕的上半部分而且偏左的位置。

利⽤对⻬来⽅便浏览，而且表达结构和层级: 对⻬会让App看起来整⻬有次序， 当⻚⾯滑动时有助⽤户聚焦，更容易找到信息。缩进和对⻬还能够代表多组内容之间的关系。

若是可能，同时⽀持竖屏和横屏模式: ⽤户更喜欢在两种模式下都能使⽤ App， 因此最好可以满⾜他们的指望。

准备好应对⽂本⼤⼩的改变: 当⽤户在设置⾥选择了不一样的⽂本⼤⼩，他们老是 但愿⼤部分的 App 都能适配。为了适应某些⽂本⼤⼩的改变，你可能须要调整 布局。

为可交互元素提供⾜够的空间: 尽可能让全部控件都有不⼩于 44pt x 44pt 的点击区域。

在多个设备上预览您的应⽤。 您可使⽤模拟器（Xcode附带）来快速预览您 的应⽤程序并检查剪切和其余排版问题。若是您的应⽤⽀持横向模式，请确保 您的布局看起来很棒，⽆论设备是向左仍是向右旋转。全屏iPhone不⽀持倒置 肖像模式。某些功能（如宽彩⾊图像）最适合在实际设备上预览。

在较⼤的设备上显示⽂本时，使⽤可读性边距: 这些边距保持⽂本每⾏都⾜够 短，能够确保温馨的阅读体验。

适应语境的变化 环境变化时保持当前内容的焦点不变: 内容是你的最⾼优先级。让焦点随着环境 变化⽽发⽣改变是会让⽤户困惑的，感受当前的 App 失控了。

避免⽆原因的布局变更: 即便⽤户旋转了设备，也不表明总体的布局须要变 换: ⽐如，若是你的App 在竖屏模式展现了⼀⽹格的图⽚，那么在横屏模式你没必 要展现一样的图⽚。相反地，你只须要简单地调整⽹格的尺⼨就⾏了。尽可能在 任何环境下都能维持⼀样的体验。

若是你的 App 只⽀持⼀种模式，那么请提供两种屏幕模式的变量: 若是你的 App 只能在⼀种模式下运⾏，那么确保它可以⽀持该模式的两种⽅向变化是⼗ 分重要的。⽐如，若是你的 App 只在横屏模式运⾏，那么⽆论Home 键在左边 仍是右边，应⽤都该能正常使⽤。若是设备被旋转180度，那么你的 App 内容 也该同时旋转180度。反之，当⽤户拿错设备⽅向时，你的 App 没有⾃动旋转， 那么他们就会很⾃然地知道应该旋转设备。你⽆需告诉他们该如何纠正。

根据当前使⽤内容来规定相应的旋转⽅向: ⽐如，⼀个须要⽤户旋转设备来控制 ⻆⾊移动的游戏，就不会在游戏中改变横竖屏的⽅向。可是，它能够根据当前 设备的旋转⽅向来展现菜单和引导步骤。

确保你的应⽤在iPad上也能运⾏: ⽤户很⾼兴可以灵活地在任⼀类型的 iOS 设 备上运⾏你的应⽤。即便你但愿⼤多数⼈在iPhone上使⽤你的应⽤，但其界⾯ 元素在iPad上仍需保持可⻅而且实⽤。若是应⽤的某些功能须要特定于iPhone 的硬件(如 3D Touch)，请考虑在iPad上隐藏或禁⽤这些功能，并让⽤户使⽤应 ⽤的其余功能。

在重⽤现有艺术做品时，请注意宽⾼⽐差别。 不一样的屏幕尺⼨可能具备不一样的 宽⾼⽐，致使艺术品出现裁剪，信箱或邮筒。确保全部显示尺⼨都能保留重要 的可视内容。

设计全屏体验

扩展可视元素以填充屏幕。确保背景延伸到显示器的边缘，而且垂直可滚动的 布局（如表和集合）⼀直延伸到底部。

避免将交互式控件明确放置在屏幕的最底部和⻆落中。 ⼈们使⽤显示屏底部的 滑动⼿势来访问主屏幕和应⽤切换器等功能，这些⼿势可能会取消您在此区域 中实现的⾃定义⼿势。屏幕的远⻆多是⼈们温馨地到达的困难区域。

插⼊必要内容以防⽌剪裁。 一般，内容应该居中且对称插⼊，所以它在任何⽅ 向上看起来都很好，没有被圆⻆修剪，没有被传感器外壳隐藏，而且不会被⽤ 于访问主屏幕的指示器遮挡。为得到最佳效果，请使⽤标准的，系统提供的界 ⾯元素和⾃动布局来构建界⾯并遵循布局指南和安全区域由UIKit定义。当设备 处于横向时，某些相似应⽤的游戏可能适合在屏幕的下半部分（延伸到安全区 域下⽅）放置可点击控件，以便为内容留出更多空间。在屏幕顶部和底部放置 控件时使⽤匹配的插⼊，并在Home指示器周围留出⾜够的空间，以便⼈们在 尝试与控件交互时不会意外地将其做为⽬标。

插⼊全宽按钮。 延伸到屏幕边缘的按钮可能看起来不像按钮。尊重全宽按钮两 侧的标准UIKit边距。当屏幕底部出现圆⻆并与安全区域的底部对⻬时，屏幕底 部出现的全宽按钮效果最佳 - 这也确保它不会与Home指示灯冲突。

请勿掩盖或特别注意按键显示功能。 不要试图经过在屏幕的顶部和底部放置⿊ 条来隐藏设备的圆⻆，传感器外壳或⽤于访问主屏幕的指示器。不要使⽤括号， 边框，形状或教学⽂本等视觉装饰来特别注意这些区域。

请注意状态栏⾼度。 全屏iPhone上的状态栏⽐旧款iPhone更⾼。若是您的应⽤ 假设状态栏⾼度为状态栏下⽅的定位内容，则必须更新您的应⽤以根据⽤户的 设备动态定位内容。请注意，当语⾳录制和位置跟踪等后台任务处于活动状态 时，全屏iPhone上的状态栏不会更改⾼度。

若是您的应⽤当前隐藏了状态栏，请从新考虑全屏iPhone的决定。 与旧款 iPhone相⽐，全屏iPhone的内容垂直空间更⼤，状态栏占据了您的应⽤可能⽆ 法充分利⽤的屏幕区域。状态栏还显示⼈们认为有⽤的信息。它只应隐藏以换 取附加值。

容许⾃动隐藏指示器以便谨慎访问主屏幕。 启⽤⾃动隐藏后，若是⽤户未触摸 屏幕⼏秒钟，指示灯会淡出。当⽤户再次触摸屏幕时，它会从新出现。应仅针 对播放视频或照⽚幻灯⽚等被动查看体验启⽤此⾏为。

5.2 动效(Animation)

贯穿于 iOS 系统的优美、精细的动画在⽤户和屏幕屏幕内容之间建⽴了⼀种视 觉上的联系。当动画被合理利⽤时，它可以表达状态、提供反馈、增强直接操 纵感，而且视觉化呈现⽤户的操做结果。

明智且审慎地使⽤动画和动效: 不要为了使⽤动画⽽动画。过分或是⽆理由的动 画会让⽤户有不连贯和错乱的感受，尤为是在那些不能提供沉浸式体验 的 App 中。iOS 常常使⽤动效，⽐如在主屏和其它地⽅使⽤了视差效果，来建⽴⽤户 的沉浸感觉。这些效果有助于加强理解和提高愉悦感，可是滥⽤它们就会让⼀ 个 App 变得难以控制。若是你想使⽤动效，⼀定要提早进⾏ ⽤户测试以保证 它们真的能不辱使命。

⼒求真实性和可信性: ⽤户能够接受艺术创造，可是当动效没有意义或是违背了 物理定律时，⽤户就会感到混乱。打个⽐⽅，若是⽤户经过在屏幕顶部下滑出 ⼀个视图，那么他们应该也能经过上滑将该视图关闭。

使⽤连贯的动画: ⼀个熟悉并流畅的体验能⼀直让⽤户参与其中。⽤户已经习惯 了贯穿于 iOS 系统的精细动画，⽐如平稳的过渡、横竖屏之间的流畅转换和基 于物理现实的滚动。 除⾮你在创造⼀个沉浸式体验，⽐如游戏，否则⾃定义动 画都应该和系统动画相符。

让动效可选: 当在辅助功能偏好设置中启⽤减小动做的选项时，App 应尽量减 少或消除应⽤程序动画。

5.3 品牌化 (Branding)

成功的品牌化不只是单纯地在应⽤中添加品牌元素。优秀的 App 经过优雅别致 的⽂字、颜⾊和图⽚来营造独特的品牌辨识度。提供⾜够多的品牌元素让⽤户 感受是处在你的 App 中，但不要由于过分使⽤⽽形成⼲扰。

**融⼊精妙的、不唐突的品牌元素: ** ⽤户使⽤你的 App 是得到娱乐、获得信息或 是作某些事情的，⽽不是为了观看⼀个⼴告。要想达到最好的体验，请巧妙地 将品牌融于 App 设计中。让 App 图标的颜⾊贯穿整个 App 设计， 不失为⼀ 种很好的专属使⽤界⾯。

不要让品牌化阻碍了优秀的 App 设计: ⾸先，让你的 App 像是⼀个 iOS App。 保证它是直观的、易于导航的、易⽤的而且之内容为中⼼的。当你的 App 在其 它平台也适⽤，不要为了保持品牌的⼀致性⽽牺牲了设计的质量。 内容⽐品牌化更重要: 在屏幕顶部放置⼀个除了展现品牌元素之外没有任何⽤ 途的头部栏，就意味着牺牲了⽤来浏览内容的空间。取⽽代之的，考虑采⽤低 侵⼊性的⽅式来实现品牌化，⽐如使⽤⾃定义的配⾊⽅案和字体，或是巧妙地 ⾃定义背景。

克制住想要在应⽤中处处展现 logo 的诱惑: 避免在 App 中处处展现 logo， 除 ⾮它是品牌化中必不可少的⼀部分。这点在导航栏中尤为重要，由于提供⼀个 标题⽐ logo 更加有⽤。

遵循 Apple 的商标准则: Apple 的商标不能在你的 App 名字或是图像中出现。

5.4 颜⾊ (Color)

颜⾊是增长活⼒，提供视觉连续性，沟通状态信息，响应⽤户操做的反馈并帮 助⼈们可视化数据的好⽅法。在挑选 App ⾊调的颜⾊时，请参考系统的⾊彩⽅ 案，以保证这些颜⾊⽆论是单独仍是组合、在浅⾊背景仍是深⾊背景上都看起来很棒。

明智地使⽤颜⾊进⾏沟通: 谨慎地使⽤颜⾊来强调重要信息。例如，当 App 中 其余不重要的信息也使⽤了红⾊时，警告⼈们严重问题的红⾊三⻆形就显得没 有那么明显。

在App内使⽤互补的颜⾊: 你的 App 内的颜⾊应该协调，不会互相冲突和⼲扰。 若是你的 App ⻛格的基础⾊调是柔和的，那么使⽤⼀系列与之协调的柔和⾊ 调。

⼀般来讲，选择与你的 App Logo 相符的颜⾊地⾊板: 巧妙地使⽤颜⾊是⼀个 传达品牌的好办法。

在 App 中统⼀使⽤⼀种关键⾊来显示可交互性: 在 Note 中，可交互的元素是 ⻩⾊的。在 Calendar 中，可交互的元素是红⾊的。若是你定义了⼀种 关键⾊ ⽤于传递可交互性，那么你要保证其它颜⾊不会与之冲突。

避免给可交互和不可交互的元素使⽤相同的颜⾊: 若是可交互和不可交互的元素 是同⼀种颜⾊， ⽤户就很难知道到底哪⾥是可点击的。

考虑图像和半透明度如何影响周边元素的颜⾊: 图像的变化有时能够改变附近 颜⾊，以保持视觉连续性，并防⽌界⾯元素变得太强烈或者不能引发⽤户的注 意。例如，地图在使⽤地图模式时显示浅⾊⽅案，但在激活卫星模式时切换到 深⾊⽅案。当放置在半透明元素后⾯时，或当应⽤于半透明元素(例 如⼯具栏) 时，颜⾊也可能会不一样。

在多种光线条件下测试你的 App 颜⾊: 光线在室内和室外、房间氛围、不一样的 时间、⽓候等条件下会发⽣明显地变化。你的 App 在现实世界中使⽤ 时看到 的颜⾊不会⼀直和你在电脑上看到的颜⾊相同。你应该在不一样的光线条件下预 览，来观察颜⾊的真实表现，⽐如在晴朗的户外。必要时，应当调整颜⾊以求 在⼤多数的使⽤场景下提供最好的视觉体验。 考虑 True Tone 显示屏对颜⾊的影响: True Tone 显示屏利⽤了环境光传感器 来⾃动调整显示屏的⽩点，以适应当前环境下的光线状况。专一于阅读、照⽚、 视频和游戏的App能够经过肯定⼀种⽩点纠正模式来强化或弱化 True Tone 的

关注⾊盲⽤户: 不一样的⽤户看⻅的颜⾊是不⼀样的。⽐如，不少⾊盲⽤户很难 分辨红⾊和绿⾊(以及任何灰⾊)，或是蓝⾊和橘⾊。避免把这些颜⾊组合做为 区分两种状态或值的惟⼀⽅式。⽐如，⽤红⾊⽅块和绿⾊圆形来表示下线和上 线状态，⽽不是⽤红⾊和绿⾊的圆形。有些图形编辑软件含有可以 帮助你证实 你是不是⾊盲的⼯具。

考虑⼀下在其余国家和⽂化中如何使⽤颜⾊: 例如，在某些⽂化中，红⾊表明 着危险。在其余⽂化中，红⾊有积极的含义。确保你的App中的颜⾊表达出恰 当的信息。

使⽤⾜够的颜⾊对⽐度: 在 App 中，太低的对⽐度会让内容难以阅读。⽐如图 标和⽂本可能会和背景融合。⽹上有颜⾊对⽐度计算器可以帮助你精确的分析 App中的颜⾊对⽐度，以确保它符合最佳标准。请确保你的 App 对⽐度⾄少达 到 4:5:1 ，可是 7:1 更好，由于它更符合严格的功能标准。

颜⾊管理 在你的图像中应⽤颜⾊配置⽂件: iOS 的默认颜⾊空间是标准 RGB (sRGB)。 为了确保颜⾊与这个颜⾊空间的匹配，确保你的图像包含了嵌⼊的颜⾊配置⽂ 件。

使⽤⼴⾊域来加强在兼容显示器上的视觉体验: ⼴⾊域显示⽀持P3⾊空间，它 能让 sRGB 更丰富、更饱和。所以，使⽤⼴⾊域的照⽚和视频更逼真，使⽤⼴ ⾊域的视觉数据和状态指示器更具影响⼒。在适当的时候，使⽤显示P3颜⾊配 置⽂件的16位/像素(每一个通道)并导出图像 png 格式。请注意，须要⼴⾊域显示 器来设计⼴⾊域图像并选择P3颜⾊。

在须要的时候提供空间特定的图像和颜⾊变化: ⼀般来讲，P3的颜⾊和图像会 在 sRGB 设备上显示出来。然⽽，有时在 sRGB 设备上出现两种⾮常类似的P3 颜⾊可能很难区分。在P3光谱中使⽤颜⾊的渐变有时也会出如今 sRGB 设备上。 为了不这些问题，您能够在 Xcode 项⽬的资产⽬录中提供不一样 的图像和颜 ⾊，以确保在宽颜⾊和 sRGB 设备上的视觉保真度。

在实际的sRGB和⼤屏幕上预览你的应⽤的颜⾊: 根据须要进⾏调整，以确保在 这两种类型的显示器上都有一样出⾊的视觉体验。

注意: 在 mac 设备中的光⾊域显示器中，你可使⽤系统颜⾊选配置功能来选 择和预览P3颜⾊，并将它们与 sRGB 颜⾊进⾏⽐较。

5.5 术语 (Terminology)

App 中的每⼀字都是与你的⽤户对话的⼀部分。⽤此对话来帮助他们在你的 App 中感到温馨。

使⽤熟悉的、能够理解的单词和短语: 技术性词语可能会令⼈⽣畏。避免⼈们 可能不理解的缩写和技术术语。利⽤你对⽤户的了解来肯定某些词或短语是否 合适。⼀般来讲，对每一个⼈都有吸引⼒的 App 应该避开⾼技术性的语⾔。这类 语⾔可能适⽤于⾯向更⾼级的⽤户或技术⼈群。

保持界⾯⽂本清晰简洁: ⼈们快速⽽容易地吸取简短的、直接的⽂本，不喜欢 被强迫阅读冗⻓的⽂章来完成⼀项任务。找出最重要的信息，简明扼要地表达 出来，并把它呈如今显眼的位置，这样⼈们就没必要为了找到他们想要的东⻄⽽ 阅读太多，或者不知道下⼀步该作什么。 适当的代表交互元素: ⼈们应该可以⼀眼看出元素的做⽤。当标记按钮和其余 交互元素时，使⽤动做动词(action verbs)，例如链接、发送和添加。

避免那些听起来可能会显得屈尊俯就的语⾔: 避免使⽤“咱们”，“咱们的”， “我”和“个人”(例如“咱们的教程”和“个人训练”)。他们有时会被理解为侮辱或 傲慢。

尽可能⽤⼀种⾮正式的、友好的语⽓: ⼀种⾮正式的、平易近⼈的⻛格，与你在 午饭时与⼈交谈的⽅式类似。偶尔使⽤缩写，直接⽤“你”和“你的”来对⽤户说 话。

要⼩⼼的使⽤幽默感: 记住，⼈们极可能屡次在你的界⾯中阅读⽂本，⽽⼀开 始看起来很聪明的东⻄可能会随着时间的推移⽽变得令⼈厌烦。同时要记住， ⼀种⽂化中的幽默不⼀定能很好地转化为其余⽂化的幽默。

使⽤相关的、⼀致的语⾔和图像: ⼀定要确保样式对当前的上下⽂⽽⾔是合适 的。例如，若是有⼈使⽤ iPad，就不要显示 iPhone 的提示或图形。使⽤与平 台⼀致的语⾔。你能够在触摸屏上点击、快速滑动、滑动、缩放和拖拽。 你按 下物理按键和对 3D Touch 作出反应的按钮。你还能够旋转并摇动设备。

要准确表达⽇期: 使⽤像 “今天” 和 “明天” 这样的友好术语是合适的，可是， 若是您不考虑当前的语⾔环境，这些术语可能会令⼈困惑或不许确。考虑⼀个 在午夜前开始的活动。在⼀个时区，活动可能会在今天开始。在另⼀个时区， 一样的事件可能在昨天开始。⼀般来讲，⽇期应该反映出观看事件的⼈的时区。 然⽽，在某些状况下，例如在⻜⾏跟踪 App 中，能够更清楚地显示航班的起始 ⽇期和时区。

5.6 排版 (Typography)

San Francisco (SF) 是 iOS 系统的默认英⽂字体:这种字型的字体通过了优化， 使你的⽂本具备⽆与伦⽐的可读性、清晰性和⼀致性。

iOS使⽤ San Francisco 字体做为拉丁、希腊和⻄⾥尔字⺟的系统字体，以及 其余的各类字体。

强调重要信息: 使⽤字重、字体⼤⼩和颜⾊来突出 App 中最重要的信息。 若是 能够的话，只使⽤⼀种字体，混合⼏种不一样的字体可能会让你的 App 显得⽀离 破碎和草率。考虑使⽤⼀种字体，只使⽤少许的字体的变体和⼤⼩。

尽量使⽤内置的⽂本样式: 内置的⽂本样式容许您以视觉上不一样的⽅式来表 达内容，同时保持最优的易读性。这些样式是基于系统字体的，容许你利⽤关 键的排版特性，⽐如动态类型，它⾃动调整跟踪，并为每种字体⼤⼩提供引 导。

确保字体是清晰的: 在 iOS 上⽀持⾃定义字体，但一般不利于阅读。除⾮你的 应⽤对定制字体有迫切需求，⽐如为品牌设计或创造⼀种沉浸式游戏体验，否 则最好仍是坚持使⽤系统字体。若是你使⽤⾃定义字体，请确保它易于阅读， 即便是很⼩的字体。

实现⾃定义字体的辅助功能: 系统字体会⾃动对辅助功能作出反应，⽐如加粗字 体和放⼤⽂本。 使⽤⾃定义字体的App应检查是否启⽤辅助功能并实现 相同的 ⾏为。

动态类型⼤⼩ San Francisco 字体的设计的⼤号字体和⼩号字体都很清晰。动态类型经过让 读者选择他们喜欢的⽂本⼤⼩来提供额外的灵活性。

在响应⽂本⼤⼩的变化时，优先考虑内容: 并非全部的内容都一样重要。当 ⽤户选择更⼤的尺⼨时，他们想要让他们所关⼼的内容更容易阅读;他们并不总 是但愿屏幕上的每⼀个字都变⼤。

字体用法和字距 在界面原型中使用正确的字体和字形变体: 使用 SF Pro 文原本显示文本19 磅 或更小的文本，以及在文本20磅或更大的文本中显示文本。当你在标准控 件中 使用 San Francisco 的文本，好比按钮和标注，iOS 会自动根据磅值和用户的 可访问性设置应用最合适的变体，并适当地调整字距。 在 iOS 10 中 San Francisco 字体的变体是 SF UI Tex 和 SF UI Display。

6.图标和图像(Icons and Images)

6.1图像尺⼨和分辨率(Image Size and Resoulution)

iOS ⽤于在屏幕上放置内容的坐标系统是以点(pt)为基础的。该坐标系以点为 基本测量单位，这些点映射到显示器中则以像素显示。在标准分辨率屏幕上， ⼀个点等于⼀个像素(1pt = 1px)。由于⾼分辨率屏幕的像素密度更⾼，因此在 真实世界⾥同等⾯积的屏幕中就包含更多的像素，即⼀点中包含更多像素(1pt = 2px、1pt=3px)。所以，⾼分辨率屏幕须要具有更⾼像素的图像。

为了⽀持全部的 iOS 设备，你须要为设计的内容提供⾼分辨率的图像: 基于不 同的设备，将每一个图像中的像素数量乘以特定⽐例系数来进⾏适配。标准分辨 率图像的⽐例系数为1.0，这种图像被称为 @1x 图像。⾼分辨率图像的⽐例系 数为2.0或3.0，被称为 @2x 或 @3x 图像。假设你有⼀个标准的分辨率 @1x 图像，例如 100px x 100px，那么，该图像的@ 2x版本将是 200px × 200px， @3x 版本将是 300px × 300px。

设计⾼分辨率设计图 使⽤8px × 8px的⽹格系统: ⽹格系统可让线条和图像内容在全部尺⼨上保持 清晰，⽆需太多的修饰和锐化。将图形边界对⻬到⽹格上，以减小按⽐例缩⼩ 图像时出现的半像素和内容模糊的状况。

以适当的格式进⾏创做: 一般，位图/光栅的切图使⽤去交错的 PNG 格式⽂件 (PNG 导出的设置)。选择 PNG 格式，是由于它⽀持透明度，而且由于是⽆损 格式，不会在压缩过程当中丢失图形的细节和⾊彩。对于须要阴影、纹理和⾼光 效果的复杂切图来讲，PNG格式是⼀个很好的选择。⽽照⽚内容(如⼴告图、照 ⽚)请使⽤JPEG格式，由于它的压缩算法能够⽐⽆损格式节省更多的存储空间， 且较难识别到压缩的痕迹。因此，写实的 App 图标最适合使⽤ PNG 格式。其 它须要进⾏⾼分辨率缩放的扁平、⽮量切图则使⽤ PDF 格式。

对于不须要使⽤ PNG-24 的切图，只须要使⽤ PNG-8 格式便可: 由于 8 位⾊ 彩能够减小⽂件⼤⼩，而且不会下降图像质量。注意:PNG-8 不适⽤于照⽚类 型。

优化 JPEG ⽂件，以找到存储容量和质量之间的平衡: ⼤多数 JPEG ⽂件能够 被压缩，⽽不会形成明显的图像失真，即便是少许的压缩也能够为磁盘节省⼤ 量空间。在每一个 JEPG 图像上进⾏压缩设置，找出可接受失真范围内的最佳参 数。

提供图像和图标的替代⽂本标签: 替代⽂本标签在屏幕上看不到，可是它们帮 助 “VoiceOver”(APPLE 公司推出的⼀种语⾳辅助程序)描述屏幕上的内容，便 于视觉障碍的⼈“看到”屏幕上的内容。

6.2应⽤图标(App Icon)

每一个 App 都须要⼀个美观的，令⼈印象深入的图标，能在苹果商店和主屏 幕 夺⼈眼球。⽤户轻撇图标的瞬间，是你的第⼀个机会，⽤来传达你的 App 的⽤ 途。图标也贯穿于整个系统中，例如在设置和搜索结果中。

拥抱简约: 寻找个单⼀的元素可以表现你的 App 的精髓，而后经过⼀个简单并 且独特的形状表达该元素。谨慎地添加细节部分。若是图标的内容或形状过于 复杂，则细节难以辨别，特别是在较⼩的尺⼨中。

设计⼀个可识别的图标: ⽤户不该该只有经过分析图标才能弄清楚它表明什么。 例如，邮件 App 的图标使⽤了⼀个信封，由于它广泛与邮件联系在⼀ 起。花 时间来设计⼀个美观迷⼈且精炼的抽象图标，从⽽艺术化地传达你的 App 的⽬ 的。

保持背景简单，避免透明度: 确保你的图标是不透明的，不要杂乱的背景。 使 ⽤⼀个简单的背景，这样它就不会过分影响周围的其它图标。你没有必要将整 个图标填满内容。

只有当 logo 所有或部分由⽂字组成时，才在图标使⽤⽂字: 在主屏幕时，⼀个 App 的名称会在图标之下显示。不要包含没有意义的⽂字重复说明名称或是告 诉⽤户该如何使⽤你的 App，⽐如“Watch”或“Play”。若是你的设计包含了⼀ 些⽂字，那么请强调⽂字与你的 App 提供的实际内容相关。

图标中不要包括照⽚，屏幕截图或界⾯元素: 摄影细节在⼩尺⼨上很难看出。 屏幕截图对于 App 图标来讲太复杂了，一般不利于传达 App 的⽬的。图标中 的界⾯元素会令⼈误解和困惑。

不要使⽤苹果硬件产品的副本: 苹果产品受版权保护，⽆法在你的图标或图像 中被⼆次创做。⼀般来讲，避免复⽤设备的图形，由于硬件设计每每会频繁更 新迭代，⽽且会使你的图标看起来过期。

不要在界⾯处处放置 App 图标: 在 App ⾥发现⼀个图标被⽤于多种⽬的会让 ⼈困惑。反之，考虑使⽤图标的⾊彩⽅案。

在不一样的壁纸环境下测试你的图标: 你不能预期⽤户会为他们的主屏幕选择什 么样的壁纸，因此不要只是在⼀种深⾊和⼀种浅⾊的背景上测试你的图标。⽽ 是观察它在不一样的背景上如何表现。在有动态背景的真实设备上试⽤它， 由于 背景会随着设备移动⽽改变视⻆。

保持图标的四⻆是⽅形的: 系统会⾃动覆盖⼀个遮罩层让图标变成圆⻆。

App 图标属性 全部App图标应符合如下规格标准：

App 图标⼤⼩

每一个 App 必须提供⼀⼤⼀⼩两个图标，⼩图标会出如今主屏幕，而且当你 的 App 被安装后会被系统使⽤，⼤图标会被⽤在苹果商店中。

为不一样的设备提供不一样⼤⼩的图标: 确保你的 App 图标在你⽀持的全部设备上， 看起来都很棒。

使⽤ App Store 图标模拟您的⼩图标: 虽然 App Store 图标的使⽤⽅式与⼩型 图标不一样，但它仍然是你的 App 图标。⼤图标⼀般都和⼩图标外观相匹配，但 是能够稍微丰富⼀些，更有细节，由于不会有任何视觉效果叠加在它上⾯。

Spotlight、设置和通知图标 每一个 App 都应提供⼀个⼩图标，在 Spotlight(快速索引的功能)搜索，若是关 键词与 App 名称相符，iOS 会展现该图标。同时，须要设置的 App 一样应该 提供⼀个⼩图标⽤于在系统内置的设置 App 中展现。两个图标都应该清晰标识 你的 App——理想状况下，它们应该与 App 图标相符。若是你不能提供这些 图标，iOS 可能会缩⼩你的主图标，以便在这些场景中显示。