ページコントロール


ページコントロールには、フラットリスト内のページをそれぞれが表すインジケータイメージの行が表示されます。



インジケータのスクロール行は、人々がリストをナビゲートして目的のページを見つけるのに役立ちます。ページコントロールは、任意の数のページを処理できるため、人々がカスタムリストを作成できる状況で特に役立ちます。


ページコントロールは、デフォルトでは一連の小さなインジケータドットとして表示され、使用可能なページを表します。実線のドットは現在のページを示します。視覚的には、これらのドットは常に等間隔であり、スクリーン上に表示されるドットが多すぎるとクリップされます。



ベストプラクティス


ページコントロールを使用して、ページの順序付きリスト間の移動を表します。 ページコントロールは、階層的または非連続的なページの関係を表しません。より複雑なナビゲーションについては、代わりにサイドバーまたは分割ビューの使用を検討してください。


ページコントロールをスクリーン下部の中央に配置します。 人々が常にページコントロールの場所を把握できるようにするには、コントロールを水平方向の中央、スクリーンの下部近くに配置します。


ページコントロールは任意の数のページを処理できますが、あまり多くのページを表示しないでください。 約 10 個以上のドットは、一目では数えにくいです。アプリで 10 ページを超えるページを同等として表示する必要がある場合は、グリッドなど、非順次ナビゲーションを可能にする別の配置を使用することを検討してください。



インジケータのカスタム化


デフォルトでは、ページ コントロールはすべてのインジケータ用にシステム提供のドットイメージを使用しますが、人々が特定のページを識別できるように一意のイメージを表示することもできます。たとえば、天気アプリ は location.fill シンボルを使用して、現在の場所のページを区別します。


あなたのアプリやゲームを強化する場合は、すべてのインジケータのデフォルトのイメージとして使用するカスタムイメージを提供できます。また、特定のページに別のイメージを提供することもできます。開発者向けガイダンスについては、preferredIndicatorImage および setIndicatorImage(_:forPage:) を参照してください。


カスタム インジケーターのイメージが単純で明確であることを確認してください。 複雑な形状は避け、ネガティブな空間、テキスト、または内側の線は含めないでください。これらの詳細により、非常に小さいサイズではアイコンがぼやけて判読不能になるからです。単純な SF シンボル をインジケータとして使用するか、独自のアイコンをデザインすることを検討してください。ガイダンスについては、アイコン を参照してください。


ページコントロールの全体的な意味を強化する場合にのみ、デフォルトのインジケータイメージをカスタマイズします。 たとえば、リストするすべてのページにブックマークが含まれている場合は、bookmark.fill シンボルをデフォルトのインジケータイメージとして使用できます。


1 つのページコントロールで 3 つ以上の異なるインジケータイメージを使用することは避けてください。 あなたのリストが特別な意味を持つページが 1 つ含まれている場合 (Weather の現在地ページなど)、そのページに固有のインジケータイメージを与えることで、そのページを見つけやすくすることができます。対照的に、いくつかの固有のイメージを使用していくつかの重要なページをマークするページコントロールは、各イメージの意味を記憶しなければならないため、使いにくいものです。3 種類以上のインジケータイメージを表示するページコントロールは、各イメージが明確であったとしても、乱雑で無計画に見える傾向があります。


2 つの異なるインジケータのみを使用すると、よく整理されたように見え、一貫した体験が提供されます。


異なるインジケータをいくつか使用すると、ページコントロールが混み合っていて使いにくくなります。


インジケータのイメージに色を付けることは避けてください。 カスタムカラーは、ページコントロールをスクリーン上に表示して現在のページインジケータを区別するコントラストを減らします。ページコントロールが使いやすく、さまざまなコンテキストで見栄えがよくなるようにするには、システムがインジケータを自動的に色付けするようにします。


プラットフォームの考慮事項


watchOS に関する追加の考慮事項はありません。macOS ではサポートされていません。


iOS、iPadOS


