분류기

필터를 사용하여 호버 효과 만들기

분류기는 요소와 그 자손에 적용될 수 있는 시각적 효과에 대한 권한을 부여합니다. 호버링 시 흑백 이미지를 컬러로 변환하는 등 상황 변화에 매우 유용합니다.

분류기 및 대체 효과에 대해 자세히 알아보세요.

이 튜토리얼에서는: 

  1. 분류기 이해
  2. 분류기 통합
  3. 규제 조건
  4. 전환 통합

분류기 이해

다양한 분류기 대안 중에서 선택할 수 있는 옵션이 있습니다. 

  • 솜털
  • 색상화
  • 강함
  • 가벼움
  • 차이점
  • 단핵증
  • 세피아
  • 뒤집다

분류기 통합

어디서나 모든 요소에 category를 디자인할 수 있는 것처럼 분류기를 장착할 수 있습니다. 이미지에 직접 분류기를 적용할 수 있습니다. 또한 자손이 있는 요소에 분류기를 삽입할 수도 있습니다. 

예를 들어, 모두 동일한 category를 공유하는 3개의 링크 블록이 있습니다(예: "가격 링크 블록"). 

추가하려면 솜털 다소: 

  1. 다음으로 진행하세요. 스타일 패널 > 효과 > 분류기
  2. 더하기 기호를 탭하세요. 분류기
  3. 선택하다 솜털 메뉴에서
  4. 퍼즈 반경을 수정하여 요소와 해당 하위 항목의 퍼즈 수준을 조절하세요.

분류기 메뉴로 돌아가서 Fuzz에서 Mono로 전환하면 링크 블록과 해당 하위 블록이 단색으로 변합니다.

단색 분류기 위에 조명 분류기를 추가하려면:

  1. 더하기 아이콘(+)을 탭하여 분류기
  2. 선택하다 강함 메뉴에서
  3. 슬라이드 수량 조절하는 슬라이더 강함 수준

이 경우 두 분류기(Mono 및 Intensity)는 모두 Strata처럼 구성됩니다. 각 분류기의 표시 여부를 전환하거나 각 레이어를 드래그하여 순서를 수정할 수 있습니다. 

규제 조건

다른 조건에 있는 동안 요소의 분류기를 조절하려면 다음을 수행하십시오. 

  1. 선택 링크 블록 (예: '가격 링크 차단')
  2. 여행 선택하다필드 에서 스타일패널
  3. 선택하다 호버 메뉴에서 

그만큼 호버 조건은 다음의 특성을 상속받습니다. 없음 조건(처음에 구성할 때 스타일을 지정했던 것) 단핵증 그리고 강함 분류기). 따라서 해당 분류기는 정확히 동일하게 유지됩니다. 

호버 조건에서 분류기를 변경하려면 다음을 수행하십시오.

  1. 다음으로 향하세요. 스타일 패널 > 효과 > 분류기
  2. 탭하세요. 단핵증 이전에 구성한 분류기
  3. 개정하다 수량 0%(링크 블록의 색상을 복원함)
  4. 다음을 탭하세요. 강함 다소
  5. 강도 수정 수량 100%로 돌아가기

링크 블록 위로 마우스를 가져가면 업데이트된 효과가 어떻게 작동하는지 확인할 수 있습니다. 

전환 통합

없음과 호버 조건 사이의 분류기 효과를 부드럽게 하기 위해 전환을 추가합니다.

  1. 에서 메뉴로 이동하세요. 선택하다필드 그리고 다시 전환 없음
  2. 방문하다 스타일 패널 > 효과 > 전환
  3. 더하기 기호를 탭하고 이행
  4. 선택하다 다소 ~로부터 전환 유형 메뉴 

이는 없음과 호버 조건 사이를 변경하기 위해 정렬한 분류기로의 전환을 사용합니다. 

전환 타이밍을 실험하고 링크 블록 위로 마우스를 가져가면 동작 중인 전환 기간을 인식할 수 있습니다. 이 상황에서는 기본값인 200밀리초가 만족스러운 것으로 보입니다. 프로젝트 내의 요소에 분류기를 계속 추가하고 디자인에 추가적인 관심과 상호 작용성을 부여하십시오! 

자세히 알아보기 스타일링 조건 다음을 사용하여 조건 간 애니메이션을 개선합니다. 전환.

이완 막
Ewan Mak의 최신 게시물 (모두 보기)