Elastic UI
Elastic UI / 2017– / スタイル / プラットフォームの画面言語
検索、ログ、監視、セキュリティの大量データを扱うElastic製品のためのUIフレームワーク。表、フィルター、時系列チャート、クエリ、状態を高密度のまま組み合わせる。
ひと目で判断
見た目の特徴
- 固定ヘッダーと左サイドナビ
- 検索・フィルター・期間選択の常設
- 小さな表とチャートを同じパネルへ積む
- 青緑・桃・黄をデータ系列に絞る
向いている用途
- ログや検索結果をフィルターしながら原因を探す分析画面
- 表、クエリ、チャートの操作規則を同じ製品群で共有するとき
このスタイルを使う
短い指針を制作へ持ち込むか、構造化された仕様をAIへ渡せます。
詳しい作り方と出典制作ルール、実在作例、比較、研究、引用形式
辞書情報
- 文字
- 等幅の値とサンセリフの説明を使い分け、小さな文字でも階層を色だけに頼らない。
- 構成
- ナビ、検索条件、可視化、詳細を固定した領域へ分け、期間とフィルターを常に見せる。
- 素材
- 白または暗い地に中立面を積み、系列色はデータへ、青は操作へ限定する。
- 注意
- チャートを増やすほど洞察が増えるわけではない。問いに不要な系列とパネルを先に外す。
- 関連研究
- EUI page templates / Elastic Charts / Amsterdam/Borealis themes
関連項目
- Carbon Design System（Carbon Design System）同じ「プラットフォームの画面言語」の系統。Elastic UIとCarbon Design Systemの違いを見る
- ソラライズド（Solarized）共通する印象：技術 / 信頼。Elastic UIとソラライズドの違いを見る
プラットフォームの画面言語をさらに見る
同じ「プラットフォームの画面言語」から、共通する印象が多い順に次の項目を選んだ。
- BBC GEL（BBC Global Experience Language）共通する印象：信頼 / 技術 / 高揚。
- Mozilla Protocol（Mozilla Protocol）共通する印象：技術 / 信頼 / 高揚。
- モチーフ（Motif）共通する印象：技術 / 信頼。
この項目を引用する
辞典はリンクされるためにある。書いている場所に合う形をそのまま持っていってよい。
- Link
- https://indexstyle.org/ja/styles/elastic-ui
- Markdown
- [Elastic UI（Elastic UI） — デザインスタイル辞典](https://indexstyle.org/ja/styles/elastic-ui)
- HTML
- <a href="https://indexstyle.org/ja/styles/elastic-ui">Elastic UI（Elastic UI） — デザインスタイル辞典</a>