データリストは、Alius プラットフォーム全体で構造化情報を表示するために使用されます — デバイスインベントリやバージョン履歴から API リファレンスやコンポーネントカタログまで。表示フォーマットはコンテンツタイプとユーザータスクに一致させるべきです。

リストタイプ

テーブル

  • 多数の行を持つ構造化された列指向データに最適
  • ソート可能な列ヘッダーを含める
  • 幅広テーブルの水平スクロールをサポート
  • 可読性のためゼブラストライプまたは控えめな行ボーダーを使用
  • ホバー時に行をハイライト
  • バッチ操作のための行選択をサポート

カードリスト

  • ビジュアルプレビューが必要な項目やコンテンツ長が異なる項目に最適
  • カード面に主要情報を表示:タイトル、説明、ステータス、サムネイル
  • カードの高さが等しい一貫したグリッドレイアウトを使用
  • インタラクティブ性を示すホバーエフェクトをサポート

リソースリスト

  • ダウンロード可能なファイル、ドキュメント、メディアに最適
  • ファイル名、タイプ、サイズ、最終更新日を表示
  • 直接ダウンロードアクションを提供
  • リストが長い場合、カテゴリー別にグループ化

バージョンリスト

  • ソフトウェアリリース、ファームウェアバージョン、変更履歴に最適
  • 最新または現在のバージョンをハイライト
  • バージョン番号、リリース日、変更概要を表示
  • 各バージョンのダウンロードまたはアップグレードアクションを提供

コンポーネントリスト

  • ハードウェアパーツ、モジュール、アセンブリに最適
  • コンポーネント名、部品番号、カテゴリー、互換性を表示
  • タイプ、ステータス、互換性によるフィルタリングをサポート
  • 詳細コンポーネントページにリンク

API リスト

  • API エンドポイントと SDK メソッドに最適
  • メソッド名、HTTP 動詞(REST の場合)、パス、簡単な説明を表示
  • リソースまたはモジュール別にグループ化
  • 詳細 API リファレンスページにリンク

デバイスリスト

  • 接続されたロボット、センサー、ハードウェアに最適
  • デバイス名、タイプ、接続ステータス、最終確認時間を表示
  • オフラインまたはエラー状態のデバイスをハイライト
  • クイックアクションを提供:接続、切断、設定、更新

共通機能

フィルタリング

  • リストの上または横にフィルターコントロールを提供
  • 複数のフィルター条件をサポート
  • アクティブなフィルターを削除可能なタグとして表示
  • 適切な場合、ページナビゲーション間でフィルター状態を保持

検索

  • リスト項目の全文検索
  • 結果で一致した用語をハイライト
  • 過剰なクエリを避けるため検索入力をデバウンス

ステータスタグ

  • ステータスを示すカラーコード付きタグを使用(アクティブ、非アクティブ、非推奨、ベータ、安定)
  • タグラベルは短く一貫性を保つ
  • アクセシビリティのためにカラーとテキストラベルを組み合わせる

更新時間

  • 最終変更または更新のタイムスタンプを表示
  • 最近の項目には相対時間(「2時間前」)、古い項目には絶対日付を使用
  • 関連する場合、新着順でソート

バージョンタグ

  • 項目にバージョン番号またはリリースステージタグを付与
  • 一貫したバージョンフォーマットを使用
  • 現在または推奨バージョンをハイライト

ダウンロードエントリ

  • ダウンロード可能な項目に明確なダウンロードボタンまたはリンクを提供
  • ダウンロード前にファイルサイズとフォーマットを表示
  • 該当する場合、複数のダウンロードフォーマットをサポート

リストの原則

  • コンテンツとユーザータスクに最も合うリストタイプを選択
  • スキャン性を優先 — ユーザーは必要なものを素早く見つけられるべき
  • 発見方法としてブラウジングと検索の両方をサポート
  • 大規模データセットでリストが良好にパフォーマンスすることを確保(ページネーション、仮想スクロール)
  • 同じセクション内のすべてのリストタイプで一貫したスタイリングを維持