Design with iOS pickers, menus and actions

ハイライト

iOS 14 では、ボタンからトリガーされる軽量メニュー、新しい日付/時刻ピッカー、システム カラー ピッカーが導入され、一般的な選択と二次アクションがコンテキストに近づき、アクション シート、ポップオーバー、ホイール ピッカーによる中断が軽減されます。

主要内容

iOS 13 では、多くの小さな操作がアクション シートまたはポップオーバーに引き継がれます。ユーザーがボタンをクリックすると、インターフェースが暗くなり、画面の反対側からリストが表示されます。 iPhone の画面が大きくなるにつれて、この距離はより明確になります。 iPad アプリの密度が高くなると、画面全体のマスクが重くなります。スピーチはこの問題から始まりました。多くの作業は本来非常に軽いものですが、それらは重いコンテナに入れられます。 (00:47)

iOS 14 のメニューは、アクションをトリガーポイントに近づけます。どのボタンからでもメニューが表示され、アクションがよりコンパクトになり、背景が強く中断されなくなりました。アクションを提供するだけでなく、選択、ナビゲーション、および二次オプションも処理します。並べ替え、写真の追加、履歴に戻るなどの操作、もともと散在していたこれらのインタラクションはすべて同じ一連の動作で表現できます。 (01:41)

日付と時刻のピッカーは、もう 1 つの古い問題を解決します。ホイール ピッカーの日付構造の表現が弱く、ユーザーは複数のホイールを個別に回す必要があります。新しいデザインでは、日付が月、週、日付の構造として表示されます。時間を直接入力することもできます。インラインで表示できない場合、コンパクト ピッカーは最初にボタンを表示し、次にそれを現在のビューの上に展開します。フォームの行には日付を入力することもできます。 (09:39)

カラー ピッカーは、システム全体のカラー選択エクスペリエンスを補完します。ユーザーは、グリッド、スペクトル、RGB 値、画面色の選択という 4 つのポータルから色を選択でき、アプリ間でアクセスできるパレットに色を保存することもできます。色の選択をシステム コンポーネントに任せることで、開発者はアクセシビリティ、ローカリゼーション、iPad から Mac への一貫性を直接得ることができます。 (12:54)

詳細

メニューは明確なアクションで始まる必要があります

(03:44) このスピーチでは、メニューの主要なシーンを曖昧さ回避、ナビゲーション、選択、二次オプションの 4 つのカテゴリに分けています。共通点は、ユーザーが最初に明確なアクションを確認し、次にメニューでより具体的な選択肢が入力されることです。

明確なアクション
  Photos: add をタップ
  Notes: add image をタップ
  Safari: back を長押し
  Podcasts: Sort をタップ

メニューが担うタスク
  何を追加するか具体的に尋ねる
  戻れるページを表示する
  現在の並べ替えオプションを示す
  低頻度の二次操作をまとめる

キーポイント:

• メニューは、最初にすべてのオプションを広げることを避けるというユーザーの意思を表明した後に表示されるのに適しています。
• 選択メニューでは、現在のオプションにチェック マークが追加され、ユーザーが現在のステータスを理解できるようになります。
• より多くのボタンは低頻度の操作をホストするのに適していますが、高頻度の主な操作はインターフェイス上に残す必要があります。
• ユーザーは、追加のキャンセル項目を配置しなくても、メニューの外側をクリックすることでキャンセルできます。

破壊的な操作では引き続き確認コンテナが使用されます

(07:09) メニューにより指が移動できる距離が短くなります。これは通常の操作には適していますが、削除などの操作には軽すぎます。講義では、リマインダーを使用してリストを削除し、メールを使用して下書きを破棄し、破壊的なアクションには確認が必要であること、および確認アクションがさまざまな場所に表示されることを示します。

通常の二次操作
  more をタップ
  メニューがトリガー地点の近くに表示される
  選択後すぐに実行する

破壊的な操作
  Delete をタップ
  action sheet または popover を表示する
  ユーザーが別の位置へ移動して確認する
  確認前ならまだキャンセルできる

キーポイント:

• 下書きの削除や破棄などのアクションは情報の損失を引き起こし、多少の人為的な摩擦が必要になります。 ・iPhoneではアクションシートが下部に、iPadではポップオーバーがトリガーポイントとの位置差を保ったまま表示されます。
• メニューはタスクを進めるのに適しており、確認コンテナは誤ってタッチするのを防ぐのに適しています。
• このルールは古いコンポーネントの値を保存し、すべてのアクション シートをメニューに置き換える必要はありません。

日付と時刻のセレクターはレイアウト密度と一致する必要があります

(10:03) 新しい日付と時刻のピッカーは、より明確な日付構造を提供し、タッチ、鉛筆、キーボード、カーソルもサポートします。リマインダーの例では、日付と時刻をインライン領域に配置します。連絡先の例では、インライン ボタンに誕生日を配置し、クリックするとコンパクト ピッカーが展開されます。

