必读~苹果iOS小组件Widget设计终极完全指南 | 您所在的位置:网站首页 › 苹果修改小组件样式 › 必读~苹果iOS小组件Widget设计终极完全指南 |
![]() 静电说:今天特别为小伙伴们准备了这篇有知识点有实例操作的Widget终极设计指南,干货真的很多,千万不要错过。 在本指南中,我将介绍为iOS,macOS和iPadOS设计小部件所需的所有知识。Apple的人机界面指南构成了本指南的基础。我将以Twitter和Duolingo为例来讲解。 ![]() 随着iOS 14和iPhone 12全系列的发售,小部件成为最令人期待的功能之一。它重新定义了您的应用如何向用户显示新信息。小部件是应用程序的扩展,您可以显示重要信息,而无需用户打开您的应用程序。(静电注:如果从产品角度上来说,无需用户打开应用对数据来说并不好,也就是你的应用的打开率可能会降低,这是个矛盾点。) 001.基础知识 小部件应帮助用户避免执行重复操作。您的小部件需要具有以下特征: 信息性:如果它只是一个较大的图标,那还是不要设计毕竟好。小部件的作用是,使用它可以将信息传递给用户,从而增加价值。个人:提供有助于与用户建立联系的个人信息。“照片”小部件是一个很好的示例,说明了小部件的特性。上下文:更新小部件以提供相关信息。如果我的日历上没有剩余事件,则小部件会自动更新以显示明天的摘要。小组件尺寸 ![]() 可用的窗口小部件尺寸(称为小,中,大) 无论小部件的大小如何,它都应始终专注于一件事。在大多数情况下,小部件会根据您应用的主要功能提供信息。 小部件样式 人机界面指南为我们提供了三种样式,填充样式,单元格样式,内容样式。 ![]() 如您所见,“填充”样式中只有一个“点击目标”,而其它的则有多个点击目标。 点击目标 点按目标是在点击时将执行特定操作的区域。小窗口小部件只有一个点击目标。由于内容有限,我们无法将不同部分深度链接到应用程序的不同部分。中型和大型窗口小部件支持多个点击目标。 由于小尺寸的小组件仅支持一个点击目标,因此所有小窗口小部件均遵循“填充”样式。不建议在较大尺寸中使用“填充”样式。 间距 与往常一样,元素之间的间距是设计的关键。Apple建议在小部件边缘留出16pt的边距。在带有图形的布局中,使用更窄的11pt边距。 ![]() 图形布局中的边距更窄 内容和应用特性 设计小部件时,请同时考虑内容和应用特性。您可以从应用程序的设计及其图标中套用设计风格。使用熟悉的颜色和字体来帮助用户进行交互操作。丰富的图像,简单的外观或淡淡的颜色是增加个性的一些方法。当小组件大小变化时,会呈现不同容量的内容,而不是单纯放大。 ![]() 大小增加时,日历小部件会添加新元素 ![]() 天气小部件会随着大小的增加而增加其显示的信息 随着大小的增加,天气小部件会通过添加更多内容来扩展。小部件背后的想法保持不变。“日历”小部件在获得更多空间时会组合不同的元素,来呈现更丰富的信息。 002.创建小部件 现在我们可以开始创建小组件了。让我们从小尺寸开始,并使用“填充”样式来设计一个Twitter小组件。 ![]() OK,做完后看起来不错。随着时间的推移(更新上下文),它展示出了最新的信息。Twitter在“为您”部分介绍了精选趋势,因此我们不必担心隐私被泄露。与渐变背景相比,丰富的背景图像增加了更多个性。接下来我们来设计其它尺寸的小组件。 ![]() 如果你单纯的把小组件拉大,而不增加其它内容,那么这个小组件没有任何价值。更大的尺寸应该显示更多的内容,这才是有用的小组件。 让我们从中型小部件开始。现在我们可以设置多个点击目标,我们可以在小部件中包含更多元素。每个标题都可以使用深层链接指向应用程序中的不同位置。 ![]() 上图的布局还可以,但我觉得可以增加一些圆角,让观感更加柔和一些。 ![]() 请注意圆角半径的嵌套会出现的差异,外围图形的圆角要比内部的圆角要大一些。 ![]() OK,现在我们开始设计最大尺寸的小组件。我认为使用内容样式会不错,效果图如下。 ![]() 在这个组件中,我为它添加了一个新的“趋势”部分。就像我之前说的那样,这不是唯一的选择。有无数种方法,您应该选择最适合您的应用程序的设计。 003.另一个设计案例-Duolingo Duolingo提供游戏化的学习经验。学习者可以通过学习赚取宝石,以购买可解锁的物品。因此,应用中圆环进度条非常重要,也是激励学习者最重要的一环。一个中等的小部件显示了我当前正在学习的语言,可以点击其中任何一个圆环,直接进入挑战屏幕。 ![]() Duolingo小部件 请注意小部件中的“ 18h 20m ago”字样。Apple建议不要使用“Last updated X ago(几小时前更新)”字样的语言。 占位符 当小部件处于非活动状态或无法加载数据时,Apple将显示占位符。这是一个例子: ![]() 其实占位符设计非常方便,程序员使用Swift UI即可搞定,不需特别设计。 可以自定义的小部件 小部件还使用户对小部件显示的内容有一些偏好。例如,您可以在“天气”小部件中编辑位置。用户最终还可以拥有具有不同配置的,同一小部件的两个实例。例如,我可以有两个时钟小部件,每个小部件显示我来自不同时区的时间。 ![]() 黑暗模式 当设备在亮色模式和黑暗模式之间切换时,您的窗口小部件必须随之调整。填充样式使用丰富的背景,因此在大多数情况下,不需要更改即可支持暗模式。其它小部件必须进行重新设计,以适应不同的风格。 可用性 确保小部件上的元素具有足够的呼吸空间。如果用户在其设备上使用大的字体,则您的小部件应该能够放大其内容。在Xcode 12上测试不同情况非常简单,我们可以与开发工程师沟通,确保在用户设置不同字体大小的时候,小部件都能有更好的表现。 ![]() (左)放大文字大小,(右)默认文字大小 请注意,如果你的应用程序提供的是内容聚合服务,Apple允许将您的应用程序图标添加到小部件中。诸如Twitter或新闻之类的应用。不允许在小部件上使用您的应用名称,因为它是多余的。 ![]() 004.通用布局形式 ![]() 小型窗口小部件的通用布局 ![]() 中型小部件的通用布局 ![]() 大型小部件的通用布局 004.文末福利来啦 静电特别为大家准备了Apple小组件的UI Kit素材,记得来拿。 ![]() 关注静Design公众号后 聊天窗口回复关键字 小组件 即可拿到啦 本文由静Design翻译小组出品 译者:静电 原文:Vedant Jain https://uxdesign.cc/designing-widgets-for-ios-macos-and-ipados-the-ultimate-guide |
CopyRight 2018-2019 实验室设备网 版权所有 |