什么是手机小部件?

小部件是可以显示的移动应用程序的扩展, 在应用程序之外, 在您的手机主界面. iOS和安卓都有小部件, 尽管它们有一些功能上的差异, 它们本质上是一种显示应用程序信息的方式,并允许基本的用户交互,而无需在应用程序本身.

对不起,猫头鹰

如果你是一个顽固的猫头鹰思想的人(也就是说, 你喜欢并且需要尽可能多的细节)你可能不喜欢听到这个, 但是在设计小部件时, 把细节留在家里. 不要过分强调细节. 您应该在设备的本机部件结构中工作, 是由操作系统定义的,当更新发布时可能会更改. 但在我们进入这个话题之前,让我们先来谈谈Widget 101.

为什么widget具有挑战性?

当提到设计一款手机应用时,我们可以找到很多有用的资源, 特别是当您试图匹配一些本地设计模式时. 工具,如Sketch,包含内建的模板,或者你可以直接从 苹果谷歌.

设计小部件的规范更开放一些. 如果你像我一样,这会让你发疯,因为你想要模拟出它看起来到底是什么样子.  谷歌告诉您小部件的“大致”大小(是的, 他们在文档中使用了“大致”这个词).

你当然可以组装一个精确的模型, 你的客户或利益相关者可能会感激你. 但, 当你需要将模型交给开发者时, 有时候,过多的细节会造成不必要的混乱,最终造成一个糟糕的小部件. 那么,他们需要什么呢?

小部件的开始

像其他任何事情一样,创建一个小部件应该从一些有根据的研究开始. 确定用户想要和需要什么. 然后, 确定应该显示的信息, 以及您希望启用的流和操作. 您的小部件可以深度链接到您的应用程序的特定屏幕, 你可以提供多个动作把你带到app中的不同地方.

iOS小部件的交互性更有限. 你可以“显示更多”或“显示更少”,或者点击对象链接到应用程序, 但除此之外,你无法与小部件进行真正的交互.

安卓比iOS提供了更多的选择. 例如, 您可以调整小部件的大小,以在主屏幕上占据不同的单元格布局, 或者您可以配置“设置”, 有了这两个选项,您可以根据大小和设置显示不同的项目. 我们稍后会详细讨论这个.

在iOS上模拟你的小部件

在iOS上,这是非常直接的. 小部件都是固定宽度的,都有相同的背景、标题和总体布局. 你可以截屏并匹配填充,或者遵循下面的提纲. 这些规范是基于iOS 11第一次发布的,可能会在未来的版本中进行修改, 但这些应该只用于模型,而不需要为开发而定义.

iOS 11小部件

  1. 应用程序图标大小: 20×20
  2. 应用名称: 旧金山,13页,普通,大写
  3. 头高度: 36
  4. 圆角: 13
  5. 倒塌的高度: 146包括头
  6. 显示/显示更少: 旧金山,13页,普通版

在小部件中显示的其余内容由您自己决定. 我见过自定义字体、地图、图像、整个背景图像、自定义图标和按钮. 你不会看到文本框或其他输入,如复选框或单选按钮. 但是有一些不需要输入就能输入信息的聪明方法. 例如,先生. 号码是一个呼叫阻塞应用程序,将提醒您垃圾邮件/诈骗电话. 你可以从你的通话记录中复制一个电话号码, 小部件将从剪贴板中拉出该数字,并将其显示在小部件中,其中包含有关该数字已知的阻塞信誉的信息.  创造性思维可以开启一些很酷的功能.

在安卓上模拟你的小部件

安卓很有趣,但你必须小心,因为过多的信息可能会导致问题. 我并不是说在小部件中显示太多信息, 尽管这可能是个问题, 但是对于开发者来说太多信息了. 对于安卓,有一些关键的事情需要注意.

分级为安卓

小工具会出现在主屏幕的应用程序图标中. 主屏幕的结构基于单元格. 这些细胞“大约40dp”,正如谷歌直接指出的那样. 他们说大概是因为不同的设备有不同的单元大小和布局.

