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

SmartHR基本機能の共通設定におけるレイアウトパターンをまとめています。

概要

SmartHR基本機能の共通設定で使っているレイアウトパターンです。 大きく「一覧ビュー」「詳細ビュー」「アクションビュー」に分けられ、それぞれ詳細なパターンを持ちます。

一覧ビュー

一覧ビューではオブジェクトを一覧形式で表示します。OOUIではコレクションビューと呼ばれる画面です。 一覧ビューでは以下のパターンを用意しています。

  1. 標準パターン
  2. タブパターン

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

1. 一覧ビュー - 標準パターン

標準パターンの構成要素は次のとおりです。

  • ページタイトル(必須)
  • 機能説明テキスト(必須)
  • コレクションヘッダー
  • コレクションタイトル
  • コレクションアクション
  • コレクション

一覧ビューの標準パターンレイアウト

構成要素の省略

コレクション名とページタイトルが同一で、冗長と判断した場合はコレクション名を省略できます。

コレクション名を省略した一覧ビューの標準パターンレイアウト

2. 一覧ビュー - タブパターン

タブパターンは、タブごとにコレクションが独立している場合に使います。絞り込みや並べ替えなど、コレクションの状態を切り替える機能としては使わないでください。

タブパターンの構成要素は次のとおりです。

  • ページタイトル(必須)
  • 機能説明テキスト(必須)
  • タブ(必須)
  • タブ内のコレクションヘッダー(コレクションありの場合)
    • コレクションタイトル
    • コレクション説明テキスト
    • コレクションアクション
  • コレクション

一覧ビューのタブパターンレイアウト

構成要素の省略

タブ名とコレクション名が同一で、冗長と判断した場合はコレクション名およびコレクション説明を省略できます。

コレクション名を省略した一覧ビューのタブパターンレイアウト

タブ内にコレクション名しかない場合は、アクションボタンと並べて表示することができます。

詳細ビュー

詳細ビューではオブジェクトの詳細情報を表示します。OOUIではシングルビューと呼ばれる画面です。 詳細ビューでは以下のパターンを用意しています。

  1. 標準パターン
  2. タブパターン

1. 詳細ビュー - 標準パターン

標準パターンの構成要素は次のとおりです。

  • 一階層上に戻る(必須)
  • シングルヘッダー
    • シングル名(必須)
    • シングルアクション
  • シングルの説明テキスト
  • コレクションヘッダー(コレクションありの場合)
    • コレクションタイトル
    • コレクションの説明テキスト
    • コレクションアクション
  • コレクション or シングルの情報

詳細ビューの標準パターンレイアウト(コレクション)

詳細ビューの標準パターンレイアウト(詳細情報)

説明テキストを省略した場合のパターン

タブ内のコレクションの説明テキストを省略した場合、アクションと並列に並べることができます。

コレクション名を省略した詳細ビューの標準パターンレイアウト

2. 詳細ビュー - タブパターン

タブパターンは、タブごとにコレクションが独立している場合に利用します。 絞り込みなど、フィルタリングの状態を切り替える機能としては利用しないでください。

タブパターンの構成要素は次のとおりです。

  • 一階層上に戻る(必須)
  • シングルヘッダー
    • シングル名(必須)
    • シングルアクション
  • シングルの説明テキスト
  • タブ(必須)
  • タブ内のコレクションヘッダー(コレクションありの場合)
    • コレクションタイトル
    • コレクションの説明テキスト
    • コレクションアクション
  • コレクション or シングルの情報

詳細ビューのタブパターンレイアウト

構成要素の省略

タブ内のコレクションの説明テキストを省略した場合、アクションと並列に並べることができます。

コレクション名を省略した詳細ビューのタブパターンレイアウト

アクションビュー

[wip]

© 2021, SmartHR, Inc.