테마 가능 빈 상태 이미지 작업

테마 가능 빈 상태 이미지를 추가하여 빈 상태를 사용자 지정하고 사용자 경험을 개선합니다. 빈 상태에는 사용자가 컨텐츠를 추가하거나 생성하기 위한 지침 또는 작업이 포함됩니다.

구성 요소 또는 웹 페이지의 일부 Next Experience 에 데이터가 포함되어 있지 않으면 빈 상태 이미지가 표시됩니다. 빈 상태 이미지는 테마를 적용할 수 있으며 인스턴스의 테마 색상에 맞게 조정됩니다.

그림 1. 빈 상태 이미지

12개의 빈 상태 이미지 유형을 사용할 수 있으며, 각 유형은 소형, 중형 및 대형 버전을 포함합니다. 그러나 UX 스타일 이미지 기록을 사용하여 테마 작성기 테마를 만들면 기록이 비어 있습니다. 이 경우 테마는 기본적으로 기본 시스템 빈 상태 테마 가능 이미지를 사용합니다. 이러한 이미지를 재정의하려면 을 참조하십시오.

의 UI 빌더일러스트레이션 구성 요소를 사용하여 사용자 지정 경험에 빈 상태 이미지를 삽입할 수 있습니다. 일러스트레이션 구성 요소는 사용 가능한 모든 빈 상태 이미지를 표시합니다. 일러스트레이션 구성 요소에 대한 자세한 내용은 Horizon Design System 빈 상태를 참조하십시오.

의 UI 빌더Custom Illustration 구성 요소를 사용하여 사용자 지정 이미지를 추가할 수도 있습니다.

테마 후크가 있는 테마 가능 빈 상태 이미지

다음 이미지는 각 변형에 필요한 테마 후크와 함께 검색 결과 없음 빈 상태 이미지를 나타냅니다.

그림 2. 검색 결과 없음(악센트 실선)

이 변형에 필요한 테마 후크는 $now-color_interactive-1입니다.

그림 3. 검색 결과 없음(악센트 윤곽선)

이 변형에 필요한 테마 후크는 $now-color_interactive-3입니다.

그림 4. 검색 결과 없음(미묘한 윤곽선)

이 변형에 필요한 테마 후크는 $now-color_border-secondary입니다.

그림 5. 검색 결과 없음(피사체 어두운 세부 정보)

이 변형에 필요한 테마 후크는 $now-color_border-tertiary입니다.

그림 6. 검색 결과 없음(피사체 조명 세부 정보)

이 변형에 필요한 테마 후크는 $now-color_background-secondary입니다.

그림 7. 검색 결과 없음(제목 채우기)

이 변형에 필요한 테마 후크는 $now-color_background-primary입니다.

그림 8. 검색 결과 없음(제목 개요)

이 변형에 필요한 테마 후크는 $now-color_border-secondary입니다.

그림 9. 검색 결과 없음(피사체 그림자)

이 변형에 필요한 테마 후크는 $now-color_border-secondary입니다.

빈 상태 표시등 모드 토큰

• 테마에 대한 테마 가능 빈 상태 이미지 사용자 지정
  테마의 이미지 기록을 사용하여 Next Experience 및 테마 작성기 테마의 기본 빈 상태 이미지를 사용자 지정합니다.