快好知 kuaihz订阅观点

 

APPLE WATCH人机交互指南之图标与图片设计

Apple Watch 人机交互指南对于除了对交互和UI元素进行了详细的说明之外,还单独开辟了一章来规范图标和图片的使用,这个部分的内容并不多,但是非常重要。一套系统的规范可靠与否,往往都是从这些细节的要求中体现出来的。

1、图标图像尺寸

每个应该用都需要有一颗美观独特且便于记忆的主屏图标。因为在主屏屏幕上,辨识应用的全部手段就是它的图标,你的图标应该是可识别的且与你iOS应用图标相似,因为它仍然传达你的应用的目标。

图标尺寸

主屏图标是正圆形,表20-1列出了每颗图标适宜的直径及用途。创建图标时使用全出血正方形图像,其边长为下表中给定的直径。系统会自动创建圆形遮罩。

所有的图像资源应该都是@2x的图像。不需要在你的Watch应用程序包中包含非@2x资源。

所有的图像图标推荐使用PNG格式。不要使用交错PNG。

图像图标的标准位深是24位——也就是红、绿、蓝各8位。你也可以包含8位透明通道,但是这不是必须的。你还可以带有索引颜色的PNG图像来节约图像所占空间。

主屏图标

Apple Watch的主屏图标是独一无二但令人熟悉的。主屏图标与其iOS图标相呼应,但没有相应文字。在如此之小的空间中,这些图标需要足够清晰,才能识别它们所代表的应用。Apple Watch应用在功能上与其兄弟iOS app非常相似,因此图标也应在视觉上保持一致。但是当Watch应用作为iOS应用的补充或遥控器时,图标设计也会有所不同。

为了获得最佳效果,尽量找到专业平面设计师的帮助。一位有经验的平面设计师可以帮你制定应用的整体视觉风格,并将其应用在所有图像图标中。

使用人们很容易识别的通用标示。一般情况下,避免二元的或令人费解的元素。比如,邮件图标使用信封,而不是乡村邮箱、邮包或邮局图标

拥抱简洁。尤其是避免在图表中塞入大量图像。找到捕捉到你应用本质的单一元素,并把这一元素表达为简单、独特的形状。谨慎添加细节。如果图标内容或形状过于复杂,那么细节就会混在一起,在小尺寸中看起来会浑浊不清。

为你应用的核心思想创建抽象解释。通常情况下,最好用艺术的方式解释现实,因为这样可以让用户注意到你希望他们注意的方面。

让你的图标与你iOS应用的图标相似。保持相似的外观可以帮助用户把你的Watch应用于iOS应用联系起来。

为两种Apple Watch显示尺寸创建不同尺寸的主屏图标。你需要确保你的图标在两种Apple Watch设备尺寸中都能良好显示。具体的设备及尺寸请参见表20-1。

2、菜单图像

用力点击菜单的图标是模板图像图像中包含透明通道,形成最终的形状。图像中的颜色信息被忽视。

菜单图像的画布尺寸比其内容大。你内容周围的额外区域确保菜单图标边界和你的内容之间有足够的距离。

在设计你菜单图像中的形状时,根据设备尺寸和图形复杂程度使用合适的线宽。线宽最少为4像素,以免模糊。

菜单图像推荐使用PNG格式。避免使用交错PNG。

结语

到这里,Apple Watch 人机交互指南就告一段落了。虽然指南对很多设计项目作出了明确的指示,但是给予设计师的设计空间还是非常大的。接下来,就看你的了,设计师。

原文来自:优设

译文地址:Developer.apple

优设网译者:@阿布

 

APPLE WATCH人机交互指南系列文章

apple watch 人机交互指南UI设计基础(1)

APPLE WATCH人机交互指南之UI设计基础(2)

APPLE WATCH人机交互指南之图标与图片设计

Apple Watch界面设计规范 – 模态表单

APPLE WATCH人机交互指南之UI元素设计

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:人机  人机词条  交互  交互词条  图标  图标词条  指南  指南词条  设计  设计词条  
交互

 交互设计师在未来的5种转型方式

每个设计师在工作的不同阶段或多或少都会有一些迷茫:如何提升设计的专业度?如何提高设计师在公司里的话语权?是否需要转型?如何转型?甚至怀疑自已不适合做设计等其它困...(展开)

交互

 Pivot,信息组织的梦想之窗

 以图像处理见长的微软Live实验室,最近发布了一款新作:Pivot。装完启动后的第一印象就是一款浏览器,和IE、FF、Chrome又不太一样的是,Pivot精...(展开)