ios设计规范(下)

917 阅读30分钟

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 可能会缩⼩你的主图标,以便在这些场景中显示。