Some people say widgets are a thing of the past, but recently we faced a market for which this was one of the main features users were asking for. A bit of googling showed there are not a lot of useful articles covering widget design (most information is found in human interface guidelines and material design), though development is more widely covered.

有人说小部件已成为过去，但是最近我们面对的市场是用户要求的主要功能之一。 有点谷歌搜索表明，尽管开发涉及的范围更广，但没有很多有用的文章涵盖小部件设计(大多数信息可在人机界面指南和材料设计中找到)。

Because of that, this article will cover how to design a widget for both platforms. Let’s start with the basics, although I’m sure most of you know what a widget is. :)

因此，本文将介绍如何为两个平台设计小部件。 让我们从基础开始，尽管我敢肯定你们大多数人都知道小部件是什么。 :)

什么是小部件？ (What are widgets?)

Widgets are mini application views that are embedded on the home or lock screen of smartphones. They allow users to interact with an app without opening the app itself. They usually receive periodic updates and are very useful for displaying small amounts of data or app-specific functionality information that’s important right now. For example, our widget is for a telecom and displays tariff name, current balance, remaining data…

小部件是嵌入在智能手机主屏幕或锁定屏幕上的微型应用程序视图。 它们允许用户与应用交互，而无需打开应用本身。 它们通常会定期更新，对于显示少量数据或特定于应用程序的功能信息非常有用，这些信息现在很重要。 例如，我们的窗口小部件用于电信，并显示费率名称，当前余额，剩余数据…

小部件设计 (Widget design)

When we get to the topic of designing widgets, a lot of questions open up. Especially since we have two different platforms to design for, different screen sizes and options users want to have. Some users want to see just the basic info, for example, the amount left on their account, whereas others want to see more details, but the thing that connects them is that both want to see the information instantly. Another problem is that there is no strict definition of sizes or detailed info on how to design the widget. For most of us (designers) that is frustrating, since we want to create a mockup which will show how the widget is really going to look like before developing it.

当我们谈到设计小部件的主题时，就会出现很多问题。 特别是由于我们要设计两个不同的平台，因此用户希望拥有不同的屏幕尺寸和选项。 有些用户只想查看基本信息，例如，帐户上剩余的金额，而有些用户想查看更多的详细信息，但联系他们的是他们俩都希望即时查看信息。 另一个问题是，没有大小的严格定义或有关如何设计小部件的详细信息。 对于我们大多数人(设计人员)来说，这令人沮丧，因为我们要创建一个模型，该模型将显示小部件在开发之前的外观。

The first step in designing the widget is to define what information your widget is going to show. It would be good to do some research and define which information your users would like to see.

设计窗口小部件的第一步是定义窗口小部件将显示的信息。 进行一些研究并定义您的用户希望查看哪些信息将是很好的。

Widgets can contain text, icons, buttons, images and more. They don’t contain input fields, checkboxes or radio buttons.

小部件可以包含文本，图标，按钮，图像等。 它们不包含输入字段，复选框或单选按钮。

iOS小工具 (iOS widget)

iOS widgets are a little bit easier to design, since there is a lot predefined. Usually there is only one widget per application and one configuration screen.

由于有许多预定义的功能，所以iOS小部件的设计要容易一些。 通常，每个应用程序只有一个小部件和一个配置屏幕。

When you first start thinking about the iOS widget, go through the human interface guidelines on that topic: https://apple.co/3d9xVQI

当您第一次开始考虑iOS小部件时，请遵循有关该主题的人机界面指南： https : //apple.co/3d9xVQI

There is a lot of info to be taken from them, these are the main points to keep in mind when designing the widget:

从中可以获取很多信息，这些是设计小部件时要牢记的要点：

• the width of a widget varies, depending on the device and orientation
  小部件的宽度会有所不同，具体取决于设备和方向
• there are two states: collapsed or expanded — keep in mind that not all widgets support expansion. On iOS 13 the “show more” and “show less” are replaced with just an arrow down / up
  有两种状态：折叠或展开-请记住，并非所有小部件都支持展开。 在iOS 13上，“显示更多”和“显示更少”仅用向下/向上箭头替换

