Widgets

https://developer.apple.com/design/human-interface-guidelines/ios/extensions/widgets/

A widget is an extension that displays a small amount of timely, useful information or app-specific functionality. For example, the News widget shows top headlines. Calendar provides two widgets, one that shows today’s events and one that shows what’s up next. Notes lets you preview recent notes and quickly create new notes, reminders, photos, and drawings. Widgets are highly customizable and can contain buttons, text, layout customizations, images, and more.

ウィジェットは、少量のタイムリーな有用な情報やアプリ固有の機能を表示する拡張機能です。たとえば、Newsウィジェットにはトップヘッドラインが表示されます。カレンダーは2つのウィジェットを提供します.1つは今日のイベントを表示し、もう1つは次のイベントを表示します。メモを使用すると、最近のメモをプレビューして、新しいメモ、メモ、写真、および図面をすばやく作成できます。ウィジェットは高度にカスタマイズ可能で、ボタン、テキスト、レイアウトのカスタマイズ、画像などを含めることができます。

Widgets appear above the quick action list when you apply pressure to an app icon on the Home screen using 3D Touch. People also add the widgets they care about to the Search screen, which is accessed by swiping to the right on the Home screen and the Lock screen. Your goal should be to design a widget that people want to add to the Search screen.

3Dタッチを使用してホーム画面のアプリアイコンにプレッシャーをかけると、ウィジェットはクイックアクションリストの上に表示されます。また、気になるウィジェットを検索画面に追加できます。検索画面には、ホーム画面とロック画面の右にスワイプしてアクセスします。あなたの目標は、人々が検索画面に追加したいウィジェットを設計することです。

Design a great glanceable experience. People use widgets to get brief updates and perform very simple tasks, so it’s essential to deliver the right amount of information and interactivity. Wherever possible, provide tasks that can be completed in a single tap. Panning and scrolling within widgets isn’t supported.

素晴らしい幻想的な体験をデザインしましょう。 人々はウィジェットを使用して簡単なアップデートを取得し、非常に簡単なタスクを実行するので、適切な量の情報とインタラクティブ性を提供することが不可欠です。可能な限り、1回のタップで完了できるタスクを提供してください。ウィジェット内のパンとスクロールはサポートされていません。

Show content quickly. People spend very little time looking at widgets and shouldn’t need to wait for content to load. Cache information locally so you can always show recent information while getting updates.

コンテンツをすばやく表示する。 人々はウィジェットを見るのに少しでも時間を費やし、コンテンツが読み込まれるのを待つ必要はありません。情報をローカルにキャッシュすることで、最新の情報を表示しながら更新を取得することができます。

Provide ample margins and padding. Avoid extending content to the edges of a widget. In general, provide a margin of at least a few pixels between each edge and the content. Use the app icon at the top of your widget for alignment guidance. Content tends to work well when lined up with the center of this icon. If your app offers a grid-style layout, make sure you provide sufficient and equal padding between grid items. If possible, limit grids of icons and buttons to four per row.

十分なマージンとパディングを提供する。 コンテンツをウィジェットの端まで拡張しないでください。一般に、各エッジとコンテンツの間に少なくとも数ピクセルのマージンを設けます。ウィジェットの上部にあるアプリアイコンを使用して、アライメントのガイダンスを表示します。コンテンツは、このアイコンの中央に並んでいるとうまくいく傾向があります。あなたのアプリがグリッドスタイルのレイアウトを提供している場合、グリッドアイテム間に十分な平等なパディングを提供するようにしてください。可能であれば、アイコンとボタンのグリッドを1行につき4つに制限します。

Be adaptable. The width of a widget varies, depending on the device and orientation. The height and information displayed by a widget depends on whether it’s collapsed or expanded (not all widgets support expansion). A collapsed widget is the height of roughly two and a half table rows. An expanded widget is ideally no taller than the height of the screen. The quick action list only shows widgets in a collapsed state. When collapsed, a widget shows essential information that can stand alone. When expanded, a widget shows additional information that enhances the primary information. The Weather widget, for example, shows the current weather conditions when collapsed, but adds the hourly forecast when expanded.

