카드당 하나의 테마 유지
카드 개설을 결정하기 전에 사용자가 알아야 할 사항을 결정합니다.
카드 디자인 시스템
정보와 작업을 스캔하기 쉬운 하나의 단위로 수집하세요.
체크리스트 내용
검토 진행 상황
01
구조와 의미
사용 맥락에 따라 정보와 프레젠테이션을 비교합니다.
02
상호 작용 및 유용성
작업을 시도하고 상태를 변경한 후 작업을 계속하세요.
진행 상황은 이 브라우저에 자동으로 저장됩니다.
안내
검토 방법
예시
활용 예시
카드당 하나의 테마 유지
코스 카드에는 "코스 보기" 버튼 앞에 이름, 레벨 및 기간이 명시되어 있습니다.
변형 및 사용 사례
카드 분리 방법
동일한 콘텐츠 유형에 대해 동일한 규칙을 유지하면서 테두리나 배경을 사용하여 페이지와 카드를 구분합니다.
밝은 배경과 어두운 배경에서 카드를 테스트하세요. 그림자에 관계없이 경계가 보여야 합니다.
예시 문서 태그는 명확한 테두리와 연결된 제목을 사용합니다.
태그의 간격
콘텐츠 관계를 반영하는 간격을 기준으로 사진, 제목, 설명, 작업을 그룹화합니다.
두 줄 제목과 누락된 사진을 사용해 보세요. 거리는 무의미한 공간을 만들지 않습니다.
예시 제목에서 12px 떨어진 이미지; 설명은 태그 종료 버튼보다 제목에 더 가깝습니다.
둥근 모서리 및 내용 자르기
동일한 디자인 배율로 반경을 유지하고 이미지를 프레임의 올바른 각도로 자릅니다.
사진을 카드 가장자리 가까이에 놓고 초점을 엽니다. 이미지가 모서리를 벗어나지 않고 초점 테두리가 잘리지 않습니다.
예시 카드 상단에 있는 사진은 상단 두 모서리만 포함합니다. 바닥글은 배경을 프레임에 붙인 상태로 유지합니다.