共通設定のレイアウトパターン(SmartHR基本機能)

SmartHR基本機能の共通設定のレイアウトパターンです。

種類

共通設定のレイアウトパターンには大きく以下のバリエーションがあります。
構成やレイアウトはそれぞれの項目を参照してください。

A. 一覧ビュー

一覧ビューはオブジェクトを一覧形式で表示します。
OOUIではコレクションのビューと呼ばれる画面で、基本的によくあるテーブルを含みます。

構成

構成要素は次のとおりです。
構成要素の必須項目以外は任意の要素です。機能によって使用有無を判断してください。

  1. 画面タイトル(必須)
  2. 画面説明テキスト(必須)
  3. タブ
  4. よくあるテーブル

スクリーンショット: 一覧ビュー

A-1. 画面タイトル

一覧ビューの画面タイトルです。タイトルの付け方はHeadingのライティングを参照してください。

A-2. 画面説明テキスト

機能の説明や操作に関する補足テキスト、ヘルプセンターへのリンクなどを配置します。

A-3. タブ

直後に続く、独立したコンテンツを並列に表示する場合にTabBarを使用します。
絞り込みなど、表示状態を切り替える機能としては使わないでください。

A-4. よくあるテーブル

表形式で一覧表示するUIをよくあるテーブルと呼びます。次のような要素を持ちます。

  • タイトルエリア
  • テーブル操作エリア
  • 一時操作エリア
  • テーブル

詳細は、よくあるテーブルのレイアウトパターンを参照してください。

タイトルエリアの省略

画面タイトルよくあるテーブルの見出しが同一で、冗長と判断した場合はよくあるテーブルのタイトルエリアを省略できます。

スクリーンショット: よくあるテーブルのタイトル(見出し、説明テキスト)を省略した一覧ビュー

レイアウト

要素間の余白は以下のとおりです。詳細は余白のレイアウトパターンを参照してください。

スクリーンショット: 一覧ビューのレイアウト

要素内やコンポーネント内の配置や余白は以下を参照してください。

B. 詳細ビュー

詳細ビューはオブジェクトの詳細情報を表示します。OOUIではシングルビューと呼ばれる画面です。
一覧ビューのよくあるテーブルの遷移リンクから遷移する画面を想定しています。

構成

構成要素は次のとおりです。
構成要素の(必須)項目以外は任意の要素です。機能によって利用の有無を判断してください。

  1. 「上階層に戻る」リンク(必須)
  2. ヘッダー
  3. 画面説明テキスト
  4. タブ
  5. コンテンツ

スクリーンショット: 詳細ビュー

B-1. 「上階層に戻る」リンク

一階層上のコンテンツに誘導するためのリンクです。詳細は、「上階層に戻る」リンクを参照してください。

一覧ビュー(オブジェクトの一覧)に戻ることを想定しています。

B-2. ヘッダー - 画面タイトル

詳細ビューの画面タイトルです。多くの場合{オブジェクトのインスタンス名}を表示します。

B-2. ヘッダー - 画面アクションエリア

詳細ビュー全体に対するアクションをまとめたエリアです。 このエリアは画面タイトルの右側に配置します。

アクションボタンの表示

プライマリーなアクション以外は、基本的に複数の操作をまとめるボタンでまとめて配置します。 これは画面タイトルの横幅の領域を十分に確保するためです。

また、アクションが1つだけになった場合(例:オブジェクトの削除のみ)でも、他の詳細ビューとの一貫性を保つために、あえて複数の操作をまとめるボタンの中に配置することがあります。

アクションボタンの例

ここに配置される典型的なアクションボタンの例は以下のとおりです。
以下に限らず、扱う機能やユースケースによって、必要なアクションボタンを配置できますが、詳細ビュー全体に対するアクションエリアであることに留意してください。

操作名ボタンのラベル例役割・動作
オブジェクトの削除権限を削除オブジェクトを削除するアクションです。「{オブジェクト名}を削除」と表記します。
破壊的なアクションであるため、基本的に一覧ビューではなく詳細ビューの画面アクションエリアに配置します。
クリックすると、オブジェクトの削除ダイアログを表示します。
オブジェクト名の編集権限名を編集オブジェクト名を変更するアクションです。「{オブジェクト名}名を編集」と表記します。
クリックすると、オブジェクト名の編集ダイアログを表示します。
オブジェクトのプロパティの編集対象期間を編集オブジェクトのプロパティを変更するアクションです。多くは「{プロパティ名}を編集」と表記します。
クリックすると、プロパティを編集するダイアログなどを表示します。

B-3. 画面説明テキスト

詳細ビューの説明や操作に関する補足テキスト、ヘルプセンターへのリンクなどを配置します。

B-4. タブ

直後に続く、独立したコンテンツを並列に表示する場合にTabBarを使用します。
絞り込みなど、表示状態を切り替える機能としては使わないでください。

B-5. コンテンツ

詳細ビューのコンテンツです。 よくあるテーブルや詳細情報などを含みます。

レイアウト

要素間の余白は以下のとおりです。詳細は余白のレイアウトパターンを参照してください。

スクリーンショット: 詳細ビューのレイアウト

要素内やコンポーネント内の配置や余白は以下を参照してください。

C. アクションビュー

アクションビューは、オブジェクトに対する操作(作成、編集など)を画面全体で表現します。OOUIにおけるモーダル画面の一種です。
一覧ビューのよくあるテーブルの「オブジェクトの操作」ボタンから遷移することを想定しています。

[WIP]

© 2021, SmartHR, Inc.