web-dev-qa-db-ja.com

モバイルデバイスにデータグリッドを表示するためのベストプラクティスは何ですか？

エンタープライズモバイルアプリでデータグリッドをネイティブに表示するためのリソース、ガイドライン、またはベストプラクティスが見つかりませんか？

どんな助けでもありがたいです。ありがとう！

mobileandroidiosinfo-visualisationnative-app
5
UX_Question

私は、これはあなたのオプションのかなり良い概要だと思います： https://css-tricks.com/accessible-simple-responsive-tables/

テーブルとCSSの話ですが、モバイルのDataGridにも簡単に適用できると思います。

テーブルが応答して動作するさまざまな方法について考えてみましょう。

  1. Squash：列にコンテンツがほとんどない場合、モバイル画面では問題なく水平方向に押しつぶされる可能性があるため、レイアウトを変更しないことが有効なオプションである必要があります。

  2. 垂直スクロール：レイアウトとコンテンツが正確で重要な場合、ユーザーは左または右にスクロールできます。これは、CSSではoverflow="auto"ラッパーを使用すると簡単です。

  3. 行ごとに折りたたむ：小さな画面で、各行を独自の単一列のミニテーブルに分割します。 display:tableをdisplay:blockに切り替えると、通常のテーブルマークアップでこれが発生します。

  4. 列ごとに折りたたむ：これは物事がトリッキーになるところです。純粋なCSSで通常のテーブルマークアップを使用してこれを行うことはできません。コードの順序は行であり、<tr>ラッパーがロックしているためです。マークアップを変更するか、JavaScriptで操作を開始する必要があります。

enter image description here

4
exp

これを行うには多くのアプローチがありますが、いくつかのソリューションは、プロジェクトのニーズに基づいて、状況に最適に適用できます。

NNGroupから： https://www.nngroup.com/articles/mobile-tables/

  1. 読みやすくするのに十分な大きさのカラム
  2. 電話の回転は最後の手段です
  3. 列ヘッダーを固定する
  4. 水平スクロールが必要かどうかを明確に示す
  5. 左の柱を所定の位置に固定します
  6. ユーザーが表示するデータを選択できるようにする
  7. データグループのアコーディオン

製品の比較に固有： http://www.foolproof.co.uk/thinking/making-product-comparison-work-on-mobile/

それは本当に、特定のケースでユーザーが何を達成しようとしているかに依存します。行と列のデータを比較していますか？データの性質とそれによって課されるスペースの制約は何ですか？どのくらいのデータがありますか？あなたはそれをすべて示す必要がありますか？テーブルは正しい解決策ですか？等.

0
Nicolas Hung