Apple Watch人机交互指南:Icon与图片尺寸

Icon与图片尺寸

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

606.jpg

Icon尺寸

主屏幕上的icon是圆形的。Table 20-1列出了每个icon相应的直径和用途。所创建的图形资源都是@2x规格(注意:Xcode中的icon尺寸是point)。

Table 20-1Icon sizes for WatchKit app on Apple Watch

00.png

除了WatchKit app使用的icon外,运行在iPhone上的Apple Watch app也需要一个代表app的icon。Table 20-2列出了这些icon资源的尺寸(pixel)。根据给定的尺寸创建图片资源。(注意:Xcode中的icon尺寸是point)
Table 20-2 Icon sizes for use by Apple Watch app on iPhone

000.png

将你的icon创建为完整的方形图片,系统会自动为其添加圆形遮罩。

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

Icon和图片的标准色深(bit depth)为24位,也就是红、绿、蓝色各占用8位。您可以使用8-bit alpha channel图形,但不是必须的。

主屏幕上的icon

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

为了得到最佳效果,可以向专业平面设计师寻求帮助。经验丰富的平面设计师可以帮您的应用程序开发一个整体的视觉风格,并将该其应用到所有的icon和图片上。

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

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

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

确保Apple Watch app icon和iOS app相似。维持外观上的相似性可帮用户建立Watch app与iOS app之间的关联性。

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

----------------------------------------------------------------------------------------------------------------------

菜单图片

Force Touch菜单中的icon是模板图片,由图片的Alpha Channel定义生成的形状。图片中的颜色信息会被忽略。

使用菜单图片,图片的canvas尺寸应大于内容的尺寸,如Table 21-1所示。内容周围的额外空间可确保菜单icon边缘和内容之间有足够的边界。

Table 21-1 Canvas and content sizes for menu images

604.jpg

请使用适合设备尺寸和符号复杂度的线宽。符号所用线条的宽度最少要4 px,以防难以辨认。请参考Figure 21-1.

Figure 21-1 Glyph sizes for menu images

50.png

对于菜单图片,推荐使用PNG格式,并且要避免使用交叉处理的PNG图片。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值