マージンVS Edge to Edgeコンテナーのカード
デザインVSエッジツーエッジコンテナーでマージンのあるカードを使用する場合の背後にあるロジックはありますか？マテリアルデザインガイドラインと、明確なロジックを示さないiOSガイドラインを確認しました。以前はマージンのあるカードを使用していたFacebookを確認しましたが、現在はEdge to Edgeコンテナーに切り替わりました。同様に切り替えの決定の背後にある研究を見つけることができませんでした。
マージンとシャドウのあるカードは、実際のカードのように見えます。
それが素材デザインのモットーです。物を実際のオブジェクトとして表示するため。オブジェクトは、エクスペリエンスの連続性を損なうことなくユーザーに提示されます。
素材は隠喩です
マテリアルメタファーは、合理化された空間と運動システムの統一理論です。 素材は、紙とインクの研究に触発された触覚的現実に基づいていますが、技術的に進歩し、想像力と魔法に開放されています。
マテリアルの表面とエッジは、実際に接地されている視覚的な手がかりを提供します。使い慣れた触覚属性を使用すると、ユーザーはアフォーダンスをすばやく理解できます。しかし、材料の柔軟性により、物理学のルールを破ることなく、物理的な世界のアフォーダンスに取って代わる新しいアフォーダンスが作成されます。
光、表面、および動きの基本は、オブジェクトがどのように動き、相互作用し、空間に存在し、相互に存在するかを伝えるための鍵です。現実的な照明は、継ぎ目を示し、空間を分割し、可動部分を示します。
ロジックはコンテンツにあります。
免責事項：前回チェックしたときのことを覚えておいてくださいAppleにはカードのセクションがないため、これはマテリアルに適用されます。
お気づきの違いは、1つはカード（マージンの1つ）で、もう1つはリストのタイルです。
カードでは、大きな写真（カードのフルサイズを含む）、タイトル、テキスト、アクションなど、さまざまなタイプのコンテンツを使用できます。次に、独自のコンテナに値するのに十分な高さの階層があるときに使用されます。
使用する場合
次のようなコンテンツを表示する場合は、カードレイアウトを使用します。
- コレクションとして、画像、動画、テキストなどの複数のデータ型で構成されます
- 直接比較する必要がない（ユーザーが画像やテキストを直接比較していない）
- コメントなど、非常に可変長のコンテンツをサポートします
- +1ボタンやコメントなどのインタラクティブなコンテンツが含まれています
- それ以外の場合はグリッドリストにありますが、画像を補足するためにより多くのコンテンツを表示する必要があります
ただし、コンテンツが均質すぎてアクションが少ない（またはアクションがない）場合は、タイルリストを使用することをお勧めします。実際、マテリアルはこの特定の例を示しています
行う
カードの代わりにすばやくスキャンできるリストは、多くのアクションを持たない同種のコンテンツを表す適切な方法です。
しない
ここでカードを使用すると、ユーザーはすばやくスキャンできなくなります。これらのリストアイテムも非表示にできないため、別のカードに配置すると混乱を招きます。
しかしながら...
Materialは単なるガイドラインであり、少し試してみてください。実際、アプリを他の人のように見せたくない場合を除いて、アプリに少し個性を与えることをお勧めします
多くのWebアプリまたはWebサイトは、モバイル画面でEdge to Edgeカードを使用しています。
これにより、すでに幅の狭い画面領域にコンテンツを表示するためのスペースが広がります。幅が360dpの携帯電話を想像してみてください。ガイドラインにより、8 dpまたは16 dpのマージンを使用すると、基本的にそれぞれ16 dpまたは32 dpが失われます。そして、その16 dpまたは32 dpが大きな役割を果たす可能性があります（たとえば、オーバーフローボタンに収めたり、1行に複数の文字を表示したりできます）。
また、モバイルにカードを挿入すると、コンテンツが頻繁に壊れるような感じになります。このアイデアを実証するために、表のセル行ではなく、4pxガターを挟んだカードを備えたGmailなどのメールアプリであるフルHDで表示していると想像してください。それは不快ではないでしょうか？
表示されるレスポンシブWebサイト/ Webアプリのほとんど*は、Bootstrapグリッドスタイルの考え方を使用しています。つまり、定義された最大幅が異なるブレークポイントのコンテナーに設定されていますが、モバイルデバイスの場合、コンテナーの幅はブラウザの幅の100％に設定します。したがって、カードをコンテナに配置すると、デフォルトでブラウザの幅の100％に調整されます（つまり、エッジ間）。これは、ロジックよりも結果の方が多いです。前の2つのポイントのロジック。
*ほとんど-それをサポートする統計はありませんが、ここではおそらく理由を強調するためにのみ使用しました。