iOS14小部件设计指南,ios13系统小组件,ios13时间表-ESG跨境

iOS14小部件设计指南,ios13系统小组件,ios13时间表

IOS14 Widget设计指南

iOS14 Widget设计指南

在iOS 14及更高版本中，独特漂亮的小部件不仅可以提供有用的信息，还可以让用户个性化主屏幕。通过该功能，可以有效展示产品内容，提高App活跃度和留存率。这一周，我们将重点讨论如何设计漂亮的widgets ~

1.通过颜色、布局和图像传达你的品牌。

如果您需要在小部件中显示徽标、文本标记或应用程序图标，请以不干扰内容的方式集成它们。在某些情况下(比如在iPhone主屏幕上和编辑模式下)，系统会自动在widget下显示你的应用名称，所以你不需要在内容中重复这个名称。

2.这个小部件设置了一个舒适的信息密度。

当内容显得稀疏时，小部件可能看起来是多余的；当内容过于密集时，小部件将无法浏览。如果您想要包含大量信息，请避免将小部件做成难以解析的项目拼贴。寻求组织内容的方法，使人们可以立即抓住关键部分，并在更长的时间内查看相关细节。您还可以考虑创建一个更大的小部件，并寻找一个可以用图形替换文本而又不失清晰的位置。

3.明智地使用颜色，并支持黑暗模式。

丰富而美丽的颜色会吸引用户的注意力，正确使用颜色可以增强小工具的外观，而不会与其内容形成竞争。小部件应该在明亮和黑暗的外观看起来都很棒。通常，避免在浅色背景上显示深色文本以显示深色，或者在浅色背景上显示浅色文本以显示浅色。当您对文本和背景使用语义系统颜色时，这些颜色将动态适应当前外观。您还可以通过在资产目录中放置颜色变化来支持不同的外观。

4.考虑使用SF Pro

使用系统字体可以帮助您的小部件轻松显示各种粗细、风格和大小的漂亮文本。如果需要使用自定义字体，请慎重考虑使用。在小部件中对大文本使用自定义字体，对小文本使用SF Pro通常效果很好。总是在小部件中使用文本元素，以确保文本缩放良好。特别是，不要栅格化文本这将阻止VoiceOver(iPhone辅助功能)朗读您的内容。考虑到SF符号的使用，SF符号可以帮助您使用SF Pro将符号与文本对齐和缩放。

5.设计一个真实的预览显示在部件库中。

突出小部件的外观和功能有助于人们做出明智的决定，并鼓励他们添加小部件。您可以在微件预览中显示真实数据，但如果数据生成或加载时间过长，请显示真实的模拟数据。

6.设计占位符内容，帮助人们识别您的小部件。

小部件在加载数据时显示占位符内容。通过将UI的静态部分与代表实际内容的半透明形状相结合，可以创建有效的预览。例如，您可以使用不同宽度的矩形建议线来标记文本行，并使用圆形或正方形来代替字形和图像。

7.为你的部件写一个简明的描述。

微件库中显示的描述可以帮助人们理解每个微件的功能。从动作动词开始通常效果很好；例如，“查看当前天气状况和位置预报”或“跟踪即将到来的事件和会议”。避免使用不必要的短语来指代小部件本身，例如“这个小部件显示了...”，“使用此小部件……”或者“添加此小部件”。

8.适应不同的屏幕尺寸

小工具可以缩放，以适应不同设备和屏幕区域的屏幕大小。除了使用SF Pro和SF符号，您还可以通过提供适当大小的内容来确保小部件在每个设备上都很好看。

调整背景图像的大小，以匹配最大的部件大小。确保您的图像在最大的窗口小部件尺寸下看起来不错，并将其缩小以较小的尺寸显示。使用下面列出的值作为指南。

9.使内容的角度半径与小部件的角度半径一致。

为了确保您的内容在小部件的圆角内看起来不错，请使用SwiftUI容器来应用正确的圆角半径。

请使用标准页边距，以确保您的内容清晰易读。标准边距宽度为16磅。

如果您的小部件显示文本、字形和图形等内容，请使用标准边距来避免边缘拥挤和外观混乱。如果使用背景形状来创建可视内容分组或显示按钮背景，可能需要使用窄边距。窄边距(宽度为8磅)也有助于使包含信息的图形更易于人们阅读。

特别声明：以上文章内容仅代表作者本人观点，不代表ESG跨境电商观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与ESG跨境电商联系。