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?審閱了這篇文章。 :)