KDE BLOG

Webデザインやコーディングについて書いています

【Human Interface Guidelines 翻訳 vol.7】iOS - App Architecture - Modality

下記ページの翻訳です。
https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/modality/

Modality(モーダリティ)

Modality is a design technique that presents content in a temporary mode that’s separate from the user's previous current context and requires an explicit action to exit. Presenting content modally can:

モーダリティは、ユーザーの以前の現在のコンテキストとは別の一時的なモードでコンテンツを提示し、終了するために明示的なアクションを必要とする設計手法です。
コンテンツをモーダルに提示すると、次のことが可能になります。

  • Help people focus on a self-contained task or set of closely related options
  • Ensure that people receive and, if necessary, act on critical information
  • 自己完結型のタスクまたは密接に関連するオプションのセットに集中できるようにします
  • 人々が重要な情報を受け取り、必要に応じて行動するようにする

iOS provides Alerts, Activity Views (or Share sheets), and Action Sheets that you use in specific situations in your app. To present custom modal content in your app, iOS 13 and later supports the following presentation styles.

iOSには、アプリの特定の状況で使用するアラート、アクティビティビュー(または共有シート)、およびアクションシートが用意されています。
アプリでカスタムモーダルコンテンツを表示するために、iOS 13以降では次のプレゼンテーションスタイルがサポートされています。

Sheet(シート)

The sheet presentation style appears as a card that partially covers the underlying content and dims all uncovered areas to prevent interaction with them. The top edge of the parent view or a previous card is visible behind the current card to help people remember the task they suspended when they opened the card. People dismiss a card by:

シートプレゼンテーションスタイルは、基礎となるコンテンツを部分的に覆うカードとして表示され、カバーされていないすべての領域を暗くして、それらとの対話を防ぎます。
親ビューまたは前のカードの上端は現在のカードの後ろに表示され、カードを開いたときに中断したタスクを思い出せるようにします。
人々は次の方法でカードを却下します。

  • Swiping down from the top of the screen
  • Swiping down from anywhere on the screen when card content is scrolled to the top
  • Tapping a button
  • 画面の上から下にスワイプ
  • カードのコンテンツを上にスクロールしたときに画面のどこからでも下にスワイプ
  • ボタンをタップ

Use a sheet for nonimmersive modal content that doesn’t enable a complex task.

複雑なタスクができない非没入型のモーダルコンテンツにはシートを使用します。

Fullscreen(全画面表示)

The fullscreen presentation style covers the entire screen. The previous view is completely covered, minimizing visual distraction. People dismiss a full-screen modal view by tapping a button.

全画面表示スタイルは画面全体をカバーします。
前のビューは完全に覆われ、視覚的な注意散漫が最小限に抑えられます。
人々はボタンをタップして全画面のモーダルビューを閉じます。

Use a full-screen modal view for immersive content — such as videos, photos, or camera views — or a complex task that benefits from a full-screen presentation, such as marking up a document or editing a photo.

ビデオ、写真、カメラビューなどの没入型コンテンツや、ドキュメントのマークアップや写真の編集など、フルスクリーンプレゼンテーションのメリットを活用する複雑なタスクには、フルスクリーンのモーダルビューを使用してください。

NOTE
If you use the current context modal view style to display modal content within a split view pane, popover, or other view that isn’t fullscreen, you should switch to using a sheet when presenting modal content in a compact environment.

注意
現在のコンテキストモーダルビュースタイルを使用して、分割ビューペイン、ポップオーバー、またはフルスクリーンではない他のビュー内にモーダルコンテンツを表示する場合は、コンパクトな環境でモーダルコンテンツを表示するときにシートの使用に切り替える必要があります。

Use modality when it makes sense. Create a modal experience only when it’s critical to focus people’s attention on making a choice or performing a task that’s different from their current task. A modal experience takes people out of their current context and requires an action to dismiss, so it’s essential to use it only when it provides a clear benefit.

必要に応じてモダリティを使用してください。
現在のタスクとは異なるタスクを選択または実行することに人々の注意を集中させることが重要である場合にのみ、モーダルエクスペリエンスを作成します。
モーダルエクスペリエンスは、ユーザーを現在のコンテキストから外し、閉じるためのアクションを必要とするため、明確な利点を提供する場合にのみ使用することが不可欠です。

Reserve alerts for delivering essential — and ideally actionable — information. Typically, an alert appears because something has gone wrong. Because an alert interrupts the experience and requires a tap to dismiss, it’s important for people to feel that the intrusion is warranted. For guidance, see Alerts.

