カードビューでアイテムを並べ替え/注文するためのデザインパターン
テーブルデザインパターンには通常、他のすべての値を並べ替えることができる「主」キー値があり、アイテムに関連付けられた残りの属性を簡単に並べ替えたり、並べ替えたりすることができます。
ただし、カードデザインパターンでは、特に複数の値を比較する場合に、これが実際の問題となります。
カードのデザインパターンを使用して、アイテムの並べ替えや順序付けを行うための標準的なパターンがあるかどうかを知りたいです。したがって、たとえば、カードに主キーの値が表示される場所（左上、右上など）や、カードを並べ替えたり注文したりするときに簡単に比較できるように、二次属性が表示される場所です。
例としては、カードインターフェイスを使用してクライアントの記録情報や連絡先の詳細（名刺など）をカプセル化したり、ソーシャルメディアアプリケーションでイベントの詳細をキャプチャしたりすることが考えられます。これは、多くのeコマースWebサイトやアプリで見られるように、製品やサービスにカードを使用するのとは対照的です。
何かを並べ替えるときは、アイテムのVerticalまたはHorizontalリストのいずれかが推奨されます。 （両方ではない）
多くのデバイスは その他の理由 の間で簡単に上下にスクロールできるように構築されているため（つまり、マウスホイール、スマートフォンなど）、縦のリストが私の個人的な好みです。
グリッドでのカードの並べ替え
まず第一に、これは素晴らしい質問ですので、今すぐ投票してください。
一口サイズのチャンクでコンテンツをレイアウトする(cards)見栄えが良く、どんなサイズのスペースにも収まるように反応するのは現実です。人々は カードレイアウトパターンPintrest のような多くの人気サイトで使用されていることを理解しているようです。カードレイアウトはどのサイズのディスプレイでもうまく機能するため、人気が高まっています。
簡単に言えば、私たちは応答性の高い世界に住んでいて、私は応答性の高い女の子（または男の子）です
問題は、グリッド内のアイテム（垂直と水平を同時に）を並べ替えようとすると、誰かが間違って解釈してしまうことです...
フィーノグシュ博士 または 忘れない？
以下は、グリッドの並べ替えの状況で尋ねられる質問です...
1。ユーザーの操作なしで自動的に並べ替えを実行できますか？
ほとんどの人がカードレイアウトを理解する1つの理由は、カードレイアウトがそれらを理解することです。
たとえば、特定のカテゴリの映画をリストしている場合は、他の人が最も多く見たり、最高の評価をした映画を他の人よりも大きくします。
2。並べ替えをフィルターやグループに置き換えることはできますか？
おそらく、このトピックに関する多くの情報を見つけるのが難しいのは、すべてをソートしてからすべての項目を調べる以外に、情報を入手するためのより良い方法があるためです。私が欲しいものを何でも入力するオプションがあり、私が入力していることとは何の関係もないアイテムがすぐに消えるのを見るなら、これが私の好ましいアプローチです。カードを見つけたら、リストの前後にいくつのアイテムがあるかを確認するための追加オプションを提供できます。いずれの場合でも、グリッド内のアイテムの並べ替えが必要なものであることを必ず確認してください。
3。本当に一度に複数のキーでソートする必要がありますか？
複数のキーでグリッドを並べ替えるのは絶対に避けてください。 これは、正気の人が理解できないピボットテーブルのように見えることになります
must行と列の両方を同時に使用してコンテンツを並べ替える場合、左上から開始しますコーナーに移動し、右に移動してから、本を読むように（上から下へ）次の行に進みます。右から左に読む国など、右から始めて最初に左に行く場合はまれにあるかもしれませんが、最初にソートされたアイテムを一番下に置くのは常に間違っていることは自明です。
この情報のほとんどは自明であるはずですが、さまざまな アイトラッキング調査 は、左上隅が人々が最初に見る場所であることを示していますですから、並べ替えるキーはおそらくそこにも属しています。
グリッドを左から右、次に上から下に並べ替える例。
カードの順番をすばやく理解できるように、できるだけ多くの情報を試してください。最も重要な情報の横、またはアイテムの写真の横にのみ、並べ替える値（この場合は炭水化物）を表示します。追加情報はホバー/クリックで表示/非表示にすることができます...
カードを並べ替えるとき、通常は縦または横のレイアウトのいずれかを使用することをお勧めしますが、両方を使用することはできません。
垂直リストの並べ替え（推奨）
カードのリストを垂直に並べ替えるとき、順序付けに使用するキーは、可能な場合はカードから目立つようにして、トップカードがトップにある理由と次に進む方向をすぐに明らかにする必要があります。
水平リストの並べ替え
水平方向にカードを並べ替える例はほとんどありませんが、これまでのアイテムLeftが最も人気があることであることは明らかであり、言うまでもありません。以下の例では、右に行くほど人気が減少（または同じまま）します。
これは役立つかもしれません
http://blog.intercom.io/why-cards-are-the-future-of-the-web/
それは1年ほど前からですが、カードの編成に関するいくつかの重要な点に触れています。
カード編成パターンでは、情報は通常、それらがどこから来たのか、およびユーザーがカードに関連する方法でカードをソートするために事前に提供した他の情報に基づいてソートされます。
前の投稿で述べたように、その情報の普及の基準は左上から右下になります。これはおそらく、このパターンで読む文化と言語にのみ適用されます。
お役に立てば幸いです。
私は現在カードのようなインターフェースを開発しており、現在のデータグリッド設計と比較して100％成功するように内部でテストされています。私の主なユースケースはカード間でデータを比較するのではなく、それぞれにアクションを実行することであることが明らかになったとき、私はこの道に着手しました。読みやすさを向上させるのに大いに役立つと思うある程度の調整を維持するように努めました。ここにプロトタイプがあります（データを隠すためにぼかされていますが、問題の空間を少し抽象化するためにもぼかされています！）：
ユーザビリティテストで強調すべき点は次のとおりです。
主キー（各カードの右上にあり、大きなフォント）が表示されていて明確であったかどうか。そうだった。
タグ（色付きの長方形）がレコード間でまだ簡単にスキャンできるかどうか。一貫性を実現するために、表示されるタグ github を言うのではなく、それらをすべて揃えました。これは好評でした。
各レコードで実行される制御/アクションが明確で、発見可能で、直感的であるかどうか。これは、共有コントロールを持つ分割ペインのマスター/ディテールグリッドよりも適切にテストされました。カードの上にカーソルを置くと、ボタンはアクションを開始するよりアクティブな状態を適用します。
レコードをソートおよびフィルタリングできることが明らかかどうか。これは少し希望に満ちたもので、現在の形式ではより良いスタイルとデザインが必要です。
二次情報がカード間で比較可能であったかどうか。これらは、デザイン全体の残りのぼやけたスポットです。それらを各カードの同じ場所に配置し、並べ替え/フィルタリングと組み合わせることで、全体的に良好なテストが行われました。
私はこれまで、このカードインターフェイスが小さなビューポートにスケーリングする方法の非常に限られたデモを提供するまで行ってきました。実際、リストが垂直方向に大きくなることを除けば、それほど問題はありません。これはトレードオフですが、ここでも一貫性が重要です。
明確なフィードバックが必要なことの1つは、人々がカードを左から右に（私が最初に期待したように）読んだか、それとも上から下に読んだかです。タグ（色付きの部分）はおそらく主キーの下に配置する必要があるというフィードバックを受け取りました。運が良ければ、両方の概念についてすぐに繰り返します。
お役に立てれば。 「ベストプラクティス」とは程遠いが、少なくとも実際の経験と考慮事項。