일관된 시각적 언어 사용
아이콘 이름은 그림을 설명해야 합니다. 작동 의미는 컨트롤 라벨에 있습니다.
아이콘 디자인 시스템
어떤 크기에서도 아이콘을 알아볼 수 있고 의미 있게 유지하세요.
체크리스트 내용
검토 진행 상황
01
구조와 의미
사용 맥락에 따라 정보와 프레젠테이션을 비교합니다.
02
상호 작용 및 유용성
작업을 시도하고 상태를 변경한 후 작업을 계속하세요.
03
경험을 완성하세요
디자인을 활용하면서 놓치기 쉬운 디테일을 확인해보세요.
진행 상황은 이 브라우저에 자동으로 저장됩니다.
안내
검토 방법
예시
활용 예시
일관된 시각적 언어 사용
동일한 "휴지통" 이미지에는 상황에 따라 "초안 삭제" 또는 "회원 삭제"라는 라벨이 지정됩니다.
변형 및 사용 사례
아이콘 스타일
동일한 역할과 동일한 화면에 있는 아이콘에는 라인 또는 블록 시스템을 사용합니다.
같은 크기의 이전 아이콘 옆에 새 아이콘을 배치합니다. 밀도와 공간이 균일해야 합니다.
예시 메일, 비디오 및 문서 버튼은 동일한 1.6px SVG 세트를 사용합니다.
크기 및 상호 작용 영역
클릭 영역에서 획 크기를 분리합니다. 작은 아이콘에는 여전히 적절한 터치 영역이 필요합니다.
모바일 버튼에 16px 아이콘을 사용해 보세요. 사용자가 스트로크를 정확하게 터치할 필요는 없습니다.
예시 18px 아이콘은 44px 클릭 영역 중앙에 있습니다.
의미에 따른 이름
기능 이름을 명확하게 지정하고 사용자가 그림에서 의미를 추측하지 못하도록 하세요.
스크린 리더는 작업 이름을 읽을 수 있어야 합니다. 장식 아이콘은 레이블을 반복하지 않습니다.
예시 버튼의 벨 아이콘 이름은 "알림 열기"이며, 텍스트 옆의 아이콘은 액세스 트리에서 숨겨집니다.
알림
계정
검색