你的设计不需要占用整个单元, 但就安卓而言,它会在指定的单元格内对齐,仍然可以点击剩下的空白区域,将用户带进应用程序. 如果你只是想要一个20dp的高个音乐播放器, 你可以这么做, 但它必须在40dp单元内对齐,没有其他部件可以占据剩余的空间. 如果您确实希望widget占据整个单元格, 我建议您向开发人员指定小部件应该“匹配父部件”的大小. 这种方式总是完美地适合细胞,无论使用什么设备. 这对于新闻源或消息列表来说是非常棒的.

为安卓调整小部件大小

您可以启用小部件的垂直、水平或两者都可调整大小. 如果启用了调整大小,则可以设置最小单元格数,但不能设置最大单元格数. 理论上,可以有一个默认为3格宽2格高的小部件. 如果你想防止它被缩小,你有这个选择.

如果您想让它的大小调整大于3格高, 为了显示额外的信息,您也可以这样做. 但是,您不能设置垂直单元格的最大数目. 用户将能够调整小部件的大小,使其大于3个单元格. 但, 仅仅因为它占据了那么多细胞并不意味着你的设计需要占据所有的细胞. 你可以将你的设计限制在3个单元格高,然后在那之后添加空白空间,这取决于用户是否想要添加空白空间. 同样,另一个小部件也不能占据这个空白空间.

添加小部件时,您将从小部件抽屉中选择它. 窗口小部件抽屉将显示默认大小的窗口小部件的缩略图,并显示默认大小将使用的单元格. 我建议默认设置你的最佳布局大小,这样它在抽屉里看起来最好. 一些应用程序为不同的布局制作不同的小部件, 所以它们在抽屉里是可见的, 但你也可以只显示一个大小,用户将能够调整大小时,放置它.

设置安卓

您可以向小部件添加设置. 例如, 如果你在显示电子邮件, 添加小部件时,可以请求要显示的帐户. 如果你每小时显示天气, 您可以请求是否显示偶然性或降水或风速. 有些小部件只有在添加时才允许这样做, 而其他的包括设置图标,并允许您稍后更改.

安卓的交互

安卓小部件允许进行一些基本的交互. 你可以像在iOS上那样点击项目,也可以垂直滚动列表. 您也可以长按,以能够调整大小或移动小部件, 但每个小部件都内置了这种功能.

设计为安卓

现在,iOS的每个小部件相对来说是相同的,而安卓则非常灵活. 你可以把它设计成你想要的样子. 颜色、图像、图标、按钮、文本、大小等等提供了无尽的机会. 所以,如果你正在寻找一些“原生”的东西,你可以按照上面类似的步骤,通过截图来确定原生风格.

Summary

如果你像我一样, 设计一个没有你认为你需要的细节的小部件时,我很紧张, 没关系! 我希望您能更好地理解小部件可以做什么,以及如何在不走极端的情况下找到恰当的细节平衡. 与开发人员进行良好的沟通有助于确定团队所需的细节. 我们在CRi的团队有一件很棒的事情,那就是我们都紧密合作,拥有良好的合作环境, 开放的沟通, 和创新. 这有助于我们一起工作,确定我们都需要的细节. 的更多信息, 查看苹果的人机界面指南和谷歌的材料设计和开发者文档. 如果你有评论或反馈,请在推特上告诉我们 @CRi_解决方案. 有关我们的 UI / UX实践 在CRi查看我们的 用户体验 section.

肖恩·戴维斯

我是一名用户体验设计师,自2015年以来一直在CRi工作. 我有多年的界面设计经验,并拥有内布拉斯加州大学的工作室艺术学位, 专注平面设计. 我也有动态图形、视频制作和其他数字艺术方面的背景. 我最初主修物理,一直对艺术感兴趣, 我发现界面设计和用户体验是艺术和科学的不可思议的结合. 我空闲时对字体很着迷, 梦想室内设计,亲自动手做汽车.

联系