適応可能にする。 ウィジェットの幅は、デバイスおよびオリエンテイションによって異なります。ウィジェットによって表示される高さと情報は、ウィジェットが折りたたまれているか、または展開されているかによって異なります（すべてのウィジェットが閉じ開きをサポートしているわけではありません）。折りたたまれたウィジェットは、およそテーブル行2.5行分の高さです。拡張されたウィジェットの高さは画面の高さを超えるべきではありません。クイックアクションリストには、折りたたまれた状態のウィジェットのみが表示されます。折りたたまれたとき、ウィジェットは、単独で成り立つ重要な情報を示します。展開すると、ウィジェットは主情報を強化する追加情報を表示します。たとえば、Weatherウィジェットは、折りたたまれたときの現在の気象条件を表示しますが、展開時の時間別の予測を追加します。

Avoid customizing the background of a widget. The light, blurred widget background provided by the system is designed for consistency and legibility. Use it whenever possible. Never use a photo as a background, as it may clash with the Lock and Home screen wallpaper.

ウィジェットの背景をカスタマイズしないでください。 システムによって提供される明るくぼやけたウィジェットの背景は、一貫性と読みやすさを考慮して設計されています。可能な限り使用してください。ロックとホーム画面の壁紙と衝突する可能性があるため、写真を背景として使用しないでください。

In general, use the system font in black or dark gray for text. The system font is designed for legibility, and dark colors work well with the standard widget background.

一般的には、テキストにはシステムフォントを黒または濃い灰色で使用します。 システムフォントは見やすさのために設計されており、暗い色は標準的なウィジェットの背景とうまく機能します。

When appropriate, let people jump to your app to do more. Your widget should operate independently from your app. However, if people might occasionally need to do more than what your widget offers, make it easy to do so. Don’t include an “Open App” button that takes space away from your content. Instead, let people tap the content itself to see or edit it in your app. In the Calendar widget, for example, you can tap an event to open it in the Calendar app. Never use your widget to open other apps.

必要に応じて、ユーザにあなたのアプリへとジャンプさせ、より多くのことをさせる。 あなたのウィジェットはあなたのアプリから独立して動作するはずです。しかし、ウィジェットが提供する以上のものを人々が必要とすることがある場合は、簡単にそれを提供することができます。あなたのコンテンツから離れてしまう「アプリケーションを開く」ボタンを含めないでください。代わりに、ユーザーがコンテンツ自体をタップしてアプリで表示または編集できるようにします。たとえば、カレンダーウィジェットでは、イベントをタップしてカレンダーアプリで開くことができます。ウィジェットを使用して他のアプリを開かないでください。

Pick a good widget name. An app icon and a title appear above each widget’s content. In general, your widget’s name should match your app’s name. If your app offers multiple widgets, consider using your app name for the primary one and clear, concise names for the others. If you use custom titles, consider prefixing them with your app name. For example, the Maps widget for showing nearby locations is titled Maps Nearby. The inclusion of your app name instills confidence that the widget is in fact provided by your app.

良いウィジェット名を選んでください。 アプリアイコンとタイトルが各ウィジェットのコンテンツの上に表示されます。一般に、ウィジェットの名前はアプリの名前と一致する必要があります。あなたのアプリが複数のウィジェットを提供している場合は、最初のもののアプリ名と他のウィジェットの明快で簡潔な名前の使用を検討してください。カスタムタイトルを使用する場合は、それらのプレフィックスにアプリ名を付けることを検討してください。たとえば、近くの場所を表示するための地図ウィジェットの名前は「近くの地図」です。あなたのアプリ名を含めると、実際にあなたのアプリからウィジェットが提供されているという確信が得られます。

Let people know when authentication adds value. 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 upcoming reservations might include a message that says “Sign into the app to view your reservations.” when people aren’t logged in.

認証情報を与える時に人々に知らせる。 誰かがあなたのアプリにログインしているときにあなたのウィジェットが追加の機能を提供するならば、人々がこれについて知っていることを確認してください。たとえば、予定されている予約を表示するアプリには、ユーザーがログインしていないときに「あなたの予約を表示するためにアプリにログインする」というメッセージが表示される場合があります。

Choose a widget for the quick action list. If your app has multiple widgets, pick one to appear in the quick action menu that appears when someone applies pressure to your app icon on the Home screen using 3D Touch.

クイックアクションリストのウィジェットを選択します。 あなたのアプリに複数のウィジェットがある場合、誰かが3Dタッチを使用してホーム画面のアプリアイコンにプレッシャーをかけるときに表示されるクイックアクションメニューに表示するものを選択します。

For developer guidance, see App Extension Programming Guide.