Adobe XD로 프로토 타입 제작

작가: Monica Porter

창조 날짜: 14 3 월 2021

업데이트 날짜: 17 할 수있다 2024

콘텐츠

01. 프로젝트 시작
02. 첫 번째 이미지 가져 오기
03. 캐빈 배치
04. 로고 가져 오기
05. 서클 추가
06. 그래픽 재정렬
07. 마이크 떨어 뜨려
08. 문자 메시지
09. 그룹 가입
10. 로고 그룹화
11. 추가 요소
12. 다른 가져 오기
13. 라벨 추가
14. 그룹 복제
15. 이름 변경 후 다시 복사
16. 텍스트 제목
17. 불투명도 변경
18. 화면 복제
19. 배경 이동
20. 새로운 요소가 나타납니다.
21. 뒤로 버튼 완료
22. 음성 명령
23. 프로토 타입 테스트
24. 돌아 가기
25. 음성 확인
26. 이미지 크기 조정
27. 새로운 화면 요소
28. 버튼 만들기
29. 프로토 타입 모드로 이동
30. 애니메이션 설정
31. 뒤로 버튼 연결
32. 자동 애니메이션
33. 프로젝트 저장
34. 프로젝트 공유
35. 프로토 타입 게시
36. 비디오 버전

현대의 웹 및 앱 디자인에서는 상호 작용이 완전히 새로운 페이지 나 화면을 열지 않는 경우가 많습니다. 대화 형 콘텐츠를 만드는 현대적인 접근 방식에서는 디자인 인터페이스 요소간에 전환이 필요하므로 사용자는 콘텐츠 변경 경험에 놀라고 놀라게됩니다. 이 모든 것이 새로 고침없이 동일한 화면이나 페이지에서 발생합니다. 이러한 종류의 상호 작용을 설계하고 제대로 작동하도록 조정하는 데는 시간이 걸릴 수 있지만 코드를 작성하기 전에 수행 할 가치가 있습니다.

이것이 Adobe XD가 지난 몇 달 동안 개발을 올바르게 수행하는 데 소비 한 것입니다. 한 화면에서 한 상태로 콘텐츠를 만들고 해당 콘텐츠를 새 화면의 새 상태로 이동 한 다음 '자동 애니메이션'옵션을 선택하여 전환하면됩니다. 두 화면에서 동일한 모든 콘텐츠가 한 위치에서 다른 위치로 자동으로 애니메이션됩니다. 모든 콘텐츠가 두 화면에 모두 표시되는 것을 원하지 않는 경우 콘텐츠를 첫 번째 화면에 표시하지 않으면 해당 위치로 전환됩니다.

다음과 같은 다른 Adobe 소프트웨어에 대해 알아보십시오. Adobe Dimension.

8 가지 필수 프로토 타이핑 및 빌드 도구

여기에서는이를 수행하는 앱 프로토 타입을 만드는 방법을 보여줍니다 (앱 자습서를 만드는 방법에 대한 자세한 내용은 최고의 자습서 요약을 확인하십시오). 그리고 XD의 새로운 기능을 통해 사용자는 음성과의 상호 작용을 제어 할 수 있습니다. 이를 디자인 기능으로 살펴보고 앱이 사용자에게 어떻게 반응하여 흥미로운 디자인 기회를 제공 할 수 있는지 살펴 보겠습니다.

프로젝트 파일 다운로드 이 튜토리얼을 위해.

01. 프로젝트 시작

Adobe XD가없는 경우 여기에서 다운로드하여 설치할 수 있습니다. 설치가 완료되면 소프트웨어를 열면 시작 화면에서 다운로드 할 화면 크기를 선택할 수 있습니다. 이 경우이 프로젝트에 적합한 크기 인 iPhone 6/7/8을 선택하지만 다양한 크기를 사용할 수 있습니다.

02. 첫 번째 이미지 가져 오기

이미지를 가져 오는 방법에는 여러 가지가 있지만이 첫 번째 인스턴스에서는 파일> 가져 오기로 이동합니다. 프로젝트 파일에서 'assets'폴더를 선택하면 가져올 첫 번째 이미지는 'sky.png'가됩니다. 화면 상단에 놓고 몇 픽셀 아래로 이동하십시오.

03. 캐빈 배치

다음 디자인 이미지는’cabin.png’입니다. 이전 단계에서했던 것과 동일한 방식으로 가져온 다음 화면을 채우도록 배치하면됩니다. 마지막으로 이미지’trees.png’를 가져 와서 호수 위에 나무가있는 화면 하단에 배치합니다.

