返回首页 Apple Watch 人机交互指南

UI 设计基础

UI 元素

图标和图片设计

图标与图片尺寸

每个应用都需要一个漂亮的、令人难忘的主屏幕图标,便于用户更好地识别应用程序。由于用户仅仅通过主屏幕上的图标识别应用程序,所以你的图标应当是易于辨认的,且与 iOS app 的图标类似,能够良好地传达应用程序的目的。

主屏幕图标

图标尺寸

主屏幕上的图标是圆形的。Table 20-1 列出了每个图标相应的直径(以像素为单位)和用途。所创建的图形资源都必须是 @2x 规格(注意:Xcode 中的图标尺寸是点)。

表格 20-1 Apple Watch 上为 WatchKit app 提供的图标尺寸

Asset Apple Watch (38mm) Apple Watch (42mm)
通知中心图标(Notification Center icon) 48 像素 55 像素
长通知图标(Long-Look notification icon) 80 像素 88 像素
主屏幕图标(Home Screen icon) 80 像素 80 像素
短通知图标(Short-Look icon) 172 像素 196 像素

除了 WatchKit app 使用的图标之外,运行在用户 iPhone 上的 Apple Watch app 也需要一个相应的图标。表格 20-2 列出了这些图标资源的尺寸(以像素为单位)。同样,必须根据给定的尺寸创建图片资源(注意:Xcode 中的图标尺寸是点)。

表格 20-2 iPhone 上 Apple Watch app 的图标尺寸

Asset @2x @3x
App 图标 58 像素 87 像素

创建图标时,必须以指定尺寸创建完整的方形图片。,系统会自动为其添加圆形遮罩。

对于所有的图片和图标来说,请使用 PNG 格式。,避免使用交叉处理的 PNG 图片。你可以使用带有索引颜色的 PNG 图片,以便节省图片文件中的空间。

图标和图片必须使用标准色深(bit depth)。标准色深(bit depth)为 24 位,也就是红、绿、蓝色各占用 8 位。图标中不允许包含 alpha channel。

主屏幕图标

Apple Watch 的主屏幕非常独特,但也让人感到熟悉。主屏幕上的图标类似于 iOS app,但是不附带文本。在如此小的尺寸上,图标必须清晰易于辨认,便于用户知道他们代表什么应用。如果 WatchKit app 的功能与其 iOS 上的 app 非常相似,那么图标要在视觉上保持一致。如果 WatchKit app 扮演的是辅助角色或者是 iOS app 的控制器时,图标可以相应地有所不同。

为了得到最佳效果,可以向专业平面设计师寻求帮助。经验丰富的平面设计师可以帮助你打造 app 的整体视觉风格,并将该其应用到所有的图标和图片上。

使用通用的用户易于辨识的意象。通常要避免使用次要的或者语义模糊不清的元素。例如 邮件图标通常会使用信封样式,而不是邮箱、邮递员的信件袋或者邮局标志。

保持简洁。特别要避免在图标中填塞大量不同的图形。尽可能找出某个能够捕捉应用精髓的单个元素,并能通过简单、独一无二的图形将其展示出来。注意请谨慎添加细节,如果图标的内容或形状过于复杂,那么在小尺寸屏幕上,这些细节会变得非常杂乱和模糊。

为应用程序的主旨创建一个抽象的阐释。通常以艺术的方式阐释现实会有更好的效果,这种方式可以强调出你希望用户关注的方面。

确保 Apple Watch app 的图标和 iOS app 相似。维持外观上的相似性能够帮助用户建立 WatchKit app 与 iOS app 之间的关联性。

为不同屏幕尺寸的 Apple Watch 创建不同尺寸的主屏幕 app 图标。确保图标在不同尺寸的 Apple Watch 设备上都能完美展示。关于设备尺寸规格,请参看 表格 20-1

上一篇: 菜单 下一篇: 菜单图片