iOS12界面设计指南之扩展功能(Extensions)–消息(Messaging)


Notice: Undefined variable: class_attr in /data/wwwroot/default/wordpress/wp-content/plugins/jquery-image-lazy-loading/jq_img_lazy_load.php on line 57

Notice: Undefined variable: class_attr in /data/wwwroot/default/wordpress/wp-content/plugins/jquery-image-lazy-loading/jq_img_lazy_load.php on line 57

Notice: Undefined variable: class_attr in /data/wwwroot/default/wordpress/wp-content/plugins/jquery-image-lazy-loading/jq_img_lazy_load.php on line 57

Notice: Undefined variable: class_attr in /data/wwwroot/default/wordpress/wp-content/plugins/jquery-image-lazy-loading/jq_img_lazy_load.php on line 57

引自《iOS12界面交互设计规范(iOS 12 Human Interface Guidelines)》

 

iMessage应用程序Sticker包是消息传递扩展,可让人们与朋友分享内容,表达沟通并分享协作体验。

iMessage应用程序

iMessage应用程序在消息对话的上下文中提供交互式体验。iMessage应用程序使人们能够共享数据和媒体,协作共享任务以及彼此玩游戏。

设计直观的界面。如果您的iMessage应用程序提供静态内容(如文本,照片或视频),请确保人们可以轻松浏览并选择要插入对话的项目。如果您的应用是交互式的,例如多人游戏板或协作外卖订单,请确保其功能有用且易于理解。

提供重点内容。为了清晰和易用,每个消息传递扩展应该只有一个焦点。例如,不要尝试设计一个结合了贴纸和搭车的应用程序。

提供有趣的协作体验。iMessage应用程序通常用于两个或更多人之间快节奏的非正式对话。创造性地利用这种环境,通过共享,编辑或扩充内容来鼓励来回参与。如果所有各方一起使用该应用程序,则实时进行内容更新。

突出有趣的iOS应用内容。通过在消息空间中显示其内容来扩展iOS应用程序的功能。想一想人们可能想要分享哪些类型的信息,以及他们如何在活跃的对话环境中与您的应用进行互动。

嵌入内容以避免裁剪。您的应用内容以带圆角的消息气泡呈现,因此请勿在角落中放置必要信息。

区分紧凑和扩展视图。您的应用会显示在对话下方的简洁视图中。此视图应在视觉上区分您的应用与其他应用,并提供对常用功能的访问。用户还可以在展开视图中打开您的应用,以访问高级功能或立即查看更多选项。请注意,在紧凑视图中不允许水平滚动。

仅允许在展开视图中编辑文本。紧凑视图与键盘的高度大致相同。要确保用户可以看到他们正在编辑的内容,请仅在展开的视图中输入文本。

贴纸

贴纸为人们在没有打字或使用表情符号的消息对话中表达自己提供了一种有趣,引人入胜的方式。贴纸是可以发送或放置在消息,照片和其他贴纸上的图像或动画,以增加重点和沟通情感。

设计表现力。人们使用贴纸来直观地传达情绪和反应。努力提供与情感层面的人联系的贴纸。考虑合并图像,单词和短语以向对话添加新维度。

全球思考。消息传递是一种通用的通信形式。瞄准具有广泛国际吸引力的贴纸。

使用描述性图像名称或提供替代文本标签。虽然它们在屏幕上不可见,但图像名称和替代文本标签让VoiceOver可以听到描述贴纸,使视力障碍人士更容易导航。

通过动画增添活力。虽然贴纸可以是静态图像,但动画贴纸是在谈话中传递能量的好方法。务必使用足够高的帧速率来保持运动流体。

测试放置的可能性 用户可以在对话的某些部分上缩放,旋转和放置贴纸。无论位置或大小如何,请确保您的贴纸在不同颜色和图像上清晰可辨。

考虑使用鲜艳的颜色和透明度。鲜艳的色彩为对话增添了丰富和刺激。透明度允许将贴纸有意义地放置在消息,照片和其他贴纸上。

贴纸尺码

消息支持三种贴纸大小,这些大小在基于网格的浏览器中显示。选择最适合您内容的尺寸,并准备所有尺寸的贴纸。

小尺寸

300px×300px

常规尺寸

408px×408px

大尺寸

618px×618px

适当缩放贴纸。尽管如有必要,消息会将较大的贴纸缩小,但最好提供预定标贴以获得最佳质量和性能。

请注意文件大小限制。为了提高效率,每个贴纸不得超过500KB。请注意,Xcode使用24位调色板保存PNG动画,这可能导致大于预期的文件大小。

贴纸格式

消息支持以下文件格式的贴纸

格式推荐的支持透明度支持动画
PNG
8位透明度
APNG
8位透明度
GIF
单色透明度
JPEG

iMessage应用程序和贴纸包图标

与iOS应用程序一样,iMessage应用程序和贴纸包需要可识别的应用程序图标。

保持背景简单并提供单一焦点。设计一个带有单个中心点的图标,一目了然地捕捉注意力。包括一个不会压倒其他图标的简单背景。

保持图标角落方块。系统应用自动围绕图标角的蒙版。

提供不同大小的图标。您的图标显示在App Store,消息,通知和设置中。为确保您的图标在任何环境和任何设备上都看起来很棒,您可以提供以下尺寸的图标变体:

 @ 2倍@ 3倍
iMessage应用程序图标148px×110px-
134px×100px -
120px×90px 180px×135px
64px×48px 96px×72px
54px×40px 81px×60px
设置图标 58px×58px 87px×87px
App Store(iOS 10之前) 1024px×1024px

有关设计优秀应用程序图标的其他指导,其中大部分可应用于iMessage应用程序和贴纸包图标,请参阅应用程序图标

要下载iMessage应用程序和贴纸包图标Photoshop模板,请参阅参考资料

有关开发人员指南,请参阅消息框架