web-dev-qa-db-ja.com

携帯電話の複雑なデータや大きなテーブルデータのデザインパターンや戦略

スマートフォンで4/5列、場合によっては100行（現在のデスクトップアプリのように）の表を表示したいと思います。表のセルも編集可能です。次に、このデスクトップアプリをスマートフォン（Android/IOS）に移植します。これをスマートフォンで表示するための最も最適化された方法になります。

**多くの人がこの問題に出くわしたに違いないと思います。スマートフォンでこのような種類の大きなデータ（編集可能）を表示するためのパターンや解決策はありますか？.

interaction-designmobiledesign-patternstables
19
carora3

モバイル向けに設計する場合、最初に尋ねる必要があるのは、「ユーザーは外出先でもワークステーションで実行するのと同じアクションを実行できる必要があるか」ということです。 2つ目の質問は、「すべてのモバイルデバイスでこれらのすべての操作を快適に実行できるか」ということです。

100行のテーブルを扱っている場合、これはモバイルでは少なくとも7〜8画面に変換されます。特に編集可能にしたい場合、これは快適ではありません。編集は何らかの方法で呼び出す必要があります。これは通常、タップによって実行されます。 推奨ターゲット領域は9mm なので、テーブル全体の高さは900mm（90cm/0.9m/35.4in/2.95ft）にもなることがあります。

したがって、編集機能を削除し、ある種のページ分割とフィルタリングを導入して使いやすさを向上させます。

同様の質問もあります： レスポンシブデザインで大きなテーブル列をどのように処理する必要がありますか？ 他のアイデアと解決策については、他の モバイルテーブル 質問を検索できます。

31
dnbrv

Filament Groupはレスポンシブデザインでテーブルを管理するための最良のアプローチを提供します 私が遭遇したことです。

彼らはさまざまな画面サイズをサポートするために他の多くのパターンとテクニックを持っています。

追加の詳細：

上記のリンクで利用可能なパターン/スクリプトを使用すると、表形式のデータをさまざまな画面サイズで表示できます。小さいサイズで維持される列を識別し、追加の列を「オン」にする手段を提供することにより、データが示す主な焦点が維持されます。

編集：

Filament Groupは、 TableSaw と呼ばれるJavaScriptライブラリをリリースしました。これは、レスポンシブテーブルの調査/推奨事項を実装しています。

10
Adam Fellowes

同じ問題があり、CSStricksで見たソリューションを選択しました。

http://css-tricks.com/responsive-data-table-roundup/

そこでは異なるアプローチがあります：

  1. テーブル全体を表示し、読みやすいサイズで表示するためのリンクを提供します。
  2. 円グラフに変換します
  3. 縦にしてください（これは私たちが選択したものです）
  4. フィラメントグループアプローチ（表示するフィールドを選択する）
  5. 3とかなり似ています
7
Marina