• a collapsed widget is the height of roughly two and a half table rows — taking into consideration that one row is 44px we have a height of 110px for a collapsed widget. It shows essential information that can stand alone

  折叠小部件的高度大约为两行半表格-考虑到一行为44px，折叠小部件的高度为110px。 它显示了可以独立存在的基本信息

• an expanded widget is ideally no taller than the height of the screen. It shows additional information.
  扩展小部件的高度最好不超过屏幕的高度。 它显示其他信息。
• use system font San Francisco (SF) in black or dark grey
  使用黑色或深灰色的系统字体旧金山(SF)
• avoid customizing background and never use a photo as a background
  避免自定义背景，并且永远不要将照片用作背景
• avoid extending content to the edges of a widget, use the app icon at the top of your widget for alignment guidance. Provide a margin of at least a few pixels between each edge and the content
  为避免将内容扩展到窗口小部件的边缘，请使用窗口小部件顶部的应用程序图标进行对齐指导。 在每个边缘和内容之间提供至少几个像素的边距
• let people tap the content itself to see or edit it in your app. Never use your widget to open other apps
  人们可以点击内容本身以在您的应用中查看或编辑它。 切勿使用小部件打开其他应用
• if your widget provides additional functionality when someone is logged into your app, make sure people know about this. For example, an app that shows your mobile subscription info will have a message like this: “Sign into the app to view your account status.” when you aren’t logged in.
  如果当某人登录到您的应用程序时您的窗口小部件提供了其他功能，请确保人们对此有所了解。 例如，显示您的移动订阅信息的应用程序将显示以下消息：“登录到该应用程序以查看您的帐户状态。” 未登录时。

Mocking up a widget on iOS

在iOS上模拟小部件

You can create a mockup of your widget in order to define the design or get the client’s approval.

您可以创建窗口小部件的模型，以定义设计或获得客户的认可。

Here is a list of elements you need to think about in order to create a high fidelity mockup:

这是创建高保真模型时需要考虑的元素列表：

1. collapsed height - 110px including the header
   折叠高度-110px(包括标题)
2. header height - 36px
   标头高度-36像素
3. rounded corners - 13
   圆角-13
4. app icon size - 20x20px
   应用程式图示大小-20x20px
5. use system font San Francisco (SF) in black or dark grey
   使用黑色或深灰色的系统字体旧金山(SF)
6. app name - 13pt, regular, uppercase
   应用名称-13pt，常规，大写
7. show more/less - 13pt, regular (or just arrows on iOS 13)
   显示更多/更少-13pt，常规(或仅在iOS 13上为箭头)
8. margins and padding
   边距和填充

Interesting bug

有趣的错误

Although the widget normally works without unlocking the phone, we encountered an interesting bug while developing our iOS widget. Our application uses a token to access the data it needs and so does the widget, but this token is stored in the iPhone’s secure storage. While the screen was locked, the widget couldn’t access it and would display an error message, despite everything appearing to be OK. We solved this problem by using a simple message “please unlock your phone” in case the phone was locked and after that the widget would work OK.

尽管该小部件通常可以在不解锁手机的情况下正常工作，但是在开发iOS小部件时我们遇到了一个有趣的错误。 我们的应用程序使用令牌访问其所需的数据，小部件也是如此，但是此令牌存储在iPhone的安全存储中。 屏幕锁定后，小部件无法访问它，并且会显示一条错误消息，尽管看起来一切正常。 我们通过使用一条简单的消息“请解锁您的手机”来解决此问题，以防手机被锁定，然后小部件可以正常工作。

Example

例

Android小部件 (Android widget)

On Android, users can have multiple widgets with different settings / content. Android widget is extremely flexible (although there is a limit on the number of views and layouts you can use to display the widget). While designing, you can use different colors, images, icons, buttons, text, size…

在Android上，用户可以具有具有不同设置/内容的多个小部件。 Android小部件非常灵活(尽管可用于显示小部件的视图和布局数量有限)。 在设计时，您可以使用不同的颜色，图像，图标，按钮，文本，大小...

Since they can be of different sizes, your developers will play an important role here. Together you can define how the widget will look like and try and define all the possible sizes for your widget according to the content you want to display to your users.

由于它们的大小可能不同，因此您的开发人员将在这里扮演重要角色。 您可以一起定义窗口小部件的外观，并根据要显示给用户的内容尝试定义窗口小部件的所有可能尺寸。