重要な(理想的には実行可能な)情報を提供するためのアラートを準備します。
通常、何かが間違っているためにアラートが表示されます。
アラートはエクスペリエンスを中断し、タップして閉じる必要があるため、侵入が正当化されていると人々が感じることが重要です。
ガイダンスについては、アラートを参照してください。

Keep modal tasks simple, short, and narrowly focused. Avoid creating an app within your app. If a modal task is too complex, people can lose sight of the task they suspended when they entered the modal context. Be especially wary of creating modal tasks that involve a hierarchy of views because people can get lost and forget how to retrace their steps. If a modal task must contain subviews, provide a single path through the hierarchy and a clear path to completion. Avoid using a Done button for anything other than completing the task.

モーダルタスクをシンプル、短く、焦点を絞ってください。
アプリ内でアプリを作成しないでください。
モーダルタスクが複雑すぎると、モーダルコンテキストに入ったときに中断したタスクを見失う可能性があります。
人々は迷子になり、自分の手順をたどる方法を忘れることがあるので、ビューの階層を含むモーダルタスクの作成には特に注意してください。
モーダルタスクにサブビューを含める必要がある場合は、階層を通る単一のパスと、完了までの明確なパスを指定します。
タスクを完了する以外の目的で[完了]ボタンを使用しないでください。

Always include a button that dismisses the modal view. For example, you might use Done or Cancel. Including a button ensures that the modal view is accessible to assistive technologies and provides an alternative to dismissal gestures.

モーダルビューを閉じるボタンを常に含めます。
たとえば、「完了」または「キャンセル」を使用できます。
ボタンを含めると、アクセシビリティ技術がモーダルビューにアクセスできるようになり、却下ジェスチャーの代替手段が提供されます。

When necessary, help people avoid data loss by getting confirmation before closing a modal view. Regardless of whether people use a dismiss gesture or a button to close the view, if the action could result in the loss of user-generated content, present an action sheet that explains the situation and gives people ways to resolve it.

必要に応じて、モーダルビューを閉じる前に確認を得て、データの損失を回避できるようにしてください。
ユーザーが閉じるジェスチャーまたはボタンを使用してビューを閉じるかどうかに関係なく、アクションによってユーザー生成コンテンツが失われる可能性がある場合は、状況を説明し、解決方法を示すアクションシートを提示します。

Don’t display a card that appears on top of a popover. Although you can display a card within a popover, nothing should appear on top of a popover (except possibly an alert). In rare cases when you need to present a card after people take an action in a popover, close the popover before displaying the card.

ポップオーバーの上に表示されるカードを表示しないでください。
カードをポップオーバー内に表示できますが、ポップオーバーの上には何も表示されないはずです(アラートを除く)。
まれに、ユーザーがポップオーバーでアクションを実行した後にカードを提示する必要がある場合は、カードを表示する前にポップオーバーを閉じます。

In general, display a title that identifies the modal task. When people enter a modal task, they switch away from their previous context, so it’s a good idea to make the new context clear. You might also provide text in other parts of the view that more fully describes the task or provides guidance.

通常、モーダルタスクを識別するタイトルを表示します。
ユーザーがモーダルタスクに入ると、以前のコンテキストから切り替わるため、新しいコンテキストを明確にすることをお勧めします。
ビューの他の部分に、タスクをより完全に説明するテキストやガイダンスを提供するテキストを提供することもできます。

Coordinate the modal view appearance with your app. For example, when a modal view includes a navigation bar, it should use the same appearance as the navigation bar in your app.

モーダルビューの外観をアプリと調整します。
たとえば、モーダルビューにナビゲーションバーが含まれる場合、アプリのナビゲーションバーと同じ外観を使用する必要があります。

Choose a modal transition style that makes sense in your app. Use a transition style that coordinates with your app and enhances the awareness of the temporary context shift. The default transition vertically slides the modal view up from the bottom of the screen and back down when it’s dismissed. Use consistent modal transition styles throughout your app.

アプリで意味のあるモーダル遷移スタイルを選択します。
アプリと調整し、一時的なコンテキストシフトの認識を高める遷移スタイルを使用します。
デフォルトの遷移では、モーダルビューが画面の下から上に垂直にスライドし、閉じると元に戻ります。
アプリ全体で一貫したモーダル遷移スタイルを使用します。

For developer guidance, see UIViewController and UIPresentationController.

開発者向けガイダンスについては、UIViewControllerおよびUIPresentationControllerを参照してください。