人机界面设计最佳实践
本文摘录自 Apple 的人机界面指南
基础
App 图标
一个独特好记的图标可传达你所打造体验的用途和个性。
拥抱简洁
简单的图标往往更容易被用户理解和识别。找到可抓住 App 或游戏精髓的概念或元素,使之成为图标的焦点,并以简洁独特的方式表达出来。避免添加过多细节,因为可能会很难看清楚并使图标显得模糊不清,特别是在较小尺寸的情况下。优先使用简单的背景,将重点放在主要图像上,你不需要用内容填满整个图标。
创作可很好适应多平台的设计,以在每个平台上都让人感到熟悉亲切。
如果你的 App 或游戏不止在一个平台上运行,请为所有图标使用类似的图像和调色板,同时以适合每个平台的样式呈现它们。例如,在 iOS 和 watchOS 中,“邮件” App 图标使用精简的图形样式,在蓝色背景上描绘白色的信封;macOS 使用类似的蓝色背景,并给信封增加了深度和细节,让它的重量感和纹理更加逼真。
仅在文本是你体验或品牌不可或缺的组成部分时才包括文本
图标中的文本通常过小而不易看清,可能使图标显得杂乱,也不支持辅助功能或本地化。在部分环境中,App 名称显示在图标附近,因此在图标中显示名称有些累赘。虽然使用助记符(如 App 名称的首字母)可以帮助用户识别你的 App 或游戏,但请避免包括一些告诉用户如何使用它(如“观看”或“播放”)或者语境特定词(如“全新”或“iOS 版”)之类的非必要字词。
优先采用图形图像而不是照片,并避免在图标中重复出现用户界面组件。
照片充满了细节,以较小尺寸查看时效果不太好。比起使用照片,更好的方法是创建表示内容的图形,在其中强调你希望用户注意到的特征。同样,如果 App 具有用户认识的界面,请勿仅复制标准用户界面组件或在图标中使用 App 截屏。
如有需要,针对系统在“聚焦”搜索结果、“设置”和通知等位置显示的特定尺寸对图标进行优化。
对于 iOS、iPadOS 和 watchOS,你可以让 Xcode 从 1024×1024 个像素的 App Store 图标生成所有尺寸的图标,或者可以提供部分或所有各个图标尺寸的资源。对于 macOS 和 Apple tvOS,你需要提供所有的尺寸。如果要放弃系统生成的 App 图标版本并改为创建自己的版本,请确保在图标尺寸减小时图像仍清晰可见。例如,你不妨移除一些具体细节和不必要的特征,简化图像并突显主要特征。如需实施此类更改,请进行细微调整,使 App 图标在每种环境中都保持一致的视觉效果。
将图标设计成正方形全幅图像
在大多数平台上,系统会应用自动调整图标四角的遮罩,以符合平台的美学标准。例如,watchOS 会自动应用圆形遮罩。macOS 是个例外:虽然系统会为使用 Mac Catalyst 创建的 App 的对应图标应用圆角矩形外观,但你需要创建正确形状的 macOS App 图标。若要下载可助你为每个平台创建 App 图标的制作模板,请参阅 Apple 设计资源。
考虑提供备选 App 图标
在 iOS、iPadOS 和 Apple tvOS 中,用户可以选取图标的备选版本,这可加强他们与 App 或游戏之间的联系,并优化其使用体验。例如,一款体育 App 可为不同的球队提供不同的图标。确保你设计的每一个备选 App 图标都与你的内容和体验紧密相关;避免创建用户可能会误以为是另一款 App 图标的版本。当用户想切换到备选图标时,可访问你的 App 设置。
注意版权
不要以 Apple 硬件产品为设计原型。Apple 产品受版权保护,不能在你的 App 图标中再现。
平台考量因素
iOS、iPadOS
不要为你的“设置”图标添加叠层或边框。iOS 会为所有图标自动添加 1 个像素的描边,使它们在“设置”的白色背景下看起来效果不错。
macOS
在 macOS 中,App 图标共享一组通用的视觉属性,包括圆角矩形、正面透视、水平位置和统一投影。这些属性植根于 macOS 的设计语言中,在带来和谐用户体验的同时,展示了用户在 macOS 中期望的写实渲染风格。
考虑描绘熟悉的工具以传达用户可使用你的 App 做什么。若要为你 App 的使用目的提供情境,你可以通过图标背景来描绘工具的环境或它影响的对象。例如,“文本编辑”图标由一张横格纸与一根自动铅笔搭配而成,暗示实用的书写体验。创建了写实、细节丰富的工具图像后,让它悬浮在背景正上方,并稍微延伸至图标边界外,这样通常会产生不错的效果。如果要这样做,请确保工具在视觉上与背景保持统一,并且不会盖过圆角矩形。
如果在 App 图标中描绘真实物体,请使其看起来由实物材料制成并有实际的质量感。考虑模仿织物、玻璃、纸张和金属等物质的特性,以传达物体的重量和感觉。例如,Xcode App 图标中含有一个锤子,看起来由钢制锤头和聚合物手柄组成。
在图标设计模板中使用投影效果。App 图标模板包括系统定义的投影,有助于使你的 App 图标与其他 macOS 图标协调一致。
考虑使用内阴影和高光以增加清晰度和逼真感。例如,“邮件” App 图标使用阴影和高光来赋予信封真实感,并显示信封盖已略微打开。如果图标包括悬浮在背景上方的工具,如“文本编辑”或 Xcode,内阴影可以加强深度感,并且让工具看起来更真实。使用暗示光源面向图标的阴影和高光,处于中心偏上的位置并稍向下倾斜。
避免定义除圆角矩形以外形状的轮廓。在极少数情况下,你可能想要微调 App 图标的基本形状,但这样做有让创建的图标看起来不属于 macOS 的风险。如果必须更改形状,最好进行细微调整,以保持呈现圆角矩形轮廓。
将主要内容保持在图标网格边界框内;将所有内容保持在外边界框内。如果图标的主要内容延伸至图标网格边界框外,往往看起来像是错位了。如果在图标上叠加一个工具,那么让工具的顶部边缘与外边界框对齐,其底部边缘与内边界框对齐,这样会产生不错的效果(如下所示)。你可以使用网格来帮助在图标内放置项目,并确保圆形之类的居中内部元素采用与系统中其他图标一致的尺寸。
Apple tvOS
Apple tvOS 图标使用 2 至 5 层叠层,以在用户将它们调至焦点处时营造深度和动感。有关指南,请参阅分层图像。
使用合适的叠层分离。如果图标包括标志,请将标志与背景分离。如果图标包括文本,请将文本放在前面,这样在出现视差效果时它不会被其他叠层挡住。
谨慎使用渐变和阴影。背景渐变和晕影可能与视差效果产生冲突。渐变最好采用从顶部到底部、从浅到深的样式。采用锐利的硬边色调、融入到背景层中并且在 App 图标静止时不可见的阴影通常具有最佳的视觉效果。
利用不同的不透明度级别来增加深度感和生动感。创造性地使用不透明度可以使你的图标脱颖而出。例如,“照片”图标将其中心图案分隔成包含半透明部件的多个层,让设计更具有活力。
确保主屏幕图标符合安全区域规范。在聚焦和播放视差效果期间,系统可能会随图标的缩放和移动裁剪 App 图标边缘附近的内容。若要确保图标的内容不会被裁剪得过于紧凑,请按照 Apple tvOS App 图标尺寸中所示留出一些额外空间。
watchOS
watchOS App 图标为圆形,不会带有文本。
避免使用黑色的图标背景。调亮黑色背景或添加边框,使图标不会融入显示屏背景中。
品牌
App 和游戏通过彰显其独特的品牌标识,让用户一眼即可识别,在平台上得心应手地使用,并拥有一致的使用体验。
在展示的所有书面表达中使用你品牌独特的口吻
例如,你的品牌可以通过使用纯文字、偶尔的感叹号和表情符号以及简单的句子结构,传达出鼓励和乐观的态度。
考虑选用一种强调色
在大多数平台上,你可以指定系统应用于界面图标、按钮和文本等 App 元素的颜色。在 macOS 中,用户还可以选取自己的强调色,以供系统用于取代 App 指定的颜色。有关指南,请参阅颜色。
考虑使用一种自定义字体
如果你的品牌与特定的字体紧密相关,应确保它在所有尺寸下都清晰可辨,并支持粗体文本和更大字体等辅助功能。在标题和副标题中使用自定义字体,而在正文和说明中使用系统字体效果会很好,因为系统字体是为小尺寸下的最佳易读性而设计的。有关指南,请参阅字体排印。
确保品牌始终遵循内容
为仅用于展示品牌资产的元素预留屏幕空间意味着用户所关心内容的空间会变小。应以精炼且不突兀的方式整合品牌宣传,而不影响用户的使用体验。
通过一致地使用标准模式为用户提供舒适的体验
如果保持熟悉的行为,即使是高度风格化的界面也同样易于上手。例如,将用户界面组件放在预期位置,并使用标准符号来代表常见操作。
尽量避免在整个 App 或游戏中显示你的标志,除非它对提供上下文至关重要。
用户基本不需要被提醒他们正在使用哪个 App,通常更好的做法是利用该空间向用户提供有价值的信息和控件。
避免将启动屏幕用于品牌宣传
部分平台会使用启动屏幕来最大程度淡化启动等待体验,与此同时给 App 或游戏一点时间用于载入资源(有关指南,请参阅启动屏幕)。启动屏幕消失得太快以至于无法传达任何信息,但你可以考虑在用户开始体验时显示一个欢迎或用户引导界面,其中包含你的品牌内容。有关指南,请参阅用户引导。
遵守商标使用准则
你的 App 名称或图像中不能出现 Apple 商标。请参阅 Apple Trademark List 和 Guidelines for Using Apple Trademarks。
颜色
巧妙地使用颜色可以增强沟通感,体现品牌形象,提供视觉连续性,传达状态和反馈,以及帮助用户理解信息。
在非游戏类 App 中谨慎使用颜色。
在非游戏类 App 中,过度使用颜色会让信息传达变得不那么清晰并可能导致用户注意力分散。推荐使用适量的颜色来引起用户对重要信息的关注或显示界面各部分之间的关系。
避免使用同一种颜色来指代不同的东西
在整个界面中使用一致的颜色,特别是当它用于帮助传达状态或交互等信息时。例如,App 可能会使用蓝色来表示用户可以轻点文本以查看更多内容。为交互文本使用蓝色以外的颜色会令人感到困惑,即使 App 使用不依赖于颜色的视觉指示符(如 V 形或箭头图标)来传达交互。
确保 App 的颜色在浅色和深色外观模式下都协调
除了默认的浅色外观,平台还提供了深色备选方案(watchOS 是一个例外,它始终使用纯黑色背景)。深色模式为所有屏幕、视图、菜单和控件使用了颜色更深的调色盘并增强了虚化效果,这是一种动态融合前景与背景颜色的微妙效果,可使前景内容在颜色更深的背景上突出显示。系统颜色自动支持这两种外观;如果使用了自定义颜色,那么你需要同时提供浅色和深色方案。有关指南,请参阅深色模式。
在不同的光照条件下测试 App 的颜色方案
在阳光充足的户外或阴暗的光照条件下运行 App 时,颜色看起来会有所不同。调整颜色以在绝大多数使用场景中提供最佳的浏览体验。
在不同显示屏的设备上测试 App
例如,某些 iPhone、iPad 和 Mac 机型上的“原彩显示”显示屏使用环境光感应器自动调整显示屏的白点,以适应当前环境的光照条件。着重于阅读、照片、视频和游戏的 App 可以通过指定白点自适应风格来增强或减弱这种效果。在多个品牌的高清和 4K 电视上以及不同显示设置下测试 Apple tvOS App。你也可以在 Mac 上的“系统设置”>“显示器”中选取描述文件来使用不同的颜色描述文件测试 App 的外观,如 P3 和标准 RGB (sRGB)。
考虑插图和半透明如何影响附近的颜色
插图的变化有时需要改变附近的颜色以保持视觉连续性,并防止界面元素变得过于突出或平淡无奇。例如,“地图”在地图模式下会显示浅色方案,但在卫星模式下则会切换到深色方案。颜色位于工具栏等半透明元素后面或应用于这类元素时,看起来也会有所不同。
若 App 可让用户选取颜色,尽可能优先使用系统提供的颜色控件。
除了让用户存储一组他们可以从任意 App 访问的颜色外,使用内建颜色选择器还可提供一致的用户体验。
深色模式
深色模式是一种系统范围的外观设置,使用深色调色盘为低光环境提供舒适的浏览体验。
避免提供 App 特定的外观设置
App 特定的外观模式选项会额外增加用户的工作量,因为他们必须调整多项设置才能得到想要的外观。更糟糕的是,用户可能会觉得你的 App 是有问题的,因为 App 没有使用他们选择的系统范围外观。
确保 App 在两种外观模式下都能很好地呈现
除了使用其中一种模式之外,用户还可以选取“自动”外观设置,它会随着一天中条件的变化在浅色和深色外观之间切换,并且可能在 App 运行期间切换。
测试你的内容以确保在两种外观模式下都能保持舒适易读
例如,在“增强对比度”和“降低透明度”打开时(分别打开或同时打开)的深色模式下,你可能会发现深色背景上的深色文本不太容易辨认。你可能还会发现在深色模式下打开“增强对比度”会导致深色文本和深色背景之间的视觉对比度降低。虽然视力好的用户可能仍可以阅读较低对比度的文本,但此类文本对于很多用户而言是难以辨认的。
在极少数情况下,可以考虑在界面中只使用深色外观。
例如,支持沉浸式观看媒体的 App 始终使用深色外观可能很有意义,因为这种外观可以隐藏用户界面并帮助用户专注于媒体。
图标
作为图形资源的有效图标能以用户立即理解的方式表达单个概念。
打造可识别且高度精简的设计
细节过多可能会导致界面图标混乱或难以理解。尽量使用简单且通用的设计,让大多数用户可快速识别。一般情况下,当图标使用熟悉的视觉隐喻来直接反映其所发起的操作或所代表的内容时,效果最佳。
保持 App 中所有界面图标间的视觉一致性
无论仅使用自定义图标还是将自定义图标和系统提供的图标混合使用,你 App 中的所有界面图标都需要在大小、细节程度、线条粗细和透视上保持一致。根据图标的视重,你可能需要调整其尺寸以确保其在视觉上与其他图标显示一致。
通常使界面图标与相邻文本在线条粗细上相一致
在这两者中使用粗细相同的线条可让内容在外观和强调程度上保持一致,除非你想要强调图标或文本。
如有必要,可为自定义界面图标添加内边距以实现视觉对齐。
某些图标(尤其是非对称图标)按几何图形(而非按视觉效果)居中时可能会看起来不平衡。
仅在必要时才提供界面图标的已选状态版本
控件和区域会自动指示所选内容,因此无需为用于此处的图标提供已选或未选外观。例如,边栏、iOS 标签栏和 macOS 工具栏均通过应用 App 的强调色或添加背景外观来传达选择状态。
打造具有包容性的设计
在描绘人物图案时优先略去不必要的特定性别提及,并确保你的图标可被广大用户接纳和理解。
在设计中仅包括对表达含义必要的文本
例如,在代表文本格式化的界面图标中使用字符可能是最直接传达概念的方式。如果需要在图标中显示单个字符,请确保将其本地化。如果需要表明一段文本,请在设计中使用抽象表示,并包括图标的翻转版本以适用于从右到左的阅读环境。
如果创建自定义的界面图标,请使用 PDF 或 SVG 等矢量格式。
系统为高分辨率显示器自动缩放基于矢量的界面图标,因此无需提供高分辨率版本。相反,用于 App 图标和包括阴影、纹理和高亮标记等效果的其他图像的 PNG 则不支持缩放,因此必须为每个基于 PNG 的界面图标提供多个版本。或者,你可以创建自定义的 SF 符号并指定比例,以确保符号的重点与相邻文本相匹配。有关指南,请参阅 SF 符号。
为自定义的界面图标提供备选文本标签
备选文本标签(或辅助功能描述)是不可见的,但可让“旁白”以语音方式描述屏幕内容,从而使视障用户的导览更简单。
避免使用指定硬件产品的模型
硬件设计往往会频繁变化,可能会使界面图标和其他内容显得过时。如果必须显示 Apple 硬件,请仅使用 Apple 设计资源中的可用图像或代表各种 Apple 产品的 SF 符号。
图像
为了确保插图在所有受支持设备上保持美观,请了解系统如何在屏幕上显示内容,以及如何以适当的缩放系数呈现艺术感。
在所有受支持设备上为 App 中的所有插图提供高分辨率图像
你可以通过将每个图像中的像素量乘以特定的缩放系数来实现。将每个图像添加到项目的素材目录时,通过在其文件名后面添加“@1x”、“@2x”或“@3x”来确认其缩放系数。请参考使用以下值。
平台 | 缩放系数 |
---|---|
iOS | @2x 和 @3x |
iPadOS | @2x |
macOS、Apple tvOS | @1x 和 @2x |
watchOS | @2x |
一般来说,以最低分辨率设计图像,并将其放大以创建高分辨率素材。
使用可缩放的矢量化形状时,你不妨将控制点放在整数值上,以便它们在 1x 下整齐对齐。这样放置可让点在更高的分辨率下保持与光栅网格整齐对齐,因为 2x 和 3x 是 1x 的倍数。相反,有些时候你不想让形状与光栅网格完美对齐;例如,将一个圆与网格对齐会使它在顶部和底部看起来变平了。
每个图像包含一个颜色描述文件。
颜色描述文件可帮助确保 App 的颜色在不同显示器上按预期显示。
始终在一系列实际设备上测试图像
设计时看起来很棒的图像在各种设备上查看时可能会被像素化、拉伸或压缩。
布局
使用适配各种环境的一致布局可帮你打造更友好的体验,还有助于用户在其所有设备上享用喜爱的 App 和游戏。
布局指南定义了一个矩形区域,可帮你在屏幕上放置、对齐和间隔内容。系统包括预定义的布局指南,可让你轻松在内容周围应用标准外边距,以及限制文本宽度以优化可读性。你还可以自定义布局指南。
安全区定义了视图内不会被导航栏、标签页栏、工具栏或者窗口/场景可能提供的其他视图遮挡的区。安全区对于避开设备的交互和显示特性(如 iPhone 上的灵动岛或部分 Mac 机型上的相机防护罩)而言必不可少。
在 iOS、iPadOS 和 Apple tvOS 中,系统定义了一系列特征以描述可能影响 App 在屏幕上显示方式的各种设备环境。通过 SwiftUI 或“自动布局”,你可以确保界面动态适配各种各样的特征和环境,包括:
-
不同的设备屏幕尺寸、分辨率和色彩空间
-
不同的设备方向(竖排/横排)
-
分屏浏览
-
iPad 上的外接显示器支持、缩放显示和多任务处理模式
-
动态字体文字大小更改
-
基于区域设置的国际化功能(如从左到右/从右到左布局方向、日期/时间/数字格式调整、字体变体和文本长度)
-
系统特性的可用性
设计前后一致的布局,以完美地适应上下文的变化,同时尽可能显示相同的内容。
用户希望你打造的体验在其旋转设备、调整窗口大小、添加其他显示器或切换到不同设备时运行良好并且使用顺手。遵循系统定义的安全区、外边距和指南,并指定布局修饰符来微调层级结构中视图的放置,从而确保界面的高适配性。
遵循每个平台中的关键显示和系统特性
安全区可帮你适应各种设备上的圆角半径和传感器盖子等特性,并避免干扰交互式系统元素,如 iPhone 上的灵动岛以及 iPhone 和 iPad 上的主屏幕指示器和 App 切换器。安全区还可帮你考虑栏等交互式组件,在大小变化时动态调整内容的位置。
使用放置位置来传达相对重要性
一般而言,将主要项目放在屏幕或窗口的上半部分,位于靠近前沿的位置。无论查看屏幕还是使用“旁白”等屏幕阅读器,用户通常会从此区开始。
留出足够空间来突出重要信息
用户希望立即看到最重要的信息,因此你不应在屏幕或窗口中塞满不重要的细节。用户可通过滚动来轻松访问次要信息。
创建视觉分组来帮助用户找到想要的信息
例如,你可以使用负空间、背景形状、颜色、材质或分隔线来在不同的区中显示相关元素和信息。
使用对齐来让视觉扫描更轻松,并传达出条理性和层次感。
对齐可让 App 看起来整洁有序,帮助用户在滚动期间更加专注、更容易找到信息。缩进和对齐还可帮助用户直观看清信息层级结构。
注意宽高比
不同的屏幕尺寸可能宽高比也不同,因而导致插图看起来被裁剪、以信箱模式(上下加框)或邮筒模式(左右加框)显示。出现这种情况时,请勿更改插图的宽高比,而应缩放以填充屏幕,以在所有尺寸的显示屏上保持重要的视觉内容可见。
事先考虑文字大小变化
用户希望在选取不同文字大小时,大多数 App 都能响应。若要适应文字大小变化,你可能需要调整布局。有关在你的 App 中显示文本的指南,请参阅字体排印。
如有可能,考虑显示离屏元素的一部分以暗示有隐藏的内容。
对于内容无法在单个屏幕中完全显示的大型集合,你不妨显示离屏项目的一部分来暗示有更多内容。
在触控屏上,为交互式组件提供足够大的触控目标。
为所有控件保留 44x44 点的最小可轻点区。
在多台设备上使用不同的方向、本地化语言和文字大小预览 App。
虽然通常最好在实际设备上预览广色域等特性,但你可以使用 Xcode Simulator 检查截断或其他布局问题。例如,如果你的 iOS App 支持横排模式,你可以使用 Simulator 确保无论设备向左还是向右旋转,布局看起来都很美观。
字体排印
除了确保文本清晰易读外,你选择的字体排印方式还可协助你阐明信息层级结构、传达重要内容并宣传你的品牌。
尽量采用大多数用户都可轻松阅读的最小字号
像素密度和亮度等设备显示屏的差异可能影响合适的最小字号。而像阅读者距离显示屏的远近、视力好坏、是否处于运动状态以及环境光条件等其他因素都会影响易读性。如果支持“动态字体”这项功能(可让用户在 iOS、iPadOS、Apple tvOS 和 watchOS 中选取屏幕上文本字号),当用户将文本调整为适合自己的字号时,你的 App 或游戏可适当响应。
根据需要调整字体粗细、字号和颜色以强调重要信息并帮助用户看清信息层次。
当用户调整文本字号时,确保维持文本元素的相对层次并在视觉上进行区分。
尽量减少在界面中使用的字样数量
混用太多种不同的字样可能会让信息层级结构变得模糊,并妨碍阅读。
测试不同环境下的易读性
例如,除了调整文本字号外,用户还可能在户外强光环境下查看内容、在运动时扫视内容或者隔一定距离查看内容。如果测试表明部分文本难以阅读,应考虑修改文本或背景颜色以增强对比度、使用更大的字号或者使用像系统字体这样旨在改善易读性的字样。
一般而言,避免采用较细字体以帮助保持可读性。
例如,如果使用系统提供的字体,应使用“常规体”、“中黑体”、“中粗体”或“粗体”,避免使用“极细体”、“纤细体”和“细体”,因为尤其当文本较小时,这类粗细的字体会难以看清。
响应文本字号更改时,优先显示重要内容。
并非所有内容都同等重要。当用户选择更大的文本字号时,他们通常想让关注的内容更易阅读,而不会总是想要放大屏幕上的每个字词。例如,当用户选择较大的辅助功能文本字号时,“邮件”会以较大的字号显示邮件的主题和正文,而以更小的字号显示日期和发件人等不那么重要的文本。
平台
iOS
出色的 iPhone 使用体验整合了用户最看重的平台和设备功能。为使你的设计让 iOS 用户感到自在,请优先考虑以下方法来整合这些特性和功能。
- 限制屏幕控件的数量,同时让用户以最少的交互来发现次要细节和操作,从而专注于主要任务和内容。
- 无缝适配外观变化,如设备方向、深色模式和动态字体,让用户选择最适合他们的配置。
- 支持与用户通常手持设备的方式相适应的交互。例如,将控件放在显示屏中间或底部区域时,用户往往可以更轻易地触及,因此让用户轻扫以返回或在列表行中发起操作显得尤为重要。
- 在用户允许的情况下,整合可通过平台功能获取的信息,无需用户输入数据,以增强使用体验。例如,你可能会接受付款,通过生物识别认证提供安全性,或者提供使用设备位置的功能。
iPadOS
出色的 iPad 使用体验整合了用户最看重的平台和设备功能。为使你的设计让 iPadOS 用户感到自在,请优先考虑以下方法来整合这些特性和功能。
-
利用大屏优势突显用户关心的内容,尽量减少模态界面和全屏过渡动画的使用,并将屏幕控件放在用户容易触及但不妨碍使用的地方。
-
利用视距和输入模式来帮你确定屏幕显示内容的大小和密度。
-
让用户使用多点触控手势、实体键盘或触控板或者 Apple Pencil,并考虑支持组合多种输入模式的独特交互方式。
-
无缝适配外观变化,如设备方向、多任务模式、深色模式和动态字体,并轻松过渡到在 macOS 中运行,让用户选择最适合他们的配置。
macOS
出色的 Mac 使用体验整合了用户最看重的平台和设备功能。为使你的设计让 macOS 用户感到自在,请优先考虑以下方法来整合这些特性和功能。
-
利用大屏优势,通过更少的嵌套层并减少对模态的依赖来呈现更多内容,同时维持合理的信息密度,让用户轻松看到想要的内容。
-
让用户隐藏、显示、移动窗口和调整其大小来适应他们的工作方式和设备配置,并支持全屏幕模式以帮助用户保持专注,不受打扰。
-
使用菜单栏,让用户轻松访问在你的 App 中执行各种操作所需的全部命令。
-
帮助用户充分利用高精准度的输入模式来执行像素级选择和编辑。
-
处理键盘快捷键以帮助用户更快速操作和使用纯键盘工作方式。
-
支持个性化,让用户自定义工具栏、配置窗口以显示最常用视图,以及选取要在界面中看到的颜色和字体。
Apple tvOS
出色的 Apple tvOS 使用体验整合了用户最看重的平台和设备功能。为使你的设计让 Apple tvOS 用户感到自在,请优先考虑以下方法来整合这些特性和功能。
-
让用户在 Apple TV Remote 上使用流畅、熟悉的手势进行强大而轻松的交互。
-
兼容 Apple tvOS 聚焦系统,用户在屏幕项目之间移动时,系统可使用柔和色调高亮标记并展开项目,帮助用户始终了解要进行的操作和所在的位置。
-
提供精美的边到边图片、细致流畅的动画和动人心弦的音频,使用户在房间各个位置都能沉浸于清晰易见、引人入胜的影院般丰富体验。
-
增强多用户支持,让登录操作便捷并减少登录频次,处理共享登录以及当用户更改当前观看者时自动切换个人档案。
watchOS
出色的 Apple Watch 使用体验目标明确且有针对性,并且整合了用户最看重的平台和设备功能。为使你的设计让 watchOS 用户感到自在,请优先考虑以下方法来整合这些特性和功能。
-
支持可快速一览的单屏交互方式,简洁明了地推送重要信息,并帮助用户通过一两个简单手势执行针对性操作。
-
尽量减少 App 导航中的层级结构深度,并使用数码表冠提供垂直导航,以便在屏幕间滚动或切换。
-
主动预测用户的需求,并使用设备端数据提供当前相关或即将相关的可操作内容,以使体验个性化。
-
使用复杂功能直接在表盘上提供相关数据和图形(可以是动态数据和图形),让用户每次抬腕即可在表盘上进行查看,还可轻点它们以直接进入你的 App。
-
使用通知推送高价值的即时信息,并让用户无需打开 App 即可执行重要操作。
-
使用颜色等背景内容传达有用的支持信息,并使用材质来说明层级结构和位置感。
-
支持 Siri 以帮助用户在 Siri 表盘上访问快捷指令。
-
将你的 App 设计为独立运行,并提供额外的详细信息和功能来丰富通知和复杂功能。
模式
启动
平台需要时提供启动屏幕
在 iOS、iPadOS 和 Apple tvOS 中,系统会在 App 或游戏启动时显示启动屏幕,然后迅速替换为首屏,让用户享受畅快的使用体验。理想的启动屏幕实际对用户不可见,因为它只是为初始内容提供上下文。watchOS 和 macOS App 不需要启动屏幕。
仅在必要时请求初始设置信息
在用户启动 App 或游戏后尽快帮助他们完成某些操作,成功后再请求额外信息。
尽可能从现有设备设置和默认设置中获取设置信息。如果用户需要登录才能执行有用操作,请考虑提供“通过 Apple 登录”,或者借助 iCloud 等同步服务。
在显示补充信息、请求评论或许可之前,先给用户一些时间享受 App。
首次启动时,用户想要直接开始体验;他们不希望在获得使用体验感之前被要求阅读长篇内容、提供评分或授权访问他们的隐私数据。若要简化首次启动,请考虑:
-
让 App Store 显示协议和免责声明,以便用户可以在下载 App 之前阅读
-
在用户充分体验过 App 后请求评分和评论,以便准确评分并提供潜在客户可能会觉得有用的实质性评论(有关指南,请参阅评分和评论)
-
如果可能,在用户表示有兴趣共享其隐私数据后再请求许可。
App 重新启动后恢复之前的状态,以便用户可以从离开的位置继续。
避免让用户在 App 或游戏中回溯步骤来返回之前的位置。尽可能恢复之前状态的细枝末节。例如,将视图滚动到用户最近查看的位置,并显示与用户离开时相同状态和位置的窗口。
启动屏幕
启动屏幕并非用户引导体验或启动画面,也不用于艺术表达。启动屏幕的唯一功能在于增强对快速启动且立即可用这种体验的感知。
并非每个平台都需要启动屏幕。
-
iOS、iPadOS 和 Apple tvOS App 必须提供启动屏幕。
-
watchOS 和 macOS App 则不需要启动屏幕。
设计一个与 App 首屏几乎相同的启动屏幕**
如果在 App 启动完毕时加入不协调的元素,用户可能会在 App 的启动屏幕和首屏之间有不愉快的观感。此外,还应确保启动屏幕匹配设备的当前外观,如深色模式。
避免在启动屏幕中包含文本
由于启动屏幕中的内容不会改变,所以显示的任何文本都不会被本地化。
淡化启动体验
设计平滑过渡到 App 或游戏首屏的启动屏幕;避免设计延缓用户立即开始体验的启动屏幕。
不打广告
启动屏幕不用于品牌宣传。避免创建看起来像启动画面或“关于”窗口的屏幕,不要包含标志或其他品牌元素,除非它们是 App 首屏的固定部分。如果游戏或其他沉浸式 App 在过渡到首屏前显示纯色,请创建只显示该纯色的启动屏幕。
用户引导
理想情况下,用户只需通过体验即可理解你的 App 或游戏,但如果需要用户引导,请提供快速且有趣的可选流程。
设计简要有趣的体验,且无需用户记忆或提供大量信息。
当你通过快速愉悦的方式引导用户熟悉 App 的主要用途时,他们会更容易喜欢这种体验并记住所学内容。如果你的 App 或游戏需要访问隐私数据或资源才能开始执行操作,不妨在用户引导流程期间发起由系统提供的许可请求,这样你就有机会向用户展示 App 需要其信息的原因及其提供后的益处。请确保直到情况需要提供更多信息时再发起请求。
优先通过交互进行指导
当用户可实际执行任务并与内容交互,而非只查看指导性材料时,他们往往会学得更好。此外,交互式的用户引导体验还有助于为用户营造一种直接入门并开始体验你的 App 或游戏的感觉。
考虑在主要体验中整合简要的用户引导元素,以替代单独的用户引导流程。
例如,在用户首次激活功能时,你可以提供简明的功能描述,并显示指向下一个步骤的视觉提示。在实践中学习的效果通常更好,因此在用户尝试新内容时,提供具有指导性的初次反馈可有所帮助。
如果提供教程,请让用户能够跳过。
如果用户在首次启动 App 时跳过教程,不要让它在之后启动时再次出现,但确保用户在以后想要查看时可轻松找到它。例如,不妨在 App 或游戏内的帮助、账户或设置区域提供该教程。
避免在用户引导流程内显示许可条款详细信息
让 App Store 展示协议和免责声明,以便用户可在下载 App 前进行阅读。如果必须要在 App 内包括这些条款,请以和谐的方式进行整合,避免影响用户体验。