사람이나 그룹을 인식하기 위해
프로필 사진이 사용자를 식별하는 유일한 방법이 되어서는 안 됩니다.
아바타 디자인 시스템
신원을 보여주고 통제된 사진 업데이트를 제공하세요.
체크리스트 내용
검토 진행 상황
01
구조와 의미
사용 맥락에 따라 정보와 프레젠테이션을 비교합니다.
02
상호 작용 및 유용성
작업을 시도하고 상태를 변경한 후 작업을 계속하세요.
진행 상황은 이 브라우저에 자동으로 저장됩니다.
안내
검토 방법
예시
활용 예시
사람이나 그룹을 인식하기 위해
회원 목록에는 아바타와 "Linh Nguyen"이라는 이름이 모두 표시됩니다.
변형 및 사용 사례
대표 이미지 형태
동일한 개체 유형에 대해 일관된 모양을 선택하고 자를 때 중요한 이미지 영역을 유지하세요.
가장자리에서 가장자리까지 인물 사진과 가로 로고를 사용해 보세요. 물체의 인식에 도움이 되는 부분을 잘라내지 마세요.
예시 사용자에게 원형 사진이 있습니다. 조직은 모서리가 둥근 사각형 프레임을 가지고 있습니다.
크기 규모
화면에 따라 크기를 조정하는 대신 목록, 댓글, 프로필의 크기를 설정하세요.
두꺼운 줄과 프로필 상단의 아바타를 비교하세요. 작은 이미지로 인해 제품이 비정상적으로 높아지지는 않습니다.
예시 동일한 자르기 방법으로 목록은 32px를 사용하고 프로필은 80px을 사용합니다.
상태 표시
이미지 옆에 상태를 배치하고 상태 이름을 추가하면 사용자가 색상을 추측할 필요가 없습니다.
밝은 테마, 어두운 테마에서 테스트하고 색상을 숨길 때 테스트하세요. 온라인 마크는 여전히 의미가 있습니다.
예시 사용자 정보에 '온라인'이라고 표시된 녹색 점입니다.
사진이 없을때
이미지 URL이 올바르지 않거나 누락되거나 로드되는 경우 크기와 ID를 유지합니다.
사진 요청 차단 행을 이동할 수 없으며 여전히 사용자를 인식합니다.
예시 Anh Nguyen 계정의 오류 이미지가 AN으로 변환되었습니다.
AN
대체 이미지