Adobe XD Design An App Prototype UI | XO PIXEL

이봐 요, 픽셀! 이번 주 튜토리얼에서 나는 당신 자신 만의 인터랙티브 디자인 방법을 보여줄 것이다 어도비 XD에서 애플 리케이션 프로토 타입

이 응용 프로그램을위한 디자인은 매우 근사하고 현대적입니다 내 블로그 xopixelcom을 방문하여이 자습서의 기사를 읽으십시오 이제 시작하겠습니다 Adobe XD에서 대지 도구를 클릭하고 사전 정의 된 대지에서 'Android Mobile'을 선택합니다

크기 (오른쪽 패널) 작업 공간에는 총 2 개의 대지가 있어야합니다 이제는 아트 보드를 만들어 Adobe Illustrator에서 그라데이션 배경을 만듭니다 360×640 픽셀이며 그라디언트 도구를 사용합니다 선형 그래디언트를 만드는 데 사용되는 두 가지 색상은 파란색과 녹색입니다

그래디언트가 만들어지면 복사하여 Adobe의 첫 번째 대지 위에 붙여 넣습니다 XD 이제 우리는 첫 번째 대지에서 작업 할 것입니다 먼저이 앱에 이름을 지정해 보겠습니다 캔버스 상단에서 122px 아래로 로고를 배치하십시오

그런 다음 사각형 도구를 사용하여 283x47px 크기의 사각형을 그립니다 로고와 첫 번째 사각형 사이에 35 픽셀의 공간이 있어야합니다 직사각형의 모서리를 27 픽셀만큼 둥글게 만듭니다 사각형 모양을 두 번 더 복제하여 총 3 개를 만들어 놓습니다 서로 아래에 각각 21px 간격을두고 처음 두 직사각형을 흰색으로 채운 다음 불투명도를 20 %로 설정합니다

마지막 사각형에는 채우기가없고 흰색 2 픽셀 경계가 있습니다 이제 우리는 몇 가지 아이콘을 추가 할 것입니다 먼저, 왼쪽 상단 구석에 햄버거 메뉴 아이콘을 추가 할 것입니다 그런 다음 메일 아이콘을 첫 번째 사각형의 왼쪽에 추가합니다 두 번째 직사각형에있는 사람 아이콘을 클릭합니다

또한 모든 텍스트 상자와 버튼에 대해 텍스트를 추가 할 것입니다 마지막으로 3 개의 소셜 미디어 아이콘 (Instagram, Facebook, Twitter)을 추가 할 예정입니다 하단에 이제 우리는 두 번째 대작 작업을 시작할 것입니다 먼저, 첫 번째 대지에 디자인을 복사 한 다음에 붙여 넣습니다

두 번째 대지 전체 디자인을 이동하여 일부만 표시되도록하십시오 그런 다음 전체 대지에 맞게 그라디언트 배경을 슬라이드합니다 프로토 타입 효과를 추가하면 메뉴가 슬라이딩하는 것처럼 보입니다 아웃

햄버거 아이콘을 삭제하고 그 자리에 'X'아이콘을 추가하십시오 '로그인'텍스트와 마지막 두 개의 소셜 미디어 아이콘도 삭제할 예정입니다 슬라이드 아웃 메뉴를 만들려면 왼쪽에 222×640 픽셀의 사각형을 그립니다 아트 보드 이 직사각형의 채우기 색상은 검은 색이고 불투명도는 60 %로 설정됩니다

그런 다음 텍스트 도구를 사용하여 메뉴에있는 링크를 작성합니다 앱 디자인을 대화식으로 만들기 위해 프로토 타입 모드로 들어갈 것입니다 그런 다음 햄버거 메뉴 아이콘을 선택하고 와이어를 드래그하여 연결합니다 두 번째 대지에 슬라이드 오른쪽, 느긋함, 02 초 설정이 가능합니다

두 번째 대지의 경우 'X'아이콘을 선택하고 와이어를 드래그합니다 슬라이드 왼쪽, 안쪽, 02 초 설정으로 첫 번째 대지로 이동합니다 마지막으로 앱 프로토 타입을 테스트하려면 재생 아이콘을 클릭하고을 클릭 한 다음 메뉴 아이콘을 클릭하십시오 메뉴를 열고 닫는 것처럼 보입니다

이것은 정말 멋지다! 나는 당신이이 튜토리얼을 즐겼기를 바란다 마음에 드시면이 비디오에 큰 점수를주십시오 xopixel을 구독하면 이처럼 멋진 디자인 비디오를 얻을 수 있습니다 다음 주 비디오에서 보자!