When you first start thinking about the Android widget, go through the material guidelines on that topic: https://bit.ly/3d9FvLf

当您第一次开始考虑Android小部件时，请仔细阅读有关该主题的材料指南： https : //bit.ly/3d9FvLf

These are the main points to keep in mind when designing the widget for android:

这些是为Android设计小部件时要记住的要点：

• the height or width of a widget can be adjusted and you can define how many cells on the home screen it will take up
  窗口小部件的高度或宽度可以调整，您可以定义在主屏幕上它将占用多少个单元格
• default home screen positions widgets in its window, based on a grid of cells that have a defined height and width. These cells are roughly 40dp. The term “roughly” is used because different devices can have different cell sizes and layouts.
  默认主屏幕在窗口中基于具有定义的高度和宽度的单元格在窗口中放置小部件。 这些单元大约为40dp。 使用术语“大约”是因为不同的设备可能具有不同的单元大小和布局。
• you can set up a minimum number of cells, but can’t define the maximum number
  您可以设置最小数量的单元格，但不能定义最大数量

• if the design doesn’t take up an entire cell, android will align it within the specified cells.

  如果设计未占用整个单元格，则android会将其在指定单元格内对齐。

  The user will still be able to tap the whole cell, even if the design doesn’t cover it whole

  即使设计不能完全覆盖整个单元，用户仍然可以点击整个单元

• widgets should not generally extend to screen edges and as of Android 4.0, widgets are automatically given margins between the widget frame and the app widget’s bounding box to provide better alignment with other widgets and icons on the user’s home screen
  小部件通常不应扩展到屏幕边缘，从Android 4.0开始，小部件会自动在小部件框架和应用小部件的边界框之间指定边距，以便与用户主屏幕上的其他小部件和图标更好地对齐

• preview image — field — specifies a preview of what the app widget looks like. This preview is shown to the user from the widget picker. If this field is not supplied, the app widget’s icon is used for the preview.

  预览图像-字段 -指定应用程序小部件外观的预览。 该预览是从窗口小部件选择器显示给用户的。 如果未提供此字段，则使用应用程序小部件的图标进行预览。

Mocking up a widget on Android

在Android上模拟小部件

You can also create a mockup of your widget on Android in order to define the design or get the client’s approval.

您也可以在Android上创建小部件的模型，以定义设计或获得客户的认可。

Here is a list of elements you need to think about in order to create a high fidelity mockup.

这是创建高保真模型时需要考虑的元素列表。

1. different sizes of the widget - chosen in accordance with the data you want to show to your users - consult your developers when picking the sizes you want to use
   小部件的不同大小-根据要显示给用户的数据进行选择-选择要使用的大小时请咨询开发人员
2. you can use any color you want
   你可以使用任何你想要的颜色
3. margins and padding
   边距和填充
4. create a preview image
   创建预览图像

Example

例

结论 (Conclusion)

I hope these tips helped you understand how to create a high fidelity mockup of your widget which you can then share with your teammates or successfully present to a client. If you are looking for something easier, one option would be to create a screenshot of an existing widget and use it to create your mockup. Another option is to create a preview with the developers. The problem with this last option is that in case the client wants to change a lot, the developers have to work on it again and you spend more time on thing which you might not be able to charge.

我希望这些技巧可以帮助您了解如何创建小部件的高保真模型，然后与您的队友共享或成功地将其呈现给客户。 如果您正在寻找更简单的方法，一种选择是创建现有窗口小部件的屏幕截图并使用它来创建您的模型。 另一个选择是与开发人员一起创建预览。 最后一个选项的问题在于，如果客户想要进行很多更改，则开发人员必须再次进行处理，并且您会花更多的时间处理您可能无法支付的费用。

In either case, my suggestion is: consult your developers before you start working on a widget, together you will be able to create a perfect solution.

无论哪种情况，我的建议是：在开始使用窗口小部件之前，请咨询您的开发人员，您将可以共同创建一个完美的解决方案。

A big thanks to our developers Jeton Fejza and Marko Iličić for reviewing this post. :)

非常感谢我们的开发人员Jeton Fejza和MarkoIličić审阅了这篇文章。 :)