十分なスペースがある場合
  現在のビュー内に inline で日付または時刻ピッカーを表示する
  ユーザーは月、曜日、日付、時刻入力を直接確認できる

スペースが限られる場合
  まず compact ボタンを表示する
  タップ後、現在のビューの上に展開する
  ユーザーは外側の領域をタップして選択を確定する

キーポイント:

• インラインは、日付の選択を現在のタスクの中核ステップとみなすリマインダーなどのインターフェイスに適しています。
• コンパクトは、デフォルトでは 1 行のみを占める連絡先の誕生日フィールドなどのフォーム行に適しています。
• 新しいデザインにより、日付、時刻、および日付と時刻を組み合わせた一貫した表現が使用されます。
• iPad と Mac では同じ情報がより近くに表示されるため、大きな画面に移動するときにコントロールを再解釈する必要がなくなります。

カラーピッカーは完全なカラー選択パスをカバーする必要があります

(12:54) iOS 14 のカラーピッカーには、グリッド、スペクトル、RGB 値、画面カラー選択の 4 つのカラー選択方法が用意されています。ユーザーは色をパレットに保存し、他のアプリで引き続きその色にアクセスすることもできます。

ユーザーがすばやく色を選びたい場合
  grid を使う

ユーザーが色を細かく調整したい場合
  spectrum を使う
  または RGB value を入力する

ユーザーが既存のインターフェイスに合わせたい場合
  pipet で画面から色を取得する

ユーザーが色を再利用したい場合
  App 間で使える palette に保存する

キーポイント:

• カラー選択には、クイック選択、微調整、サンプリング、多重化が含まれます。
• ピペットは虫眼鏡を使用して画面上の色を検出し、描画および注釈アプリに適しています。
• パレットはアプリ間で使用できるため、ユーザーがブランドの色や一般的に使用される色を繰り返し記録する必要性が軽減されます。
• 公式リソースはヒューマン インターフェイス ガイドライン: iOS 向けの設計のみを提供しており、本文中の判断はすべてスピーチの逐語録からのものです。

重要ポイント

• 対処方法: フォーム内の誕生日、期限、リマインダー時刻をコンパクトピッカーに変更します。 実行する価値がある理由: この講演では、コンパクトはセレクターをインラインで表示できないインライン シナリオに適していると明確に述べられています。 開始方法: まず、現在全画面で日付選択をポップアップ表示しているフォーム フィールドを見つけ、デフォルトの状態をボタンの行に圧縮し、クリックして現在のビューの上に展開します。

• 対処方法: リスト ページに並べ替えメニューを追加します。 実行する価値がある理由: 並べ替えは講義での選択の一例であり、現在のオプションはチェック マークで表現できます。 開始方法: [並べ替え] ボタンをクリアしたままにして、並べ替え項目をメニューに配置し、外側の領域をクリックしてキャンセル操作を残します。

• 対処方法: 写真、メモ、ファイルの「追加」ボタンを曖昧さ回避メニューに変更します。 実行する価値がある理由: 写真とメモの例では、ユーザーが最初に特定のアクションをクリックし、次に特定のソースを選択することで、すべてのエントリをページ上に長時間分散させるよりもスペースを節約できることがわかります。 開始方法: 写真の撮影、フォト アルバム、スキャン、ファイルのインポートなど、追加されたアクションの具体的な種類をリストします。これらは、ユーザーが追加をクリックした後にのみ表示されます。

• 対処方法: ツールバーに隠れている使用頻度の低いコマンドをその他メニューに集めます。 実行する価値がある理由: ファイルの例は、二次操作が集中化された後、コンテンツ領域がより明確になることを示しています。 開始方法: 作成、送信、編集などの主要な操作はそのままにして、エクスポート、パスのコピー、詳細の並べ替えなどの頻度の低い項目を詳細メニューに配置します。削除操作には確認コンテナを引き続き使用します。

• 対処方法: 描画、注釈、またはテーマ編集機能でシステム カラー ピッカーにアクセスします。 実行する価値がある理由: このプレゼンテーションでは、グリッド、スペクトル、RGB、画面カラー選択、アプリ間パレットを示し、一般的なカラー選択パスをカバーしています。 開始方法: まずカスタム カラー パレットのステータスの維持を停止し、一般的な色、画面の色の選択、およびシステム コンポーネントへの正確な入力を残します。

関連セッション

• iOS ピッカー、メニュー、アクションを使用して構築する — UIKit コントロールとUIActionそれを達成する方法。
• iPad 向けに設計 — iPad 設計の観点から、モーダル リダクション、サイドバーの使用、複数の入力デバイスへの適応について引き続き理解します。
• iPadOS ポインターのデザイン — iPadOS ポインターが間接タッチで設計されている理由を説明します。
• iPadOS ポインター用のビルド — ポインターの効果、カスタム ビュー、およびポインターの相互作用の実装の詳細について説明します。
• 優れたウィジェットをデザインする - 同年の iOS 14 のデザイン例を使用して、システム コンポーネントの情報密度、コンテキスト、一貫性を理解します。