web-dev-qa-db-ja.com

マテリアルデザイン-カード内のカード

私の製品にはマテリアルデザインを利用しており、情報を表示するカードがあるエリアがあります。

カードをカード内にリストできますか?

下の画像に似ていますが、コンテンツがあります。

enter image description here

18
Bryce Snyder

ガイドラインでは明らかに しないでください であると他の人が指摘していますが、GoogleがGoogleアプリ自体でネストされたカードを使用していることは注目に値します。

enter image description here

個人的には、横にスクロールするカードをメインカードの下のセクションに分割し、「関連するストーリー」を上線で表示し、2番目の性質を示すために0dpにするのが良い方法だと個人的に考えています

6
micimize

いいえ

MDカードのガイドライン に従って:

カードには、写真、テキスト、および1つの主題に関するリンクを含めることができます。可変長のキャプション付きの写真など、さまざまなサイズの要素を含むコンテンツを表示する場合があります。

カードコレクションは、同じ平面上のカードのレイアウトです。

また:

カードコレクションは、同一平面上にある、または同じ平面上のカードのレイアウトです。

コプレーナを使用する場合、各カードは互いに同じ平面上になければなりません。ここで、planeはアプリまたはページの背景です。

最後に、 content について:

カードは、以下を含むコンテンツのブロックを使用して構築できます。

An optional header
A primary title
Rich media
Supporting text
Actions
17
Devin

Google Material Designからは、良いアイデアではないことを示唆する良い説明と参考文献がすでにいくつかあるので、私はこれを純粋なデザインの側面から2つの方法で取り組みます。

カードの目的:コンテンツを表示して、シンプルで明確な方法で表示できるようにします。時々人々はそれにあまりに多くの相互作用を加えようとします(例えば、Windows 10のライブタイルまたはカードのアクション/リンク)、そしてそれはカードが提供することになっている目的を本当に無効にします。

カードの問題:ほとんどの「フラット」なデザイン要素と同様に、ユーザーが行う以外に、カード内で起こりうる相互作用を示す明確な方法はありません。探索する(つまり、マウスまたはタッチを使用する)ため、対話とコンテンツをできるだけシンプルにする必要があります。ただし、最近では、カード全体の相互作用とカードの一部/セクションの両方の相互作用を含めるように、このデザインパターンのバリエーションが急増しています。これにより、ユーザーが理解するのに必要な相互作用の複雑さが増し、全体的なデザインが、特に複数の異なるタイプのカードが同時に存在する場合、非常に「直感的」ではありません。

したがって、これがデザインパターンで通常推奨されない理由であることがわかります。

また、マテリアルデザインのいくつかの落とし穴について興味深い article があり、カードの使用についても説明しています。

カードには独自の目的があり、データを表示する必要があるすべてのシナリオに適しているわけではありません。いいえ、それらはすべてのデザインの問題の万能薬ではありません。誤用すると、最終的には認知障害になります—美しいものですが、それでも目詰まりです。

5
Michael Lai

私は同じ問題を抱えていて、それが明確な「できない」ことだとは思いません。たぶん、これはデスクトップ/より大きなデバイスでより多く出てきます。

私がそれを検討している理由は、タブ付きの内容のカード(デスクトップ上)を持っているからです。各タブには、情報の「リスト」が含まれており、そのうちのいくつかは3行を超えるコンテンツを必要とします(したがって、リストとして提示することはできません-これは仕様で明示されています-「3行を超えるテキストを表示する必要がある場合」リストタイルでは、代わりにカードを使用してください。」)。したがって、これはカードがこれらのアイテムの適切なコンテナであることを示唆しているようです。

カード内にカードのプレーンを配置できない理由はわかりません。カードは、テキスト、画像、リッチメディア、リンクのみを含むものに限定されません。仕様に従って、次のようなさまざまな種類のコンテンツをカードに含めることは問題ありません。

タブ!、入力、リスト、グリッドリスト。カードのタブを示す Specs の例を次に示します。

enter image description here

では、なぜカードの平面ではないのですか?

カードのコレクションは同一平面上にありますが、それはその平面上のカードにカードのコレクションを含めることができないという意味ではなく、単にそのコレクションが別の平面上にあるという意味です。つまり、親カードは兄弟のある平面上にあり、子コレクションも独自の平面上にあります(たまたま別のカード内の平面上にあります)。したがって、(質問に示されているように)ネストされたコレクションをより高い平面に昇格する必要があるだけです。

3
Meli

私はおそらくそれがカードが使用されることを意図されている方法ではないと思います。

関連するガイドライン を読んだ後、カードに埋め込まれたカードに関する具体的な言及は見つかりませんでしたが、カードでサポートされているジェスチャーについてのガイドラインは見つかりました。たとえば、カードで「ピックアップアンドムーブ」ジェスチャーがサポートされているという事実により、これらの要素はネストすべきではないと思います。

2
maxathousand

カードをカード内に含めることはできません。

カードは、特定のトピックまたはコンテキストが与えられたものの単一のインスタンスを表すことを目的としています。カードをネストすることで、同じコンテナ要素内で2つの異なるカードコンテキストを表します。ネストされたカードは、親カードとは異なるカードコンテキストを表すため、独自のコンテナ要素を持つ必要があります。

素材デザイン-カード

Xを拡張するためのカードベースのデザインの使用

2
Tory

重要な点は、カードの内容( 多くのアクションを持たない同種のコンテンツの場合 )と、アイテムの幅と高さです。

デザインが単にコンセプトを例示するためのものであり、たとえば1200px x 1200pxのメインカードについて話し合うことができる場合、それはメインコンテナーであり、2枚のカードが含まれていますが、これは許容できると思います。

メインカードが小さく、内部のカードを使用すると、ユーザーがすばやくスキャンできなくなる場合は、これはお勧めできません。

1
Madalina Taina