intra-mart Accel Platform UIデザインガイドライン(PC版) 第5版 2015-04-01

6.4. 画面遷移

本章では、画面遷移について説明します。

6.4.1. 作成ルール

以下は intra-mart Accel Platform の画面遷移の基本ルールです。

  • intra-mart Accel Platform は参照画面を用意しません。
    データの参照は、更新画面で行います。
  • 画面遷移図の blow_off は、処理確認の コンファーム です。
    トランザクションが発生する場所では、表示することを推奨します。
    ただし、連続登録をする場合など、ユーザビリティが低下する箇所は、コンファーム不要とします。
  • 新規登録画面/更新画面の呼び出しは、画面遷移/ダイアログウィンドウどちらでも可能です。
    ただし、各要件での統一をしてください。

6.4.2. 画面遷移パターン(基本編)

画面遷移で、基本的なものを画面種類ごとに説明します。

コラム

画面遷移図の blow_off は、処理確認の コンファーム です。
コンファームの詳細は、 アラートとコンファーム を参照してください。

6.4.2.1. 新規登録画面

  • 新規登録画面から画面遷移するパターンは以下のようになります。
画面遷移 新規登録(基本編)
配置内容 配置場所
「新規登録」リンク ツールバー
「戻る」アイコン ツールバー
「登録」ボタン 画面下部中央

6.4.2.2. 更新画面

  • 更新画面画面から画面遷移するパターンは以下のようになります。
画面遷移 更新(基本編)
配置内容 配置場所
「編集」アイコン 一覧表の編集列
文字リンク 一覧表の任意列
「戻る」アイコン ツールバー
「更新」ボタン 画面下部中央

6.4.2.3. 削除画面

  • 編集画面と削除画面でそれぞれの画面遷移するパターンは以下のようになります。

6.4.2.3.1. 編集画面で削除

画面遷移 削除(編集画面)
配置内容 配置場所
「編集」アイコン 一覧表の編集列
文字リンク 一覧表の任意列
「戻る」アイコン ツールバー
「削除」ボタン 画面下部中央

6.4.2.3.2. 一覧画面で削除

画面遷移 削除(一覧画面)
配置内容 配置場所
「削除」アイコン 一覧表の削除列
「一括削除」リンク 一覧表の左上

6.4.2.3.3. 注意事項

  • 削除方法は、ユーザビリティ考慮してどちらか一方でも双方配置も可能です。
    ただし、利用ユーザの単位や、機能のまとまりを考慮してください。
    マスタ画面Aでは編集画面で削除、マスタ画面Bでは一覧で削除だとユーザに違和感を与えます。

6.4.3. 画面遷移パターン(応用編)

  • 業務システムの利用方法を考慮した場合、下記確認画面を挟む画面遷移を選択することも考慮します。
  • 確認画面を挟む事で、一度ユーザに入力内容を考えさせることも可能です。

6.4.3.1. 新規登録画面(確認画面有)

  • 確認ダイアログがある場合の新規登録画面からの画面遷移は以下のようになります。
画面遷移 新規登録(応用編)

6.4.3.2. 編集画面(確認画面有)

  • 確認ダイアログがある場合の編集画面からの画面遷移は以下のようになります。
画面遷移 更新(応用編)

6.4.3.3. 参照画面(例外)

intra-mart Accel Platform の基本ルールでは、参照画面を用意しません。
しかし、各機能内で用意する時は、下記遷移方法とします。
画面遷移 参照

6.4.4. 画面遷移データ保持

画面遷移時に、データ保持は次画面まで保持とします。
詳細は以下のとおりとします。

6.4.4.1. 検索条件

  • 一覧画面から遷移した画面で「戻る」クリック時、保持した状態を表示します。
  • 登録/更新/削除ボタンクリック後、一覧画面が表示された時、初期表示とします。

6.4.4.2. ページ番号、ページ件数、ソート順

  • 一覧画面から遷移した画面で「戻る」クリック時、保持した状態を表示します。
  • 登録/更新/削除ボタンクリック後、一覧画面が表示された時、初期表示とします。
  • ページャの操作時は、ページ件数、ソート順を保持します。

6.4.4.3. 登録画面/編集画面

  • 確認画面を設けた場合、確認画面から戻った時、保持した状態を表示します。
  • 登録/更新/削除ボタンクリック後、一覧画面が表示された時、初期表示とします。

6.4.4.4. 例外的処置

  • ユーザビリティが低下する場合は、データ保持をしてください。
  • 例:一覧で「searchItem」の入ったデータを一括削除したい。
    ng searchItem 検索→ページ上全選択→削除を繰り返します。
    ok searchItem 検索の後、ページ上全選択→削除を繰り返します。