タイルとカードの違いは？
私たちはプラットフォームを開発しており、さまざまなソースからユーザーに最も関連性の高い情報を視覚的に示す必要があります。ユーザーはこの「情報」を操作する必要があり、このコンテンツは動的な構造を持ち、頻繁に更新されることを意図しています。タイルやカードのようなものを使用することを考えていますが、それは問題を引き起こします：
タイルとカードUIの違いは何ですか？
違いはセマンティックですが、Wordタイルを聞いたときは常に業界標準の使用法から、タイルに関連付けられた別の画面があることを意味します。たとえば、Microsoftの「モダンUI」では、タイルは単なるアイコンではなく、迅速な情報を提供でき、Windows PhoneまたはWindows 8の開始画面のタイルは、「一目で」情報ラジエーターと関連するアプリを起動します。 Tileの重要な機能は、ユーザーが重要性や美学に基づいて配置を決定することです。
一方、カードは、すべての関連情報がカードに含まれていることを意味します。カードを「ズームイン」または「フリップ」して、さらに表示できる場合があります。しかし、彼らはそれらの相互作用の中で必要なすべてを伝えなければなりません。さらに、カードでは配置が重要です。マインドマップやクラスダイアグラムのようなリレーショナル配置、または同様の概念を示すクラス図、またはタスクの状態を示すカンバンボードのような絶対配置。
カードが通常使用される場所で使用されるタイルは混乱を招き、ユーザーはタイルが情報を表示する以外に何をするかさえ気付かないかもしれません。同様に、タイルのグループ内のカードはフラストレーションを引き起こす可能性があり、ユーザーはそれを操作するときにさらに多くのことが発生することを期待します。
アプリに最適なものは、その内容に依存します。ここでこれを知らなくても、両方のデザインパターンについて検討すべきことがいくつかあります。
タイルは、ギャラリーのように、フラットで小さなマージンに似ています。 これはMetro UIパターンを説明するウィキペディアのページです これはタイルに依存しています。
カードは一口サイズの情報の一部です。背景以外のグラフィック要素の上に間隔をあけて配置します。
カードは、デザインがユーザーをコンテンツに明確に誘導するため、簡単な情報を読むのに役立ちます。
これはカードのUIを説明する記事です （少し偏っています）
タイルはカードよりもわかりやすいと思います。名前が示すとおり、タイルはサイズが固定され（または幾何学的に関連するサイズの小さなサブセットに制限され）、グリッドに沿って規則的に配置されます。ほとんどの場合、タイルは不完全な情報プロバイダーです。タイルについて何か知りたい場合は、それらと対話する必要があります。それらの表示はアイコンよりも静的ではなく、タイルはグラフィック操作を実行して、必要なときに注意を引くことができます。また、キャンバスとの固定された関係を維持します。キャンバスの左上隅にタイルを配置した場合、移動したり強制的に移動したりしない限り、タイルは常に左上隅にあるはずです。
カードはよりダイナミックで、より多くの情報を保持し、キャンバス上の不規則な場所に配置できます。カードは常に固定サイズであるとは限らず、固定サイズのセットに限定されているわけでもありません。カードは完全なものにすることもできます。カードが提供するすべての情報を学習するために、カードを操作する必要がある場合とそうでない場合があります。カードは重複することがよくあります。キャンバスとの関係でカードを移動する方が、タイルやアイコンを使用するよりも簡単です。カードは必要に応じて再配置することもできます。
タイルはよりナビゲーションツールであり、カードはよりコンテンツツールです。
タイル、カード、ウィジェット、ギズモ、グリッド-名前は関係ありません。重要なのは、機能性と原理です。
すべてのコンテンツと機能を過度に一貫性のある方法で動作させるインターフェースメソッドの作成には十分注意してください。一貫性は、物事をきれいに見せ、ある程度までは不可欠です。
秘訣は、あなたがしていることが新しいやり方を必要とする時を知ることです。
たとえば、ユーザーが自分でページを作成できるようにするために「ウィジェット」アプローチを不必要に使用している多くのWebサイトやイントラネットを見てきました。 BBCとGoogleは失敗しましたが、企業や経験の少ないUXの人々が何回それを使用しても、どの企業でも効果的に機能することはまだわかりません。
一方、「タイル」を使用して「類似アイテム」を表示することは、標準的な方法です。多くの場合、それは単にグリッドビューと呼ばれます（ただし、それをユーザーに公開しないことが最善です）。ほとんどのeコマースサイトがこれを使用しています。 pinterestのようなサイトのタイルビューは、垂直方向の高さが変化するグリッドビューです。基本的な原則は同じですが、プレゼンテーションは適切に調整されています。
お役に立てば幸いです。
タイルは、たとえば画像の間にスペースのない同種の要素（画像のギャラリーなど）に適しています。視覚的な連続性により、ユーザーはアイテムを簡単に比較できます。ただし、カードは、アイテム間のスペースが上下にスクロールするときに異なる/一意の要素を処理するような印象をユーザーに与える異種アイテムに適しています。