カードごとに 1 つのテーマを保持する
カードの開設を決定する前に、ユーザーが知っておくべきことを判断します。
カード デザインシステム
情報とアクションを 1 つの簡単に調べられる単位に収集します。
チェックリストの内容
確認の進捗
01
構造と意味
使用状況に応じて情報とプレゼンテーションを比較します。
02
インタラクションとユーザビリティ
操作を試し、ステータスを変更して作業を続行します。
進捗はこのブラウザーに自動保存されます。
ガイド
確認方法
使用例
使用例
カードごとに 1 つのテーマを保持する
コースカードには、「コースを見る」ボタンの前に名前、レベル、期間が記載されています。
バリエーションと利用場面
カードの分け方
枠線または背景を使用してカードとページを区別し、同じコンテンツ タイプに対して同じルールを維持します。
明るい背景と暗い背景でカードをテストします。影に関係なく境界が見える必要があります。
例 ドキュメント タグでは、透明な境界線とリンクされたタイトルが使用されます。
タグ内のスペース
コンテンツの関係を反映した間隔で、写真、タイトル、説明、アクションをグループ化します。
タイトルを 2 行にして、写真を省略してみてください。距離があれば無意味な空間は生まれません。
例 画像はタイトルから 12 ピクセル離れています。説明はタグ終了ボタンよりもタイトルに近いです。
角の丸みとコンテンツの切り抜き
半径を同じデザインスケールに保ち、画像をフレームの直角にトリミングします。
写真をカードの端に近づけて置き、フォーカスを開きます。画像が隅を越えたり、フォーカスの境界線が切れたりすることはありません。
例 カード上部の写真は上部 2 隅のみをカバーしています。フッターは背景をフレームに付けたままにします。