UI_UX Design/Adobe XD

XD Prototype

jsBae 2022. 11. 12. 22:47

프로토타입

프로토타입(prototype)은 
원래의 형태 또는 전형적인 예, 기초 또는 표준
이다. 시제품이 나오기 전의 제품의 원형으로 개발 검증과 양산 검증을 거쳐야 시제품이 될 수 있다. 프로토타입은 '정보시스템의 미완성 버전 또는 중요한 기능들이 포함되어 있는 시스템의 초기모델'이다.

프로토타입 기능

xd의 강력한 지원 기능은 프로토타입 기능이다.

  • 프로토타입 애니메이션 제작 기능
  • 자동 애니메이트
  • 음성 프로토타입 디자인
  • 시간 경과 전환 만들기....

애니메이션 적용하기

  1. 디바이스 미리보기
  2. 태스크탑 미리보기
  3. 화면 비율
  4. 트리거 : 프로토 다입 인터랙션 개시하는 요소 선택
  5. 유형 : 인터랙션에 발생하는 동작 유형
  6. 대상 : 애니메이션 이후 이동하는 대상
  7. 애니메이션
  8. 이징효과 : 서서히 끝내기, 스냅, 와이드업 등 easing 효과 적용
  9. 재생시간 : 애니메이션 동작시간 조절

실습1_ 움직이는 공

  1. 디자인 모드 : 원형 공을 만든다 . (방사형그라디언트)
  2. 아트보드 복사 : Ctrl + D
  3. 공 위치 변경 : shift + 드래그 : 수평적으로 내림
  4. 아트1 보드에서 프로토타입 전환
  5. 구 선택해서 아트2 중간에 위치 (플로우설정 됨)
    이때 아트1 에서 아트2로 해도 되지만  위 방법(오브젝트 선택)이 좀 더 자연스러움
  6. 애니설정 :  
    1. 트리거 : 탭
    2. 유형 : 자동애니
    3. 이징: 바운스
    4. 재생 : 1초
  7. 확인 : 상단 플레이

https://youtu.be/GYrgg0ZLmFE


롤오버버튼 만들기

https://youtu.be/P0S0ulCQEDk

 

728x90
반응형