ページコントロールは、インジケータの外観を調整して、リストに関する詳細情報を提供できます。たとえば、コントロールは現在のページのインジケータを強調表示して、人々がリスト内のページの相対的な位置を推定できるようにします。スペースに収まらないほど多くのインジケータがある場合、コントロールは両側のインジケータを縮小して、より多くのページが利用可能であることを示すことができます。



人々はタップまたはスクラブによってページ コントロールを操作します (スクラブ するには、コントロールにタッチして左または右にドラッグします)。現在のページインジケータの先頭または末尾をタップすると、次または前のページが表示されます。iPadOS では、ポインタを使用して特定のインジケータをターゲットにすることもできます。スクラブは順番にページを開き、コントロールの前または後を越えてスクラブすると、最初または最後のページにすばやく到達するのに役立ちます。


開発者ノート

API では、タッピング個別の操作 ですが、スクラブ 継続的な操作 です。開発者向けガイダンスについては、UIPageControl.InteractionState を参照してください。



スクラブ中にページの移行をアニメーション化することは避けてください。 人々は非常にすばやくスクラブでき、すべての移行にスクロールアニメーションを使用すると、あなたのアプリは遅くなり、視覚的な閃光が発生する可能性があります。アニメーションのスクロール移行はタップのみに使用して下さい。


