私はプロジェクトにカードUIを使用していますが、一部のカードは行または列に配置されている場合が多く、グリッドを構成しています。問題は、一部のカードに「共有」などの1つのアクションがあり、他のカードには2つまたは3つのアクションがあることです。グリッドを台無しにしない一貫した外観を求めています。
私の最良の選択肢は何ですか?カードの下部にアクションを配置することは、少なくともモバイルでは人気があるようです。しかし、これはウェブ上のグリッドを説明していません。
ベストプラクティスに関するアイデアはありますか?
カードのGoogleマテリアルデザインガイドライン は、よく読むことをお勧めします。
カードが同じサイズかどうかを指定しませんでしたが、「グリッドを台無しに」しないことに基づいて、おそらく同じサイズです。
異なるサイズのカードのグリッドが可能ですが、アクションでカードをオーバーロードしないように特に注意する必要があります。
Googleマテリアルデザインから:
カードの主なアクションは通常、カード自体です。
補足アクションは、コンテンツタイプと予想される結果に応じて、コレクション内のカードごとに異なります。たとえば、映画を再生することと本を開くことです。コレクション内のカード内で、アクションを一貫して配置します。
また:
カード内の補足アクションは、アイコン、テキスト、UIコントロールを使用して明示的に呼び出され、通常はカードの下部に配置されます。
オーバーフローメニューに加えて、補足アクションを2つのアクションに制限します。
そして:
カードは複数のアクション、UIコントロール、およびオーバーフローメニューをサポートできますが、制限を使用し、カードはより複雑で詳細な情報へのエントリポイントであることを覚えておいてください。
したがって、Michael Laiが言ったように、一貫性と抑制がここでの鍵です。
注意しないと、それが情報と機能の捨て場になることがわかります
したがって、グリッドは次のようになります。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
これらのカードは非常によく似ており、それぞれにメディアがあり、下部に補足アクションがあります。しかし同時に、補足的なアクションの量が異なると、ある程度矛盾しています。
私が考えることができる2つのデザイン戦略があり、それはあなたがカードに入れている実際のコンテンツに依存すると思います。
情報と機能性のために「クリーン」で単純なカードUIの用語を捨て場に注いでいるので、一般的に他のことは不明確な言葉で多くの悲しみを引き起こします(警告しなかったとは言わないでください)。