注: 以下の翻訳の正確性は検証されていません。AIPを利用して英語版の原文から機械的に翻訳されたものです。
コンポーネント別のベストプラクティス
以下のガイダンスを確認し、アプリケーションのテーブル表示、ボタングループ、検索機能が Workshop の設計のベストプラクティスに従っていることを確認してください。
テーブルとリスト
アプリケーションにオブジェクトテーブル、オブジェクトリスト、ピボットテーブルを追加する場合は、以下を実践してください。
- テーブルのセクションヘッダーにメトリックカードウィジェットを設定し、テーブルやリストの長さを示す件数を必ず表示します。レイアウトスタイルにはタグを選択します。
- 各セクションに、行の選択に必要な情報が十分に表示されるようにします。追加のデータには、基底レイヤーの情報を遮る可能性のあるオーバーレイではなく、折りたたみ可能な詳細パネルを使用します。
- テーブルやリストが Workshop のスクロールのベストプラクティスに従っていることを確認します。
- ウィジェットの設定パネルの表示と書式設定セクションを使用して、テーブルの表示をカスタマイズします。
ボタングループ
アプリケーションにボタングループを追加する場合は、以下を実践してください。
-
ボタンに対応するアクションの結果やリスクに対するユーザーのメンタルモデルに色を合わせ、各ボタンがユーザーの操作を明確に導くようにします。利用可能なボタンの色のオプションを確認し、ボタンの Intent に基づいて適切な色を適用します。
- なし： 灰色で表示されます。補助的なアクションに最適です。
- 例： 戻る、スキップ、キャンセル。
- Primary: 青色で表示されます。主要なアクションを促す場合や、アプリケーション内でユーザーの操作を次の段階に進める場合に最適です。
- 例： 作成、新規追加、次へ、続行。
- 成功： 緑色で表示されます。完了のアクションや、肯定的な結果を示すアクションに最適です。
- 例： 確定、保存、完了、承認、有効化。
- 警告： 琥珀色で表示されます。ユーザーの注意や認識を必要とするものの、破壊的ではないアクションに最適です。これらのアクションは、中程度のリスクを示す場合もあります。
- 例： レビューが必要、承認待ち、アーカイブ、一時停止。
- 危険： 赤色で表示されます。簡単に元に戻せない破壊的なアクションに最適です。エラー状態や重大なアラートにも危険を使用できます。
- 例： 削除、除去。
- なし： 灰色で表示されます。補助的なアクションに最適です。
-
ボタンにアイコンを追加し、対応するアクションをユーザーが理解しやすくします。また、重要度と視覚的な負荷に基づいてボタンを左から右に並べ、各ボタングループに主要なアクションを含めます。具体的な例については、以下のテーブルを参照してください。
| ボタンの目的 | ベストプラクティス |
|---|---|
| グループの最初のボタンで主要なアクションを示します。ほかのアクションはメニューにまとめて目立たなくし、視覚的な煩雑さを減らします。 |  |
| アイコンを使用して、ボタンのアクションと選択後に何が起きるかをユーザーに伝えます。 |  |
| 矢印アイコンを適用し、モジュール内の新しいページやセクションへの移動（水平の矢印）、またはモジュール外の新規タブへの移動（斜めの矢印）を示します。 |  |
| ボタンをグループ化し、そのボタンに関連するほかのアクション（+）や、メニューからアクセスできる独立したほかのアクションがあるかどうかを示します。 |  |
- ボタンのラベルには、自然でユーザーにわかりやすい言葉を使い、英語の場合はセンテンスケースにします。文脈が明確なセクションヘッダーにボタングループを追加する場合は、繰り返しの表現を避けます。
- 関連するセクションやウィジェットの近くにボタンを追加します。たとえば、
EquipmentオブジェクトとPartオブジェクトを表示する2個のオブジェクトテーブルウィジェットを設定する場合は、それぞれのオブジェクトテーブルのヘッダーに、関連するアクションのボタンを追加します。
-
ウィジェットの設定パネルの表示と書式設定セクションで、ボタンのサイズ、枠線、色の強さを調整して、階層を持たせます。
-
すべてのボタンに異なる色を適用しないでください。視覚的に煩雑になり、ユーザーの注意をそらす可能性があります。代わりに、ボタングループ内の主要なアクションを特定し、それに対応する色を割り当てます。
| 🔴 1つのグループで複数の色を使わない | 🟢 ベストプラクティス |
|---|---|
 |  |
検索と絞り込み
フィルターリストや探索フィルターピルなど、Workshop のフィルターウィジェットをアプリケーションに追加する場合は、以下を実践してください。
- オブジェクトリストでユーザーが複数のフィルターを同時に適用する必要がある場合は、フィルターリストの縦並びのフィルターレイアウトを使用します。このレイアウトは複雑な絞り込みにも最適で、利用可能な絞り込みの選択肢を明確に把握できます。
- コンパクトで初心者にもわかりやすい視覚的な絞り込みには、フィルターリストのピルフィルターレイアウトを使用します。ピルレイアウトは、画面スペースが限られている場合や、フィルターを頻繁に変更する場合に最適です。同じ目的で探索フィルターピルウィジェットを使用することもできます。
- 探索検索バーを追加すると、複雑な絞り込み機能を備えた包括的な検索が可能になります。これは、詳細で正確なクエリ機能を必要とする経験豊富なユーザーに最適です。探索検索バーは、キーワード検索、プロパティによる絞り込み、複雑なクエリをサポートしています。