ページコントロールには、インジケータに視覚的なコントラストを提供する半透明の角が丸い長方形の背景外観を含めることができます。以下の背景スタイルのいずれかを選択できます。


  • Automatic(自動) — 人々がコントロールを操作する場合にのみ背景を表示します。ページコントロールが UI の主要なナビゲーション要素ではない場合は、このスタイルを使用します。

  • Prominent(目立つ) — 常に背景を表示します。このスタイルは、コントロールがスクリーンの主要なナビゲーションコントロールである場合にのみ使用します。

  • minimal(最小) — 背景を決して表示しません。リスト内の現在のページの位置を表示するだけで、スクラブ中に視覚的なフィードバックを提供する必要がない場合は、このスタイルを使用します。

  • 開発者向けガイダンスについては、backgroundStyle を参照してください。


    最小の背景スタイルを使用する場合は、スクラバーをサポートするのは避けてください。

    最小のスタイルは、スクラブ中に視覚的なフィードバックを提供しません。人々があなたのアプリ内のページのリストをスクラブできるようにしたい場合は、自動または目立つ背景スタイルを使用します。



    tvOS


    フルスクリーンのページのコレクションでページコントロールを使用します。 ページコントロールは、コンテンツが豊富な複数のページがページ階層内でピアとなるフルスクリーン環境で動作するように設計されています。追加のコントロールを含めると、ページ間を移動するときに焦点を維持することが難しくなります。



    リソース


    関連


    スクロールビュー


    開発者用文書


    PageTabViewStyle — SwiftUI


    UIPageControl — UIKit (UIPageControl)


    WKInterfaceController — WatchKit (WKInterfaceController)





    目次
    Xcode の新機能

  • new HIG
  • 基礎

    概要

    アクセシビリティ

    ベストプラクティス

    操作

    ボイスオーバー

    テキスト表示

    色と効果

    プラットフォームの考慮事項

    リソース


    アプリのアイコン

    ベストプラクティス

    プラットフォームの考慮事項

    仕様

    リソース


    ブランド化

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    カラー

    ベストプラクティス

    包括的カラー

    システムカラー

    カラーマネジメント

    プラットフォームの考慮事項

    仕様

    リソース


    ダークモード

    ベストプラクティス

    ダークモードの色

    プラットフォームの考慮事項

    リソース


    アイコン

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    イメージ

    拡大率

    フォーマット

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    含まれる物

    デザインによる包括

    言語の歓迎

    親しみやすい

    性同一性

    人と設定

    ステレオタイプの回避

    アクセシビリティ

    言語

    リソース


    レイアウト

    ガイドと安全なエリア

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    マテリアル(材料)

    ベストプラクティス

    プラットフォームに関する考慮事項

    リソース


    モーション

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    右から左へ

    テキストの配置

    数字と文字

    コントロール

    イメージ

    インターフェイスアイコン

    プラットフォームの考慮事項

    リソース


    SF シンボル

    ウェイトよスケール

    デザインバリアント

    カスタムシンボル

    プラットフォームの考慮事項

    リソース


    タイポグラフィ(印刷)

    ベストプラクティス

    システムフォントの使用

    カスタムフォントの使用

    プラットフォームの考慮事項

    仕様

    リソース




    パターン

    概観


    個人データへのアクセス

    許可を求める

    ロケーションボタン

    事前アラートスクリーン

    リクエストの追跡

    データの保護

    プラットフォームの考慮事項

    リソース


    データのグラフ化

    ベストプラクティス

    効果的なグラフの設計

    プラットフォームの考慮事項

    リソース

    変更記録

    協力と共有化

    ベストプラクティス

    プラットフォームの考慮事項

    リソース

    変更記録

    ドラッグアンドドロップ

    ベストプラクティス

    フィードバックの提供

    ドロップを受け入れる

    プラットフォームの考慮事項

    リソース


    データ入力

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    フィードバック

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    ファイル管理

    ベストプラクティス

    ファイルを開く

    作業の保存

    クイックルックプレビュー

    プラットフォームの考慮事項

    リソース


    全画面表示

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    起動

    ベストプラクティス

    起動画面

    プラットフォームの考慮事項

    リソース


    ライブビューのアプリ

    ベストプラクティス

    EPG の体験

    クラウド DVR

    プラットフォームの考慮事項

    リソース


    ロード中

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    アカウントの管理

    ベストプラクティス

    アカウントの削除

    TV プロバイダーアカウント

    プラットフォームの考慮事項

    リソース


    通知の管理

    フォーカスとの統合

    ベストプラクティス

    買い物通知の送信

    プラットフォームの考慮事項

    リソース


    モダリティ

    ベストプラクティス

    リソース


    マルチタスク

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    ヘルプの提供

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    搭載

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    オーディオの再生

    ベストプラクティス

    中断の処理

    プラットフォームの考慮事項

    リソース


    触覚の再生

    ベストプラクティス

    カスタムの触覚

    プラットフォームの考慮事項

    リソース


    ビデオの再生

    ベストプラクティス

    TV アプリとの統合

    プラットフォームの考慮事項

    リソース


    印刷

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    格付けとレビュー

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    検索

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    設定

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    取り消しとやり直し

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    トレーニング/a>

    ベストプラクティス

    プラットフォームの考慮事項

    リソース




    部品

    全ての部品


    コンテンツ

    イメージビュー

    テキストビュー

    Web ビュー


    レイアウトと構成

    ボックス

    コレクション

    コラムビュー

    開示コントロール

    ラベル

    リストと表

    ロックアップ

    アウトラインビュー

    スプリットビュー

    タブビュー

    メニューとアクション

    活動ビュー

    ボタン

    コンテキストメニュー

    ドックメニュー

    編集メニュー

    メニュー

    ポップアップボタン

    プルダウンボタン/a>

    ツールバー


    ナビゲーションと検索

    ナビゲーションバー

    パスコントロール

    検索フィールド

    サイドバー

    タブバー

    トークンフィールド


    プレゼンテーション

    アクションシート

    アラート

    ページコントロール

    サポートされる
    プラットフォーム

    iPhone iPad

    tvOS watchOS

  • ベストプラクティス
  • インジケータのカスタム化
  • リソース

  • パネル

    ポップオーバー

    スクロールビュー

    シート

    ウィンドウ


    選択と入力

    カラーウェル

    コンボボックス

    数値入力ビュー

    イメージウェル

    スクリーン上のキーボード

    ピッカー

    セグメントコントロール

    スライダー

    ステッパー

    テキストフィールド

    トグル(切り替え)


    状態

    活動リング

    ゲージ

    レベルインジケータ

    進捗インジケータ

    格付けインジケータ

    システムの体験

    複雑化

    ホーム画面のクイックアクション

    ライブ活動

    メニューバー

    通知

    ステータスバー

    一番上の棚

    時計の文字盤

    ウィジェット




    入力

    概観


    Apple Pencil と落書き

    ベストプラクティス

    落書きのサポート

    カスタムの描画

    プラットフォームの考慮事項

    リソース


    デジタルの竜頭

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    焦点と選択

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    ゲームコントローラー

    ベストプラクティス

    ボタン

    プラットフォームの考慮事項

    リソース


    ジャイロスコープと加速度計

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    キーボード

    ベストプラクティス

    キーボードショートカット

    カスタムキーボードショートカット

    プラットフォームの考慮事項

    仕様

    リソース


    ポインティングデバイス

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    リモコン

    ベストプラクティス

    ジェスチャ

    ボタン

    互換性のあるリモコン

    プラットフォームの考慮事項

    リソース


    空間的相互作用

    ベストプラクティス

    デバイスの使用法

    プラットフォームの考慮事項

    リソース


    タッチバー

    ジェスチャ

    ベストプラクティス

    インターフェイスアイコン

    コントロールとビュー

    プラットフォームの考慮事項

    リソース


    タッチスクリーンジェスチャ

    ベストプラクティス

    標準的なジェスチャ

    プラットフォームの考慮事項

    リソース




    プラットフォーム

    概観

    iOS 用デザイン

    ベストプラクティス

    リソース


    iPadOS 用デザイン

    ベストプラクティス

    リソース


    macOS 用デザイン

    ベストプラクティス

    リソース


    tvOS 用デザイン

    ベストプラクティス

    リソース


    watchOS 用デザイン

    ベストプラクティス

    リソース




    テクノロジー

    AirPlay

    序文

    アイコン

    編集者用


    常にオン

    アプリクリップ

    序文

    ユーザー体験

    アプリクリップカード

    アプリクリップのコード

    印刷ガイドライン

    法的要件


    Apple Pay

    序文

    Apple Pay の提供

    チェックアウトと支払い

    エラー処理

    サブスクリプションと寄付

    ボタンとマーク

    編集者用


    拡張現実

    CareKit

    序文

    データとプライバシー

    ビュー

    ユーザー体験

    シンボルとブランド化


    CarPlay

    序文

    アーキテクチャ

    操作

    視覚的デザイン

    アイコンとイメージ

    システム要素


    ゲームセンター

    序文

    アクセス・ポイント

    ダッシュボード

    成果

    リーダーボード

    多数のプレイヤー

    カスタムダッシュボードのリンク


    HealthKit

    HomeKit

    序文

    用語とレイアウト

    設定

    Siri の操作

    カスタム機能

    アイコン

    編集者用


    iCloud

    アプリ内購入

    序文

    自動更新可能なサブスクリプト


    ライブ写真

    Mac Catalyst

    序章

    アプリの構造

    ユーザーの操作

    視覚的デザイン

    Mac の慣用句


    機械学習

    序文

    機械学習の役割

    明示的なフィードバック

    暗黙のフィードバック

    較正

    訂正

    間違い

    複数のオプション

    自信

    属性

    制限事項


    マップ

    序文

    Apple Watch のマップ

    屋内のマップ


    ビジネス向けメッセージ

    序文

    ブランド化

    ボタン

    ダークモード

    ロゴ

    メッセージバブルの内容

    スクリーンショット


    NFC

    写真編集

    ResearchKit

    SharePlay

    ShazamKit

    Apple でサインイン

    序文

    データ管理

    ボタン


    Siri

    序文

    システムの意図

    カスタムの意図

    ショートカットと提案

    編集者用


    タップして iPhone で支払う

    財布

    序文

    パスのデザイン

    注文追跡のデザイン















    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