04. 로고 가져 오기

이러한 이미지가 별도의 레이어 인 이유는 화면간에 전환이 생성 될 때 개별적으로 이동할 수 있기 때문입니다. 파일 메뉴로 이동하여 가져 오기를 선택합니다. 이번에는 벡터 이미지 인 'logo.ai'를 선택합니다. 이 이미지를 화면 중앙 상단에 배치하십시오.

05. 서클 추가

원 도구를 선택하고 로고보다 약간 큰 원을 그립니다. 오른쪽의 속성 패널에서 획을 제거하고 배경을 검정색으로 만듭니다. 배경 흐림을 선택하고 원이 여전히 검은 색이되도록 밝기를 -30으로 줄입니다.

06. 그래픽 재정렬

이제 원이 로고 뒤로 이동해야합니다. 개체> 정렬 및 뒤로 보내기를 선택합니다. 다른 Adobe 제품과 마찬가지로 Cmd / Ctrl + [ 레이어 순서에서 그래픽을 뒤로 이동합니다. 한편 오른쪽 대괄호를 사용하면 개체가 순서대로 앞으로 이동합니다.

07. 마이크 떨어 뜨려

이제’mic.ai’이미지를 가져오고 이미지 크기를 비교적 작게 조정합니다. 화면 하단에 배치합니다. 이 주위에 원을 그리고 채우기를 선택 취소하여 제거합니다. 그런 다음 획을 흰색으로 만들고 너비를 2 픽셀로 만듭니다. '마이크'이미지 주변에 배치합니다.

08. 문자 메시지

텍스트 도구를 사용하여 마이크 아래에 '검색하려면 말하세요'라는 단어를 추가하세요. 텍스트를 흰색으로 만들고 Helvetica Neue Condensed Black으로 변경합니다. 화면 왼쪽 하단에서 자산 패널 아이콘을 클릭하여 엽니 다. 화면에서 텍스트를 선택한 상태에서 '문자 스타일'옆에있는 '+'아이콘을 클릭하여 텍스트 형식을 저장합니다.

09. 그룹 가입

화면 왼쪽 하단에서 레이어 패널 아이콘을 선택합니다. 화면에서 '검색'텍스트를 선택하고 Shift- 클릭 원과 마이크 아이콘을 추가합니다. 개체로 이동하여 그룹을 선택합니다. 레이어 패널에서이 그룹의 이름을 '검색'으로 바꿉니다. 그룹에 이름을 지정하는 것이 유용합니다. 특히 이러한 그룹을 애니메이션 할 때 유용합니다.

10. 로고 그룹화

마지막 단계에서와 마찬가지로 로고와 그 주위의 흐릿한 원을 선택한 다음 함께 그룹화합니다. [레이어] 패널에서 나중에 다시 편집해야 할 경우 쉽게 식별 할 수 있도록 전체 그룹 '로고'의 이름을 바꿉니다. 현재 첫 화면의 디자인이 완성되었습니다.

11. 추가 요소

첫 번째 화면이 완성 되었더라도 추가해야 할 디자인 요소가 더 있습니다. 화면 간 요소의 위치를 변경하여 애니메이션을 만드는 방법입니다. 직사각형 도구로 이동하여 시프트 화면에 사각형을 추가하여 테두리를 흰색으로 만듭니다.

12. 다른 가져 오기

이제 운영 체제를 통해 자산 폴더를 엽니 다. ’cabin1.png’이미지를 선택하고 이전 단계에서 만든 사각형으로 직접 드래그합니다. 이 안에 자동으로 마스킹됩니다. 두 번 클릭하여 이미지 위치를 편집하고 캐빈이 사각형에 표시되는지 확인합니다.

13. 라벨 추가

텍스트 도구를 사용하여 텍스트 아래에’Forest Cabin’레이블을 추가하고 Assets 패널을 사용하여 8 단계에서 저장 한 스타일의 텍스트 스타일을 지정합니다. 이미지와 레이블을 선택하고 함께 그룹화합니다. 레이어 패널에서 그룹 이름을 'left cabin'으로 지정합니다.

14. 그룹 복제

일반적으로 인터페이스 요소를 반복하는 것은’Repeat Grid’도구의 완벽한 작업입니다. 그러나 여기에는 반복 그리드에서 작동하지 않는 특정 애니메이션이 필요합니다. 이미지 및 텍스트 그룹을 선택한 다음 원본 옆에 배치되도록 복사하여 붙여넣고 대신 이미지’cabin2.png’를 추가합니다.

15. 이름 변경 후 다시 복사

텍스트를 'Snow Cabin'으로 변경하고 레이어 패널에서이 'right cabin'이라는 이름을 지정합니다. 왼쪽 및 오른쪽 캐빈을 모두 선택하고 복제 한 다음 복제물을 아래에 배치하고’cabin3.png’및’cabin4.png’로 텍스트와 이미지를 업데이트합니다. 이 두 가지를 함께 그룹화하고 그룹 이름을 '하부 오두막'으로 지정합니다.

16. 텍스트 제목

페이지에 '캐빈 검색 결과'텍스트를 추가합니다. 여기에 Rockwell 서체를 지정하고 Assets 패널의 Character Styles에 저장합니다. 이제 화면 하단에 'lower cabin'그룹을 배치하고이 화면에서 보이지 않도록 모양을 0으로 낮 춥니 다.

17. 불투명도 변경

이제 왼쪽 및 오른쪽 캐빈을 선택하고 화면 하단으로 이동 한 다음 모양 슬라이더를 0으로 설정합니다. 검색 텍스트에 대해 다시 반복하십시오. 다른 화면으로 이동하면 모두 새 위치로 애니메이션됩니다. 레이어 패널에서 '왼쪽 오두막'을 다른 모든 오두막 그룹 위로 이동합니다.

18. 화면 복제

이름을 클릭하여 아트 보드를 선택한 다음 아트 보드를 두 번 클릭하고 이름을 '홈'으로 변경합니다. 아트 보드를 복사하여 붙여넣고 이름을 'search'로 바꿉니다. 이제 로고를 선택하고 화면에서 거의 벗어나도록 이동 한 다음 모양을 0으로 줄입니다.

19. 배경 이동

하늘 이미지를 선택하고 화면에서 약간 위로 이동합니다. 객실 이미지를 선택하고 객실이 화면 상단에 올 때까지 위로 이동합니다. 그런 다음 나무 이미지를 클릭하고 오두막 위로 이동합니다. 마지막으로 '검색'그룹을 선택하고 모양을 0으로 줄입니다.

20. 새로운 요소가 나타납니다.

레이어 패널에서 검색 결과를 선택하고 모양을 최대 100 개까지 가져옵니다. 화면에서 위로 이동합니다. 왼쪽 캐빈, 오른쪽 캐빈 및 하단 캐빈에 대해이 작업을 반복합니다. 펜 도구를 사용하여 간단한 뒤로 버튼을 그리고 그 주위에 원을 추가합니다. 배경을 흐리게 만들고 밝기를 -30으로 낮추십시오.

21. 뒤로 버튼 완료

뒤로 화살표와 원을 선택하고 그룹화 한 다음 레이어 패널에서 '뒤로 버튼'으로 이름을 지정합니다. XD 인터페이스의 왼쪽 상단에있는 '프로토 타입'을 눌러 '프로토 타입'모드로 전환합니다. 홈 화면을 선택하고 파란색 화살표를 검색 화면으로 드래그하면 팝업 창이 나타납니다.

22. 음성 명령

트리거를 음성으로 변경하고이를 제어하는 음성 명령으로 '검색'단어를 입력합니다. Action을 Auto-Animate로 변경하고 Easing을 Snap으로 변경합니다. 기간을 1.5 초로 설정합니다. 검색 화면에서 뒤로 버튼을 클릭하고 파란색 화살표를 '홈'화면으로 다시 드래그합니다. 트리거를 탭으로 변경하기 만하면됩니다.

23. 프로토 타입 테스트

XD 인터페이스의 오른쪽 상단에는 재생 버튼이 있습니다. 이것을 클릭하면 작동하는 프로토 타입이 화면에 나타납니다. 홈페이지에서 '검색'음성 명령을 말하는 동안 스페이스 바를 길게 눌러야합니다. 스페이스 바에서 손을 떼면 다음 화면으로 이동하여 그래픽 인터페이스를 제자리에 애니메이션으로 표시합니다.

24. 돌아 가기

전환이 실행되면 뒤로 버튼을 눌러 홈 화면으로 돌아갈 수 있습니다. 프로토 타입을 닫고 검색 화면을 클릭 한 다음 오른쪽에있는 파란색 화살표를 클릭합니다 (드래그하지 마십시오). 트리거를 시간으로 변경하고 지연을 0으로 설정하고 동작을 음성 재생으로 설정합니다. '사용 가능한 객실에 대한 검색 결과'를 연설합니다.

25. 음성 확인

지금 재생 버튼으로 테스트하여 검색에 대한 음성 확인을 듣습니다. 이것을 시도한 후 프로토 타입을 닫으십시오. 다른 화면이 생성 될 것이므로 XD 인터페이스의 왼쪽 상단에있는 'Design'보기를 다시 클릭 해 보겠습니다. 이름을 클릭하여 검색 화면을 클릭 한 다음 복사하여 붙여 넣습니다.

26. 이미지 크기 조정

새 화면의 이름을 '캐빈'으로 변경합니다. '왼쪽 오두막'레이어의 이미지를 두 번 클릭합니다. 화면을 채우도록 모서리 핸들의 크기를 조정 한 다음 해당 화면을 덮도록 내부 이미지의 위치를 조정합니다. 검색 결과 텍스트를 클릭하고보기에서 제거하려면 모양을 0으로 줄이십시오.

27. 새로운 화면 요소

그룹의 일부인 'Forest Cabin'텍스트를 두 번 클릭합니다. 텍스트 크기를 26 픽셀로 확대하고 화면에서 약간 위로 이동합니다. Helvetica Neue Medium의 14 픽셀 크기로 화면에 텍스트를 추가하고 배경에 눈에 띄도록 흰색으로 설정합니다. 제목 아래에 선 도구를 사용하여 흰색 선을 추가합니다.

28. 버튼 만들기

사각형 도구를 사용하여 디자인 하단의 화면에 사각형을 그립니다. 모서리 핸들을 드래그하여이 모양에 모서리를 둥글게 만듭니다. Condensed Bold의 Helvetica Neue 용 Assets 패널에 저장된 문자 스타일을 사용하여 여기에 'Reserve'라는 단어를 추가합니다.

29. 프로토 타입 모드로 이동

이제 앱의 전체 디자인을위한 모든 디자인 요소가 제자리에 있습니다. 왼쪽 상단의 'Prototype'단어를 클릭하여 'Prototype'모드로 이동합니다. 검색 화면에서 이미지와 텍스트의 '숲 오두막'그룹을 클릭합니다. 여기에서 파란색 핸들을 '캐빈'화면으로 드래그합니다.

30. 애니메이션 설정

화면 전환을위한 팝업 패널에서 탭을 트리거로 선택한 다음 동작을 자동 애니메이션으로 만듭니다. Easing을 Snap으로 유지하되이 기간을 0.6 초로 줄이십시오. 이렇게하면 애니메이션이 드래그되지 않습니다. 첫 번째 화면에서 두 번째 화면으로의 이동에는 더 긴 전환이 필요한 많은 이동이있었습니다.

31. 뒤로 버튼 연결

이제 최종 화면에서 뒤로 버튼을 선택하고이 뒤로 파란색 화살표를 '검색'화면으로 드래그합니다. 이전 전환의 모든 설정을 기억해야합니다. 이제 플레이 버튼을 클릭하여 테스트 할 준비가되었습니다.

32. 자동 애니메이션

이제 자동 애니메이트로 볼 수있는 것은 이미지가 화면을 채우도록 확장되고 더 이상 필요하지 않은 요소가 사라지고 새 텍스트가 페이드 인된다는 것입니다. 되돌아 갈 때 반대가 발생합니다. 이렇게하면 세 화면에서 자동 애니메이션이 작동하는 것을 확인할 수 있습니다.

33. 프로젝트 저장

기본적으로 프로젝트는 Creative Cloud에 자동으로 저장되지만 문제가있을 경우에 대비하여 자신의 하드 드라이브에 사본을 저장하는 것이 좋습니다. 파일> 저장을 클릭하고 위치를 자신의 컴퓨터로 변경하고 적절한 이름으로 프로젝트 이름을 지정합니다.

34. 프로젝트 공유

프로토 타이핑의 요점은 다른 사람들에게 프로젝트를 테스트하는 것입니다. 다행스럽게도 XD 인터페이스의 오른쪽 상단에 공유 버튼이있어이를 쉽게 처리 할 수 있습니다. 공유 버튼을 클릭하고 나타나는 드롭 메뉴에서 검토를 위해 공유 옵션을 선택합니다.

35. 프로토 타입 게시

다음 화면에서 자동 애니메이션 지원은 아직 웹에서 사용할 수 없지만 곧 지원 될 예정이라는 메시지가 표시됩니다. 공개 링크 만들기를 클릭 한 다음 오른쪽 상단의 링크를 클릭하여 웹 브라우저에서 공개 링크를 방문합니다. 프로토 타입에 음성 명령을 사용하려면 스페이스 바를 누르고 있어야합니다.